From a66cb3c7e14eab93b8080f0d7a7d0bc273887ea5 Mon Sep 17 00:00:00 2001
From: jer3k <99355997+jer3k@users.noreply.github.com>
Date: Wed, 8 May 2024 10:26:44 -0700
Subject: [PATCH] standard footer design

---
 frontend/src/components/Footer.vue | 221 +++++++++++------------------
 1 file changed, 86 insertions(+), 135 deletions(-)

diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 73971934f..bc0bca453 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -1,82 +1,54 @@
 <template>
   <v-footer color="#fff" dark absolute class="margin-top" app>
     <div class="first-nation-acknowledgement">
-      <div>
-        The B.C. Public Service acknowledges the territories of First Nations
-        around B.C. and is grateful to carry out our work on these lands. We
-        acknowledge the rights, interests, priorities, and concerns of all
-        Indigenous Peoples - First Nations, Métis, and Inuit - respecting and
-        acknowledging their distinct cultures, histories, rights, laws, and
-        governments.
-      </div>
-    </div>
-    <v-row class="bottom-padding">
-      <v-col class="justify-left" style="text-align: left">
+      <v-container>
         <v-row>
-          <v-col class="justify-left" style="text-align: left">
+          <v-col>
+            The B.C. Public Service acknowledges the territories of First
+            Nations around B.C. and is grateful to carry out our work on these
+            lands. We acknowledge the rights, interests, priorities, and
+            concerns of all Indigenous Peoples - First Nations, Métis, and Inuit
+            - respecting and acknowledging their distinct cultures, histories,
+            rights, laws, and governments.
+          </v-col>
+        </v-row>
+      </v-container>
+    </div>
+    <v-container>
+      <v-row>
+        <v-col class="d-sm-flex justify-space-between">
+          <div class="contact">
             <img
               tabindex="-1"
               src="../assets/images/bc-gov-logo-light.png"
               width="155"
-              class="logo"
               alt="B.C. Government Logo"
             />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col
