refactor: reverts footer to use flex

calblueprint · May 18, 2024 · e552f44 · e552f44
1 parent 5690e3d
commit e552f44
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 58 deletions.
diff --git a/public/images/ijp_logo_blue.webp → public/images/ijp-logo-blue.webp b/public/images/ijp_logo_blue.webp → public/images/ijp-logo-blue.webp
diff --git a/public/images/footer-image.webp → public/images/ijp-logo-white.webp b/public/images/footer-image.webp → public/images/ijp-logo-white.webp
diff --git a/src/app/onboarding-complete/page.tsx b/src/app/onboarding-complete/page.tsx
@@ -7,7 +7,7 @@ import CONFIG from '@/lib/configs';
 import COLORS from '@/styles/colors';
 import { CenteringDiv, Flex, SmallCard } from '@/styles/containers';
 import { H2Centered, P } from '@/styles/text';
-import IJPLogo from '~/public/images/ijp_logo_blue.webp';
+import IJPLogo from '~/public/images/ijp-logo-blue.webp';
 
 export default function Page() {
   return (

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -6,7 +6,7 @@ import CONFIG from '@/lib/configs';
 import { IconType } from '@/lib/icons';
 import { Flex } from '@/styles/containers';
 import { P } from '@/styles/text';
-import FooterImage from '../../../public/images/footer-image.webp';
+import IJPLogoWhite from '~/public/images/ijp-logo-white.webp';
 import Icon from '../Icon';
 import * as Styles from './styles';
 
@@ -25,61 +25,61 @@ const socialLinks: SocialLink[] = [
 export default function Footer() {
   return (
     <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>
-          <Styles.HorizontalLine />
-          <Styles.FooterLink $color="white" href={CONFIG.ABA}>
-            ABA Website
-          </Styles.FooterLink>
-          <Styles.FooterLink $color="white" href={CONFIG.ABAComissions}>
-            ABA Commission
-            <br />
-            on Immigration
-          </Styles.FooterLink>
-          <Styles.FooterLink $color="white" href={CONFIG.IJP}>
-            ABA IJP Website
-          </Styles.FooterLink>
-        </Styles.FooterSection>
+      <Flex $justify="between">
         <Styles.FooterSection>
-          <Styles.Header>Contact Us</Styles.Header>
-          <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>
-          <Flex $gap="10px">
-            {socialLinks.map(({ href, type }) => (
-              <Link key={type} href={href}>
-                <Icon type={type} />
-              </Link>
-            ))}
-          </Flex>
+          <Image
+            alt="footer image"
+            src={IJPLogoWhite}
+            placeholder="blur"
+            blurDataURL={IJPLogoWhite.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>
         </Styles.FooterSection>
+        <Styles.FooterInfo>
+          <Styles.FooterSection>
+            <Styles.Header>Resources</Styles.Header>
+            <Styles.HorizontalLine />
+            <Styles.FooterLink $color="white" href={CONFIG.ABA}>
+              ABA Website
+            </Styles.FooterLink>
+            <Styles.FooterLink $color="white" href={CONFIG.ABAComissions}>
+              ABA Commission
+              <br />
+              on Immigration
+            </Styles.FooterLink>
+            <Styles.FooterLink $color="white" href={CONFIG.IJP}>
+              ABA IJP Website
+            </Styles.FooterLink>
+          </Styles.FooterSection>
+          <Styles.FooterSection>
+            <Styles.Header>Contact Us</Styles.Header>
+            <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>
+            <Flex $gap="10px">
+              {socialLinks.map(({ href, type }) => (
+                <Link key={type} href={href}>
+                  <Icon type={type} />
+                </Link>
+              ))}
+            </Flex>
+          </Styles.FooterSection>
+        </Styles.FooterInfo>
+      </Flex>
+      <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.Footer>
   );

diff --git a/src/components/Footer/styles.tsx b/src/components/Footer/styles.tsx
@@ -4,12 +4,12 @@ import { sans } from '@/styles/fonts';
 import { LinkColored } from '@/styles/text';
 
 export const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
   background-color: ${COLORS.blueMid};
   min-height: 290px;
-  grid-template-columns: 2fr 1fr;
   padding: 40px 100px 0px 100px;
-  display: grid;
 `;
 
 export const FooterSection = styled.div`
@@ -36,3 +36,8 @@ export const HorizontalLine = styled.hr<{ $width?: string }>`
   margin-bottom: 10px;
   width: ${({ $width }) => $width || '2.5rem'};
 `;
+
+export const FooterInfo = styled.div`
+  display: flex;
+  gap: 50px;
+`;
diff --git a/src/components/OnboardingManager.tsx b/src/components/OnboardingManager.tsx
@@ -7,7 +7,7 @@ import CONFIG from '@/lib/configs';
 import { useAuth } from '@/utils/AuthProvider';
 import { useGuardedOnboarding, useOnboardingNavigation } from '@/utils/hooks';
 import { useProfile } from '@/utils/ProfileProvider';
-import IJPLogoBlue from '~/public/images/ijp_logo_blue.webp';
+import IJPLogoBlue from '~/public/images/ijp-logo-blue.webp';
 import { UnstyledButton } from './Buttons';
 import ProgressBar from './ProgressBar';