Merge pull request #3 from QortalSeth/main

Lightmode support

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 = () => {
           </>
 
           <CrowdfundActionButtonRow>
-            <CrowdfundActionButton
+            <ActionButton
               onClick={() => {
                 onClose();
               }}
               variant="contained"
               color="error"
+              sx={{ color: theme.palette.text.primary }}
             >
               Cancel
-            </CrowdfundActionButton>
+            </ActionButton>
             <Box
               sx={{
                 display: "flex",
@@ -464,14 +466,20 @@ export const EditIssue = () => {
                 alignItems: "center",
               }}
             >
-              <CrowdfundActionButton
+              <ThemeButtonBright
                 variant="contained"
                 onClick={() => {
                   publishQDNResource();
                 }}
+                sx={{
+                  fontFamily: "Montserrat",
+                  fontSize: "16px",
+                  fontWeight: 400,
+                  letterSpacing: "0.2px",
+                }}
               >
                 Publish
-              </CrowdfundActionButton>
+              </ThemeButtonBright>
             </Box>
           </CrowdfundActionButtonRow>
         </ModalBody>

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': {
+  "& .MuiSelect-select": {
-    padding: '12px',
+    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': {
+  "& .MuiOutlinedInput-root": {
-    '& fieldset': {
+    "& 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",

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
             </ActionButton>
@@ -437,14 +439,20 @@ export const PublishIssue = ({ editId, editContent }: NewCrowdfundProps) => {
                 alignItems: "center",
               }}
             >
-              <ActionButton
+              <ThemeButtonBright
                 variant="contained"
                 onClick={() => {
                   publishQDNResource();
                 }}
+                sx={{
+                  fontFamily: "Montserrat",
+                  fontSize: "16px",
+                  fontWeight: 400,
+                  letterSpacing: "0.2px",
+                }}
               >
                 Publish
-              </ActionButton>
+              </ThemeButtonBright>
             </Box>
           </ActionButtonRow>
         </ModalBody>

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",

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<PostModalProps> = ({
               }}
             >
               <Typography>{name}</Typography>
-              <Button
+              <ThemeButton
                 sx={{
-                  backgroundColor: theme.palette.primary.main,
-                  color: theme.palette.text.primary,
                   fontFamily: "Raleway",
                 }}
                 onClick={() => removeFromBlockList(name)}
               >
                 Remove
-              </Button>
+              </ThemeButton>
             </ListItem>
           ))}
         </List>
-        <Button
+        <ThemeButtonBright
           variant="contained"
           onClick={onClose}
           sx={{
-            backgroundColor: theme.palette.primary.light,
-            color: theme.palette.text.primary,
             fontFamily: "Raleway",
           }}
         >
           Close
-        </Button>
+        </ThemeButtonBright>
       </ModalContent>
     </StyledModal>
   );

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",
 }));

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<Props> = ({
         </Popover>
 
         <DownloadTaskManager />
+        {theme.palette.mode === "dark" ? (
+          <LightModeIcon
+            onClickFunc={() => setTheme("light")}
+            color="white"
+            height="22"
+            width="22"
+          />
+        ) : (
+          <DarkModeIcon
+            onClickFunc={() => setTheme("dark")}
+            color="black"
+            height="22"
+            width="22"
+          />
+        )}
         {isAuthenticated && userName && (
           <>
             <AvatarContainer

src/pages/Home/Home-styles.tsx

@@ -1,19 +1,18 @@
 import { styled } from "@mui/system";
-import { Box, Grid, Typography, Checkbox } from "@mui/material";
+import { Box, Button, Grid, Typography } from "@mui/material";
-
 
 export const SubtitleContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   justifyContent: "center",
-  alignItems: 'center',
+  alignItems: "center",
-  margin: '10px 0px',
+  margin: "10px 0px",
-  width: '100%'
+  width: "100%",
 }));
 
 export const Subtitle = styled(Typography)(({ theme }) => ({
-  textAlign: 'center',
+  textAlign: "center",
-  fontSize: '20px'
+  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',
+  marginBottom: "auto",
-  textAlign: 'center'
+  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',
+  position: "fixed",
-  width: '90%',
+  width: "90%",
-  height: '90%',
+  height: "90%",
   backgroundColor: theme.palette.background.paper,
-  left: '50%',
+  left: "50%",
-  top: '50%',
+  top: "50%",
-  transform: 'translate(-50%, -50%)',
+  transform: "translate(-50%, -50%)",
   zIndex: 500,
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'column',
+  flexDirection: "column",
-  alignItems: 'center',
+  alignItems: "center",
-  justifyContent: 'center'
+  justifyContent: "center",
 }));
 
-
 export const ChannelCard = styled(Grid)(({ theme }) => ({
   position: "relative",
   display: "flex",
   flexDirection: "column",
-  alignItems: 'center',
+  alignItems: "center",
   height: "auto",
-  width: '300px',
+  width: "300px",
-  minHeight: '130px',
+  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;"
+        : "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" },
+}));

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",
             }}
           />
           <Input
@@ -248,7 +249,7 @@ export const Home = ({ mode }: HomeProps) => {
             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",
             }}
           />
           <CategoryList categoryData={allCategoryData} ref={categoryListRef} />
 
-          <Button
+          <ThemeButton
             onClick={() => {
               filtersToDefault();
             }}
             sx={{
               marginTop: "20px",
               fontWeight: 1000,
-              color: "white",
             }}
             variant="contained"
           >
             reset
-          </Button>
+          </ThemeButton>
-          <Button
+          <ThemeButton
             onClick={() => {
               getFilesHandler(true);
             }}
             sx={{
               marginTop: "20px",
               fontWeight: 1000,
-              color: "white",
             }}
             variant="contained"
           >
             Search
-          </Button>
+          </ThemeButton>
         </FiltersContainer>
       </FiltersCol>
       <Grid item xs={12} md={10} sm={9}>

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",