Merge pull request #36 from icssc/better-map

Dark Mode
icssc · Jun 6, 2024 · 6e67e06 · 6e67e06
2 parents bb27d2c + d2d77ac
commit 6e67e06
Show file tree

Hide file tree

Showing 19 changed files with 768 additions and 607 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -58,6 +58,8 @@ jobs:
           VITE_REACT_APP_APP_ID: ${{  secrets.VITE_REACT_APP_APP_ID }}
           VITE_REACT_APP_MEASUREMENT_ID: ${{  secrets.VITE_REACT_APP_MEASUREMENT_ID }}
           VITE_REACT_APP_AWS_BACKEND_URL: ${{  secrets.VITE_REACT_APP_AWS_BACKEND_URL }}
+          VITE_REACT_APP_MAPBOX_DARK_URL: ${{  secrets.VITE_REACT_APP_MAPBOX_DARK_URL }}
+          VITE_REACT_APP_MAPBOX_LIGHT_URL: ${{  secrets.VITE_REACT_APP_MAPBOX_LIGHT_URL }}
           EMAIL: ${{  secrets.EMAIL }}
           REFRESH_TOKEN: ${{  secrets.REFRESH_TOKEN }}
           CLIENT_SECRET: ${{  secrets.CLIENT_SECRET }}
@@ -71,4 +73,3 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           NODE_ENV: ${{ github.event_name == 'pull_request' && 'staging' || 'production' }}
-
diff --git a/packages/web/src/App.jsx b/packages/web/src/App.jsx
@@ -7,7 +7,6 @@ import Home from "./components/Home/Home";
 import UpdatePage from "./components/UpdatePage/UpdatePage";
 import Playground from "./components/Playground/Playground";
 
-import { ChakraProvider } from "@chakra-ui/react";
 import "leaflet/dist/leaflet.css";
 import { AuthContextProvider } from "./context/AuthContext";
 import AboutPage from "./components/AboutPage/AboutPage";
