Qortal/q-support
3
0
Fork 1
mirror of https://github.com/Qortal/q-support.git synced 2025-02-11 17:55:50 +00:00
Code Issues Projects Releases Wiki Activity

Lightmode support

Browse Source
This commit is contained in:
Qortal Dev 2024-04-16 17:35:28 -06:00
parent 3b7baf3c61
commit 661b554a98
10 changed files with 121 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/EditIssue/EditIssue.tsx
View File

@ -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>

30
src/components/EditIssue/Upload-styles.tsx
View File

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

12
src/components/PublishIssue/PublishIssue.tsx
View File

@ -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>

2
src/components/PublishIssue/Upload-styles.tsx
View File

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

18
src/components/common/BlockedNamesModal/BlockedNamesModal.tsx
View File

@ -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>
);

6
src/components/common/ImagePublisher/ImagePublisher-styles.tsx
View File

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

17
src/components/layout/Navbar/Navbar.tsx
View File

@ -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

66
src/pages/Home/Home-styles.tsx
View File

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

23
src/pages/Home/Home.tsx
View File

@ -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>
<Button
</ThemeButton>
<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}>

4
src/styles/theme.tsx
View File

@ -90,9 +90,9 @@ const lightTheme = createTheme({
palette: {
mode: "light",
primary: {
main: "#ffffff",
main: "#FCFCFC",
dark: "#F5F5F5",
light: "#FCFCFC",
light: "#FFFFFF",
},
secondary: {
main: "#417Ed4",