refactor: updates footer's display to grid

calblueprint · May 18, 2024 · bf00a5a · bf00a5a
1 parent 681ebcd
commit bf00a5a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 81 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -16,90 +16,71 @@ type SocialLink = {
 };
 
 const socialLinks: SocialLink[] = [
-  {
-    href: CONFIG.facebook,
-    type: 'facebook',
-  },
+  { href: CONFIG.facebook, type: 'facebook' },
   { href: CONFIG.xTwitter, type: 'x' },
-  {
-    href: CONFIG.linkedin,
-    type: 'linkedin',
-  },
+  { href: CONFIG.linkedin, type: 'linkedin' },
   { href: CONFIG.instagram, type: 'instagram' },
 ];
 
 export default function Footer() {
   return (
-    <Styles.FooterContainer>
-      <Styles.FooterDiv>
-        <Styles.FooterSection>
-          <Image
-            alt="footer image"
-            src={FooterImage.src}
-            placeholder="blur"
-            blurDataURL={FooterImage.src}
-            quality={100}
-            width={168}
-            height={66}
-          />
-          <hr style={{ width: '160px', color: 'white' }} />
-          <P $color="white">
-            2727 Camino del Rio South, Suite 320 San Diego, CA 92108
-          </P>
-          <P $color="white">©2024 by ABA Immigration Justice Project</P>
-          <Flex
-            $direction="row"
-            $gap="10px"
-            $py="40px"
-            $px="0px"
-            $align="center"
-          >
-            <Styles.FooterLink
-              $color="white"
-              href="https://calblueprint.org/"
-              style={{ fontSize: '0.938rem' }}
-            >
-              Made By Cal Blueprint
-            </Styles.FooterLink>
-            <Icon type="blueprint" />
-          </Flex>
-        </Styles.FooterSection>
-      </Styles.FooterDiv>
-      <Styles.FooterDiv>
+    <Styles.Footer>
+      <Styles.FooterSection>
+        <Image
+          alt="footer image"
+          src={FooterImage.src}
+          placeholder="blur"
+          blurDataURL={FooterImage.src}
+          quality={100}
+          width={168}
+          height={66}
+        />
+        <Styles.HorizontalLine $width="10rem" />
+        <P $color="white">
+          2727 Camino del Rio South, Suite 320
+          <br />
+          San Diego, CA 92108
+        </P>
+        <P $color="white">©2024 by ABA Immigration Justice Project</P>
+        <Flex $direction="row" $gap="10px" $py="40px" $align="center">
+          <Styles.FooterLink $color="white" href={CONFIG.blueprint}>
+            Made By Cal Blueprint
+          </Styles.FooterLink>
+          <Icon type="blueprint" />
+        </Flex>
+      </Styles.FooterSection>
+
+      <Flex $gap="50px">
         <Styles.FooterSection>
           <Styles.Header>Resources</Styles.Header>
-          <hr style={{ width: '40px', color: 'white' }} />
-          <Styles.FooterLink $color="white" href="https://www.americanbar.org/">
+          <Styles.HorizontalLine />
+          <Styles.FooterLink $color="white" href={CONFIG.ABA}>
             ABA Website
           </Styles.FooterLink>
-          <Styles.FooterLink
-            $color="white"
-            href="https://www.americanbar.org/groups/public_interest/immigration/"
-          >
-            ABA Commission on Immigration
+          <Styles.FooterLink $color="white" href={CONFIG.ABAComissions}>
+            ABA Commission
+            <br />
+            on Immigration
           </Styles.FooterLink>
-          <Styles.FooterLink
-            $color="white"
-            href="https://www.americanbar.org/groups/public_interest/immigration/projects_initiatives/immigration-justice-project/"
-          >
+          <Styles.FooterLink $color="white" href={CONFIG.IJP}>
             ABA IJP Website
           </Styles.FooterLink>
         </Styles.FooterSection>
         <Styles.FooterSection>
           <Styles.Header>Contact Us</Styles.Header>
-          <hr style={{ width: '2.5rem', color: 'white' }} />
+          <Styles.HorizontalLine />
           <P $color="white">Email: [email protected]</P>
           <P $color="white">Phone: 619-255-8829</P>
           <P $color="white">Office Phone: 619-255-8810</P>
-          <Styles.IconDiv>
+          <Flex $gap="10px">
             {socialLinks.map(({ href, type }) => (
               <Link key={type} href={href}>
                 <Icon type={type} />
               </Link>
             ))}
-          </Styles.IconDiv>
+          </Flex>
         </Styles.FooterSection>
-      </Styles.FooterDiv>
-    </Styles.FooterContainer>
+      </Flex>
+    </Styles.Footer>
   );
 }
diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
@@ -3,44 +3,36 @@ import COLORS from '@/styles/colors';
 import { sans } from '@/styles/fonts';
 import { LinkColored } from '@/styles/text';
 
-export const FooterContainer = styled.div`
+export const Footer = styled.div`
   width: 100%;
   background-color: ${COLORS.blueMid};
   min-height: 290px;
-  padding-left: 100px;
-  padding-right: 100px;
-  padding-top: 40px;
-  display: flex;
-  justify-content: space-between;
+  grid-template-columns: 2fr 1fr;
+  padding: 40px 100px 0px 100px;
+  display: grid;
 `;
 
 export const FooterSection = styled.div`
   display: flex;
-  width: 16rem;
   flex-direction: column;
   gap: 10px;
 `;
 
-export const FooterDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 50px;
-`;
-
-export const IconDiv = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-`;
-
 export const FooterLink = styled(LinkColored)`
   text-decoration: none;
   font-size: 0.9375rem;
   font-weight: 400px;
 `;
+
 export const Header = styled.p`
   ${sans.style}
   font-size: 1.25rem;
   color: white;
-  font-weight: 600;
+  font-weight: 500;
+`;
+
+export const HorizontalLine = styled.hr<{ $width?: string }>`
+  color: white;
+  margin-bottom: 10px;
+  width: ${({ $width }) => $width || '2.5rem'};
 `;
diff --git a/src/lib/configs.ts b/src/lib/configs.ts
@@ -1,15 +1,21 @@
 const CONFIG = {
+  pageSize: 20,
   homepage: '/',
   onboardingHome: '/onboarding/roles',
-  pageSize: 20,
   settings: '/settings',
   cases: '/cases',
   lca: '/limited-case-assignments',
   languageSupport: '/language-support',
+  // social media links
   facebook: 'https://www.facebook.com/ImmigrationJusticeProjectOfSanDiego/',
   xTwitter: 'https://twitter.com/ijpsandiego?lang=en',
   linkedin: 'https://www.linkedin.com/company/immigration-justice-project/',
   instagram: 'https://www.instagram.com/ijp.sandiego/',
+  // website links
+  ABA: 'https://www.americanbar.org/',
+  ABAComissions: 'https://www.americanbar.org/groups/public_interest/immigration/',
+  IJP: 'https://www.americanbar.org/groups/public_interest/immigration/projects_initiatives/immigration-justice-project/',
+  blueprint: 'https://calblueprint.org/',  
 };
 
 export default CONFIG;