From 0c5cb83101fa4ab681ea6564155daa8ee29d471e Mon Sep 17 00:00:00 2001
From: goemen <gnthomiwa@gmail.com>
Date: Wed, 8 May 2024 11:45:44 -0700
Subject: [PATCH] using a centrailzed container styles

---
 frontend/src/App.vue                          |  6 ++
 frontend/src/components/ContactError.vue      |  2 +-
 frontend/src/components/DraftReportPage.vue   | 10 +---
 frontend/src/components/ErrorPage.vue         |  2 +-
 frontend/src/components/Header.vue            | 56 ++++++++-----------
 frontend/src/components/Home.vue              |  6 +-
 frontend/src/components/InputForm.vue         | 12 +---
 frontend/src/components/Login.vue             | 26 ++-------
 frontend/src/components/LoginError.vue        |  2 +-
 frontend/src/components/Logout.vue            |  2 +-
 frontend/src/components/NotFound.vue          |  2 +-
 .../src/components/PublishedReportPage.vue    | 11 +---
 frontend/src/components/TokenExpired.vue      |  2 +-
 frontend/src/scss/_common.scss                | 15 -----
 14 files changed, 43 insertions(+), 111 deletions(-)
 delete mode 100644 frontend/src/scss/_common.scss

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 38c92a984..628f229e5 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -56,6 +56,12 @@ a {
   color: #255a90;
 }
 
