From e03591cd07af2a4bbddf9cf72175d43bef089244 Mon Sep 17 00:00:00 2001
From: Samantha Wang <samanthawang@Mac.hsd1.md.comcast.net>
Date: Mon, 13 Jul 2026 20:24:18 -0400
Subject: [PATCH] Add standalone Join Us page with new navbar and footer

New page built from Figma designs with CSES logo, Space Mono font,
updated navbar (#1A1A24 at 60% opacity), sponsor grid, and redesigned footer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/App.tsx                      |  43 +----
 frontend/src/components/Footer/Footer.tsx | 102 +++--------
 frontend/src/components/JoinUs/JoinUs.tsx | 214 ++++++++++++++++++++++
 frontend/src/components/NavBar/NavBar.tsx | 211 ++++++++-------------
 frontend/src/images/cses-logo-white.png   | Bin 0 -> 7892 bytes
 frontend/src/index.css                    |   4 +-
 frontend/src/index.tsx                    |  19 +-
 7 files changed, 330 insertions(+), 263 deletions(-)
 create mode 100644 frontend/src/components/JoinUs/JoinUs.tsx
 create mode 100644 frontend/src/images/cses-logo-white.png

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4a08aac5..8a38f5b9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,47 +1,16 @@
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Container } from '@mui/material';
-import ScrollToTop from './utils/scrollToTop';
-import Home from './components/Home/Home';
 import NavBar from './components/NavBar/NavBar';
+import JoinUs from './components/JoinUs/JoinUs';
 import Footer from './components/Footer/Footer';
-import About from './components/About/About';
-import Events from './components/NewEvents/Events';
-import Opportunities from './components/Opportunities/Opportunities';
-import Membership from './components/Membership/Membership';
-import Login from './components/Login/Login';
-import EditForm from './components/Login/EditProfile';
-import Initiatives from './components/Initiatives/Initiatives';
-import OpenSource from './components/OpenSource/OpenSource';
-import Sponsorships from './components/Sponsorships/Sponsorships'; // added my mal and line 34
-import OpenSourceCommunity from './components/OpenSourceCommunity/OpenSourceCommunity';
-import DevCommunity from './components/Dev/DevCommunity'
-import InovateCommunity from './components/Inovate/InovateCommunity'
 
 function App() {
   return (
-    <BrowserRouter>
-      <ScrollToTop />
-      <Container maxWidth={false} style={{ margin: 0, padding: 0 }}>
-        <NavBar />
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
-          <Route path="/events" element={<Events />} />
-          <Route path="/opportunities" element={<Opportunities />} />
-          <Route path="/membership" element={<Membership />} />
-          { /* <Route path="/login" element={<Login />} /> */}
-          <Route path="/editprofile" element={<EditForm />} />
-          <Route path="/initiatives" element={<Initiatives />} />
-          <Route path="/opensource" element={<OpenSource />} />
-          <Route path="/sponsorships" element={<Sponsorships />} /> 
-          <Route path="/opensourcecommunity" element={<OpenSourceCommunity />} /> 
-          <Route path="/devcommunity" element={<DevCommunity />} />
-          <Route path="/innovatecommunity" element={<InovateCommunity />} />
-        </Routes>
-        <Footer />
-      </Container>
-    </BrowserRouter>
+    <Container maxWidth={false} style={{ margin: 0, padding: 0 }}>
+      <NavBar />
+      <JoinUs />
+      <Footer />
+    </Container>
   );
 }
 
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index c652700d..5cb52840 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/frontend/src/components/Footer/Footer.tsx
@@ -1,129 +1,81 @@
 import React from 'react';
 import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '../../images/instagram-icon.svg';
-import FacebookIcon from '../../images/facebook-icon.svg';
 import LinkedInIcon from '../../images/linkedin-icon.svg';
-import DiscordIcon from '../../images/discord-icon.svg';
 import csesLogo from '../../images/footer-logo.png';
 
