feature: Update style and docker container

docker-compose.dev.yml

@@ -7,11 +7,13 @@ services:
     depends_on:
       - backend
     ports:
-    - '8000:8000'
+    - 5173:5173
     volumes:
     - './services/frontend:/app'
     - /app/node_modules
-    command: /bin/sh -c "yarn dev"
+    command: /bin/sh -c "yarn dev --host"
+    environment:
+      - VITE_HOST_URL=http://localhost:5000
   backend:
     build:
       context: ./services/backend

services/frontend/src/App.vue

@@ -13,7 +13,7 @@ const setHome = (value: boolean) => {
 </script>
 
 <template>
-    <div class="min-h-screen w-full bg-slate-100 flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
+    <div class="min-h-screen w-full bg-[#393f4d] flex flex-col justify-between items-center p-4 md:p-16 gap-5 text-neutral-700">
         <Header @setHome="setHome" />
         <Home v-if="isHome" />
         <About v-else />

services/frontend/src/components/Footer.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div>
-        <ul class="flex justify-center bg-white rounded-lg px-2 py-1 text-sm shadow">
+        <ul class="flex justify-center bg-[#2e3440] text-white rounded-lg px-2 py-1 text-sm shadow">
             <a href="https://www.xyvs.io/" target="_blank" >
                 <li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
                     Made by xyvs

services/frontend/src/components/Header.vue

@@ -8,19 +8,19 @@ const setHome = (value: boolean) => {
 
 <template>
     <div>
-        <ul class="flex justify-center bg-white rounded-lg px-2 py-1 text-sm shadow">
+        <ul class="flex flex-wrap justify-center bg-[#2e3440] text-white rounded-lg p-2 text-sm shadow">
             <a href="#/" @click="setHome(true)">
-                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
+                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
                     Home
                 </li>
             </a>
             <a href="#/" @click="setHome(false)">
-                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
+                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
                     About
                 </li>
             </a>
             <a href="https://github.com/xyvs/guessit_app" target="_blank">
-                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-neutral-50">
+                <li class="font-semibold rounded-lg px-3 py-2 hover:bg-[#393f4d]">
                     Code
                 </li>
             </a>

services/frontend/src/components/Home.vue

@@ -8,6 +8,7 @@ const filename = ref('')
 const code = ref(`{
   result: 'Fill the input with the filename and click Guess'
 }`)
+const loadingForm = ref(false)
 
 const url = `${import.meta.env.VITE_HOST_URL}`
 
@@ -20,7 +21,7 @@ const getFilenameData = () => {
     const data = { 
         filename: filename.value
     }
-
+    loadingForm.value = true
     axios.get(url, { params: data })
         .then(response => {
             code.value = formatDictionaryAsString(response.data)
@@ -28,13 +29,16 @@ const getFilenameData = () => {
         .catch((error) => {
             console.log(error)
         })
+       .finally(() => {
+            loadingForm.value = false
+        })
 }
 
 </script>
 
 <template>
-    <div class="flex flex-col gap-12 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6">
+    <div class="flex flex-col gap-10 flew-grow text-center md:w-[600px] bg-[#2e3440] rounded-lg text-neutral-100 shadow pt-6 md:pt-12 pb-6 md:pb-6 px-6">
-        <div class="space-y-12 px-4 md:px-12">
+        <div class="space-y-12 md:px-12">
             <div class="flex flex-col items-center justify-center gap-4">
                 <h2 class="text-4xl font-semibold">
                     guessit
@@ -43,7 +47,7 @@ const getFilenameData = () => {
                     A web app that guesses info about a video file based on its filename.
                 </p>
             </div>
-            <div class="space-y-4 text-neutral-700">
+            <div class="hidden md:block space-y-4 text-neutral-700">
                 <div class="text-sm flex w-full">
                     <div class="flex-grow">
                         <input v-model="filename" type="text" class="bg-neutral-100 p-3 rounded-l appearance-none focus:outline-none w-full shadow" placeholder="Enter the filename">
@@ -61,11 +65,16 @@ const getFilenameData = () => {
                 </div>
             </div>
         </div>
-        <div class="hidden md:block text-left text-sm px-4">
+        <div v-if="loadingForm" class="flex flex-wrap justify-center items-center">
+            <div class="text-center text-blue-100 bg-blue-400 rounded shadow font-semibold px-5 py-2 text-sm">
+                Loading...
+            </div>
+        </div>
+        <div v-else class="hidden md:block text-left text-sm px-4">
             <highlightjs :code="code" ref="codeRef" />
         </div>
-        <div class="md:hidden text-center px-4">
+        <div class="md:hidden text-center text-slate-900 bg-yellow-200 rounded shadow font-semibold px-5 py-2 text-sm">
-            Sorry, this section is not available on mobile devices.
+            To view the app, please open this page on a larger screen.
         </div>
     </div>
 </template>