From dc9ab373996468e1a7c95d8f56bdd1d30a711dfc Mon Sep 17 00:00:00 2001 From: Sem Bauke Date: Sat, 27 Jan 2024 16:02:37 +0100 Subject: [PATCH] feat: darkmode (#412) Co-authored-by: sidemt <25644062+sidemt@users.noreply.github.com> --- .../frontend/src/components/editor-drawer.jsx | 3 -- apps/frontend/src/components/nav-menu.jsx | 38 ++++++++++--- .../frontend/src/components/schedule-menu.jsx | 5 -- apps/frontend/src/components/tiptap.jsx | 1 - apps/frontend/src/lib/theme.js | 10 ++++ apps/frontend/src/pages/_document.js | 3 ++ apps/frontend/src/pages/index.js | 10 ++-- apps/frontend/src/pages/posts/index.js | 53 +++++++++++++++---- apps/frontend/src/pages/tags/[id].js | 10 ++-- apps/frontend/src/pages/tags/index.js | 25 +++++---- apps/frontend/src/pages/tags/new.js | 11 ++-- apps/frontend/src/pages/users/[id].js | 11 ++-- apps/frontend/src/pages/users/index.js | 13 +++-- 13 files changed, 140 insertions(+), 53 deletions(-) create mode 100644 apps/frontend/src/lib/theme.js diff --git a/apps/frontend/src/components/editor-drawer.jsx b/apps/frontend/src/components/editor-drawer.jsx index 153d69373..8739d6089 100644 --- a/apps/frontend/src/components/editor-drawer.jsx +++ b/apps/frontend/src/components/editor-drawer.jsx @@ -223,7 +223,6 @@ const EditorDrawer = ({ w="100%" h="175px" overflow="hidden" - bg="#f1f5f9" justifyContent="center" alignItems="center" > @@ -311,7 +310,6 @@ const EditorDrawer = ({ { + const color = useColorModeValue("gray.800", "white"); + const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.700"); + return ( @@ -57,13 +64,19 @@ const NavMenuLink = ({ text, link, icon }) => { }; const NavMenuContent = ({ user, onClose, ...rest }) => { + const { colorMode, toggleColorMode } = useColorMode(); + + const bg = useColorModeValue("white", "gray.800"); + const color = useColorModeValue("gray.800", "white"); + const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.700"); + return ( @@ -116,15 +129,16 @@ const NavMenuContent = ({ user, onClose, ...rest }) => { } - bgColor="white" w="100%" mt={3} mb={6} _hover={{ - bgColor: "rgb(243, 244, 246)", + bgColor: hoverBgColor, + color: color, }} _active={{ - bgColor: "rgb(243, 244, 246)", + bgColor: hoverBgColor, + color: color, }} > @@ -138,7 +152,6 @@ const NavMenuContent = ({ user, onClose, ...rest }) => { fontWeight="400" lineHeight="1.1em" pb="3px" - color="#54666d" > {user.email} @@ -146,6 +159,17 @@ const NavMenuContent = ({ user, onClose, ...rest }) => { + + } + onClick={toggleColorMode} + > + {colorMode === "light" ? "Dark Mode" : "Light Mode"} + } as={NextLink} diff --git a/apps/frontend/src/components/schedule-menu.jsx b/apps/frontend/src/components/schedule-menu.jsx index ec24a44ad..62d72d081 100644 --- a/apps/frontend/src/components/schedule-menu.jsx +++ b/apps/frontend/src/components/schedule-menu.jsx @@ -111,7 +111,6 @@ const PublishedMenu = ({ > setScheduleOption("unpublished")} > @@ -131,7 +130,6 @@ const PublishedMenu = ({ > setScheduleOption("now")} > @@ -217,7 +215,6 @@ const NotPublishedMenu = ({ > { if (isScheduled) { @@ -243,7 +240,6 @@ const NotPublishedMenu = ({ > setScheduleOption("later")} > @@ -264,7 +260,6 @@ const NotPublishedMenu = ({ diff --git a/apps/frontend/src/pages/posts/index.js b/apps/frontend/src/pages/posts/index.js index c9ed8ca97..779355b2c 100644 --- a/apps/frontend/src/pages/posts/index.js +++ b/apps/frontend/src/pages/posts/index.js @@ -23,6 +23,7 @@ import { Tr, chakra, useToast, + useColorModeValue, } from "@chakra-ui/react"; import { AutoComplete, @@ -208,6 +209,12 @@ export default function IndexPage({ const router = useRouter(); const toast = useToast(); + const bg = useColorModeValue("gray.200", "gray.700"); + const filterButton = useColorModeValue("white", "gray.600"); + const tableHeader = useColorModeValue("gray.100", "gray.600"); + const tableBody = useColorModeValue("white", "gray.700"); + const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.600"); + const [searchedTags, setSearchedTags] = useState([]); const [hasSearchedTags, setHasSearchedTags] = useState( queryParams?.tags ? true : false, @@ -354,16 +361,15 @@ export default function IndexPage({ }; return ( - + - Posts @@ -385,7 +391,14 @@ export default function IndexPage({ {isEditor(user) && ( <> - + handleShallowFilter("author", event.target.value) } + _focus={{ + bgColor: "white", + color: "black", + }} /> { handleShallowFilter("tags", event.target.value); }} + _focus={{ + bgColor: "white", + color: "black", + }} /> - + - + - + {posts.data.map((post) => { const title = post.attributes.title; const name = post.attributes.author.data.attributes.name; @@ -539,7 +567,7 @@ export default function IndexPage({ display="table-row" key={post.id} _hover={{ - bgColor: "rgb(243, 244, 246)", + bgColor: hoverBgColor, }} position="relative" > @@ -610,6 +638,11 @@ export default function IndexPage({ + @@ -152,7 +156,7 @@ export default function EditTag({ tag, user }) { minH="20" position={{ md: "sticky" }} top="0" - bgColor="gray.200" + bgColor={bg} zIndex="999" > }> @@ -169,7 +173,7 @@ export default function EditTag({ tag, user }) { - + { + const tableBody = useColorModeValue("white", "gray.700"); + const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.600"); + return ( - + {tags.map((tag) => { const name = tag.attributes.name; const slug = tag.attributes.slug; @@ -63,7 +67,7 @@ const TagsTableBody = (tags, router) => { key={tag.id} cursor="pointer" _hover={{ - bgColor: "rgb(243, 244, 246)", + bgColor: hoverBgColor, }} onClick={() => router.push(`/tags/${tag.id}`)} > @@ -91,23 +95,23 @@ const TagsTableBody = (tags, router) => { const TagFilterButton = ({ tagType, ...radioProps }) => { const { getInputProps, getRadioProps } = useRadio(radioProps); + const hoverBgColor = useColorModeValue("rgb(243, 244, 246)", "gray.600"); + const activeBgColor = useColorModeValue("white", "gray.500"); return (
Title @@ -518,7 +546,7 @@ export default function IndexPage({
- +
Tag diff --git a/apps/frontend/src/pages/tags/new.js b/apps/frontend/src/pages/tags/new.js index f5d33da20..5aa05245a 100644 --- a/apps/frontend/src/pages/tags/new.js +++ b/apps/frontend/src/pages/tags/new.js @@ -13,6 +13,7 @@ import { Input, chakra, useToast, + useColorModeValue, } from "@chakra-ui/react"; import { faChevronRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -30,6 +31,10 @@ const Icon = chakra(FontAwesomeIcon); export default function CreateTag() { const router = useRouter(); const toast = useToast(); + + const bg = useColorModeValue("gray.200", "gray.700"); + const container = useColorModeValue("white", "gray.800"); + const { data: session } = useSession(); const user = session?.user; @@ -119,16 +124,14 @@ export default function CreateTag() { if (session) { return ( - + - }> @@ -145,7 +148,7 @@ export default function CreateTag() { - + + @@ -172,7 +177,7 @@ export default function EditTag({ userData, user, roles }) { minH="20" position={{ md: "sticky" }} top="0" - bgColor="gray.200" + bgColor={bg} zIndex="999" > }> @@ -189,7 +194,7 @@ export default function EditTag({ userData, user, roles }) { - + + @@ -165,10 +168,10 @@ export default function UsersIndex({ activeUsers, invitedUsers, roles, user }) { minH="20" position={{ md: "sticky" }} top="0" - bgColor="gray.200" + bgColor={bg} zIndex="999" > - Staff users + Staff Users