add rainbow bar to top of page previews

src/components/onboarding/Communities/style.module.scss

@@ -49,20 +49,21 @@
   }
 
   @media (max-width: vars.$breakpoint-md) {
+    gap: 1.5rem;
     grid-auto-flow: row;
 
     .community {
       .logo {
-        height: 3rem;
-        width: 3rem;
+        height: 4rem;
+        width: 4rem;
       }
 
       .name {
-        font-size: 1.5rem;
+        font-size: 2rem;
       }
 
       .description {
-        font-size: 1rem;
+        font-size: 1.25rem;
       }
     }
   }

src/components/onboarding/Intro/index.tsx

@@ -10,7 +10,7 @@ const Intro = () => {
         alt="temp image"
         width={256}
         height={256}
-        className={styles.image}
+        className={`${styles.image} ${styles.desktopOnly}`}
         style={{ animationDelay: '0.2s' }}
       />
       <Image src={TempImage} alt="temp image" width={256} height={256} className={styles.image} />
@@ -19,7 +19,7 @@ const Intro = () => {
         alt="temp image"
         width={256}
         height={256}
-        className={styles.image}
+        className={`${styles.image} ${styles.desktopOnly}`}
         style={{ animationDelay: '0.4s' }}
       />
     </div>

src/components/onboarding/Intro/style.module.scss

@@ -24,4 +24,10 @@
   .image {
     animation: appear 1.5s backwards;
   }
+
+  @media (max-width: vars.$breakpoint-md) {
+    .desktopOnly {
+      display: none;
+    }
+  }
 }

src/components/onboarding/Intro/style.module.scss.d.ts

@@ -1,5 +1,6 @@
 export type Styles = {
   appear: string;
+  desktopOnly: string;
   image: string;
   wrapper: string;
 };

src/components/onboarding/OnboardingScreen/index.tsx

@@ -29,7 +29,7 @@ const steps: Step[] = [
     title: 'Join us at our events and workshops.',
     caption:
       'Learn technical skills and connect with other members with shared interests. We can’t wait to see you there!',
-    content: 'TODO',
+    content: <div className={styles.rainbow} />,
   },
   {
     title: 'Race your friends to the top of the leaderboard',
@@ -39,7 +39,7 @@ const steps: Step[] = [
   {
     title: 'Redeem your points at the ACM Store!',
     caption: 'Purchase merch with your points and show off your ACM spirit!',
-    content: 'TODO',
+    content: <div className={styles.rainbow} />,
   },
   {
     title: 'That’s a glimpse on how we run ACM at UCSD.',

src/components/onboarding/OnboardingScreen/style.module.scss

@@ -1,18 +1,10 @@
 @use 'src/styles/vars.scss' as vars;
 
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
 .wrapper {
   display: flex;
+  flex: auto;
   flex-direction: column;
+  gap: 2rem;
   height: 100%;
   margin: 0 auto;
   max-width: 60rem;
@@ -23,7 +15,6 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    margin-bottom: 2rem;
     text-align: left;
 
     .progress {
@@ -60,6 +51,15 @@
       margin: auto;
       transform: scaleX(-1);
     }
+
+    .rainbow {
+      animation: rainbow-appear 1s;
+      background-image: vars.$wainbow;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      flex: none;
+      height: 4px;
+    }
   }
 
   .caption {
@@ -71,7 +71,6 @@
   .buttonRow {
     display: flex;
     justify-content: space-between;
-    margin-top: 2rem;
   }
 
   .title,
@@ -85,6 +84,16 @@
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes raccoon-in {
   from {
     transform: perspective(30rem) scale(0) rotateY(2 * 360deg) scaleX(-1);
@@ -94,3 +103,13 @@
     transform: perspective(30rem) scale(1) rotateY(0) scaleX(-1);
   }
 }
+
+@keyframes rainbow-appear {
+  from {
+    clip-path: xywh(50% 0% 0% 100% round 4px);
+  }
+
+  to {
+    clip-path: xywh(0% 0% 100% 100% round 4px);
+  }
+}

src/components/onboarding/OnboardingScreen/style.module.scss.d.ts

@@ -9,6 +9,8 @@ export type Styles = {
   progress: string;
   progressBar: string;
   raccoonIn: string;
+  rainbow: string;
+  rainbowAppear: string;
   showProgress: string;
   title: string;
   wrapper: string;

src/pages/onboard.tsx

@@ -16,7 +16,7 @@ const OnboardPage: NextPage<OnboardProps> = ({ destination }) => {
   };
 
   return (
-    <div style={{ height: 'calc(100vh - 8.25rem)' }}>
+    <div style={{ minHeight: 'calc(100vh - 8.25rem)', display: 'flex', flexDirection: 'column' }}>
       <OnboardingScreen onDismiss={handleExit} onFinish={handleExit} />
     </div>
   );