From 0a320c0e1216b4f1608c6ca771d6abb048f32e34 Mon Sep 17 00:00:00 2001 From: Dang Nguyen Nguyen <93059380+NwinNwin@users.noreply.github.com> Date: Tue, 28 May 2024 14:20:14 -0700 Subject: [PATCH 1/7] working on dark mode --- packages/web/src/App.jsx | 25 +- packages/web/src/components/Home/Home.jsx | 859 +++++++++--------- packages/web/src/components/Map/Map.jsx | 5 +- .../src/components/ResultCard/ResultCard.jsx | 21 +- packages/web/src/index.jsx | 29 +- packages/web/src/theme.js | 12 + 6 files changed, 498 insertions(+), 453 deletions(-) create mode 100644 packages/web/src/theme.js diff --git a/packages/web/src/App.jsx b/packages/web/src/App.jsx index b4c18e8..3eea2e7 100644 --- 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 ( - - -
- - } /> - } /> - } /> - } /> - } /> - } /> - -
- - +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
); } diff --git a/packages/web/src/components/Home/Home.jsx b/packages/web/src/components/Home/Home.jsx index 9f8bead..7473de1 100644 --- a/packages/web/src/components/Home/Home.jsx +++ b/packages/web/src/components/Home/Home.jsx @@ -32,8 +32,10 @@ import { Alert, AlertIcon, AlertTitle, + useColorMode, + InputLeftElement, } from "@chakra-ui/react"; -import { SettingsIcon, StarIcon } from "@chakra-ui/icons"; +import { SettingsIcon, StarIcon, Search2Icon } from "@chakra-ui/icons"; import upload from "../../assets/images/download.png"; import logout from "../../assets/logos/logout.svg"; @@ -57,6 +59,7 @@ import ListItemButton from "./ListItemButton"; import { MdAssignment } from "react-icons/md"; export default function Home() { + const { colorMode, toggleColorMode } = useColorMode(); const [search, setSearch] = useState(""); const [data, setData] = useState([]); const [leaderboard, setLeaderboard] = useState([]); @@ -317,180 +320,429 @@ export default function Home() { onLoginModalOpen: onLoginModalOpen, }} > - - {/* LOGO + TEXT */} - - - {/* SEARCH BAR */} - - + + {/* SEARCH BAR */} + - - setSearch(e.target.value)} - /> - - + {/* size={{ base: "md", md: "lg" }} */} + + + + + setSearch(e.target.value)} + /> + + + + + + {user ? ( + <> + + + + {user + ? leaderboard.find((u) => u.email === user.email)?.points + : 0} + + + + + + + + {/* User Emblem Dropdown */} + + + logoutbutton + {user?.email} + + { + setFindFilter((prev) => ({ + ...prev, + isYourPosts: !prev.isYourPosts, + })); + onOpen(); + }} + > + logoutbutton + Your Posts + + + + {subscription ? ( + <> + Unsubscribe from newsletter button + Unsubscribe + + ) : ( + <> + Subscribe from newsletter button + Subscribe + + )} + + + + logoutbutton + Logout + + + + + ) : ( + + )} + + + + + + + {/* Mobile Search */} - - {user ? ( - <> - - + + + + Click on the Map to place your item 📍 + + + + ) : ( + + + + + + + - - {user - ? leaderboard.find((u) => u.email === user.email)?.points - : 0} - - - - - - + + - {/* User Emblem Dropdown */} - - - logoutbutton - {user?.email} - - { - setFindFilter((prev) => ({ - ...prev, - isYourPosts: !prev.isYourPosts, - })); - onOpen(); - }} - > - logoutbutton - Your Posts - - - - {subscription ? ( - <> - Unsubscribe from newsletter button - Unsubscribe - - ) : ( - <> - Subscribe from newsletter button + + + + + {isFilterOff() ? ( + All Posts + ) : ( + + + Filter: ON + + + + )} + + + + + + + setSearch(e.target.value)} + /> + + + + + + - Subscribe - - )} - - - - logoutbutton - Logout - - - - - ) : ( - - )} + + + + + + + )} + - + + + + + + + + - + - - - {/* Mobile Search */} - - - - - setSearch(e.target.value)} + {!loading && ( + + - - - - - - {/* */} - - {isEdit ? ( - - - - Click on the Map to place your item 📍 - - - ) : ( - - - - - - - - - - - - - - - - {isFilterOff() ? ( - All Posts - ) : ( - - - Filter: ON - - - - )} - - - - - - - setSearch(e.target.value)} - /> - - - - - - - - - - - - - )} - - - - - - - - - - - - - - {!loading && ( - - - - )} - - + + )} + + + ); } diff --git a/packages/web/src/components/Map/Map.jsx b/packages/web/src/components/Map/Map.jsx index 71063a6..97a182a 100644 --- a/packages/web/src/components/Map/Map.jsx +++ b/packages/web/src/components/Map/Map.jsx @@ -33,7 +33,7 @@ import { UserAuth } from "../../context/AuthContext"; import axios from "axios"; -import { filterItem } from '../../utils/Utils.js'; +import { filterItem } from "../../utils/Utils.js"; /** * Map is uses react-leaflet's API to communicate user actions to map entities and information @@ -331,7 +331,6 @@ export default function Map({
{/* Styles applied to MapContainer don't render unless page is reloaded */} {!isEdit && ( diff --git a/packages/web/src/components/ResultCard/ResultCard.jsx b/packages/web/src/components/ResultCard/ResultCard.jsx index c62f07c..6078c38 100644 --- a/packages/web/src/components/ResultCard/ResultCard.jsx +++ b/packages/web/src/components/ResultCard/ResultCard.jsx @@ -11,6 +11,7 @@ import { Button, Flex, useDisclosure, + useColorMode, } from "@chakra-ui/react"; import { InfoIcon } from "@chakra-ui/icons"; import InfoModal from "../InfoModal/InfoModal.jsx"; @@ -19,6 +20,7 @@ import locate from "../../assets/logos/locate.svg"; const ResultCard = React.memo( ({ props, setData, onResultsBarClose, setLeaderboard }) => { + const { colorMode } = useColorMode(); const infoModalDisclosure = useDisclosure(); const { id } = useParams(); @@ -59,9 +61,9 @@ const ResultCard = React.memo( return ( <> - + {props.name} - + {formattedDate} @@ -109,8 +118,8 @@ const ResultCard = React.memo( ); @@ -54,16 +55,16 @@ const ResultCard = React.memo( gap={1} onClick={onResultsBarClose} > - + Found ); return ( <> {props.name} {formattedDate} @@ -118,7 +119,7 @@ const ResultCard = React.memo(