+.v-container {
+  width: 85%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 a:hover {
   cursor: pointer;
 }
diff --git a/frontend/src/components/ContactError.vue b/frontend/src/components/ContactError.vue
index 470ba9fea..61a34140f 100644
--- a/frontend/src/components/ContactError.vue
+++ b/frontend/src/components/ContactError.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col sm="4" md="4" lg="4" xl="4">
         <v-alert class="alert-error mb-3">
diff --git a/frontend/src/components/DraftReportPage.vue b/frontend/src/components/DraftReportPage.vue
index d6861a4f6..0850f2107 100644
--- a/frontend/src/components/DraftReportPage.vue
+++ b/frontend/src/components/DraftReportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
@@ -183,14 +183,6 @@ async function downloadPdf(reportId: string | undefined) {
 </script>
 
 <style scoped lang="scss">
-@import "../scss/_common.scss";
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
 
 .back-button-banner {
   padding-left: 0;
diff --git a/frontend/src/components/ErrorPage.vue b/frontend/src/components/ErrorPage.vue
index 38bd8297e..f455c51a5 100644
--- a/frontend/src/components/ErrorPage.vue
+++ b/frontend/src/components/ErrorPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense outlined class="alert-error mb-3" v-if="errorMessage">
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 741e63a15..3cf734263 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -1,32 +1,27 @@
 <template>
-  <v-app-bar
-    absolute
-    style="z-index: 1002"
-    class="pt-header"
-  >
-    <!-- Navbar content -->
-    <a tabindex="-1" href="/" class="d-flex align-center">
-      <img
-        tabindex="-1"
-        src="../assets/images/bc-gov-logo-light.png"
-        width="155"
-        class="logo"
-        alt="B.C. Government Logo"
-      />
-      <v-toolbar-title
-        ><h3
-          data-testid="header-title"
-          class="mainTitle"
-          style="color: rgb(32, 31, 30)"
+  <v-app-bar absolute style="z-index: 1002">
+    <v-container class="d-flex">
+      <a tabindex="-1" href="/" class="d-flex align-center">
+        <img
+          tabindex="-1"
+          src="../assets/images/bc-gov-logo-light.png"
+          width="155"
+          class="logo"
+          alt="B.C. Government Logo"
+        />
+        <v-toolbar-title
+          ><h3
+            data-testid="header-title"
+            class="mainTitle"
+            style="color: rgb(32, 31, 30)"
+          >
+            {{ appTitle }}
+          </h3></v-toolbar-title
         >
-          {{ appTitle }}
-        </h3></v-toolbar-title
-      >
-    </a>
+      </a>
 
-    <v-spacer />
+      <v-spacer />
 
-    <template #append>
       <v-menu
         v-if="isAuthenticated"
         v-model="menu"
@@ -75,7 +70,8 @@
           </v-card-actions>
         </v-card>
       </v-menu>
-    </template>
+    </v-container>
+    <!-- Navbar content -->
   </v-app-bar>
 </template>
 
@@ -109,14 +105,6 @@ export default {
 </script>
 
 <style lang="scss">
-  @import "../scss/_common.scss";
-
-.pt-header {
-  .v-toolbar__content {
-    @include layout-margins;
-  }
-}
-
 .gov-header .v-icon {
   padding-left: 10px;
 }
diff --git a/frontend/src/components/Home.vue b/frontend/src/components/Home.vue
index c964a166d..145df3639 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/components/Home.vue
@@ -1,6 +1,6 @@
 <!--suppress ALL -->
 <template>
-  <v-container fluid class="d-flex justify-center fill-height w-85">
+  <v-container class="d-flex justify-center fill-height">
     <dashboard></dashboard>
   </v-container>
 </template>
@@ -43,9 +43,5 @@ export default {
 .margin-initial {
   margin: initial;
 }
-
-.w-85 {
-  width: 85%;
-}
 </style>
 
diff --git a/frontend/src/components/InputForm.vue b/frontend/src/components/InputForm.vue
index cf409a878..d6d8afc25 100644
--- a/frontend/src/components/InputForm.vue
+++ b/frontend/src/components/InputForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" @submit.prevent="submit" class="w-100 h-100">
       <v-row no-gutters>
         <v-col>
@@ -1162,16 +1162,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
-@import "../scss/_common.scss";
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
-
 .back-button-banner {
   padding-left: 0;
 }
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 06e94aaff..c8ed74354 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -1,11 +1,7 @@
 <template>
-  <v-container class="undized">
     <v-row no-gutters>
       <v-col cols="12">
-        <v-container :class="{
-          'justify-center': true, 
-          narrow: true,
-          }">
+        <v-container>
           <v-row no-gutters>
             <v-col>
               <!-- begin -->  
@@ -39,7 +35,7 @@
     </v-row>
     <v-row no-gutters class="grey-div">
       <v-col>
-        <v-container class="justify-center narrow">
+        <v-container class="justify-center">
           <v-row no-gutters>
             <v-col>
               <h3 class="centered-text mt-14 mb-8">
@@ -144,7 +140,7 @@
 
       </v-col>
     </v-row>  
-  </v-container>
+  <!-- </v-container> -->
 </template>
 
 <script>
@@ -199,11 +195,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import "../scss/_common.scss";
-
-  .narrow {
-    @include layout-margins;
-  }
+  
 
   .image-monitor {
     border-style: none;
@@ -303,13 +295,5 @@ export default {
     height: 100%;
   }
 
-  .undized {
-    margin: 0;
-    padding: 0;
-    min-width: 100%;
-    max-width: 100%;
-    height: 100%;
-    overflow: hidden; 
-    word-wrap: break-word;
-  }
+  
 </style>
diff --git a/frontend/src/components/LoginError.vue b/frontend/src/components/LoginError.vue
index 1ff580e25..3e64ae42d 100644
--- a/frontend/src/components/LoginError.vue
+++ b/frontend/src/components/LoginError.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="alert-error mb-3">
diff --git a/frontend/src/components/Logout.vue b/frontend/src/components/Logout.vue
index 95fbf1447..9a500df09 100644
--- a/frontend/src/components/Logout.vue
+++ b/frontend/src/components/Logout.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="mb-3 alert-info">
diff --git a/frontend/src/components/NotFound.vue b/frontend/src/components/NotFound.vue
index 140d5730b..958067771 100644
--- a/frontend/src/components/NotFound.vue
+++ b/frontend/src/components/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert
diff --git a/frontend/src/components/PublishedReportPage.vue b/frontend/src/components/PublishedReportPage.vue
index cb8c8af51..eec30cecb 100644
--- a/frontend/src/components/PublishedReportPage.vue
+++ b/frontend/src/components/PublishedReportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container class="d-flex justify-center h-100 narrow">
+  <v-container class="d-flex justify-center h-100">
     <v-form ref="inputForm" class="w-100 h-100">
       <v-banner
         sticky
@@ -110,15 +110,6 @@ const editReport = async () => {
 </script>
 
 <style lang="scss">
-@import '../scss/_common.scss';
-
-.narrow {
-  width: 85% !important;
-  padding-left: 0;
-  padding-right: 0;
-  @include layout-margins;
-} 
-
 .sticky-top {
   padding-left: 0;
   z-index: 190;
diff --git a/frontend/src/components/TokenExpired.vue b/frontend/src/components/TokenExpired.vue
index 4dff3d570..1a8532806 100644
--- a/frontend/src/components/TokenExpired.vue
+++ b/frontend/src/components/TokenExpired.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container fluid>
+  <v-container>
     <v-row align="center" justify="center">
       <v-col xs="4" sm="4" md="4" lg="4" xl="4">
         <v-alert dense variant="outlined" class="alert-error mb-3">
diff --git a/frontend/src/scss/_common.scss b/frontend/src/scss/_common.scss
deleted file mode 100644
index 9f8a271b0..000000000
--- a/frontend/src/scss/_common.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin layout-margins {
-  width: 85%;
-  margin-left: auto;
-  margin-right: auto;
-
-  @media (min-width: 960px) {
-    max-width: 900px;
-  }
-  @media (min-width: 1280px) {
-    max-width: 1200px;
-  }
-  @media (min-width: 1920px) {
-    max-width: 1800px;
-  }
-}