Finish footer

acmucsd · Apr 4, 2024 · 87add66 · 87add66
1 parent f57f93d
commit 87add66
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 45 deletions.
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -11,7 +11,7 @@ const Footer: React.FC = () => {
           <Typography variant="display/medium">Find us here!</Typography>
           <div className={styles.description}>
             <Typography variant="subheading">Interested in learning more?</Typography>
-            <Typography variant="subheading">
+            <Typography variant="subheading" className={styles.subdescription}>
               Reach out to get connected, or explore our socials to get a sense of who we are as a
               community!
             </Typography>
@@ -21,18 +21,24 @@ const Footer: React.FC = () => {
           <div className={styles.socialInfo}>
             <Image src="/mail-icon.svg" width={50} height={50} alt="Mail Icon" />
             {/* <MailIcon /> */}
-            <Typography variant="subheading">Send us an inquiry</Typography>
+            <Typography variant="subheading" className={styles.socialText}>
+              Send us an inquiry
+            </Typography>
           </div>
 
           <div className={styles.socialInfo}>
             <Image src="/instagram-logo.svg" width={50} height={50} alt="Instagram Logo" />
             {/* <InstagramLogo /> */}
-            <Typography variant="subheading">Follow us for updates</Typography>
+            <Typography variant="subheading" className={styles.socialText}>
+              Follow us for updates
+            </Typography>
           </div>
 
           <div className={styles.socialInfo}>
             <Image src="/discord-icon.svg" width={50} height={50} alt="Discord Icon" />
-            <Typography variant="subheading">Join the discussion</Typography>
+            <Typography variant="subheading" className={styles.socialText}>
+              Join the discussion
+            </Typography>
           </div>
         </div>
       </div>

diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss
@@ -1,9 +1,9 @@
-@use 'src/styles/colors.scss' as colors;
+@use 'src/styles/vars.scss' as vars;
 
 .footer {
   width: 100%;
-  background-color: colors.$green;
-  color: colors.$white;
+  background-color: vars.$green;
+  color: vars.$white;
 
   .footerContent {
     display: flex;
@@ -12,6 +12,14 @@
     padding: 7rem 0;
     margin: auto;
 
+    @media screen and (width <= vars.$breakpoint) {
+      flex-direction: column;
+      gap: 1.75rem;
+      padding: 3rem 0;
+      align-items: center;
+      text-align: center;
+    }
+
     .findUs {
       display: flex;
       flex-direction: column;
@@ -22,6 +30,12 @@
         display: flex;
         flex-direction: column;
         gap: 1rem;
+
+        @media screen and (width <= vars.$breakpoint) {
+          .subdescription {
+            display: none;
+          }
+        }
       }
     }
 
@@ -36,6 +50,17 @@
         flex-direction: row;
         gap: 1.25rem;
         align-items: center;
+
+        @media screen and (width <= vars.$breakpoint) {
+          .socialText {
+            display: none;
+          }
+        }
+      }
+
+      @media screen and (width <= vars.$breakpoint) {
+        flex-direction: row;
+        justify-content: center;
       }
     }
   }

diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import styles from './style.module.scss';
 
 // shared
 type Variant = 'display/medium' | 'display/small' | 'subheading' | 'body' | 'label';
@@ -9,42 +10,23 @@ type ComponentType = 'p' | 'span' | 'div';
 interface TypographyProps extends HTMLAttributes<HTMLElement> {
   variant: Variant;
   component?: ComponentType;
-  style?: CSSProperties;
   // This is used if/when the component is 'a'.
   href?: string;
+  className?: string;
 }
 
-const variantToCSS = (variant: Variant): CSSProperties => {
+const variantToCSS = (variant: Variant): string => {
   switch (variant) {
     case 'display/medium':
-      return {
-        fontSize: '3rem',
-        fontWeight: 500,
-      };
+      return styles.displayMedium;
     case 'display/small':
-      return {
-        fontSize: '2rem',
-        fontWeight: 400,
-      };
+      return styles.displaySmall;
     case 'subheading':
-      return {
-        fontSize: '1.5rem',
-        fontWeight: 400,
-        lineHeight: '2rem',
-        letterSpacing: '0.015rem',
-      };
+      return styles.subheading;
     case 'body':
-      return {
-        fontSize: '1.375rem',
-        fontWeight: 400,
-        lineHeight: '1.75rem',
-      };
+      return styles.body;
     case 'label':
-      return {
-        fontSize: '1rem',
-        fontWeight: 400,
-        lineHeight: '1.5rem',
-      };
+      return styles.label;
   }
 };
 
@@ -59,16 +41,13 @@ const variantToCSS = (variant: Variant): CSSProperties => {
  * @returns styled typography component
  */
 const Typography = (props: PropsWithChildren<TypographyProps>) => {
-  const { variant, component, style, children, ...restProps } = props;
+  const { variant, component, children, className, ...restProps } = props;
 
   if (restProps.href) {
     return (
       <Link
         href={restProps.href}
-        style={{
-          ...variantToCSS(variant),
-          ...style, // other styles can be customized via style prop
-        }}
+        className={`${variantToCSS(variant)} ${className || ''}`}
         {...restProps}
       >
         {children}
@@ -79,13 +58,7 @@ const Typography = (props: PropsWithChildren<TypographyProps>) => {
   const Component = component || 'div';
 
   return (
-    <Component
-      style={{
-        ...variantToCSS(variant),
-        ...style, // other styles can be customized via style prop
-      }}
-      {...restProps}
-    >
+    <Component className={`${variantToCSS(variant)} ${className || ''}`} {...restProps}>
       {children}
     </Component>
   );

diff --git a/src/components/Typography/style.module.scss b/src/components/Typography/style.module.scss
@@ -0,0 +1,42 @@
+@use 'src/styles/vars.scss' as vars;
+
+.displayMedium {
+  font-size: 3rem;
+  font-weight: 500;
+
+  @media screen and (width <= vars.$breakpoint) {
+    font-size: 1.75rem;
+    font-weight: 700;
+    line-height: 2.5rem;
+    letter-spacing: 0.0175rem;
+  }
+}
+
+.displaySmall {
+  font-size: 2rem;
+  font-weight: 400;
+}
+
+.subheading {
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+  letter-spacing: 0.015rem;
+
+  @media screen and (width <= vars.$breakpoint) {
+    font-size: 1.125rem;
+    line-height: 1.5rem;
+  }
+}
+
+.body {
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+}
+
+.label {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+}
diff --git a/src/styles/colors.scss → src/styles/vars.scss b/src/styles/colors.scss → src/styles/vars.scss
@@ -1,2 +1,4 @@
 $green: #116532;
 $white: #ffffff;
+
+$breakpoint: 768px;