diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index 52e9e15..9627e89 100644 --- 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 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/assets/logos/locate_dark.svg b/packages/web/src/assets/logos/locate_dark.svg new file mode 100644 index 0000000..b98a2f5 --- /dev/null +++ b/packages/web/src/assets/logos/locate_dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/components/CreateModal/Calendar.css b/packages/web/src/components/CreateModal/Calendar.css index d4db3d2..8389a96 100644 --- 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; - } - \ No newline at end of file + +.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 index 821446d..0b3e130 100644 --- 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({ - + Filter Markers diff --git a/packages/web/src/components/Home/DateRangeFilter.jsx b/packages/web/src/components/Home/DateRangeFilter.jsx index f9c9515..799b398 100644 --- a/packages/web/src/components/Home/DateRangeFilter.jsx +++ b/packages/web/src/components/Home/DateRangeFilter.jsx @@ -1,4 +1,11 @@ -import { Button, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react"; +import { + Button, + Menu, + MenuButton, + MenuList, + MenuItem, + useColorMode, +} from "@chakra-ui/react"; import { useState, useContext } from "react"; import { ChevronDownIcon } from "@chakra-ui/icons"; import DataContext from "../../context/DataContext"; @@ -12,6 +19,7 @@ import { } from "../../utils/HomeUtils"; export default function DateRangeFilter() { + const { colorMode } = useColorMode(); const [DateRangeFilter, setDateRangeFilter] = useState("Date Range"); const { setLoading, setData } = useContext(DataContext); @@ -20,7 +28,7 @@ export default function DateRangeFilter() { } - backgroundColor="white" + backgroundColor={colorMode === "light" ? "white" : "#2F363C"} size="lg" fontSize={{ base: "xl", md: "2xl" }} borderWidth={2} diff --git a/packages/web/src/components/Home/FeedbackButtonMobile.jsx b/packages/web/src/components/Home/FeedbackButtonMobile.jsx new file mode 100644 index 0000000..d3391ab --- /dev/null +++ b/packages/web/src/components/Home/FeedbackButtonMobile.jsx @@ -0,0 +1,50 @@ +import { Flex, Text } from "@chakra-ui/react"; +import { CloseIcon } from "@chakra-ui/icons"; +import { useState } from "react"; +export default function FeedbackButtonMobile() { + const [isOpen, setIsOpen] = useState(true); + return ( + <> + {isOpen && ( + + { + setIsOpen(false); + }} + /> + { + window.open("https://forms.gle/Uud594N7QE6VbiDY6", "_blank"); + }} + > + Give Feedback + + + )} + + ); +} diff --git a/packages/web/src/components/Home/Home.jsx b/packages/web/src/components/Home/Home.jsx index 9f8bead..c0b55e3 100644 --- a/packages/web/src/components/Home/Home.jsx +++ b/packages/web/src/components/Home/Home.jsx @@ -4,7 +4,7 @@ import axios from "axios"; import { UserAuth } from "../../context/AuthContext"; import DataContext from "../../context/DataContext"; -import { Spinner, useToast } from "@chakra-ui/react"; +import { Spinner, color, useToast } from "@chakra-ui/react"; import { Input, @@ -32,8 +32,17 @@ import { Alert, AlertIcon, AlertTitle, + useColorMode, + InputLeftElement, } from "@chakra-ui/react"; -import { SettingsIcon, StarIcon } from "@chakra-ui/icons"; +import { + SettingsIcon, + StarIcon, + Search2Icon, + MoonIcon, + SunIcon, + CloseIcon, +} from "@chakra-ui/icons"; import upload from "../../assets/images/download.png"; import logout from "../../assets/logos/logout.svg"; @@ -53,10 +62,12 @@ import Leaderboard from "./Leaderboard"; import ZotNFoundLogoText from "./ZotNFoundLogoText"; import DateRangeFilter from "./DateRangeFilter"; import ListItemButton from "./ListItemButton"; +import FeedbackButtonMobile from "./FeedbackButtonMobile"; 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 +328,448 @@ 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/Home/ZotNFoundLogoText.jsx b/packages/web/src/components/Home/ZotNFoundLogoText.jsx index 25f4153..b562676 100644 --- a/packages/web/src/components/Home/ZotNFoundLogoText.jsx +++ b/packages/web/src/components/Home/ZotNFoundLogoText.jsx @@ -6,6 +6,7 @@ import { MenuButton, MenuList, MenuItem, + useColorMode, } from "@chakra-ui/react"; import { useState } from "react"; @@ -41,7 +42,7 @@ export default function ZotNFoundLogoText() { size={{ base: "4xl", md: "4xl" }} ml="3%" fontSize={{ base: "xl", md: "4xl" }} - background="white" + background="none" justifyContent="center" alignItems="center" padding={2} diff --git a/packages/web/src/components/InfoModal/InfoModal.jsx b/packages/web/src/components/InfoModal/InfoModal.jsx index a0e67b1..a194fc3 100644 --- a/packages/web/src/components/InfoModal/InfoModal.jsx +++ b/packages/web/src/components/InfoModal/InfoModal.jsx @@ -11,6 +11,7 @@ import { Flex, Tag, useDisclosure, + useColorMode, } from "@chakra-ui/react"; import { formatDate } from "../../utils/DateUtils"; import { UserAuth } from "../../context/AuthContext"; @@ -28,6 +29,7 @@ export default function InfoModal({ props, setLeaderboard, }) { + const { colorMode } = useColorMode(); const [showEmail, setShowEmail] = useState(false); const [itemEmail, setItemEmail] = useState(""); const [isShared, setIsShared] = useState(false); @@ -153,7 +155,7 @@ export default function InfoModal({ { useMapEvents({ click(event) { @@ -331,7 +337,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..03def50 100644 --- a/packages/web/src/components/ResultCard/ResultCard.jsx +++ b/packages/web/src/components/ResultCard/ResultCard.jsx @@ -11,14 +11,17 @@ import { Button, Flex, useDisclosure, + useColorMode, } from "@chakra-ui/react"; import { InfoIcon } from "@chakra-ui/icons"; import InfoModal from "../InfoModal/InfoModal.jsx"; import { formatDate } from "../../utils/DateUtils.js"; import locate from "../../assets/logos/locate.svg"; +import locate_dark from "../../assets/logos/locate_dark.svg"; const ResultCard = React.memo( ({ props, setData, onResultsBarClose, setLeaderboard }) => { + const { colorMode } = useColorMode(); const infoModalDisclosure = useDisclosure(); const { id } = useParams(); @@ -37,7 +40,7 @@ const ResultCard = React.memo( gap={1} onClick={onResultsBarClose} > - + Lost ); @@ -52,16 +55,16 @@ const ResultCard = React.memo( gap={1} onClick={onResultsBarClose} > - + Found ); return ( <> - + {props.name} - + {formattedDate} @@ -109,8 +119,8 @@ const ResultCard = React.memo(