-            class="justify-center"
-            style="text-align: left"
-            data-testid="footer-message"
-          >
-            For questions or assistance with creating a report please contact
-            the Pay Transparency Unit -
-            <a class="contact-email" href="mailto:paytransparency@gov.bc.ca">
-              PayTransparency@gov.bc.ca
-            </a>
-          </v-col>
-        </v-row>
-      </v-col>
-      <v-col
-        id="more-info"
-        class="justify-right"
-        aria-label="More information links"
-        sm="6"
-        cols="12"
-      >
-        <p class="more-info-title">MORE INFO</p>
-        <v-row aria-labelledby="more-info">
-          <v-col class="links" style="text-align: left">
-            <v-list>
-              <v-list-item
-                v-for="link in settings.links.left"
-                :key="link.id"
-                class="footer-btn pl-1 pr-1"
-                :href="sanitizeUrl(link.to)"
-                :data-testid="link.id"
-                :aria-label="link.label"
-              >
-                <v-list-item-title>{{ link.label }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-          <v-col class="links" style="text-align: left">
-            <v-list>
-              <v-list-item
-                v-for="link in settings.links.right"
+            <p class="mt-4" data-testid="footer-message">
+              For questions or assistance with creating a report please contact
+              the Pay Transparency Unit -
+              <a class="contact-email" href="mailto:paytransparency@gov.bc.ca">
+                PayTransparency@gov.bc.ca
+              </a>
+            </p>
+          </div>
+          <div class="more-info">
+            <p class="font-weight-bold mb-4 mt-6 mt-sm-4">MORE INFO</p>
+            <ul>
+              <li
+                v-for="link in settings.links"
                 :key="link.id"
                 class="footer-btn pl-1 pr-1"
-                :href="sanitizeUrl(link.to)"
-                :aria-label="link.label"
-                :data-testid="link.id"
               >
-                <v-list-item-title>{{ link.label }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
+                <a :href="sanitizeUrl(link.to)" :data-testid="link.id">
+                  {{ link.label }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-footer>
 </template>
 
@@ -86,50 +58,43 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 type Link = { label: string; to: string; id: string };
 
 type FooterSettings = {
-  links: {
-    left: Link[];
-    right: Link[];
-  };
+  links: Link[];
 };
 
 const settings: FooterSettings = {
-  links: {
-    left: [
-      { id: 'footer-link-home', label: 'Home', to: 'https://www.gov.bc.ca/' },
-      {
-        id: 'footer-link-about',
-        label: 'About gov.bc.ca',
-        to: 'https://www2.gov.bc.ca/gov/content/about-gov-bc-ca',
-      },
-      {
-        id: 'footer-link-disclaimer',
-        label: 'Disclaimer',
-        to: 'https://www.gov.bc.ca/disclaimer',
-      },
-      {
-        id: 'footer-link-privacy',
-        label: 'Privacy',
-        to: 'https://www.gov.bc.ca/privacy',
-      },
-    ],
-    right: [
-      {
-        id: 'footer-link-accessibility',
-        label: 'Accessibility',
-        to: 'https://www.gov.bc.ca/webaccessibility',
-      },
-      {
-        id: 'footer-link-copyright',
-        label: 'Copyright',
-        to: 'https://www.gov.bc.ca/copyright',
-      },
-      {
-        id: 'footer-link-contact-us',
-        label: 'Contact Us',
-        to: 'https://www2.gov.bc.ca/gov/content/home/contact-us',
-      },
-    ],
-  },
+  links: [
+    { id: 'footer-link-home', label: 'Home', to: 'https://www.gov.bc.ca/' },
+    {
+      id: 'footer-link-about',
+      label: 'About gov.bc.ca',
+      to: 'https://www2.gov.bc.ca/gov/content/about-gov-bc-ca',
+    },
+    {
+      id: 'footer-link-disclaimer',
+      label: 'Disclaimer',
+      to: 'https://www.gov.bc.ca/disclaimer',
+    },
+    {
+      id: 'footer-link-privacy',
+      label: 'Privacy',
+      to: 'https://www.gov.bc.ca/privacy',
+    },
+    {
+      id: 'footer-link-accessibility',
+      label: 'Accessibility',
+      to: 'https://www.gov.bc.ca/webaccessibility',
+    },
+    {
+      id: 'footer-link-copyright',
+      label: 'Copyright',
+      to: 'https://www.gov.bc.ca/copyright',
+    },
+    {
+      id: 'footer-link-contact-us',
+      label: 'Contact Us',
+      to: 'https://www2.gov.bc.ca/gov/content/home/contact-us',
+    },
+  ],
 };
 </script>
 
@@ -143,10 +108,6 @@ a {
   text-decoration: underline !important;
 }
 
-p {
-  line-height: 21px;
-}
-
 .v-footer {
   flex-direction: column;
   min-width: 100%;
@@ -160,43 +121,33 @@ p {
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: 32px;
+    padding: 16px 0;
     color: #fff;
     font-size: 14px;
     line-height: 21px;
     transition: none !important;
     width: 100%;
-    margin-bottom: 50px;
+    margin-bottom: 16px;
     border-top: 4px solid $border-color !important;
     border-bottom: 4px solid $border-color !important;
     overflow: hidden;
-
-    div {
-      max-width: 1120px;
-      margin: auto;
-    }
   }
 }
 
-.bottom-padding {
-  padding-left: 32px;
-  padding-right: 32px;
-}
-
-.v-list-item-title {
-  color: $text-color;
-  font-size: $font-size !important;
-
-  &:hover {
-    text-decoration: underline;
+.more-info {
+  flex: 0 0 auto;
+  ul {
+    list-style-type: none;
+    columns: 2;
+    margin: 0px 0px 16px;
+    gap: 48px;
+    li {
+      margin-bottom: 16px;
+    }
   }
 }
 
-.more-info-title {
-  font-weight: 700;
-}
-.links {
-  display: flex;
-  flex-direction: column;
+.contact {
+  flex: 0 0 50%;
 }
 </style>