Improve footer links (#559)

* make changes * add min height
UoaWDCC · Jun 29, 2024 · 34aa15e · 34aa15e
1 parent 78b170f
commit 34aa15e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/client/src/components/generic/Footer/Footer.tsx b/client/src/components/generic/Footer/Footer.tsx
@@ -4,54 +4,64 @@ import Facebook from "assets/icons/facebook.svg?react"
 
 import Instagram from "assets/icons/instagram.svg?react"
 
-const HorizontalDivider = () => <span className="bg-gray-3 h-[12px] w-[1px]" />
+const HorizontalDivider = () => (
+  <>
+    <span className="bg-gray-3 hidden h-[12px] w-[1px] lg:block" />
+  </>
+)
 
 export const Footer = () => {
   return (
-    <div className="text-gray-3 flex h-[56px] w-full justify-center gap-3 border border-black bg-black sm:items-center lg:text-nowrap lg:pl-[32px]">
+    <div
+      className="text-gray-3 flex h-fit min-h-[56px] w-full flex-col justify-center gap-3 border
+     border-black bg-black py-2 lg:flex-row lg:items-center lg:text-nowrap lg:pl-[32px]"
+    >
       <h5 className="flex items-center justify-center text-center uppercase">
         COPYRIGHT {new Date().getFullYear()} University of Auckland Snowsports
         Club
       </h5>
 
-      <div className="hidden items-center justify-center gap-3 lg:flex">
+      <div
+        className="flex w-full flex-col items-center justify-center
+       gap-3 lg:flex-row lg:items-center lg:justify-start"
+      >
         <HorizontalDivider />
 
-        <Link to="/about">
-          <h5 className="uppercase">About</h5>
+        <Link to="/login">
+          <h5 className="uppercase">log in</h5>
         </Link>
 
         <HorizontalDivider />
 
-        <Link to="/faq">
-          <h5 className="uppercase">faq</h5>
+        <Link to="/register">
+          <h5 className="uppercase">register</h5>
         </Link>
 
         <HorizontalDivider />
 
-        <Link to="/contact">
-          <h5 className="uppercase">contact us</h5>
+        <Link to="/bookings">
+          <h5 className="uppercase">book the lodge</h5>
         </Link>
 
         <HorizontalDivider />
 
-        <Link to="/policy">
-          <h5 className="uppercase">policy</h5>
+        <Link to="/about">
+          <h5 className="uppercase">about</h5>
         </Link>
       </div>
 
-      <div className="ml-auto hidden items-center gap-6 pr-[32px] lg:flex">
-        <span>
+      <div className="flex items-center justify-center gap-6 px-4 lg:ml-auto">
+        <div className="h-[24px] w-[24px]">
           <a href="https://www.instagram.com/uasc_nz/" target="blank">
             <Instagram className="fill-white" />
           </a>
-        </span>
+        </div>
 
-        <span className="h-[24px] w-[24px]">
+        <div className="h-[24px] w-[24px]">
           <a href="https://www.facebook.com/UoAsnowsports/" target="blank">
             <Facebook className="fill-white" />
           </a>
-        </span>
+        </div>
       </div>
     </div>
   )

diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx
@@ -3,6 +3,7 @@ import AboutSection from "components/generic/AboutSection/AboutSection"
 import ImageLeft from "assets/images/lodge.jpg"
 import ImageRight from "assets/images/people.jpg"
 import ImageBottom from "assets/images/view.jpg"
+import { Footer } from "components/generic/Footer/Footer"
 
 const About = () => {
   return (
@@ -37,6 +38,7 @@ const About = () => {
           imageSrc={ImageBottom}
         ></AboutSection>
       </div>
+      <Footer />
     </div>
   )
 }