add some styling to lab home

frontend/src/pages/lab/Home.vue

@@ -1,53 +1,55 @@
 <template>
-    <div class="directories_containter">
-        <div class="directory_container" v-for="(directory, index) in directories" :key="index"
-            @click="view_link(directory)">
-            <p>{{ directory.title_text }}</p>
-            <img class="directory_cover_image" :src="directory.cover_picture" />
-            <p>{{ directory.summary_text }}</p>
-        </div>
+  <div class="directories_containter">
+    <div
+      class="directory_container"
+      v-for="(directory, index) in directories"
+      :key="index"
+      @click="view_link(directory)"
+    >
+      <p>{{ directory.title_text }}</p>
+      <img class="directory_cover_image" :src="directory.cover_picture" />
+      <p>{{ directory.summary_text }}</p>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    name: 'LabHome',
-    components: {},
-    computed: {},
-    mounted() {
-    },
-    methods: {
-        view_link(directory) {
-            this.mnx_navToLink(directory.path)
-        }
-    },
-    data() {
-        return {
-            directories: [
-                {
-                    "path":"machine-translation",
-                    "title_text": "Machine Translation",
-                    "summary_text": "Translate lanuages leverage AI power",
-                    "icon_picture":"",
-                    "cover_picture":""
-                }
-            ]
-        }
+  name: 'LabHome',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    view_link(directory) {
+      this.mnx_navToLink(directory.path)
     }
+  },
+  data() {
+    return {
+      directories: [
+        {
+          path: 'machine-translation',
+          title_text: 'Machine Translation',
+          summary_text: 'Translate lanuages leverage AI power',
+          icon_picture: '',
+          cover_picture: 'src/assets/images/lab-translation.png'
+        }
+      ]
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .directories_containter {
-    @extend .container;
+  @extend .container;
 }
 
 .directory_container {
-    @extend .container;
-    cursor: pointer;
+  @extend .container;
+  cursor: pointer;
 }
 
 .directory_cover_image {
-    height: 20vh;
+  height: 20vh;
 }
 </style>
-  

frontend/src/pages/lab/translation/Home.vue

@@ -1,40 +1,45 @@
 <template>
-    <div class="input_containter">
-        <input type="text" v-model="input_text" @keyup.enter="translate($event)">
-        <p>{{ translated_text }}</p>
-    </div>
+  <div class="input_containter">
+    <input class="input_text" type="text" v-model="input_text" @keyup.enter="translate($event)" />
+    <p class="translated_text">{{ translated_text }}</p>
+  </div>
 </template>
 <script>
 import { LabApi } from '../../../utils/index'
 export default {
-    name: 'TranslationHome',
-    components: {},
-    computed: {},
-    mounted() {
-    },
-    methods: {
-        translate($event) {
-            LabApi.translate_text(this.input_text)
-                .then((response) => {
-                    this.translated_text = response.data
-                })
-                .catch((error) => {
-                    this.mnx_backendErrorHandler(error)
-                })
-            }
-        },
-        data() {
-            return {
-                input_text: null,
-                translated_text: null
-            }
-        }
+  name: 'TranslationHome',
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {
+    translate($event) {
+      LabApi.translate_text(this.input_text)
+        .then((response) => {
+          this.translated_text = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
     }
+  },
+  data() {
+    return {
+      input_text: null,
+      translated_text: null
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">
 .input_containter {
-    @extend .container;
+  @extend .container;
+  @extend .m-3;
+}
+.input_text {
+  @extend .w-100;
+}
+.translated_text {
+  @extend .w-100;
 }
 </style>
-  

frontend/src/plugins/router/router.js

@@ -383,15 +383,14 @@ const router = createRouter({
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: LabHome, footer: FooterUser, header: HeaderUser }
-    }
-    ,
+    },
     {
       name: 'machine-translation',
       path: '/machine-translation',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: TranslationHome, footer: FooterUser, header: HeaderUser }
     }
-    ],
+  ],
 
   linkActiveClass: 'active'
   /*    scrollBehavior(_, _2, savedPosition) {

frontend/src/utils/backend/lab.js

@@ -1,16 +1,18 @@
 import { backendAxios } from './axios'
 import { userUtils } from '../store/index'
 class LabApi {
-    static translate_text(input_text) {
-        let jwt = userUtils.getJwtToken()
-        const request = backendAxios.post('/api/lab/translate_text',
-            {
-                input_text: input_text
-            },
-            {
-                headers: { Authorization: `Bearer ${jwt}` }
-            })
-        return request
-    }
+  static translate_text(input_text) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/lab/translate_text',
+      {
+        input_text: input_text
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
 }
 export { LabApi }