feat: Onboarding (#265)

* set up a modal for onboarding

* Show steps and progress bar

* Change design of buttons

* Create onboarding page

* Add animations for steps 1 and 5

* temporary images for intro

* add rainbow bar to top of page previews

* Quiet navbar, perhaps?

* address some feedback

* Move event list to its own component

* separate event filter into its own component

* try annotating badges on event card

* store collection

* Combine Store and Events components

* Make annotations look nicer

* Leaderboard rows

* start onboarding after checking in

* fix type error

* un-component EventList so the diff is cleaner

* move EventsPageProps back where it used to be

* Remove periods and exclamation marks from onboarding headings

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/Dropdown/index.tsx

@@ -15,10 +15,19 @@ interface DropdownProps {
   options: (Option | typeof DIVIDER)[];
   value: string;
   onChange: (value: string) => void;
+  readOnly?: boolean;
   className?: string;
 }
 
-const Dropdown = ({ name, ariaLabel, options, value, onChange, className }: DropdownProps) => {
+const Dropdown = ({
+  name,
+  ariaLabel,
+  options,
+  value,
+  onChange,
+  readOnly,
+  className,
+}: DropdownProps) => {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
@@ -61,8 +70,11 @@ const Dropdown = ({ name, ariaLabel, options, value, onChange, className }: Drop
     // mouse/touch users.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     <div
-      className={`${styles.dropdownWrapper} ${className}`}
+      className={`${styles.dropdownWrapper} ${className} ${readOnly ? styles.readOnly : ''}`}
       onClick={e => {
+        if (readOnly) {
+          return;
+        }
         // Using the keyboard to select an option fires the click event on
         // <select>; prevent it from opening the fake dropdown. The <select> has
         // pointer-events: none so it shouldn't receive the click event any
@@ -82,7 +94,11 @@ const Dropdown = ({ name, ariaLabel, options, value, onChange, className }: Drop
       >
         {options.map(option =>
           option !== DIVIDER ? (
-            <option value={option.value} key={option.value}>
+            <option
+              value={option.value}
+              key={option.value}
+              disabled={value !== option.value && readOnly}
+            >
               {option.label}
             </option>
           ) : null

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

@@ -8,6 +8,10 @@
   grid-area: 1 / 2;
   position: relative;
 
+  &.readOnly {
+    cursor: unset;
+  }
+
   select {
     appearance: none;
     background: none;

src/components/common/Dropdown/style.module.scss.d.ts

@@ -4,6 +4,7 @@ export type Styles = {
   contents: string;
   dropdownWrapper: string;
   option: string;
+  readOnly: string;
 };
 
 export type ClassNames = keyof Styles;

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';
@@ -8,10 +9,18 @@ interface IProps {
   destructive?: boolean;
   href: URL;
   size?: 'default' | 'small';
+  onClick?: () => void;
 }
 
 const LinkButton = (props: PropsWithChildren<IProps>) => {
-  const { variant = 'primary', destructive = false, href, size = 'default', children } = props;
+  const {
+    variant = 'primary',
+    destructive = false,
+    href,
+    size = 'default',
+    onClick,
+    children,
+  } = props;
 
   return (
     <Link
@@ -20,8 +29,11 @@ const LinkButton = (props: PropsWithChildren<IProps>) => {
       data-destructive={destructive}
       data-size={size}
       href={href}
+      onClick={onClick}
     >
-      {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;
   }
 }