From 89de6f27d44fe651d621d49157616adcc9f78566 Mon Sep 17 00:00:00 2001
From: Ahmad Rashid Akhtar <ahmadrashidakhtar@gmail.com>
Date: Mon, 12 Feb 2024 20:36:36 -0800
Subject: [PATCH 1/2] working toward footer

---
 public/assets/OpenBC-logo.svg     | 16 ++++++++
 src/components/footer/footer.scss | 36 +++++++----------
 src/components/footer/footer.tsx  | 67 ++++++++++++++++++++++---------
 3 files changed, 80 insertions(+), 39 deletions(-)
 create mode 100644 public/assets/OpenBC-logo.svg

diff --git a/public/assets/OpenBC-logo.svg b/public/assets/OpenBC-logo.svg
new file mode 100644
index 0000000..a470ade
--- /dev/null
+++ b/public/assets/OpenBC-logo.svg
@@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_629_2080)">
+<path d="M22 0H2C0.89543 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.89543 23.1046 0 22 0Z" fill="#114F8C"/>
+<path d="M15.7441 11.2501V6.04907H16.8221L18.6491 8.94707V6.04907H20.0071V11.2501H18.9291L17.1021 8.35207V11.2501H15.7441Z" fill="#FDCF51"/>
+<path d="M12.8915 11.2921C12.7795 11.2921 12.6442 11.2804 12.4855 11.2571C12.3315 11.2338 12.1799 11.1824 12.0305 11.1031C11.8859 11.0238 11.7645 10.9024 11.6665 10.7391C11.5685 10.5711 11.5195 10.3424 11.5195 10.0531V7.33707C11.5195 7.08507 11.5592 6.87507 11.6385 6.70707C11.7179 6.53907 11.8205 6.4084 11.9465 6.31507C12.0725 6.21707 12.2125 6.1494 12.3665 6.11207C12.5205 6.07007 12.6699 6.04907 12.8145 6.04907C13.2065 6.04907 13.5425 6.05607 13.8225 6.07007C14.1072 6.0794 14.3522 6.09107 14.5575 6.10507C14.7675 6.11907 14.9519 6.1354 15.1105 6.15407V7.30207H13.2345C13.1179 7.30207 13.0292 7.32774 12.9685 7.37907C12.9079 7.4304 12.8775 7.5074 12.8775 7.61007V8.04407L14.7605 8.11407V9.19207L12.8775 9.26207V9.65407C12.8775 9.73807 12.8892 9.80807 12.9125 9.86407C12.9405 9.9154 12.9779 9.95507 13.0245 9.98307C13.0712 10.0064 13.1225 10.0181 13.1785 10.0181H15.1105V11.1661C14.9099 11.1941 14.6812 11.2174 14.4245 11.2361C14.1679 11.2548 13.9065 11.2688 13.6405 11.2781C13.3745 11.2874 13.1249 11.2921 12.8915 11.2921Z" fill="#FDCF51"/>
+<path d="M7.08984 11.2501V6.04907H9.37184C9.54918 6.04907 9.73118 6.07007 9.91784 6.11207C10.1045 6.1494 10.2748 6.23107 10.4288 6.35707C10.5875 6.4784 10.7135 6.66507 10.8068 6.91707C10.9048 7.1644 10.9538 7.49574 10.9538 7.91107C10.9538 8.33107 10.9072 8.6694 10.8138 8.92607C10.7205 9.17807 10.5992 9.3694 10.4498 9.50007C10.3005 9.62607 10.1372 9.7124 9.95984 9.75907C9.78718 9.80107 9.61684 9.82207 9.44884 9.82207C9.36018 9.82207 9.26684 9.8174 9.16884 9.80807C9.07551 9.79874 8.98218 9.78707 8.88884 9.77307C8.80018 9.7544 8.71618 9.73807 8.63684 9.72407C8.56218 9.7054 8.49918 9.6914 8.44784 9.68207V11.2501H7.08984ZM8.44784 8.60407H9.23184C9.32518 8.60407 9.39751 8.5784 9.44884 8.52707C9.50484 8.47574 9.54218 8.40107 9.56084 8.30307C9.58418 8.2004 9.59584 8.0744 9.59584 7.92507C9.59584 7.7804 9.58184 7.65907 9.55384 7.56107C9.53051 7.46307 9.49318 7.39074 9.44184 7.34407C9.39051 7.29274 9.32051 7.26707 9.23184 7.26707H8.44784V8.60407Z" fill="#FDCF51"/>
+<path d="M4.226 11.292C3.85733 11.292 3.533 11.257 3.253 11.187C2.97767 11.1123 2.74667 10.9817 2.56 10.795C2.37333 10.6083 2.23333 10.3423 2.14 9.997C2.04667 9.647 2 9.19667 2 8.646C2 8.09533 2.04667 7.64733 2.14 7.302C2.23333 6.952 2.37333 6.68367 2.56 6.497C2.74667 6.31033 2.97767 6.182 3.253 6.112C3.533 6.03733 3.85733 6 4.226 6C4.59467 6 4.91667 6.03733 5.192 6.112C5.472 6.182 5.70533 6.31033 5.892 6.497C6.07867 6.68367 6.21867 6.952 6.312 7.302C6.40533 7.64733 6.452 8.09533 6.452 8.646C6.452 9.19667 6.40533 9.647 6.312 9.997C6.21867 10.3423 6.07867 10.6083 5.892 10.795C5.70533 10.9817 5.472 11.1123 5.192 11.187C4.91667 11.257 4.59467 11.292 4.226 11.292ZM4.226 10.074C4.40333 10.074 4.548 10.053 4.66 10.011C4.772 9.969 4.85833 9.89667 4.919 9.794C4.98433 9.69133 5.02867 9.54667 5.052 9.36C5.08 9.17333 5.094 8.93533 5.094 8.646C5.094 8.34267 5.08 8.09767 5.052 7.911C5.02867 7.72433 4.98433 7.582 4.919 7.484C4.85833 7.38133 4.772 7.31133 4.66 7.274C4.548 7.23667 4.40333 7.218 4.226 7.218C4.05333 7.218 3.90867 7.23667 3.792 7.274C3.68 7.31133 3.59133 7.38133 3.526 7.484C3.46533 7.582 3.421 7.72433 3.393 7.911C3.36967 8.09767 3.358 8.34267 3.358 8.646C3.358 8.93533 3.36967 9.17333 3.393 9.36C3.421 9.54667 3.46533 9.69133 3.526 9.794C3.59133 9.89667 3.68 9.969 3.792 10.011C3.90867 10.053 4.05333 10.074 4.226 10.074Z" fill="#FDCF51"/>
+<path d="M20.2762 18.292C19.9822 18.292 19.7186 18.257 19.4852 18.187C19.2519 18.117 19.0512 17.9887 18.8832 17.802C18.7152 17.6153 18.5869 17.347 18.4982 16.997C18.4096 16.647 18.3652 16.192 18.3652 15.632C18.3652 15.0907 18.4119 14.6473 18.5052 14.302C18.5986 13.9567 18.7292 13.6907 18.8972 13.504C19.0699 13.3127 19.2729 13.182 19.5062 13.112C19.7396 13.0373 19.9962 13 20.2762 13C20.5656 13 20.8199 13.0163 21.0392 13.049C21.2632 13.077 21.4522 13.112 21.6062 13.154C21.7649 13.196 21.8909 13.238 21.9842 13.28V14.337C21.8956 14.3183 21.7812 14.2997 21.6412 14.281C21.5012 14.2623 21.3402 14.2483 21.1582 14.239C20.9809 14.225 20.7872 14.218 20.5772 14.218C20.4186 14.218 20.2832 14.2343 20.1712 14.267C20.0639 14.2997 19.9776 14.365 19.9122 14.463C19.8469 14.561 19.7979 14.7057 19.7652 14.897C19.7372 15.0837 19.7232 15.3333 19.7232 15.646C19.7232 15.926 19.7349 16.1593 19.7582 16.346C19.7816 16.5327 19.8236 16.6797 19.8842 16.787C19.9449 16.8897 20.0312 16.9643 20.1432 17.011C20.2599 17.053 20.4092 17.074 20.5912 17.074C20.9459 17.074 21.2329 17.0693 21.4522 17.06C21.6762 17.046 21.8536 17.0297 21.9842 17.011V18.068C21.8676 18.1147 21.7299 18.1543 21.5712 18.187C21.4172 18.2197 21.2352 18.2453 21.0252 18.264C20.8152 18.2827 20.5656 18.292 20.2762 18.292Z" fill="#E9F4FF"/>
+<path d="M14 18.2501V13.0491H16.156C16.716 13.0491 17.1173 13.1728 17.36 13.4201C17.6073 13.6674 17.731 14.0058 17.731 14.4351C17.731 14.6358 17.703 14.8131 17.647 14.9671C17.5957 15.1164 17.5163 15.2424 17.409 15.3451C17.3063 15.4431 17.1757 15.5108 17.017 15.5481C17.1383 15.5808 17.2527 15.6298 17.36 15.6951C17.4673 15.7604 17.5607 15.8468 17.64 15.9541C17.7193 16.0614 17.78 16.1874 17.822 16.3321C17.8687 16.4768 17.892 16.6401 17.892 16.8221C17.892 17.1628 17.8313 17.4381 17.71 17.6481C17.5887 17.8581 17.4067 18.0121 17.164 18.1101C16.9213 18.2034 16.6203 18.2501 16.261 18.2501H14ZM15.358 17.0321H16.219C16.303 17.0321 16.373 17.0134 16.429 16.9761C16.485 16.9388 16.527 16.8874 16.555 16.8221C16.5877 16.7521 16.604 16.6704 16.604 16.5771C16.604 16.4838 16.5877 16.4044 16.555 16.3391C16.527 16.2691 16.485 16.2154 16.429 16.1781C16.373 16.1408 16.303 16.1221 16.219 16.1221H15.358V17.0321ZM15.358 15.0931H16.142C16.2447 15.0931 16.3193 15.0534 16.366 14.9741C16.4173 14.8948 16.443 14.7968 16.443 14.6801C16.443 14.5214 16.4103 14.4141 16.345 14.3581C16.2843 14.2974 16.2167 14.2671 16.142 14.2671H15.358V15.0931Z" fill="#E9F4FF"/>
+</g>
+<defs>
+<clipPath id="clip0_629_2080">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
index 20bdda8..d920d4a 100644
--- a/src/components/footer/footer.scss
+++ b/src/components/footer/footer.scss
@@ -19,6 +19,7 @@
   &__wrapper {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     gap: 1.5rem;
     align-items: center;
 
@@ -36,10 +37,10 @@
 
   &__menu {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: flex-start;
-    align-self: stretch;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 24px;
+
 
     @media only screen and (max-width:640px) {
       gap: 16px;
@@ -47,10 +48,7 @@
   }
 
   &__logo {
-    color: #424242;
-    text-decoration: none;
-    font-size: 18px;
-    font-weight: 700;
+    width: 48px;
     cursor: pointer;
   }
 
@@ -62,19 +60,16 @@
   }
 
   &__button {
-    font-size: 16px;
+    font-size: 18px;
     text-decoration: none;
     color: #424242;
-    transition: all .2s;
-
-    &:hover {
-      text-decoration: underline;
-    }
+    font-family: inherit;
 
     &--highlight {
       border-radius: 20px;
       padding: 0.25rem 1.25rem;
-      background-color: #E1E1E1;
+      background-color: #B9DDFF;
+      color: #1566B5;
     }
   }
 
@@ -102,15 +97,15 @@
   }
 
   &__label {
-    font-weight: 500;
+    font-size: 18px;
     color: #424242;
+    font-family: inherit;
   }
 
   &__input {
-    display: flex;
+    font-family: inherit;
     padding: 0.5rem 0.75rem;
     align-items: center;
-    gap: 0.75rem;
     flex: 1 0 0;
     align-self: stretch;
     border-radius: 6px;
@@ -135,6 +130,7 @@
     border: 1.8px solid #424242;
     text-transform: none;
     color: #575757;
+    font-size: 18px;
 
     @media only screen and (max-width:640px) {
       width: 100%;
@@ -153,9 +149,7 @@
 
   &__link {
     color: #737373;
-    font-size: 14px;
-    font-weight: 500;
-    text-decoration: none;
+    font-size: 16px;
     transition: all .2s;
 
     &:hover {
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index d34c334..c03408d 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,6 +1,13 @@
 'use client';
 
-import { Box, Button, Container, IconButton, Link } from '@mui/material';
+import {
+  Box,
+  Button,
+  Container,
+  IconButton,
+  Link,
+  Typography,
+} from '@mui/material';
 import Image from 'next/image';
 import './footer.scss';
 
@@ -10,23 +17,43 @@ function Footer() {
       <Container className="footer">
         <Box className="footer__wrapper">
           <Box className="footer__menu">
-            <Link href="/" className="footer__logo">
-              OpenBC
-            </Link>
-            <Box className="footer__buttons">
-              <Link href="/about" className="footer__button">
+            <Image
+              src="/assets/OpenBC-logo.svg"
+              width={48}
+              height={48}
+              alt="OpenBC logo"
+              className="footer__logo"
+            />
+            <Typography className="footer__button">
+              <Link
+                underline="none"
+                color="inherit"
+                href="/about"
+                className="footer__button"
+              >
                 About
               </Link>
+            </Typography>
+            <Typography className="footer__button">
               <Link
+                underline="none"
+                color="inherit"
                 href="/join-us"
                 className="footer__button footer__button--highlight"
               >
                 Join Us!
               </Link>
-              <Link href="#" className="footer__button">
+            </Typography>
+
+            <Typography className="footer__button">
+              <Link
+                underline="none"
+                color="inherit"
+                href="mailto:openbc.ca@gmail.com"
+              >
                 Contact Us
               </Link>
-            </Box>
+            </Typography>
           </Box>
           <form className="footer__newsletter">
             <label htmlFor="" className="footer__label">
@@ -52,8 +79,8 @@ function Footer() {
               <Image
                 src="/assets/github_Icon.svg"
                 alt="GitHub"
-                width={20}
-                height={20}
+                width={24}
+                height={24}
               />
             </IconButton>
             <IconButton
@@ -64,18 +91,22 @@ function Footer() {
               <Image
                 src="/assets/linkedin_Icon.svg"
                 alt="LinkedIn"
-                width={20}
-                height={20}
+                width={24}
+                height={24}
               />
             </IconButton>
           </Box>
           <Box className="footer__links">
-            <Link href="#" className="footer__link">
-              Terms of Service
-            </Link>
-            <Link href="#" className="footer__link">
-              Privacy Policy
-            </Link>
+            <Typography className="footer__link">
+              <Link href="#" color="inherit" underline="none">
+                Terms of Service
+              </Link>
+            </Typography>
+            <Typography className="footer__link">
+              <Link href="#" color="inherit" underline="none">
+                Privacy Policy
+              </Link>
+            </Typography>
           </Box>
         </Box>
       </Container>

From b5cac96386d30202f1e2314f00fc01c830107b4a Mon Sep 17 00:00:00 2001
From: Ahmad Rashid Akhtar <ahmadrashidakhtar@gmail.com>
Date: Sat, 17 Feb 2024 22:31:16 -0800
Subject: [PATCH 2/2] footer styling bug

---
 src/components/footer/footer.scss | 38 +++++++++++++++
 src/components/footer/footer.tsx  | 80 +++++++++++++++++++++++--------
 2 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss
index d920d4a..e2a1c2e 100644
--- a/src/components/footer/footer.scss
+++ b/src/components/footer/footer.scss
@@ -1,3 +1,5 @@
+@use '../../app/globals' as *;
+
 .footer-container {
   background-color: #FAFAFA;
   margin-top: 2rem;
@@ -151,6 +153,9 @@
     color: #737373;
     font-size: 16px;
     transition: all .2s;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
 
     &:hover {
       color: #424242;
@@ -158,3 +163,36 @@
 
   }
 }
+
+.modal {
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  background-color: #FFF;
+  padding: 24px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 2px -1px rgba(16, 24, 40, 0.10), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
+
+
+  &__close {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+  }
+
+
+  &__title {
+    text-align: center;
+    font-family: inherit;
+  }
+
+  &__text {
+    text-align: center;
+  }
+}
diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx
index c03408d..cccdc9c 100644
--- a/src/components/footer/footer.tsx
+++ b/src/components/footer/footer.tsx
@@ -1,29 +1,37 @@
 'use client';
 
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Box,
   Button,
   Container,
   IconButton,
   Link,
+  Modal,
   Typography,
 } from '@mui/material';
 import Image from 'next/image';
+import { useState } from 'react';
 import './footer.scss';
 
 function Footer() {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
   return (
     <Box component="footer" className="footer-container">
-      <Container className="footer">
+      <Container className="footer" sx={{ display: 'flex' }}>
         <Box className="footer__wrapper">
           <Box className="footer__menu">
-            <Image
-              src="/assets/OpenBC-logo.svg"
-              width={48}
-              height={48}
-              alt="OpenBC logo"
-              className="footer__logo"
-            />
+            <Link href="/">
+              <Image
+                src="/assets/OpenBC-logo.svg"
+                width={48}
+                height={48}
+                alt="OpenBC logo"
+                className="footer__logo"
+              />
+            </Link>
             <Typography className="footer__button">
               <Link
                 underline="none"
@@ -65,7 +73,13 @@ function Footer() {
                 placeholder="Enter your Email."
               />
 
-              <Button className="footer__subscribe-button">Subscribe</Button>
+              <Button
+                onClick={handleOpen}
+                className="footer__subscribe-button"
+                variant="outlined"
+              >
+                Subscribe
+              </Button>
             </Box>
           </form>
         </Box>
@@ -97,16 +111,44 @@ function Footer() {
             </IconButton>
           </Box>
           <Box className="footer__links">
-            <Typography className="footer__link">
-              <Link href="#" color="inherit" underline="none">
-                Terms of Service
-              </Link>
-            </Typography>
-            <Typography className="footer__link">
-              <Link href="#" color="inherit" underline="none">
-                Privacy Policy
-              </Link>
-            </Typography>
+            <button onClick={handleOpen} className="footer__link">
+              Terms of Service
+            </button>
+            <button onClick={handleOpen} className="footer__link">
+              Privacy Policy
+            </button>
+
+            <Modal
+              open={open}
+              onClose={handleClose}
+              aria-labelledby="modal-modal-title"
+              aria-describedby="modal-modal-description"
+            >
+              <Box className="modal">
+                <IconButton
+                  onClick={handleClose}
+                  className="modal__close"
+                  color="error"
+                >
+                  <CloseIcon />
+                </IconButton>
+                <Typography
+                  className="modal__title"
+                  variant="h6"
+                  component="h2"
+                >
+                  OOPS
+                </Typography>
+                <Typography
+                  className="modal__text"
+                  variant="body2"
+                  component="h2"
+                >
+                  We&apos;re actively building this feature to make your
+                  experience even better.
+                </Typography>
+              </Box>
+            </Modal>
           </Box>
         </Box>
       </Container>