mode page ui added

Author: yohan-oc

vue-frontend/warehouse-frontend/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-router": "^4.5.0"

vue-frontend/warehouse-frontend/src/App.vue

@@ -4,12 +4,27 @@
 
 <script>
 export default {
-  name: "App"
+  name: "App",
+  mounted() {
+    this.setBackgroundColor();
+  },
+  watch: {
+    $route() {
+      this.setBackgroundColor();
+    }
+  },
+  methods: {
+    setBackgroundColor() {
+      if (this.$route.path === '/') {
+        document.body.style.backgroundColor = '#0b4c62';
+      } else {
+        document.body.style.backgroundColor = '#f0f2f5';
+      }
+    }
+  }
 };
 </script>
 
 <style>
-body {
-  background-color: #0b4c62 !important; /* Dark blue background */
-}
+
 </style>

vue-frontend/warehouse-frontend/src/main.js

@@ -4,5 +4,6 @@ import router from "./router";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.bundle.min.js";
+import 'bootstrap-icons/font/bootstrap-icons.css';
 
 createApp(App).use(router).mount('#app')

vue-frontend/warehouse-frontend/src/views/LoginPage.vue

@@ -7,17 +7,19 @@ export default {
   },
   methods: {
     login() {
-      if (this.username) {
-        this.$router.push("/mode"); // Navigate to Home after login
-      } else {
-        alert("Please enter username");
-      }
+      // if (this.username) {
+      //   this.$router.push("/mode"); // Navigate to Home after login
+      // } else {
+      //   alert("Please enter username");
+      // }
+      this.$router.push("/mode");
     }
   }
 };
 </script>
 
 <template>
+  <div class="d-flex justify-content-center align-items-center vh-100">
   <div class="card shadow">
     <img src="../assets/logo.png" alt="Turing Trust Logo" class="logo">
     <p class="text-l">Welcome to the Turing Trust warehouse management application.</p>
@@ -30,14 +32,11 @@ export default {
 
     <button class="btn btn-primary w-100" @click="login">Continue</button>
   </div>
+</div>
 </template>
 
-<style>
-body {
-  background-color: #0b4c62; /* Dark blue background */
-  display: flex;
-  justify-content: center;
-  align-items: center;
+<style scoped>
+.vh-100 {
   height: 100vh;
 }
 .card {
@@ -49,12 +48,12 @@ body {
   border-bottom-color: #04A27D;
 }
 .btn-primary {
-  background-color: #04A27D !important;
-  border-color: #04A27D !important;
+  background-color: #04A27D;
+  border-color: #04A27D;
   border: none;
 }
 .btn-primary:hover {
-  background-color: #0a6b38;
+  background-color: #04A27D;
 }
 .logo {
   display: block;

vue-frontend/warehouse-frontend/src/views/ModePage.vue

@@ -1,11 +1,13 @@
 <script>
 export default {
   name: 'ModePage',
+  mounted() {
+    import('bootstrap');
+  }
 };
 </script>
 
 <template>
-  <div>
     <nav class="navbar navbar-dark px-4">
       <a class="navbar-brand" href="#">
         <img src="../assets/logo_new.png" alt="Turing Trust Logo" height="30">
@@ -105,13 +107,9 @@ export default {
         </div>
       </div>
     </div>
-  </div>
 </template>
 
 <style scoped>
-body {
-  background-color: #f0f2f5;
-}
 .navbar {
   background-color: #0b4c62;
 }