mirror of
https://github.com/Qortal/q-support.git
synced 2025-02-11 17:55:50 +00:00
Lightmode support
This commit is contained in:
parent
3b7baf3c61
commit
661b554a98
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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",
|
||||
}));
|
||||
|
@ -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
|
||||
|
@ -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" },
|
||||
}));
|
||||
|
@ -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}>
|
||||
|
@ -90,9 +90,9 @@ const lightTheme = createTheme({
|
||||
palette: {
|
||||
mode: "light",
|
||||
primary: {
|
||||
main: "#ffffff",
|
||||
main: "#FCFCFC",
|
||||
dark: "#F5F5F5",
|
||||
light: "#FCFCFC",
|
||||
light: "#FFFFFF",
|
||||
},
|
||||
secondary: {
|
||||
main: "#417Ed4",
|
||||
|
Loading…
x
Reference in New Issue
Block a user