add some styling to lab home

frontend/src/pages/lab/Home.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="directories_containter">
-        <div class="directory_container" v-for="(directory, index) in directories" :key="index"
-            @click="view_link(directory)">
+    <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>
@@ -13,8 +17,7 @@ export default {
   name: 'LabHome',
   components: {},
   computed: {},
-    mounted() {
-    },
+  mounted() {},
   methods: {
     view_link(directory) {
       this.mnx_navToLink(directory.path)
@@ -24,11 +27,11 @@ export default {
     return {
       directories: [
         {
-                    "path":"machine-translation",
-                    "title_text": "Machine Translation",
-                    "summary_text": "Translate lanuages leverage AI power",
-                    "icon_picture":"",
-                    "cover_picture":""
+          path: 'machine-translation',
+          title_text: 'Machine Translation',
+          summary_text: 'Translate lanuages leverage AI power',
+          icon_picture: '',
+          cover_picture: 'src/assets/images/lab-translation.png'
         }
       ]
     }
@@ -50,4 +53,3 @@ export default {
   height: 20vh;
 }
 </style>
-  

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

@@ -1,7 +1,7 @@
 <template>
   <div class="input_containter">
-        <input type="text" v-model="input_text" @keyup.enter="translate($event)">
-        <p>{{ translated_text }}</p>
+    <input class="input_text" type="text" v-model="input_text" @keyup.enter="translate($event)" />
+    <p class="translated_text">{{ translated_text }}</p>
   </div>
 </template>
 <script>
@@ -10,8 +10,7 @@ export default {
   name: 'TranslationHome',
   components: {},
   computed: {},
-    mounted() {
-    },
+  mounted() {},
   methods: {
     translate($event) {
       LabApi.translate_text(this.input_text)
@@ -29,12 +28,18 @@ export default {
       translated_text: null
     }
   }
-    }
+}
 </script>
 
 <style scoped lang="scss">
 .input_containter {
   @extend .container;
+  @extend .m-3;
+}
+.input_text {
+  @extend .w-100;
+}
+.translated_text {
+  @extend .w-100;
 }
 </style>
-  

frontend/src/plugins/router/router.js

@@ -383,8 +383,7 @@ const router = createRouter({
       path: '/lab-home',
       meta: { requiredRoles: [userRoleEnum.PERSONAL] },
       components: { default: LabHome, footer: FooterUser, header: HeaderUser }
-    }
-    ,
+    },
     {
       name: 'machine-translation',
       path: '/machine-translation',

frontend/src/utils/backend/lab.js

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