design: add background to all pages

codescalersinternships · Sep 10, 2024 · a53f6d8 · a53f6d8
1 parent 7a6efbd
commit a53f6d8
Show file tree

Hide file tree

Showing 12 changed files with 305 additions and 335 deletions.
diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/testtrackerlogo.png" />
+    <link rel="icon" href="/testtrackerfavicon.png" />
     <link rel="stylesheet" href="src/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Test Tracker</title>

diff --git a/client/public/NavBarLogo.png b/client/public/NavBarLogo.png
diff --git a/client/public/navbarlogo.png b/client/public/navbarlogo.png
diff --git a/client/src/assets/authPagesBackGround.png → client/public/testtrackerbackground.png b/client/src/assets/authPagesBackGround.png → client/public/testtrackerbackground.png
diff --git a/client/public/testtrackerlogo.png b/client/public/testtrackerlogo.png
diff --git a/client/src/App.vue b/client/src/App.vue
@@ -1,8 +1,10 @@
 <template>
   <v-app>
     <v-main>
-      <NavigationBar v-if="displayNavBar(routeStore.routeName)" />
-      <RouterView />
+      <div class="background pa-0">
+        <NavigationBar v-if="displayNavBar(routeStore.routeName)" />
+        <RouterView />
+      </div>
     </v-main>
   </v-app>
 </template>
@@ -35,3 +37,16 @@
   }
 
 </script>
