header fixed + colors fixed

hack4impact-upenn · Nov 19, 2024 · be2ea8b · be2ea8b
1 parent 271d42c
commit be2ea8b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 41 deletions.
diff --git a/client/public/logo.png b/client/public/logo.png
diff --git a/client/src/Landing/Landing.tsx b/client/src/Landing/Landing.tsx
@@ -1,16 +1,28 @@
 import React from 'react';
 import { Button } from '@mui/material';
-import { StateAbbreviation, StateConfig } from '../util/types/map';
 import LandingMap from './LandingMap';
 import LandingHeader from './LandingHeader';
 
 export default function Landing() {
   return (
     <div style={{ position: 'relative' }}>
       <LandingHeader />
-      <Button variant="contained" sx={{ backgroundColor: '#FF3F7F' }}>
-        CHAPTER LOGIN
-      </Button>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Button
+          variant="contained"
+          sx={{
+            backgroundColor: '#f28f8a',
+            width: '200px',
+            height: '50px',
+            fontSize: '17px',
+            '&:hover': {
+              backgroundColor: '#ff3f73',
+            },
+          }}
+        >
+          CHAPTER LOGIN
+        </Button>
+      </div>
       <LandingMap />
     </div>
   );

diff --git a/client/src/Landing/LandingHeader.tsx b/client/src/Landing/LandingHeader.tsx
@@ -2,40 +2,24 @@ import React from 'react';
 
 export default function LandingHeader() {
   return (
-    <div style={{ paddingLeft: '40px' }}>
-      <div style={{ textAlign: 'left', marginBottom: '2rem' }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem',
-            marginBottom: '1rem',
-          }}
-        >
-          <span style={{ color: '#2dd4bf', fontWeight: '500' }}>Box</span>
-          <span style={{ color: '#9ca3af' }}>of</span>
-          <span style={{ color: '#f472b6', fontWeight: '500' }}>Balloons</span>
-        </div>
-        <h1
-          style={{
-            fontSize: '1.875rem',
-            fontWeight: '700',
-            color: '#1f2937',
-            marginBottom: '0.75rem',
-          }}
-        >
-          Welcome!
-        </h1>
-        <p
-          style={{
-            color: '#14b8a6',
-            fontWeight: '500',
-            marginBottom: '1rem',
-          }}
-        >
-          Click on your state below to connect with a local chapter in your
-          area!
-        </p>
+    <div style={{ padding: '25px 0px 25px 40px' }}>
+      <img src="/logo.png" alt="logo" width="200px" />
+      <div
+        style={{
+          fontSize: '35px',
+          fontWeight: 500,
+        }}
+      >
+        Welcome!
+      </div>
+      <div
+        style={{
+          fontSize: '20px',
+          color: '#14b8a6',
+          fontWeight: '500',
+        }}
+      >
+        Click on your state below to connect with a local chapter in your area!
       </div>
     </div>
   );

diff --git a/client/src/Landing/LandingMap.tsx b/client/src/Landing/LandingMap.tsx
@@ -48,12 +48,23 @@ export default function LandingMap() {
     fetchChapters();
   }, []);
 
+  const colors = ['#f28f8a', '#FEE761', '#54c2b9']; // Add your desired colors
+
+  const getAlternatingColor = (state: StateAbbreviation) => {
+    if (!availableStates.has(state)) {
+      return '#eaeaea';
+    }
+    // Calculate the index for the color array based on the state's position
+    const stateIndex = Array.from(availableStates).indexOf(state);
+    return colors[stateIndex % colors.length]; // Cycle through colors
+  };
+
   const statesCustomConfig = () => {
     const statesConfig: Record<string, any> = {};
 
     getStateKeys(STATES).forEach((state) => {
       statesConfig[state] = {
-        fill: availableStates.has(state) ? '#4EC2BA' : '#D3D3D3',
+        fill: getAlternatingColor(state),
         clickHandler: availableStates.has(state)
           ? async () => {
               setChosenState(state);
@@ -77,7 +88,7 @@ export default function LandingMap() {
       direction="column"
       alignItems="center"
       justifyContent="center"
-      sx={{ minHeight: '100vh' }}
+      sx={{ minHeight: '80vh' }}
     >
       <Grid item xs={3}>
         <USAMap customize={statesCustomConfig()} />
@@ -148,10 +159,16 @@ export default function LandingMap() {
                           <Button
                             variant="contained"
                             sx={{
-                              backgroundColor: '#F2F2F2',
+                              backgroundColor:
+                                chosenChapter === chapter.id
+                                  ? '#FEE761'
+                                  : '#F2F2F2',
                               color: 'black',
                               width: '100%',
                               borderRadius: '20px',
+                              '&:hover': {
+                                backgroundColor: '#FEE761',
+                              },
                             }}
                             onClick={() => displayForm(chapter.id)}
                           >