style: Footer updated links and font sizes

calblueprint · May 9, 2024 · 54fe635 · 54fe635
1 parent 1bdcbd2
commit 54fe635
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 35 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -2,17 +2,11 @@
 
 import Image from 'next/image';
 import Link from 'next/link';
-import { P, H3 } from '@/styles/text';
+import { P } from '@/styles/text';
 import { IconType } from '@/lib/icons';
 import { Flex } from '@/styles/containers';
 import FooterImage from '../../../public/images/footer-image.webp';
-import {
-  FooterContainer,
-  FooterSection,
-  FooterDiv,
-  IconDiv,
-  FooterLink,
-} from './styles';
+import * as Styles from './styles';
 import Icon from '../Icon';
 
 type SocialLink = {
@@ -35,9 +29,9 @@ const socialLinks: SocialLink[] = [
 
 export default function Footer() {
   return (
-    <FooterContainer>
-      <FooterDiv>
-        <FooterSection>
+    <Styles.FooterContainer>
+      <Styles.FooterDiv>
+        <Styles.FooterSection>
           <Image
             alt="footer image"
             src={FooterImage.src}
@@ -48,55 +42,63 @@ export default function Footer() {
             height={66}
           />
           <hr style={{ width: '160px' }} />
-          <P $color="white">2727 Camino del Rio S</P>
-          <P $color="white">©2024 by Immigration Justice Project Pro Bono</P>
+          <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"
           >
-            <FooterLink
+            <Styles.FooterLink
               $color="white"
               href="https://calblueprint.org/"
-              style={{ fontSize: '0.9rem' }}
+              style={{ fontSize: '0.938rem' }}
             >
               Made By Cal BluePrint
-            </FooterLink>
+            </Styles.FooterLink>
             <Icon type="blueprint" />
           </Flex>
-        </FooterSection>
-      </FooterDiv>
-      <FooterDiv>
-        <FooterSection>
-          <H3 $color="white">Resources</H3>
+        </Styles.FooterSection>
+      </Styles.FooterDiv>
+      <Styles.FooterDiv>
+        <Styles.FooterSection>
+          <Styles.Header>Resources</Styles.Header>
           <hr style={{ width: '40px' }} />
-          <FooterLink $color="white" href="https://www.americanbar.org/">
+          <Styles.FooterLink $color="white" href="https://www.americanbar.org/">
             ABA Website
-          </FooterLink>
-          <FooterLink
+          </Styles.FooterLink>
+          <Styles.FooterLink
             $color="white"
             href="https://www.americanbar.org/groups/public_interest/immigration/"
           >
-            IJP Commission
-          </FooterLink>
+            ABA Commission on Immigration
+          </Styles.FooterLink>
+          <Styles.FooterLink
+            $color="white"
+            href="https://www.americanbar.org/groups/public_interest/immigration/projects_initiatives/immigration-justice-project/"
+          >
+            ABA IJP Website
+          </Styles.FooterLink>
           <P $color="white">Hotline: 619-641-7510</P>
-        </FooterSection>
-        <FooterSection>
-          <H3 $color="white">Contact Us</H3>
+        </Styles.FooterSection>
+        <Styles.FooterSection>
+          <Styles.Header>Contact Us</Styles.Header>
           <hr style={{ width: '2.5rem' }} />
           <P $color="white">Email: [email protected]</P>
           <P $color="white">Phone: 619-255-8829</P>
-          <IconDiv>
+          <Styles.IconDiv>
             {socialLinks.map(({ href, type }) => (
               <Link key={type} href={href}>
                 <Icon type={type} />
               </Link>
             ))}
-          </IconDiv>
-        </FooterSection>
-      </FooterDiv>
-    </FooterContainer>
+          </Styles.IconDiv>
+        </Styles.FooterSection>
+      </Styles.FooterDiv>
+    </Styles.FooterContainer>
   );
 }
diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 import { LinkColored } from '@/styles/text';
+import { openSans } from '@/styles/fonts';
 
 export const FooterContainer = styled.div`
   width: 100%;
@@ -15,6 +16,7 @@ export const FooterContainer = styled.div`
 
 export const FooterSection = styled.div`
   display: flex;
+  width: 16rem;
   flex-direction: column;
   gap: 10px;
 `;
@@ -33,6 +35,12 @@ export const IconDiv = styled.div`
 
 export const FooterLink = styled(LinkColored)`
   text-decoration: none;
-  font-size: 0.9rem;
+  font-size: 0.938rem;
   font-weight: 400px;
 `;
+export const Header = styled.p`
+  ${openSans.style}
+  font-size: 1.25rem;
+  color: white;
+  font-weight: 600;
+`;