+
+<style lang="scss">
+  .background {
+    background-image: url('/testtrackerbackground.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    padding: 0px;
+    margin: 0px;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/assets/tflogo.png b/client/src/assets/tflogo.png
diff --git a/client/src/layouts/NavigationBar.vue b/client/src/layouts/NavigationBar.vue
@@ -12,7 +12,7 @@
           <v-img
             alt="Test Tracker Logo"
             contain
-            src="/navbarlogo.png"
+            src="/testtrackerlogo.png"
             style="width: 188.5px; height: 50px;"
           />
         </RouterLink>

diff --git a/client/src/pages/authorization/LoginView.vue b/client/src/pages/authorization/LoginView.vue
@@ -1,115 +1,113 @@
 <template>
-  <div class="background pa-0">
-    <v-container>
-      <v-card
-        class="ma-auto pa-12 pb-8"
-        elevation="8"
-        max-width="448"
-        rounded="lg"
-      >
-        <v-form ref="form">
-          <v-row class="d-flex justify-center" no-gutters>
-            <v-col class="d-flex justify-center" style="max-width: 100px; width: 100px;">
-              <v-img
-                contain
-                src="@/assets/logo.png"
-                style="width: 100%; height: auto;"
-              />
-            </v-col>
-          </v-row>
-
-          <v-row class="d-flex justify-center" no-gutters>
-            <v-col class="d-flex justify-center" style="max-width: 80px; width: 80px;">
-              <p class="mt-2 text-h5 text-grey-darken-2" variant="h5">Welcome</p>
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col class="d-flex justify-center">
-              <p class="text-center grey-darken-3">
-                Sign in with your <strong>Test Tracker</strong> account
-              </p>
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <v-text-field
-                v-model="userInfo.email"
-                density="compact"
-                placeholder="Email"
-                prepend-inner-icon="mdi-email-outline"
-                :rules="emailRules"
-                type="email"
-                variant="outlined"
-              />
-              <v-text-field
-                v-model="userInfo.password"
-                :append-inner-icon="passwordVisible ? 'mdi-eye-off' : 'mdi-eye'"
-                density="compact"
-                placeholder="Password"
-                prepend-inner-icon="mdi-lock-outline"
-                :rules="passwordRules"
-                :type="passwordVisible ? 'password' : 'text'"
-                variant="outlined"
-                @click:append-inner="passwordVisible = !passwordVisible"
-              />
-              <v-row>
-                <v-col class="d-flex justify-end">
-                  <!-- <router-link
+  <v-container>
+    <v-card
+      class="ma-auto pa-12 pb-8"
+      elevation="8"
+      max-width="448"
+      rounded="lg"
+    >
+      <v-form ref="form">
+        <v-row class="d-flex justify-center" no-gutters>
+          <v-col class="d-flex justify-center" style="max-width: 100px; width: 100px;">
+            <v-img
+              contain
+              src="/testtrackerfavicon.png"
+              style="width: 100%; height: auto;"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="d-flex justify-center" no-gutters>
+          <v-col class="d-flex justify-center" style="max-width: 80px; width: 80px;">
+            <p class="mt-2 text-h5 text-grey-darken-2" variant="h5">Welcome</p>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col class="d-flex justify-center">
+            <p class="text-center grey-darken-3">
+              Sign in with your <strong>Test Tracker</strong> account
+            </p>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-text-field
+              v-model="userInfo.email"
+              density="compact"
+              placeholder="Email"
+              prepend-inner-icon="mdi-email-outline"
+              :rules="emailRules"
+              type="email"
+              variant="outlined"
+            />
+            <v-text-field
+              v-model="userInfo.password"
+              :append-inner-icon="passwordVisible ? 'mdi-eye-off' : 'mdi-eye'"
+              density="compact"
+              placeholder="Password"
+              prepend-inner-icon="mdi-lock-outline"
+              :rules="passwordRules"
+              :type="passwordVisible ? 'password' : 'text'"
+              variant="outlined"
+              @click:append-inner="passwordVisible = !passwordVisible"
+            />
+            <v-row>
+              <v-col class="d-flex justify-end">
+                <!-- <router-link
                     class="text-caption text-decoration-none text-grey-darken-2"
                     to="/forgot-password"
                   >
                     Forgot Password?
                   </router-link> -->
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-
-          <v-btn
-            block
-            class="mb-8"
-            color="primary"
-            :disabled="!isFormValid"
-            size="large"
-            variant="outlined"
-            @click="SubmitLogIn"
-          >
-            Log In
-          </v-btn>
-
-          <!-- <v-divider class="my-4" /> -->
-
-          <v-row>
-            <v-col class="d-flex justify-center" cols="6">
-              <!-- <LoginGithub /> -->
-            </v-col>
-            <v-col class="d-flex justify-center" cols="6">
-              <!-- <TFLogin /> -->
-            </v-col>
-          </v-row>
-
-          <!-- <v-divider class="my-4" /> -->
-
-          <v-row>
-            <v-col class="d-flex justify-center">
-              <a class="text-caption text-decoration-none text-grey-darken-2">New to Test Tracker?</a>
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col class="d-flex justify-center">
-              <v-btn class="mb-8 w-100" color="primary" size="large" @click="CreateAccount">
-                Create Account
-              </v-btn>
-            </v-col>
-          </v-row>
-
-        </v-form>
-      </v-card>
-    </v-container>
-  </div>
+              </v-col>
+            </v-row>
+          </v-col>
+        </v-row>
+
+        <v-btn
+          block
+          class="mb-8"
+          color="primary"
+          :disabled="!isFormValid"
+          size="large"
+          variant="outlined"
+          @click="SubmitLogIn"
+        >
+          Log In
+        </v-btn>
+
+        <!-- <v-divider class="my-4" /> -->
+
+        <v-row>
+          <v-col class="d-flex justify-center" cols="6">
+            <!-- <LoginGithub /> -->
+          </v-col>
+          <v-col class="d-flex justify-center" cols="6">
+            <!-- <TFLogin /> -->
+          </v-col>
+        </v-row>
+
+        <!-- <v-divider class="my-4" /> -->
+
+        <v-row>
+          <v-col class="d-flex justify-center">
+            <a class="text-caption text-decoration-none text-grey-darken-2">New to Test Tracker?</a>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col class="d-flex justify-center">
+            <v-btn class="mb-8 w-100" color="primary" size="large" @click="CreateAccount">
+              Create Account
+            </v-btn>
+          </v-col>
+        </v-row>
+
+      </v-form>
+    </v-card>
+  </v-container>
 </template>
 
 <script lang="ts">
@@ -175,16 +173,3 @@
     },
   }
 </script>
-
-<style>
-.background {
-background-image: url('@/assets/authPagesBackGround.png');
-background-size: cover;
-background-position: center;
-background-repeat: no-repeat;
-padding: 0px;
-margin: 0px;
-width: 100%;
-height: 100%;
-}
-</style>