SSDFGHGJH (#520)

apps/dashboard/components/nav/side-nav.tsx

@@ -9,6 +9,7 @@ import useHibiscusUser from '../../hooks/use-hibiscus-user/use-hibiscus-user';
 import { useMemo } from 'react';
 import { HibiscusRole } from '@hibiscus/types';
 import { useRouter } from 'next/router';
+import { Colors } from '@hacksc/sctw-ui-kit';
 
 // #CEA00C
 
@@ -34,7 +35,7 @@ const HeadingContainer = styled.div`
   align-items: center;
 `;
 
-const ButtonContainer = styled.div`
+const ButtonContainer = styled.div<{ hoverColor: string }>`
   height: 50px;
   margin-bottom: 40px;
   display: flex;
@@ -43,7 +44,7 @@ const ButtonContainer = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: #cea00c;
+    background-color: ${(props) => props.hoverColor};
     border-left: 8px solid white;
   }
 `;
@@ -120,6 +121,12 @@ function StyledSideNav() {
     if (user.role === HibiscusRole.SPONSOR) return SPONSOR_NAVBAR;
     return [];
   }, [user]);
+  const hoverColor = useMemo(() => {
+    if (user == null) return Colors.Yellow.Yuhlow;
+    if (user.role === HibiscusRole.HACKER) return Colors.Yellow.Yuhlow;
+    if (user.role === HibiscusRole.SPONSOR) return Colors.Red.Redward;
+    return Colors.Yellow.Yuhlow;
+  }, [user]);
 
   return (
     <>
@@ -136,7 +143,11 @@ function StyledSideNav() {
           </HeadingContainer>
 
           {items.map((it) => (
-            <ButtonContainer key={it.label} onClick={() => router.push(it.url)}>
+            <ButtonContainer
+              key={it.label}
+              onClick={() => router.push(it.url)}
+              hoverColor={hoverColor}
+            >
               <it.icon size={25} />
               <ButtonH1> {it.label} </ButtonH1>
             </ButtonContainer>

apps/dashboard/components/nav/top-nav.tsx

@@ -6,6 +6,10 @@ import { BsPersonFill } from 'react-icons/bs';
 import { BsCalendarCheck } from 'react-icons/bs';
 import { HiOutlineSquares2X2 } from 'react-icons/hi2';
 import { useMediaQuery } from 'react-responsive';
+import { HibiscusRole } from '@hibiscus/types';
+import useHibiscusUser from '../../hooks/use-hibiscus-user/use-hibiscus-user';
+import { useMemo } from 'react';
+import { useRouter } from 'next/router';
 
 // #CEA00C
 
@@ -71,23 +75,80 @@ const SquaresIcon = styled(HiOutlineSquares2X2)`
   margin-left: 20px;
 `;
 
+const BoothIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 48 48"
+    style={{ marginLeft: '20px' }}
+  >
+    <path
+      fill="none"
+      stroke="white"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+      d="M4 5h40v8l-1.398.84a7 7 0 0 1-7.203 0L34 13l-1.398.84a7 7 0 0 1-7.203 0L24 13l-1.398.84a7 7 0 0 1-7.204 0L14 13l-1.399.84a7 7 0 0 1-7.202 0L4 13V5Zm2 20h36v18H6zm3-9v9m30-9v9"
+    />
+  </svg>
+);
+
+const JUDGE_NAVBAR = [
+  { label: 'Events', icon: CalendarIcon, url: '/events' },
+  { label: 'Leaderboard', icon: SquaresIcon, url: '/leaderboard' },
+  // { label: 'Profile', icon: PersonIcon, url: '/profile' },
+];
+
+const SPONSOR_NAVBAR = [
+  { label: 'My Booth', icon: BoothIcon, url: '/sponsor-booth' },
+];
+
 function StyledTopNav() {
   // Media query hook
   const isSmallScreen = useMediaQuery({ query: '(max-width: 600px)' });
 
+  const router = useRouter();
+
+  const { user } = useHibiscusUser();
+  const items = useMemo(() => {
+    if (user == null) return [];
+    if (user.role === HibiscusRole.HACKER) return JUDGE_NAVBAR;
+    if (user.role === HibiscusRole.SPONSOR) return SPONSOR_NAVBAR;
+    return [];
+  }, [user]);
+
   return (
     <>
       {isSmallScreen ? (
         <MainWrapper>
-          <HeadingContainer>
-            <Image
-              src={hibiscusIcon}
-              alt="HackSC Logo"
-              width={40}
-              height={40}
-            />
-            <StyledH1> HackSC 2023 </StyledH1>
-          </HeadingContainer>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+          >
+            <HeadingContainer>
+              <Image
+                src={hibiscusIcon}
+                alt="HackSC Logo"
+                width={40}
+                height={40}
+              />
+              <StyledH1> HackSC 2023 </StyledH1>
+            </HeadingContainer>
+            <HeadingContainer style={{ marginRight: '20px' }}>
+              {items.map((it) => (
+                <it.icon
+                  size={25}
+                  key={it.label}
+                  onClick={() => router.push(it.url)}
+                />
+              ))}
+            </HeadingContainer>
+          </div>
         </MainWrapper>
       ) : null}
     </>

apps/dashboard/layouts/themeless-layout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import useHibiscusUser from '../hooks/use-hibiscus-user/use-hibiscus-user';
 import StyledSideNav from '../components/nav/side-nav';
@@ -17,27 +17,36 @@ function ThemelessLayout({ children }: ThemelessLayoutProps) {
   const isSmallScreen = useMediaQuery({ query: '(max-width: 600px)' });
 
   const { user } = useHibiscusUser();
+  const color = useMemo(() => {
+    if (user == null) return Colors.Yellow.ArthurSweater;
+    if (user.role === HibiscusRole.HACKER) return Colors.Yellow.ArthurSweater;
+    if (user.role === HibiscusRole.SPONSOR) return Colors.Red.DonatedBlood;
+    return Colors.Yellow.ArthurSweater;
+  }, [user]);
+  const shadowColor = useMemo(() => {
+    if (user == null) return Colors.Yellow.Yuhlow;
+    if (user.role === HibiscusRole.HACKER) return Colors.Yellow.Yuhlow;
+    if (user.role === HibiscusRole.SPONSOR) return Colors.Red.Redward;
+    return Colors.Yellow.Yuhlow;
+  }, [user]);
 
   if (user == null) {
     return <></>;
   }
 
   return isSmallScreen ? (
-    <VerticalMainPageWrapper>
+    <VerticalMainPageWrapper style={{ backgroundColor: color }}>
       <StyledTopNav />
       <VerticalContent>{children}</VerticalContent>
     </VerticalMainPageWrapper>
   ) : (
-    <MainPageWrapper>
+    <MainPageWrapper style={{ backgroundColor: color }}>
       <StyledSideNav />
       <Content>
         <RightUtilityContainer>
           <UserText>{user.tag}</UserText>
           <RoleText>
-            <GlowSpan
-              color={Colors.Yellow.ArthurSweater}
-              shadowColor={Colors.Yellow.Yuhlow}
-            >
+            <GlowSpan color={color} shadowColor={shadowColor}>
               {user.role}
             </GlowSpan>
           </RoleText>

apps/dashboard/pages/index.tsx

@@ -78,6 +78,9 @@ export function Index({
     } else if (user.role === HibiscusRole.SPONSOR) {
       router.push('/sponsor-booth');
       return <></>;
+    } else if (user.role === HibiscusRole.JUDGE) {
+      window.location.assign('podium.hacksc.com');
+      return <></>;
     } else if (user.role === HibiscusRole.VOLUNTEER) return <IdentityPortal />;
   };
 

apps/podium/pages/index.tsx

@@ -523,7 +523,7 @@ const Index = () => {
         </div>
         <br />
         {!allProjects[0] ? (
-          <p style={{ marginLeft: '8px' }}>Loading...</p>
+          <p style={{ marginLeft: '8px' }}>Welcome to Podium!</p>
         ) : (
           <></>
         )}

libs/styles/src/lib/colors.ts

@@ -63,5 +63,9 @@ export namespace Colors2023 {
       light: YELLOW.LIGHT,
       standard: YELLOW.STANDARD,
     },
+    [HibiscusRole.JUDGE]: {
+      light: BLUE.LIGHT,
+      standard: BLUE.STANDARD,
+    },
   };
 }