From 661b554a9878c0a0c4bec8b76a1a1e425e9e6ef4 Mon Sep 17 00:00:00 2001 From: Qortal Seth Date: Tue, 16 Apr 2024 17:35:28 -0600 Subject: [PATCH] Lightmode support --- src/components/EditIssue/EditIssue.tsx | 18 +++-- src/components/EditIssue/Upload-styles.tsx | 30 ++++---- src/components/PublishIssue/PublishIssue.tsx | 12 +++- src/components/PublishIssue/Upload-styles.tsx | 2 +- .../BlockedNamesModal/BlockedNamesModal.tsx | 18 ++--- .../ImagePublisher/ImagePublisher-styles.tsx | 6 +- src/components/layout/Navbar/Navbar.tsx | 17 +++++ src/pages/Home/Home-styles.tsx | 68 +++++++++++-------- src/pages/Home/Home.tsx | 23 +++---- src/styles/theme.tsx | 4 +- 10 files changed, 121 insertions(+), 77 deletions(-) diff --git a/src/components/EditIssue/EditIssue.tsx b/src/components/EditIssue/EditIssue.tsx index 0b137ef..cd6c556 100644 --- a/src/components/EditIssue/EditIssue.tsx +++ b/src/components/EditIssue/EditIssue.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from "react"; import { - CrowdfundActionButton, + ActionButton, CrowdfundActionButtonRow, CustomInputField, ModalBody, @@ -36,6 +36,7 @@ import { ImagePublisher, ImagePublisherRef, } from "../common/ImagePublisher/ImagePublisher.tsx"; +import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx"; const uid = new ShortUniqueId(); const shortuid = new ShortUniqueId({ length: 5 }); @@ -448,15 +449,16 @@ export const EditIssue = () => { - { onClose(); }} variant="contained" color="error" + sx={{ color: theme.palette.text.primary }} > Cancel - + { alignItems: "center", }} > - { publishQDNResource(); }} + sx={{ + fontFamily: "Montserrat", + fontSize: "16px", + fontWeight: 400, + letterSpacing: "0.2px", + }} > Publish - + diff --git a/src/components/EditIssue/Upload-styles.tsx b/src/components/EditIssue/Upload-styles.tsx index b1b8813..e295668 100644 --- a/src/components/EditIssue/Upload-styles.tsx +++ b/src/components/EditIssue/Upload-styles.tsx @@ -7,9 +7,9 @@ import { Button, Grid, Rating, + Select, TextField, Typography, - Select } from "@mui/material"; import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate"; import { TimesSVG } from "../../assets/svgs/TimesSVG"; @@ -159,8 +159,6 @@ export const CustomInputField = styled(TextField)(({ theme }) => ({ }, })); - - export const CrowdfundTitle = styled(Typography)(({ theme }) => ({ fontFamily: "Copse", letterSpacing: "1px", @@ -473,11 +471,11 @@ export const CrowdfundActionButtonRow = styled(Box)({ width: "100%", }); -export const CrowdfundActionButton = styled(Button)(({ theme }) => ({ +export const ActionButton = styled(Button)(({ theme }) => ({ display: "flex", alignItems: "center", fontFamily: "Montserrat", - fontSize: "16px", + fontSize: "18px", fontWeight: 400, letterSpacing: "0.2px", color: "white", @@ -539,8 +537,8 @@ export const NoReviewsFont = styled(Typography)(({ theme }) => ({ export const StyledButton = styled(Button)(({ theme }) => ({ fontWeight: 600, - color: theme.palette.text.primary -})) + color: theme.palette.text.primary, +})); export const CustomSelect = styled(Select)(({ theme }) => ({ fontFamily: "Mulish", @@ -549,34 +547,34 @@ export const CustomSelect = styled(Select)(({ theme }) => ({ fontWeight: 400, color: theme.palette.text.primary, backgroundColor: theme.palette.background.default, - '& .MuiSelect-select': { - padding: '12px', + "& .MuiSelect-select": { + padding: "12px", fontFamily: "Mulish", fontSize: "19px", letterSpacing: "0px", fontWeight: 400, borderRadius: theme.shape.borderRadius, // Match border radius }, - '&:before': { + "&:before": { // Underline style borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf", }, - '&:after': { + "&:after": { // Underline style when focused borderBottomColor: theme.palette.secondary.main, }, - '& .MuiOutlinedInput-root': { - '& fieldset': { + "& .MuiOutlinedInput-root": { + "& fieldset": { borderColor: "#E0E3E7", }, - '&:hover fieldset': { + "&:hover fieldset": { borderColor: "#B2BAC2", }, - '&.Mui-focused fieldset': { + "&.Mui-focused fieldset": { borderColor: "#6F7E8C", }, }, - '& .MuiInputBase-root': { + "& .MuiInputBase-root": { fontFamily: "Mulish", fontSize: "19px", letterSpacing: "0px", diff --git a/src/components/PublishIssue/PublishIssue.tsx b/src/components/PublishIssue/PublishIssue.tsx index f4233f9..cec10c8 100644 --- a/src/components/PublishIssue/PublishIssue.tsx +++ b/src/components/PublishIssue/PublishIssue.tsx @@ -33,6 +33,7 @@ import { ImagePublisher, ImagePublisherRef, } from "../common/ImagePublisher/ImagePublisher.tsx"; +import { ThemeButtonBright } from "../../pages/Home/Home-styles.tsx"; const uid = new ShortUniqueId(); const shortuid = new ShortUniqueId({ length: 5 }); @@ -427,6 +428,7 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => { }} variant="contained" color="error" + sx={{ color: theme.palette.text.primary }} > Cancel @@ -437,14 +439,20 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => { alignItems: "center", }} > - { publishQDNResource(); }} + sx={{ + fontFamily: "Montserrat", + fontSize: "16px", + fontWeight: 400, + letterSpacing: "0.2px", + }} > Publish - + diff --git a/src/components/PublishIssue/Upload-styles.tsx b/src/components/PublishIssue/Upload-styles.tsx index b448902..78c4961 100644 --- a/src/components/PublishIssue/Upload-styles.tsx +++ b/src/components/PublishIssue/Upload-styles.tsx @@ -475,7 +475,7 @@ export const ActionButton = styled(Button)(({ theme }) => ({ display: "flex", alignItems: "center", fontFamily: "Montserrat", - fontSize: "16px", + fontSize: "18px", fontWeight: 400, letterSpacing: "0.2px", color: "white", diff --git a/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx b/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx index 8883769..56b770a 100644 --- a/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx +++ b/src/components/common/BlockedNamesModal/BlockedNamesModal.tsx @@ -1,10 +1,14 @@ import React, { useState } from "react"; -import { Button, List, ListItem, Typography, useTheme } from "@mui/material"; +import { List, ListItem, Typography, useTheme } from "@mui/material"; import { ModalContent, ModalText, StyledModal, } from "./BlockedNamesModal-styles"; +import { + ThemeButton, + ThemeButtonBright, +} from "../../../pages/Home/Home-styles.tsx"; interface PostModalProps { open: boolean; @@ -69,30 +73,26 @@ export const BlockedNamesModal: React.FC = ({ }} > {name} - + ))} - + ); diff --git a/src/components/common/ImagePublisher/ImagePublisher-styles.tsx b/src/components/common/ImagePublisher/ImagePublisher-styles.tsx index 00c4f3a..75da3e3 100644 --- a/src/components/common/ImagePublisher/ImagePublisher-styles.tsx +++ b/src/components/common/ImagePublisher/ImagePublisher-styles.tsx @@ -10,12 +10,14 @@ export const AddCoverImageButton = styled(Button)(({ theme }) => ({ fontSize: "16px", fontWeight: 400, letterSpacing: "0.2px", - color: "white", + color: theme.palette.text.primary, + backgroundColor: "#44c4ff", + "&:hover": { backgroundColor: "#01a9e9" }, gap: "5px", })); export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({ - color: "#fff", + color: theme.palette.text.primary, height: "25px", width: "auto", })); diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx index f184c92..94b64ec 100644 --- a/src/components/layout/Navbar/Navbar.tsx +++ b/src/components/layout/Navbar/Navbar.tsx @@ -5,8 +5,10 @@ import { BlockedNamesModal } from "../../common/BlockedNamesModal/BlockedNamesMo import { AvatarContainer, CustomAppBar, + DarkModeIcon, DropdownContainer, DropdownText, + LightModeIcon, LogoContainer, NavbarName, ThemeSelectRow, @@ -236,6 +238,21 @@ const NavBar: React.FC = ({ + {theme.palette.mode === "dark" ? ( + setTheme("light")} + color="white" + height="22" + width="22" + /> + ) : ( + setTheme("dark")} + color="black" + height="22" + width="22" + /> + )} {isAuthenticated && userName && ( <> ({ display: "flex", flexDirection: "row", justifyContent: "center", - alignItems: 'center', - margin: '10px 0px', - width: '100%' + alignItems: "center", + margin: "10px 0px", + width: "100%", })); export const Subtitle = styled(Typography)(({ theme }) => ({ - textAlign: 'center', - fontSize: '20px' + textAlign: "center", + fontSize: "20px", })); const DoubleLine = styled(Typography)` @@ -21,15 +20,15 @@ const DoubleLine = styled(Typography)` -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; -` +`; export const ChannelTitle = styled(DoubleLine)(({ theme }) => ({ fontFamily: "Cairo", fontSize: "20px", letterSpacing: "0.4px", color: theme.palette.text.primary, userSelect: "none", - marginBottom: 'auto', - textAlign: 'center' + marginBottom: "auto", + textAlign: "center", })); export const WelcomeTitle = styled(DoubleLine)(({ theme }) => ({ fontFamily: "Cairo", @@ -37,33 +36,32 @@ export const WelcomeTitle = styled(DoubleLine)(({ theme }) => ({ letterSpacing: "0.4px", color: theme.palette.text.primary, userSelect: "none", - textAlign: 'center' + textAlign: "center", })); export const WelcomeContainer = styled(Box)(({ theme }) => ({ - position: 'fixed', - width: '90%', - height: '90%', + position: "fixed", + width: "90%", + height: "90%", backgroundColor: theme.palette.background.paper, - left: '50%', - top: '50%', - transform: 'translate(-50%, -50%)', + left: "50%", + top: "50%", + transform: "translate(-50%, -50%)", zIndex: 500, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center' + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", })); - export const ChannelCard = styled(Grid)(({ theme }) => ({ position: "relative", display: "flex", flexDirection: "column", - alignItems: 'center', + alignItems: "center", height: "auto", - width: '300px', - minHeight: '130px', + width: "300px", + minHeight: "130px", backgroundColor: theme.palette.background.paper, borderRadius: "8px", padding: "10px 15px", @@ -82,6 +80,20 @@ export const ChannelCard = styled(Grid)(({ theme }) => ({ boxShadow: theme.palette.mode === "dark" ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)" - : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;" - } -})); \ No newline at end of file + : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;", + }, +})); + +export const ThemeButton = styled(Button)(({ theme }) => ({ + color: theme.palette.text.primary, + backgroundColor: "#01a9e9", + fontSize: "18px", + "&:hover": { backgroundColor: "#3e74c1" }, +})); + +export const ThemeButtonBright = styled(Button)(({ theme }) => ({ + color: theme.palette.text.primary, + backgroundColor: "#44c4ff", + fontSize: "18px", + "&:hover": { backgroundColor: "#01a9e9" }, +})); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index e708585..3380c1a 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -3,11 +3,11 @@ import ReactDOM from "react-dom"; import { useDispatch, useSelector } from "react-redux"; import { RootState } from "../../state/store"; import { IssueList } from "./IssueList.tsx"; -import { Box, Button, Grid, Input, useTheme } from "@mui/material"; +import { Box, Grid, Input, useTheme } from "@mui/material"; import { useFetchFiles } from "../../hooks/useFetchFiles.tsx"; import LazyLoad from "../../components/common/LazyLoad"; import { FiltersCol, FiltersContainer } from "./IssueList-styles.tsx"; -import { SubtitleContainer } from "./Home-styles"; +import { SubtitleContainer, ThemeButton } from "./Home-styles"; import { changefilterName, changefilterSearch, @@ -219,7 +219,8 @@ export const Home = ({ mode }: HomeProps) => { value={filterSearch} placeholder="Search" sx={{ - borderBottom: "1px solid white", + color: theme.palette.text.primary, + borderBottom: `1px solid ${theme.palette.text.primary}`, "&&:before": { borderBottom: "none", }, @@ -235,7 +236,7 @@ export const Home = ({ mode }: HomeProps) => { "&&.Mui-focused": { outline: "none", }, - fontSize: "18px", + fontSize: "20px", }} /> { placeholder="User's Name (Exact)" sx={{ marginTop: "20px", - borderBottom: "1px solid white", + borderBottom: `1px solid ${theme.palette.text.primary}`, "&&:before": { borderBottom: "none", }, @@ -264,37 +265,35 @@ export const Home = ({ mode }: HomeProps) => { "&&.Mui-focused": { outline: "none", }, - fontSize: "18px", + fontSize: "20px", }} /> - - + diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx index 996c6cd..61f3d99 100644 --- a/src/styles/theme.tsx +++ b/src/styles/theme.tsx @@ -90,9 +90,9 @@ const lightTheme = createTheme({ palette: { mode: "light", primary: { - main: "#ffffff", + main: "#FCFCFC", dark: "#F5F5F5", - light: "#FCFCFC", + light: "#FFFFFF", }, secondary: { main: "#417Ed4",