@@ -25,20 +24,16 @@ function App() {
   }, []);
 
   return (
-    <AuthContextProvider>
-      <ChakraProvider>
-        <div className="App">
-          <Routes>
-            <Route path="/update" element={<UpdatePage />} />
-            <Route path="/about" element={<AboutPage />} />
-            <Route path="/" element={<Home />} />
-            <Route path="/:id" element={<Home />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/playground" element={<Playground />} />
-          </Routes>
-        </div>
-      </ChakraProvider>
-    </AuthContextProvider>
+    <div className="App">
+      <Routes>
+        <Route path="/update" element={<UpdatePage />} />
+        <Route path="/about" element={<AboutPage />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/:id" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/playground" element={<Playground />} />
+      </Routes>
+    </div>
   );
 }
 

diff --git a/packages/web/src/assets/logos/locate_dark.svg b/packages/web/src/assets/logos/locate_dark.svg
diff --git a/packages/web/src/components/CreateModal/Calendar.css b/packages/web/src/components/CreateModal/Calendar.css
@@ -1,144 +1,142 @@
 .react-calendar {
-    width:  100%;
-    max-width: 100%;
-    background: white;
-    border: 1px solid #a0a096;
-    font-family: Arial, Helvetica, sans-serif;
-    line-height: 1.125em;
-  }
-
-  .react-calendar--doubleView {
-    width: 100%;
-  }
-
-  .react-calendar--doubleView .react-calendar__viewContainer {
-    display: flex;
-    margin: -0.5em;
-  }
-
-  .react-calendar--doubleView .react-calendar__viewContainer > * {
-    width: 50%;
-    margin: 0.5em;
-  }
-
-  .react-calendar,
-  .react-calendar *,
-  .react-calendar *:before,
-  .react-calendar *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  .react-calendar button {
-    margin: 0;
-    border: 0;
-    outline: none;
-  }
-
-  .react-calendar button:enabled:hover {
-    cursor: pointer;
-  }
-
-  .react-calendar__navigation {
-    display: flex;
-    height: 44px;
-    margin-bottom: 1em;
-  }
-
-  .react-calendar__navigation button {
-    min-width: 44px;
-    background: none;
-  }
-
-  .react-calendar__navigation button:disabled {
-    background-color: #f0f0f0;
-  }
-
-  .react-calendar__navigation button:enabled:hover,
-  .react-calendar__navigation button:enabled:focus {
-    background-color: #e6e6e6;
-  }
-
-  .react-calendar__month-view__weekdays {
-    text-align: center;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-size: 0.75em;
-  }
-
-  .react-calendar__month-view__weekdays__weekday {
-    padding: 0.5em;
-  }
-
-  .react-calendar__month-view__weekNumbers .react-calendar__tile {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75em;
-    font-weight: bold;
-  }
-
-  .react-calendar__month-view__days__day--weekend {
-    color: #d10000;
-  }
-
-  .react-calendar__month-view__days__day--neighboringMonth {
-    color: #757575;
-  }
-
-  .react-calendar__year-view .react-calendar__tile,
-  .react-calendar__decade-view .react-calendar__tile,
-  .react-calendar__century-view .react-calendar__tile {
-    padding: 2em 0.5em;
-  }
-
-  .react-calendar__tile {
-    max-width: 100%;
-    padding: 10px 6.6667px;
-    background: none;
-    text-align: center;
-    line-height: 16px;
-  }
-
-  .react-calendar__tile:disabled {
-    background-color: #f0f0f0;
-  }
-
-  .react-calendar__tile:enabled:hover,
-  .react-calendar__tile:enabled:focus {
-    background-color: #accdee;
-  }
-
-  /* .react-calendar__tile--now {
+  width: 100%;
+  max-width: 100%;
+  border: 1px solid #a0a096;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+  width: 100%;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.75em;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth {
+  color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  line-height: 16px;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #accdee;
+}
+
+/* .react-calendar__tile--now {
     background: #accdee;
   } */
-  
-  /* .react-calendar__tile--now:enabled:hover,
+
+/* .react-calendar__tile--now:enabled:hover,
   .react-calendar__tile--now:enabled:focus {
     background: #accdee;
   } */
-
-  .react-calendar__tile--hasActive {
-    background: #76baff;
-  }
-
-  .react-calendar__tile--hasActive:enabled:hover,
-  .react-calendar__tile--hasActive:enabled:focus {
-    background: #a9d4ff;
-  }
-
-  .react-calendar__tile--active {
-    background: #006edc;
-    color: white;
-  }
-
-  .react-calendar__tile--active:enabled:hover,
-  .react-calendar__tile--active:enabled:focus {
-    background: #1087ff;
-  }
-
-  .react-calendar--selectRange .react-calendar__tile--hover {
-    background-color: #e6e6e6;
-  }
-
+
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
+}
diff --git a/packages/web/src/components/CreateModal/CreateModal.jsx b/packages/web/src/components/CreateModal/CreateModal.jsx
@@ -25,6 +25,7 @@ import {
   ModalCloseButton,
   Textarea,
   Spinner,
+  useColorMode,
 } from "@chakra-ui/react";
 // import logo from "../../assets/images/small_logo.png";
 import { storage } from "../../firebase";
@@ -55,6 +56,7 @@ export default function CreateModal({
   upload,
 }) {
   const [isLoading, setIsLoading] = useState(false);
+  const { colorMode } = useColorMode();
 
   const uploadFile = useCallback(async () => {
     if (!newAddedItem.image) return;
@@ -516,7 +518,9 @@ export default function CreateModal({
 
                     <Flex
                       flex={1}
-                      backgroundColor={"#f9f9f9"}
+                      backgroundColor={
+                        colorMode === "light" ? "#f9f9f9" : "#2c2c2c"
+                      }
                       flexDir={"column"}
                       borderRadius={"10%"}
                       padding={"1vw"}

diff --git a/packages/web/src/components/Filter/Filter.jsx b/packages/web/src/components/Filter/Filter.jsx
@@ -16,6 +16,7 @@ import {
   DrawerOverlay,
   DrawerContent,
   Button,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import "./Filter.css";
 import { UserAuth } from "../../context/AuthContext";
@@ -77,9 +78,14 @@ export default function Filter({ findFilter, setFindFilter, onClose, isOpen }) {
     onClose();
   }, []);
 
+  const placement = useBreakpointValue({
+    base: "right",
+    md: "left",
+  });
+
   return (
     <>
-      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
+      <Drawer isOpen={isOpen} placement={placement} onClose={onClose}>
         <DrawerOverlay />
         <DrawerContent>
           <DrawerHeader fontSize="4xl">Filter Markers</DrawerHeader>