Quiet navbar, perhaps?

acmucsd · Sep 23, 2024 · 28274cd · 28274cd
1 parent f0b2381
commit 28274cd
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 12 deletions.
diff --git a/src/components/layout/Navbar/index.tsx b/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>
     );
   }

diff --git a/src/components/layout/Navbar/style.module.scss b/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%;

diff --git a/src/components/layout/Navbar/style.module.scss.d.ts b/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;
 };

diff --git a/src/components/layout/PageLayout/index.tsx b/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>
   </>
 );

diff --git a/src/components/onboarding/OnboardingScreen/index.tsx b/src/components/onboarding/OnboardingScreen/index.tsx
@@ -1,6 +1,7 @@
 import { Button, Typography } from '@/components/common';
 import Communities from '@/components/onboarding/Communities';
 import Intro from '@/components/onboarding/Intro';
+import { CollectionSlider } from '@/components/store';
 import Step4 from '@/public/assets/graphics/store/step4.svg';
 import { ReactNode, useState } from 'react';
 import { AiOutlineClockCircle } from 'react-icons/ai';
@@ -39,7 +40,19 @@ const steps: Step[] = [
   {
     title: 'Redeem your points at the ACM Store!',
     caption: 'Purchase merch with your points and show off your ACM spirit!',
-    content: <div className={styles.rainbow} />,
+    content: (
+      <>
+        <div className={styles.rainbow} />
+        <div style={{ padding: '2rem', textAlign: 'left' }}>
+          <CollectionSlider
+            uuid=""
+            title="The Cozy Collection"
+            description="Bundle up by the fire with a blanket and this new collection of cute sweaters and hoodies."
+            items={[]}
+          />
+        </div>
+      </>
+    ),
   },
   {
     title: 'That’s a glimpse on how we run ACM at UCSD.',

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -37,7 +37,7 @@ export default function MyApp({ Component, pageProps, router }: AppProps) {
       />
       <ThemeProvider>
         <ToastContainer />
-        <PageLayout accessType={pageProps?.user?.accessType}>
+        <PageLayout accessType={pageProps?.user?.accessType} quietNavbar={pageProps.quietNavbar}>
           <Component {...pageProps} />
         </PageLayout>
       </ThemeProvider>

diff --git a/src/pages/onboard.tsx b/src/pages/onboard.tsx
@@ -30,6 +30,7 @@ export const getServerSideProps: GetServerSideProps<OnboardProps> = async ({ que
   return {
     props: {
       destination: route || config.homeRoute,
+      quietNavbar: true,
     },
   };
 };