-const links = [
-  { logo: InstagramIcon, link: 'https://www.instagram.com/cses_ucsd/' },
-  { logo: DiscordIcon, link: 'https://discord.gg/UkdACyy2h8' },
-  { logo: FacebookIcon, link: 'https://www.facebook.com/csesucsd' },
-  { logo: LinkedInIcon, link: 'https://www.linkedin.com/in/csesucsd/' },
+const socialLinks = [
+  { logo: InstagramIcon, link: 'https://www.instagram.com/cses_ucsd/', alt: 'Instagram' },
+  { logo: LinkedInIcon, link: 'https://www.linkedin.com/in/csesucsd/', alt: 'LinkedIn' },
 ];
 
 const Footer = () => {
   return (
     <Box
       sx={{
-        backgroundColor: '#1F3A7E',
-        padding: { xs: '0.5rem 2.5rem 1.25rem', md: '1.25rem 2.5rem 1.25rem' },
+        backgroundColor: '#1a1e2e',
+        padding: { xs: '2rem 1.5rem 1.5rem', md: '2.5rem 3rem 2rem' },
         color: 'white',
       }}
     >
-      {/* Desktop Layout */}
+      {/* Top row: logo left, social icons right */}
       <Box
         sx={{
-          display: { xs: 'none', md: 'flex' },
+          display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          mb: 3,
         }}
       >
-        {/* Logo */}
+        {/* CSES Logo */}
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <Box
             component="img"
             src={csesLogo}
-            alt="logo"
+            alt="CSES Logo"
             sx={{
-              height: '3.75rem', // 60px equivalent
-              maxWidth: '100%',
-              mr: 1.25, // 10px
+              height: { xs: '40px', md: '55px' },
               objectFit: 'contain',
             }}
           />
         </Box>
 
-        {/* Center Contact Info */}
-        <Typography sx={{ fontSize: '1.125rem', fontStyle: 'italic' }}>
-          For all inquiries, contact{' '}
-          <Link href="mailto:cses@ucsd.edu" color="inherit">
-            cses@ucsd.edu
-          </Link>
-          .
-        </Typography>
-
         {/* Social Icons */}
         <Box sx={{ display: 'flex', gap: 2 }}>
-          {links.map(({ logo, link }, idx) => (
+          {socialLinks.map(({ logo, link, alt }) => (
             <Link
-              key={idx}
+              key={alt}
               href={link}
               target="_blank"
               rel="noopener noreferrer"
               sx={{
-                display: 'inline-block',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
                 '& img': {
-                  width: '2rem', // 32px
-                  height: '2rem',
+                  width: { xs: '28px', md: '32px' },
+                  height: { xs: '28px', md: '32px' },
                   objectFit: 'contain',
+                  filter: 'brightness(0) invert(1)',
                 },
               }}
             >
-              <img src={logo} alt="social" />
+              <img src={logo} alt={alt} />
             </Link>
           ))}
         </Box>
       </Box>
 
-      {/* Mobile Layout */}
-      <Box
+      {/* Copyright */}
+      <Typography
         sx={{
-          display: { xs: 'flex', md: 'none' },
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          flexWrap: 'nowrap',
-          pt: 2,
+          textAlign: 'center',
+          fontSize: { xs: '0.75rem', md: '0.875rem' },
+          color: 'rgba(255, 255, 255, 0.7)',
         }}
       >
-        {/* Logo */}
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Box
-            component="img"
-            src={csesLogo}
-            alt="logo"
-            sx={{
-              height: '3.125rem', // 50px equivalent
-              maxWidth: '100%',
-              mr: 1.25, // 10px
-              objectFit: 'contain',
-            }}
-          />
-        </Box>
-
-        {/* Social Icons */}
-        <Box sx={{ display: 'flex', gap: 1 }}>
-          {links.map(({ logo, link }, idx) => (
-            <Link
-              key={idx}
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                display: 'inline-block',
-                '& img': {
-                  width: '1.75rem', // 28px
-                  height: '1.75rem',
-                  objectFit: 'contain',
-                },
-              }}
-            >
-              <img src={logo} alt="social" />
-            </Link>
-          ))}
-        </Box>
-      </Box>
+        &copy; 2026 UC San Diego Computer Science and Engineering Society. All rights reserved.
+      </Typography>
     </Box>
   );
 };
diff --git a/frontend/src/components/JoinUs/JoinUs.tsx b/frontend/src/components/JoinUs/JoinUs.tsx
new file mode 100644
index 00000000..6a021268
--- /dev/null
+++ b/frontend/src/components/JoinUs/JoinUs.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import ASLogo from '../../images/sponsors/AS_Logo.png';
+import CSEDeptLogo from '../../images/sponsors/CSEDept_Logo.png';
+import BasementLogo from '../../images/sponsors/Basement_Logo.jpeg';
+import EyePopAILogo from '../../images/sponsors/EyePopAI_Logo.png';
+import BSLLogo from '../../images/sponsors/BSL.png';
+import IGELogo from '../../images/sponsors/IGE_Logo.png';
+import LinuxLogo from '../../images/sponsors/Linux_Logo.png';
+import LovableLogo from '../../images/sponsors/Lovable_Logo.png';
+import OSPOLogo from '../../images/sponsors/OSPO_Logo.png';
+import PersonaLogo from '../../images/sponsors/Persona_Logo.png';
+import RobloxLogo from '../../images/sponsors/Roblox_Logo.png';
+
+const stats = [
+  { number: '455+', label: 'members' },
+  { number: '18+', label: 'annual\nevents' },
+  { number: '12+', label: 'annual\nprojects' },
+];
+
+const sponsors = [
+  { src: ASLogo, alt: 'Associated Students' },
+  { src: CSEDeptLogo, alt: 'CSE Department' },
+  { src: BSLLogo, alt: 'Big Strategy Lab' },
+  { src: RobloxLogo, alt: 'Roblox' },
+  { src: PersonaLogo, alt: 'Persona' },
+  { src: LovableLogo, alt: 'Lovable' },
+  { src: EyePopAILogo, alt: 'EyePop AI' },
+  { src: IGELogo, alt: 'IGE' },
+  { src: LinuxLogo, alt: 'Linux Foundation' },
+  { src: OSPOLogo, alt: 'OSPO' },
+  { src: BasementLogo, alt: 'Basement' },
+];
+
+const JoinUs = () => {
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        backgroundColor: '#0a0e1a',
+        color: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        pt: { xs: '140px', md: '160px' },
+        pb: 8,
+        px: 3,
+      }}
+    >
+      {/* Heading */}
+      <Typography
+        sx={{
+          fontFamily: '"Space Mono", monospace',
+          fontSize: { xs: '2.5rem', md: '3.5rem' },
+          fontWeight: 400,
+          mb: 3,
+        }}
+      >
+        Join us.
+      </Typography>
+
+      {/* Subtext */}
+      <Typography
+        sx={{
+          fontFamily: '"Space Mono", monospace',
+          fontSize: { xs: '1rem', md: '1.25rem' },
+          textAlign: 'center',
+          maxWidth: '500px',
+          mb: 5,
+          lineHeight: 1.6,
+        }}
+      >
+        Interested in joining our initiative? Apply below!
+      </Typography>
+
+      {/* Apply Button */}
+      <Box
+        sx={{
+          border: '2px solid #725DEF',
+          borderRadius: '8px',
+          mb: 6,
+        }}
+      >
+        <Button
+          href="#"
+          sx={{
+            color: 'white',
+            fontFamily: '"Space Mono", monospace',
+            fontSize: { xs: '1.25rem', md: '1.5rem' },
+            fontWeight: 700,
+            px: 6,
+            py: 1.5,
+            textTransform: 'none',
+            '&:hover': {
+              backgroundColor: 'rgba(114, 93, 239, 0.1)',
+            },
+          }}
+        >
+          Apply
+        </Button>
+      </Box>
+
+      {/* Organization tagline */}
+      <Typography
+        sx={{
+          fontFamily: '"Space Mono", monospace',
+          fontSize: { xs: '1rem', md: '1.25rem' },
+          textAlign: 'center',
+          mb: 4,
+        }}
+      >
+        We are UCSD's largest computing organization
+      </Typography>
+
+      {/* Stats */}
+      <Box
+        sx={{
+          display: 'flex',
+          gap: { xs: 2, md: 4 },
+          mb: 8,
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+        }}
+      >
+        {stats.map((stat) => (
+          <Box
+            key={stat.label}
+            sx={{
+              border: '2px solid #725DEF',
+              borderRadius: '12px',
+              px: { xs: 4, md: 6 },
+              py: { xs: 3, md: 4 },
+              textAlign: 'center',
+              minWidth: { xs: '140px', md: '180px' },
+            }}
+          >
+            <Typography
+              sx={{
+                fontFamily: '"Space Mono", monospace',
+                fontSize: { xs: '2rem', md: '2.5rem' },
+                fontWeight: 700,
+                mb: 1,
+              }}
+            >
+              {stat.number}
+            </Typography>
+            <Typography
+              sx={{
+                fontFamily: '"Space Mono", monospace',
+                fontSize: { xs: '0.9rem', md: '1.1rem' },
+                whiteSpace: 'pre-line',
+              }}
+            >
+              {stat.label}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+
+      {/* Partners Section */}
+      <Typography
+        sx={{
+          fontFamily: '"Space Mono", monospace',
+          fontSize: { xs: '1.5rem', md: '2.5rem' },
+          fontWeight: 400,
+          textAlign: 'center',
+          mb: 6,
+        }}
+      >
+        Thank You to Our Current Partners
+      </Typography>
+
+      {/* Sponsor Logos Grid */}
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          justifyContent: 'center',
+          gap: 3,
+          maxWidth: '800px',
+        }}
+      >
+        {sponsors.map((sponsor) => (
+          <Box
+            key={sponsor.alt}
+            sx={{
+              width: { xs: '120px', md: '180px' },
+              height: { xs: '90px', md: '120px' },
+              backgroundColor: '#d9d9d9',
+              borderRadius: '8px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              overflow: 'hidden',
+            }}
+          >
+            <Box
+              component="img"
+              src={sponsor.src}
+              alt={sponsor.alt}
+              sx={{
+                maxWidth: '85%',
+                maxHeight: '85%',
+                objectFit: 'contain',
+              }}
+            />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default JoinUs;
diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
index 0438ec50..02352b02 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   AppBar,
   IconButton,
@@ -10,177 +10,124 @@ import {
   Box,
   Button,
   Toolbar,
-  Avatar,
 } from '@mui/material';
 import { Menu as MenuIcon, Close as CloseIcon } from '@mui/icons-material';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
-import csesLogo from '../../images/CSES-logo.png';
-import MuiButton from '../Button/Button';
-import { navBarStyles } from './styles';
-import { AuthContext } from '../../context/AuthContext';
-import ProfileDropdown from './ProfileDropdown';
-import { User } from '../../utils/types';
-import axios from 'axios';
+import csesLogo from '../../images/cses-logo-white.png';
 
-const NavBar = () => {
-  const location = useLocation();
-  const styles = navBarStyles();
-  const navigate = useNavigate();
+const navItems = [
+  { text: 'Home', link: '#' },
+  { text: 'Events', link: '#' },
+  { text: 'Communities', link: '#' },
+];
 
+const NavBar = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [userData, setUserData] = useState<User | null>(null);
-
-  const { user, isLoggedIn } = useContext(AuthContext);
-
-  const navItems = [
-    { text: 'About', link: '/about' },
-    { text: 'Events', link: '/events' },
-    { text: 'Sponsors', link: '/sponsorships' },
-    { text: 'Initiatives', link: '/initiatives' },
-  ];
-
-  const clickItem = (link: string) => {
-    setIsDrawerOpen(false);
-    navigate(link);
-  };
-
-  useEffect(() => {
-    const fetchUserData = async () => {
-      try {
-        if (isLoggedIn) {
-          const response = await axios.get(
-            `${process.env.REACT_APP_BACKEND_URL}/api/v1/users/${user.email}`,
-          );
-          setUserData(response.data);
-        }
-      } catch (error) {
-        console.log('Error fetching user data: ', error);
-      }
-    };
-
-    fetchUserData();
-  }, [isLoggedIn, user.email, navigate]);
 
   return (
     <div>
-      <AppBar sx={{ backgroundColor: '#030E5D' }} position="fixed" elevation={0}>
-        <Toolbar>
-          <Link to="/">
+      <AppBar
+        position="fixed"
+        elevation={0}
+        sx={{ backgroundColor: 'rgba(26, 26, 36, 0.6)', backdropFilter: 'blur(8px)' }}
+      >
+        <Toolbar sx={{ justifyContent: 'space-between' }}>
+          {/* Logo + text */}
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <img
               src={csesLogo}
-              alt="logo"
-              style={{ margin: 'clamp(20px, 4vw, 25px)', height: '55px' }}
+              alt="CSES logo"
+              style={{ height: '45px', margin: '12px 0' }}
             />
-          </Link>
-
-          <div style={{ flexGrow: 1 }} />
+            <Typography
+              sx={{
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1.1rem',
+                ml: 1.5,
+                display: { xs: 'none', sm: 'block' },
+              }}
+            >
+              at UC San Diego
+            </Typography>
+          </Box>
 
-          <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+          {/* Desktop Nav */}
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, alignItems: 'center', gap: 1 }}>
             {navItems.map(({ text, link }) => (
-              <Button key={text} component={Link} to={link} sx={styles.button}>
-                {text}
-              </Button>
-            ))}
-
-            {/* Gradient Join Us Button */}
-            {/* {!isLoggedIn && location.pathname !== '/login' && (
-              <Box
-                onClick={() => navigate('/login')}
+              <Button
+                key={text}
+                href={link}
                 sx={{
-                  cursor: 'pointer',
-                  background: 'linear-gradient(to left, #725DEF, #63CDDB, #EBB211)',
-                  padding: '2px',
-                  borderRadius: '999px',
-                  display: 'inline-flex',
-                  marginLeft: '12px',
+                  color: 'white',
+                  fontFamily: '"Space Mono", monospace',
+                  fontSize: '1rem',
+                  textTransform: 'none',
+                  '&:hover': { backgroundColor: 'rgba(255,255,255,0.1)' },
                 }}
               >
-                <Box
-                  sx={{
-                    backgroundColor: '#030E5D',
-                    borderRadius: '999px',
-                    padding: '6px 24px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      color: 'white',
-                      fontSize: '18px',
-                      fontWeight: 600,
-                      textAlign: 'center',
-                    }}
-                  >
-                    Join Us
-                  </Typography>
-                </Box>
-              </Box>
-            )} */}
+                {text}
+              </Button>
+            ))}
+            <Button
+              href="#"
+              sx={{
+                backgroundColor: '#8B5CF6',
+                color: 'white',
+                fontFamily: '"Space Mono", monospace',
+                fontSize: '1rem',
+                textTransform: 'none',
+                borderRadius: '24px',
+                px: 3,
+                py: 0.75,
+                ml: 1,
+                '&:hover': {
+                  backgroundColor: '#7c4fe0',
+                },
+              }}
+            >
+              Contact Us
+            </Button>
           </Box>
 
-          {isLoggedIn && userData && (
-            <div style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}>
-              <Link to="/membership">
-                <Avatar
-                  alt="User"
-                  src={userData.profilePicture}
-                  sx={{ width: 60, height: 60, marginLeft: '1%' }}
-                />
-              </Link>
-              <ProfileDropdown />
-            </div>
-          )}
-
+          {/* Mobile Menu Icon */}
           <Box sx={{ display: { xs: 'block', md: 'none' } }}>
-            <IconButton onClick={() => setIsDrawerOpen(!isDrawerOpen)} color="inherit">
-              {!isDrawerOpen && <MenuIcon sx={styles.menuicon} />}
+            <IconButton onClick={() => setIsDrawerOpen(true)} color="inherit">
+              <MenuIcon sx={{ fontSize: '2rem' }} />
             </IconButton>
           </Box>
         </Toolbar>
-        <Box
-          sx={{
-            height: '4px',
-            background: 'linear-gradient(to right, #725DEF, #63CDDB, #EBB211)',
-          }}
-        />
       </AppBar>
 
-
+      {/* Mobile Drawer */}
       <Drawer anchor="top" open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
-        <List sx={{ background: '#030E5D' }}>
+        <List sx={{ background: '#4a4a5c', minHeight: '100vh' }}>
           <ListItem
             button
             sx={{ justifyContent: 'flex-end' }}
             onClick={() => setIsDrawerOpen(false)}
           >
-            <CloseIcon sx={styles.closeicon} />
+            <CloseIcon sx={{ color: 'white', fontSize: '2rem' }} />
           </ListItem>
-
           {navItems.map(({ text, link }) => (
-            <ListItem button key={text} sx={styles.listitem} onClick={() => clickItem(link)}>
+            <ListItem button key={text} onClick={() => setIsDrawerOpen(false)}>
               <ListItemText
                 primary={
-                  <Typography align="center" sx={styles.button}>
+                  <Typography sx={{ color: 'white', textAlign: 'center', fontSize: '1.25rem', fontFamily: '"Space Mono", monospace' }}>
                     {text}
                   </Typography>
                 }
               />
             </ListItem>
           ))}
-
-          {/* {!isLoggedIn && location.pathname !== '/login' && (
-            <ListItem button key="Login" sx={styles.listitem} onClick={() => clickItem('/login')}>
-              <ListItemText
-                primary={
-                  <Typography align="center" sx={styles.button}>
-                    Join Us
-                  </Typography>
-                }
-              />
-            </ListItem>
-          )} */}
+          <ListItem button onClick={() => setIsDrawerOpen(false)}>
+            <ListItemText
+              primary={
+                <Typography sx={{ color: '#8B5CF6', textAlign: 'center', fontSize: '1.25rem', fontWeight: 600, fontFamily: '"Space Mono", monospace' }}>
+                  Contact Us
+                </Typography>
+              }
+            />
+          </ListItem>
         </List>
       </Drawer>
     </div>
diff --git a/frontend/src/images/cses-logo-white.png b/frontend/src/images/cses-logo-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..20e9e9375eb833ef0c8ff4a8076eeb09065a3dca
GIT binary patch
literal 7892
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

literal 0
HcmV?d00001

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 92553ef4..9723b2ad 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,7 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
+
 body,
 html {
   margin: 0;
-  font-family: Inter, Chakra Petch, sans-serif;
+  font-family: 'Space Mono', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color:#020f5d;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 70da3f2b..36028fa0 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,28 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { GoogleOAuthProvider } from '@react-oauth/google';
-import { AuthProvider } from './context/AuthContext';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-const clientId = process.env.REACT_APP_GOOGLE_CLIENT_ID!;
-
-if(!clientId){
-  throw new Error("Client ID not found. Did you set up the enviornment files?");
-}
 
 root.render(
   <React.StrictMode>
-    <GoogleOAuthProvider clientId={clientId}>
-      <AuthProvider>
-        <App />
-      </AuthProvider>
-    </GoogleOAuthProvider>
+    <App />
   </React.StrictMode>,
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();