feat: Onboarding

src/components/common/Button/index.tsx

@@ -1,3 +1,4 @@
+import Typography from '@/components/common/Typography';
 import { PropsWithChildren } from 'react';
 import style from './style.module.scss';
 
@@ -11,6 +12,11 @@ interface IProps {
   className?: string;
 }
 
+/**
+ * Equivalent to
+ * {@link https://www.figma.com/design/YQjQ1ruLtMICqnzzxBXxOL/ACM-Portal---Onboarding-Screens?node-id=158-1208&t=GsDtnYW4YBMPSN8C-4|"Desktop and mobile buttons"}
+ * in the Figma
+ */
 const Button = (props: PropsWithChildren<IProps>) => {
   const {
     variant = 'primary',
@@ -20,7 +26,7 @@ const Button = (props: PropsWithChildren<IProps>) => {
     size = 'default',
     onClick,
     children,
-    className,
+    className = '',
   } = props;
 
   return (
@@ -33,7 +39,9 @@ const Button = (props: PropsWithChildren<IProps>) => {
       data-destructive={destructive}
       data-size={size}
     >
-      {children}
+      <Typography variant="h5/medium" component="span">
+        {children}
+      </Typography>
     </button>
   );
 };

src/components/common/Button/style.module.scss

@@ -2,18 +2,15 @@
 
 .button {
   align-items: center;
-  background-color: #62b0ff;
+  background-color: var(--theme-primary-2);
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  color: #fff;
+  color: var(--theme-background);
   cursor: pointer;
   display: flex;
   height: auto;
   justify-content: center;
   min-height: 2rem;
-  padding: 4px 1rem;
-  transition: 0.3s ease-in-out transform;
-
+  padding: 4px 1.5rem;
   width: fit-content;
 
   &[data-size='default'] {
@@ -22,24 +19,20 @@
 
   &[data-size='small'] {
     min-height: 2rem;
+    padding: 4px 1rem;
   }
 
   &[data-variant='primary'] {
-    background-color: #62b0ff;
-    border: 1px solid #fff;
-    color: #fff;
-
     &[data-destructive='true'] {
       background-color: #ef626c;
-      border: 1px solid #fff;
       color: #fff;
     }
   }
 
   &[data-variant='secondary'] {
-    background-color: #fff;
-    border: 1px solid #62b0ff;
-    color: #62b0ff;
+    background-color: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    color: var(--theme-text-on-background-1);
 
     &[data-destructive='true'] {
       background-color: #fff;
@@ -48,16 +41,8 @@
     }
   }
 
-  &:hover {
-    transform: scale(1.04);
-
-    &:disabled {
-      cursor: wait;
-      transform: scale(1);
-    }
-  }
-
   &:disabled {
     background-color: vars.$disabled !important;
+    cursor: default;
   }
 }

src/components/common/LinkButton/index.tsx

@@ -1,3 +1,4 @@
+import Typography from '@/components/common/Typography';
 import type { URL } from '@/lib/types';
 import Link from 'next/link';
 import { PropsWithChildren } from 'react';
@@ -21,7 +22,9 @@ const LinkButton = (props: PropsWithChildren<IProps>) => {
       data-size={size}
       href={href}
     >
-      {children}
+      <Typography variant="h5/medium" component="span">
+        {children}
+      </Typography>
     </Link>
   );
 };

src/components/common/LinkButton/style.module.scss

@@ -2,17 +2,15 @@
 
 .button {
   align-items: center;
-  background-color: #62b0ff;
+  background-color: var(--theme-primary-2);
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  color: #fff;
+  color: var(--theme-background);
   cursor: pointer;
   display: flex;
+  height: auto;
   justify-content: center;
   min-height: 2rem;
-  padding: 4px 1rem;
-  transition: 0.3s ease-in-out transform;
-
+  padding: 4px 1.5rem;
   width: fit-content;
 
   &[data-size='default'] {
@@ -21,24 +19,20 @@
 
   &[data-size='small'] {
     min-height: 2rem;
+    padding: 4px 1rem;
   }
 
   &[data-variant='primary'] {
-    background-color: #62b0ff;
-    border: 1px solid #fff;
-    color: #fff;
-
     &[data-destructive='true'] {
       background-color: #ef626c;
-      border: 1px solid #fff;
       color: #fff;
     }
   }
 
   &[data-variant='secondary'] {
-    background-color: #fff;
-    border: 1px solid #62b0ff;
-    color: #62b0ff;
+    background-color: var(--theme-elevated-background);
+    border: 1px solid var(--theme-elevated-stroke);
+    color: var(--theme-text-on-background-1);
 
     &[data-destructive='true'] {
       background-color: #fff;
@@ -47,16 +41,8 @@
     }
   }
 
-  &:hover {
-    transform: scale(1.04);
-
-    &:disabled {
-      cursor: wait;
-      transform: scale(1);
-    }
-  }
-
   &:disabled {
     background-color: vars.$disabled !important;
+    cursor: default;
   }
 }

src/components/layout/Navbar/index.tsx

@@ -17,8 +17,9 @@ import styles from './style.module.scss';
 
 interface NavbarProps {
   accessType?: UserAccessType;
+  quiet?: boolean;
 }
-const Navbar = ({ accessType }: NavbarProps) => {
+const Navbar = ({ accessType, quiet }: NavbarProps) => {
   const size = useWindowSize();
   const headerRef = useRef<HTMLHeadElement>(null);
 
@@ -50,14 +51,20 @@ const Navbar = ({ accessType }: NavbarProps) => {
   if (!accessType) {
     return (
       <header className={styles.header}>
-        <div className={styles.content}>
-          <Link href={config.homeRoute} className={styles.navLeft}>
-            <Image src={LightModeLogo} alt="ACM General Logo" width={48} height={48} />
-            <span className={styles.headerTitle}>Membership Portal</span>
-          </Link>
+        <div className={`${styles.content} ${quiet ? styles.quiet : ''}`}>
+          {quiet ? (
+            <span className={styles.navLeft}>
+              <Image src={LightModeLogo} alt="ACM General Logo" width={48} height={48} />
+            </span>
+          ) : (
+            <Link href={config.homeRoute} className={styles.navLeft}>
+              <Image src={LightModeLogo} alt="ACM General Logo" width={48} height={48} />
+              <span className={styles.headerTitle}>Membership Portal</span>
+            </Link>
+          )}
           <ThemeToggle />
         </div>
-        <hr className={`${styles.wainbow} ${styles.loggedOut}`} />
+        {!quiet ? <hr className={`${styles.wainbow} ${styles.loggedOut}`} /> : null}
       </header>
     );
   }

src/components/layout/Navbar/style.module.scss

@@ -18,6 +18,11 @@
     width: 100%;
     z-index: 20;
 
+    &.quiet {
+      border-bottom: 1px solid var(--theme-elevated-stroke);
+      height: vars.$header-height;
+    }
+
     .toggleIcon {
       background-color: inherit;
       display: none;
@@ -64,7 +69,6 @@
 
     .navLeft {
       align-items: center;
-      cursor: pointer;
       display: flex;
       gap: 1.25rem;
       height: 100%;

src/components/layout/Navbar/style.module.scss.d.ts

@@ -13,6 +13,7 @@ export type Styles = {
   mobileSwitch: string;
   navLeft: string;
   portalLinks: string;
+  quiet: string;
   toggleIcon: string;
   wainbow: string;
 };

src/components/layout/PageLayout/index.tsx

@@ -5,11 +5,12 @@ import styles from './style.module.scss';
 
 interface LayoutProps {
   accessType?: UserAccessType;
+  quietNavbar?: boolean;
 }
 
-const PageLayout = ({ accessType, children }: PropsWithChildren<LayoutProps>) => (
+const PageLayout = ({ accessType, quietNavbar, children }: PropsWithChildren<LayoutProps>) => (
   <>
-    <Navbar accessType={accessType} />
+    <Navbar accessType={accessType} quiet={quietNavbar} />
     <main className={styles.content}>{children}</main>
   </>
 );