Qortal/q-tube
1
0
Fork 2
mirror of https://github.com/Qortal/q-tube.git synced 2026-04-22 08:03:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch font-family

Browse Source
This commit is contained in:
PhilReact
2025-06-30 03:37:17 +03:00
parent 2a3395e07c
commit 54a4621e93
39 changed files with 1631 additions and 1690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

617
src/components/Publish/EditPlaylist/Upload-styles.tsx
View File

@@ -1,4 +1,4 @@
import { styled } from "@mui/system";
import { styled } from '@mui/system';
import {
Accordion,
AccordionDetails,
@@ -10,9 +10,9 @@ import {
TextField,
Typography,
Select,
} from "@mui/material";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
import { TimesSVG } from "../../../assets/svgs/TimesSVG.tsx";
} from '@mui/material';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import { TimesSVG } from '../../../assets/svgs/TimesSVG.tsx';
export const DoubleLine = styled(Typography)`
display: -webkit-box;
@@ -22,181 +22,172 @@ export const DoubleLine = styled(Typography)`
`;
export const MainContainer = styled(Grid)({
width: "100%",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
width: '100%',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center',
margin: 0,
});
export const MainCol = styled(Grid)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
padding: "20px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
padding: '20px',
}));
export const CreateContainer = styled(Box)(({ theme }) => ({
position: "fixed",
bottom: "20px",
right: "20px",
cursor: "pointer",
position: 'fixed',
bottom: '20px',
right: '20px',
cursor: 'pointer',
background: theme.palette.background.default,
width: "50px",
height: "50px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
width: '50px',
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
}));
export const ModalBody = styled(Box)(({ theme }) => ({
position: "absolute",
position: 'absolute',
backgroundColor: theme.palette.background.default,
borderRadius: "4px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
gap: "17px",
overflowY: "auto",
maxHeight: "95vh",
borderRadius: '4px',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '75%',
maxWidth: '900px',
padding: '15px 35px',
display: 'flex',
flexDirection: 'column',
gap: '17px',
overflowY: 'auto',
maxHeight: '95vh',
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"&::-webkit-scrollbar-track": {
theme.palette.mode === 'dark'
? '0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)'
: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
'&::-webkit-scrollbar-track': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar-track:hover": {
'&::-webkit-scrollbar-track:hover': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar": {
width: "16px",
height: "10px",
backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
'&::-webkit-scrollbar': {
width: '16px',
height: '10px',
backgroundColor: theme.palette.mode === 'light' ? '#f6f8fa' : '#292d3e',
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
borderRadius: "8px",
backgroundClip: "content-box",
border: "4px solid transparent",
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.mode === 'light' ? '#d3d9e1' : '#575757',
borderRadius: '8px',
backgroundClip: 'content-box',
border: '4px solid transparent',
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: theme.palette.mode === 'light' ? '#b7bcc4' : '#474646',
},
}));
export const NewCrowdfundTitle = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "25px",
userSelect: "none",
fontSize: '25px',
userSelect: 'none',
}));
export const NewCrowdFundFont = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontSize: '18px',
userSelect: 'none',
}));
export const NewCrowdfundTimeDescription = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontStyle: "italic",
textDecoration: "underline",
fontSize: '18px',
userSelect: 'none',
fontStyle: 'italic',
textDecoration: 'underline',
}));
export const CustomInputField = styled(TextField)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& label': {
color: theme.palette.mode === 'light' ? '#808183' : '#edeef0',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
'& label.Mui-focused': {
color: theme.palette.mode === 'light' ? '#A0AAB4' : '#d7d8da',
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
'& .MuiInput-underline:after': {
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
padding: '30px 12px 8px',
},
"& .MuiFilledInput-root:after": {
'& .MuiFilledInput-root:after': {
borderBottomColor: theme.palette.secondary.main,
},
}));
export const CrowdfundTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "20px",
fontSize: '20px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const CrowdfundSubTitleRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
flexDirection: "row",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'row',
});
export const CrowdfundSubTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "17px",
fontSize: '17px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
borderBottom: `1px solid ${theme.palette.text.primary}`,
paddingBottom: "1.5px",
width: "fit-content",
textDecoration: "none",
paddingBottom: '1.5px',
width: 'fit-content',
textDecoration: 'none',
}));
export const CrowdfundDescription = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const Spacer = ({ height }: any) => {
@@ -210,326 +201,313 @@ export const Spacer = ({ height }: any) => {
};
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px 0px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px 0px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const AuthorTextComment = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "16px",
lineHeight: "1.2",
fontSize: '16px',
lineHeight: '1.2',
});
export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({
color: "#fff",
height: "25px",
width: "auto",
color: '#fff',
height: '25px',
width: 'auto',
}));
export const CoverImagePreview = styled("img")(({ theme }) => ({
width: "100px",
height: "100px",
objectFit: "contain",
userSelect: "none",
borderRadius: "3px",
marginBottom: "10px",
export const CoverImagePreview = styled('img')(({ theme }) => ({
width: '100px',
height: '100px',
objectFit: 'contain',
userSelect: 'none',
borderRadius: '3px',
marginBottom: '10px',
}));
export const LogoPreviewRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: "10px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}));
export const TimesIcon = styled(TimesSVG)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: "50%",
padding: "5px",
transition: "all 0.2s ease-in-out",
"&:hover": {
cursor: "pointer",
scale: "1.1",
borderRadius: '50%',
padding: '5px',
transition: 'all 0.2s ease-in-out',
'&:hover': {
cursor: 'pointer',
scale: '1.1',
},
}));
export const CrowdfundCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "24px",
letterSpacing: "-0.3px",
userSelect: "none",
marginBottom: "auto",
textAlign: "center",
"@media (max-width: 650px)": {
fontSize: "18px",
fontSize: '24px',
letterSpacing: '-0.3px',
userSelect: 'none',
marginBottom: 'auto',
textAlign: 'center',
'@media (max-width: 650px)': {
fontSize: '18px',
},
}));
export const CrowdfundUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "12px",
letterSpacing: "0.2px",
fontSize: '12px',
letterSpacing: '0.2px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CATContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
padding: "15px",
flexDirection: "column",
gap: "20px",
justifyContent: "center",
width: "100%",
alignItems: "center",
position: 'relative',
display: 'flex',
padding: '15px',
flexDirection: 'column',
gap: '20px',
justifyContent: 'center',
width: '100%',
alignItems: 'center',
}));
export const AddCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "10px 25px",
fontSize: "15px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '10px 25px',
fontSize: '15px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const EditCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "5px 12px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '5px 12px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const CrowdfundListWrapper = styled(Box)(({ theme }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "0px",
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '0px',
background: theme.palette.background.default,
}));
export const CrowdfundTitleRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
gap: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
gap: '10px',
}));
export const CrowdfundPageTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "35px",
fontSize: '35px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundStatusRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "Mulish",
fontSize: "21px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
fontWeight: 400,
letterSpacing: 0,
border: `1px solid ${theme.palette.text.primary}`,
borderRadius: "8px",
padding: "15px 25px",
userSelect: "none",
borderRadius: '8px',
padding: '15px 25px',
userSelect: 'none',
}));
export const CrowdfundDescriptionRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
fontFamily: "Montserrat",
fontSize: "18px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
fontSize: '18px',
fontWeight: 400,
letterSpacing: 0,
});
export const AboutMyCrowdfund = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "23px",
fontSize: '23px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundInlineContentRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
});
export const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
display: 'flex',
fontSize: '19px',
fontWeight: 400,
letterSpacing: 0,
userSelect: "none",
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundAccordion = styled(Accordion)(({ theme }) => ({
backgroundColor: theme.palette.primary.light,
"& .Mui-expanded": {
minHeight: "auto !important",
'& .Mui-expanded': {
minHeight: 'auto !important',
},
}));
export const CrowdfundAccordionSummary = styled(AccordionSummary)({
height: "50px",
"& .Mui-expanded": {
margin: "0px !important",
height: '50px',
'& .Mui-expanded': {
margin: '0px !important',
},
});
export const CrowdfundAccordionFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "20px",
fontSize: '20px',
fontWeight: 400,
letterSpacing: "0px",
letterSpacing: '0px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CrowdfundAccordionDetails = styled(AccordionDetails)({
padding: "0px 16px 16px 16px",
padding: '0px 16px 16px 16px',
});
export const AddCoverImageButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const CoverImage = styled("img")({
width: "100%",
height: "250px",
objectFit: "cover",
objectPosition: "center",
export const CoverImage = styled('img')({
width: '100%',
height: '250px',
objectFit: 'cover',
objectPosition: 'center',
});
export const CrowdfundActionButtonRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
});
export const CrowdfundActionButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const BackToHomeButton = styled(Button)(({ theme }) => ({
position: "absolute",
top: "20px",
left: "20px",
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "13px",
position: 'absolute',
top: '20px',
left: '20px',
display: 'flex',
alignItems: 'center',
fontSize: '13px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
padding: "5px 10px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
padding: '5px 10px',
backgroundColor: theme.palette.secondary.main,
transition: "all 0.3s ease-in-out",
"&:hover": {
transition: 'all 0.3s ease-in-out',
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
cursor: "pointer",
cursor: 'pointer',
},
}));
export const CrowdfundLoaderRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
padding: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px',
padding: '10px',
});
export const RatingContainer = styled(Box)({
display: "flex",
alignItems: "center",
padding: "1px 5px",
borderRadius: "5px",
backgroundColor: "transparent",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
backgroundColor: "#e4ddddac",
display: 'flex',
alignItems: 'center',
padding: '1px 5px',
borderRadius: '5px',
backgroundColor: 'transparent',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor: '#e4ddddac',
},
});
export const StyledRating = styled(Rating)({
fontSize: "28px",
fontSize: '28px',
});
export const NoReviewsFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
@@ -541,43 +519,40 @@ export const StyledButton = styled(Button)(({ theme }) => ({
}));
export const CustomSelect = styled(Select)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
"& .MuiSelect-select": {
padding: "12px",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiSelect-select': {
padding: '12px',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
borderRadius: theme.shape.borderRadius, // Match border radius
},
"&:before": {
'&:before': {
// Underline style
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"&:after": {
'&:after': {
// Underline style when focused
borderBottomColor: theme.palette.secondary.main,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
},

617
src/components/Publish/EditVideo/EditVideo-styles.tsx
View File

@@ -1,4 +1,4 @@
import { styled } from "@mui/system";
import { styled } from '@mui/system';
import {
Accordion,
AccordionDetails,
@@ -10,9 +10,9 @@ import {
TextField,
Typography,
Select,
} from "@mui/material";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
import { TimesSVG } from "../../../assets/svgs/TimesSVG.tsx";
} from '@mui/material';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import { TimesSVG } from '../../../assets/svgs/TimesSVG.tsx';
export const DoubleLine = styled(Typography)`
display: -webkit-box;
@@ -22,181 +22,172 @@ export const DoubleLine = styled(Typography)`
`;
export const MainContainer = styled(Grid)({
width: "100%",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
width: '100%',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center',
margin: 0,
});
export const MainCol = styled(Grid)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
padding: "20px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
padding: '20px',
}));
export const CreateContainer = styled(Box)(({ theme }) => ({
position: "fixed",
bottom: "20px",
right: "20px",
cursor: "pointer",
position: 'fixed',
bottom: '20px',
right: '20px',
cursor: 'pointer',
background: theme.palette.background.default,
width: "50px",
height: "50px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
width: '50px',
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
}));
export const ModalBody = styled(Box)(({ theme }) => ({
position: "absolute",
position: 'absolute',
backgroundColor: theme.palette.background.default,
borderRadius: "4px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
gap: "17px",
overflowY: "auto",
maxHeight: "95vh",
borderRadius: '4px',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '75%',
maxWidth: '900px',
padding: '15px 35px',
display: 'flex',
flexDirection: 'column',
gap: '17px',
overflowY: 'auto',
maxHeight: '95vh',
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"&::-webkit-scrollbar-track": {
theme.palette.mode === 'dark'
? '0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)'
: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
'&::-webkit-scrollbar-track': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar-track:hover": {
'&::-webkit-scrollbar-track:hover': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar": {
width: "16px",
height: "10px",
backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
'&::-webkit-scrollbar': {
width: '16px',
height: '10px',
backgroundColor: theme.palette.mode === 'light' ? '#f6f8fa' : '#292d3e',
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
borderRadius: "8px",
backgroundClip: "content-box",
border: "4px solid transparent",
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.mode === 'light' ? '#d3d9e1' : '#575757',
borderRadius: '8px',
backgroundClip: 'content-box',
border: '4px solid transparent',
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: theme.palette.mode === 'light' ? '#b7bcc4' : '#474646',
},
}));
export const NewCrowdfundTitle = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "25px",
userSelect: "none",
fontSize: '25px',
userSelect: 'none',
}));
export const NewCrowdFundFont = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontSize: '18px',
userSelect: 'none',
}));
export const NewCrowdfundTimeDescription = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontStyle: "italic",
textDecoration: "underline",
fontSize: '18px',
userSelect: 'none',
fontStyle: 'italic',
textDecoration: 'underline',
}));
export const CustomInputField = styled(TextField)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& label': {
color: theme.palette.mode === 'light' ? '#808183' : '#edeef0',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
'& label.Mui-focused': {
color: theme.palette.mode === 'light' ? '#A0AAB4' : '#d7d8da',
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
'& .MuiInput-underline:after': {
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
padding: '30px 12px 8px',
},
"& .MuiFilledInput-root:after": {
'& .MuiFilledInput-root:after': {
borderBottomColor: theme.palette.secondary.main,
},
}));
export const CrowdfundTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "20px",
fontSize: '20px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const CrowdfundSubTitleRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
flexDirection: "row",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'row',
});
export const CrowdfundSubTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "17px",
fontSize: '17px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
borderBottom: `1px solid ${theme.palette.text.primary}`,
paddingBottom: "1.5px",
width: "fit-content",
textDecoration: "none",
paddingBottom: '1.5px',
width: 'fit-content',
textDecoration: 'none',
}));
export const CrowdfundDescription = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const Spacer = ({ height }: any) => {
@@ -210,326 +201,313 @@ export const Spacer = ({ height }: any) => {
};
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px 0px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px 0px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const AuthorTextComment = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "16px",
lineHeight: "1.2",
fontSize: '16px',
lineHeight: '1.2',
});
export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({
color: "#fff",
height: "25px",
width: "auto",
color: '#fff',
height: '25px',
width: 'auto',
}));
export const CoverImagePreview = styled("img")(({ theme }) => ({
width: "100px",
height: "100px",
objectFit: "contain",
userSelect: "none",
borderRadius: "3px",
marginBottom: "10px",
export const CoverImagePreview = styled('img')(({ theme }) => ({
width: '100px',
height: '100px',
objectFit: 'contain',
userSelect: 'none',
borderRadius: '3px',
marginBottom: '10px',
}));
export const LogoPreviewRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: "10px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}));
export const TimesIcon = styled(TimesSVG)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: "50%",
padding: "5px",
transition: "all 0.2s ease-in-out",
"&:hover": {
cursor: "pointer",
scale: "1.1",
borderRadius: '50%',
padding: '5px',
transition: 'all 0.2s ease-in-out',
'&:hover': {
cursor: 'pointer',
scale: '1.1',
},
}));
export const CrowdfundCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "24px",
letterSpacing: "-0.3px",
userSelect: "none",
marginBottom: "auto",
textAlign: "center",
"@media (max-width: 650px)": {
fontSize: "18px",
fontSize: '24px',
letterSpacing: '-0.3px',
userSelect: 'none',
marginBottom: 'auto',
textAlign: 'center',
'@media (max-width: 650px)': {
fontSize: '18px',
},
}));
export const CrowdfundUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "12px",
letterSpacing: "0.2px",
fontSize: '12px',
letterSpacing: '0.2px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CATContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
padding: "15px",
flexDirection: "column",
gap: "20px",
justifyContent: "center",
width: "100%",
alignItems: "center",
position: 'relative',
display: 'flex',
padding: '15px',
flexDirection: 'column',
gap: '20px',
justifyContent: 'center',
width: '100%',
alignItems: 'center',
}));
export const AddCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "10px 25px",
fontSize: "15px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '10px 25px',
fontSize: '15px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const EditCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "5px 12px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '5px 12px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const CrowdfundListWrapper = styled(Box)(({ theme }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "0px",
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '0px',
background: theme.palette.background.default,
}));
export const CrowdfundTitleRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
gap: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
gap: '10px',
}));
export const CrowdfundPageTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "35px",
fontSize: '35px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundStatusRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "Mulish",
fontSize: "21px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
fontWeight: 400,
letterSpacing: 0,
border: `1px solid ${theme.palette.text.primary}`,
borderRadius: "8px",
padding: "15px 25px",
userSelect: "none",
borderRadius: '8px',
padding: '15px 25px',
userSelect: 'none',
}));
export const CrowdfundDescriptionRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
fontFamily: "Montserrat",
fontSize: "18px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
fontSize: '18px',
fontWeight: 400,
letterSpacing: 0,
});
export const AboutMyCrowdfund = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "23px",
fontSize: '23px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundInlineContentRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
});
export const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
display: 'flex',
fontSize: '19px',
fontWeight: 400,
letterSpacing: 0,
userSelect: "none",
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundAccordion = styled(Accordion)(({ theme }) => ({
backgroundColor: theme.palette.primary.light,
"& .Mui-expanded": {
minHeight: "auto !important",
'& .Mui-expanded': {
minHeight: 'auto !important',
},
}));
export const CrowdfundAccordionSummary = styled(AccordionSummary)({
height: "50px",
"& .Mui-expanded": {
margin: "0px !important",
height: '50px',
'& .Mui-expanded': {
margin: '0px !important',
},
});
export const CrowdfundAccordionFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "20px",
fontSize: '20px',
fontWeight: 400,
letterSpacing: "0px",
letterSpacing: '0px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CrowdfundAccordionDetails = styled(AccordionDetails)({
padding: "0px 16px 16px 16px",
padding: '0px 16px 16px 16px',
});
export const AddCoverImageButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const CoverImage = styled("img")({
width: "100%",
height: "250px",
objectFit: "cover",
objectPosition: "center",
export const CoverImage = styled('img')({
width: '100%',
height: '250px',
objectFit: 'cover',
objectPosition: 'center',
});
export const CrowdfundActionButtonRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
});
export const CrowdfundActionButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const BackToHomeButton = styled(Button)(({ theme }) => ({
position: "absolute",
top: "20px",
left: "20px",
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "13px",
position: 'absolute',
top: '20px',
left: '20px',
display: 'flex',
alignItems: 'center',
fontSize: '13px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
padding: "5px 10px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
padding: '5px 10px',
backgroundColor: theme.palette.secondary.main,
transition: "all 0.3s ease-in-out",
"&:hover": {
transition: 'all 0.3s ease-in-out',
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
cursor: "pointer",
cursor: 'pointer',
},
}));
export const CrowdfundLoaderRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
padding: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px',
padding: '10px',
});
export const RatingContainer = styled(Box)({
display: "flex",
alignItems: "center",
padding: "1px 5px",
borderRadius: "5px",
backgroundColor: "transparent",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
backgroundColor: "#e4ddddac",
display: 'flex',
alignItems: 'center',
padding: '1px 5px',
borderRadius: '5px',
backgroundColor: 'transparent',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor: '#e4ddddac',
},
});
export const StyledRating = styled(Rating)({
fontSize: "28px",
fontSize: '28px',
});
export const NoReviewsFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
@@ -541,43 +519,40 @@ export const StyledButton = styled(Button)(({ theme }) => ({
}));
export const CustomSelect = styled(Select)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
"& .MuiSelect-select": {
padding: "12px",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiSelect-select': {
padding: '12px',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
borderRadius: theme.shape.borderRadius, // Match border radius
},
"&:before": {
'&:before': {
// Underline style
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"&:after": {
'&:after': {
// Underline style when focused
borderBottomColor: theme.palette.secondary.main,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
},

617
src/components/Publish/PublishVideo/PublishVideo-styles.tsx
View File

@@ -1,4 +1,4 @@
import { styled } from "@mui/system";
import { styled } from '@mui/system';
import {
Accordion,
AccordionDetails,
@@ -10,9 +10,9 @@ import {
TextField,
Typography,
Select,
} from "@mui/material";
import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternate";
import { TimesSVG } from "../../../assets/svgs/TimesSVG.tsx";
} from '@mui/material';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import { TimesSVG } from '../../../assets/svgs/TimesSVG.tsx';
export const DoubleLine = styled(Typography)`
display: -webkit-box;
@@ -22,183 +22,174 @@ export const DoubleLine = styled(Typography)`
`;
export const MainContainer = styled(Grid)({
width: "100%",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
width: '100%',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'center',
margin: 0,
});
export const MainCol = styled(Grid)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
padding: "20px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
padding: '20px',
}));
export const CreateContainer = styled(Box)(({ theme }) => ({
position: "fixed",
bottom: "20px",
right: "20px",
cursor: "pointer",
position: 'fixed',
bottom: '20px',
right: '20px',
cursor: 'pointer',
background: theme.palette.background.default,
width: "50px",
height: "50px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
width: '50px',
height: '50px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderRadius: '50%',
}));
export const CodecTypography = styled(Typography)(({ theme }) => ({
fontSize: "18px",
fontSize: '18px',
}));
export const ModalBody = styled(Box)(({ theme }) => ({
position: "absolute",
position: 'absolute',
backgroundColor: theme.palette.background.default,
borderRadius: "4px",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: "75%",
maxWidth: "900px",
padding: "15px 35px",
display: "flex",
flexDirection: "column",
gap: "17px",
overflowY: "auto",
maxHeight: "95vh",
borderRadius: '4px',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '75%',
maxWidth: '900px',
padding: '15px 35px',
display: 'flex',
flexDirection: 'column',
gap: '17px',
overflowY: 'auto',
maxHeight: '95vh',
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
"&::-webkit-scrollbar-track": {
theme.palette.mode === 'dark'
? '0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)'
: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
'&::-webkit-scrollbar-track': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar-track:hover": {
'&::-webkit-scrollbar-track:hover': {
backgroundColor: theme.palette.background.paper,
},
"&::-webkit-scrollbar": {
width: "16px",
height: "10px",
backgroundColor: theme.palette.mode === "light" ? "#f6f8fa" : "#292d3e",
'&::-webkit-scrollbar': {
width: '16px',
height: '10px',
backgroundColor: theme.palette.mode === 'light' ? '#f6f8fa' : '#292d3e',
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: theme.palette.mode === "light" ? "#d3d9e1" : "#575757",
borderRadius: "8px",
backgroundClip: "content-box",
border: "4px solid transparent",
'&::-webkit-scrollbar-thumb': {
backgroundColor: theme.palette.mode === 'light' ? '#d3d9e1' : '#575757',
borderRadius: '8px',
backgroundClip: 'content-box',
border: '4px solid transparent',
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: theme.palette.mode === "light" ? "#b7bcc4" : "#474646",
'&::-webkit-scrollbar-thumb:hover': {
backgroundColor: theme.palette.mode === 'light' ? '#b7bcc4' : '#474646',
},
}));
export const NewCrowdfundTitle = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "25px",
userSelect: "none",
fontSize: '25px',
userSelect: 'none',
}));
export const NewCrowdFundFont = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontSize: '18px',
userSelect: 'none',
}));
export const NewCrowdfundTimeDescription = styled(Typography)(({ theme }) => ({
fontWeight: 400,
fontFamily: "Raleway",
fontSize: "18px",
userSelect: "none",
fontStyle: "italic",
textDecoration: "underline",
fontSize: '18px',
userSelect: 'none',
fontStyle: 'italic',
textDecoration: 'underline',
}));
export const CustomInputField = styled(TextField)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
borderColor: theme.palette.background.paper,
"& label": {
color: theme.palette.mode === "light" ? "#808183" : "#edeef0",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& label': {
color: theme.palette.mode === 'light' ? '#808183' : '#edeef0',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& label.Mui-focused": {
color: theme.palette.mode === "light" ? "#A0AAB4" : "#d7d8da",
'& label.Mui-focused': {
color: theme.palette.mode === 'light' ? '#A0AAB4' : '#d7d8da',
},
"& .MuiInput-underline:after": {
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
'& .MuiInput-underline:after': {
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
},
"& [class$='-MuiFilledInput-root']": {
padding: "30px 12px 8px",
padding: '30px 12px 8px',
},
"& .MuiFilledInput-root:after": {
'& .MuiFilledInput-root:after': {
borderBottomColor: theme.palette.secondary.main,
},
}));
export const CrowdfundTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "20px",
fontSize: '20px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const CrowdfundSubTitleRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "start",
flexDirection: "row",
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
flexDirection: 'row',
});
export const CrowdfundSubTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
letterSpacing: "1px",
letterSpacing: '1px',
fontWeight: 400,
fontSize: "17px",
fontSize: '17px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
borderBottom: `1px solid ${theme.palette.text.primary}`,
paddingBottom: "1.5px",
width: "fit-content",
textDecoration: "none",
paddingBottom: '1.5px',
width: 'fit-content',
textDecoration: 'none',
}));
export const CrowdfundDescription = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const Spacer = ({ height }: any) => {
@@ -212,326 +203,313 @@ export const Spacer = ({ height }: any) => {
};
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px 0px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px 0px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const AuthorTextComment = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "16px",
lineHeight: "1.2",
fontSize: '16px',
lineHeight: '1.2',
});
export const AddLogoIcon = styled(AddPhotoAlternateIcon)(({ theme }) => ({
color: "#fff",
height: "25px",
width: "auto",
color: '#fff',
height: '25px',
width: 'auto',
}));
export const CoverImagePreview = styled("img")(({ theme }) => ({
width: "100px",
height: "100px",
objectFit: "contain",
userSelect: "none",
borderRadius: "3px",
marginBottom: "10px",
export const CoverImagePreview = styled('img')(({ theme }) => ({
width: '100px',
height: '100px',
objectFit: 'contain',
userSelect: 'none',
borderRadius: '3px',
marginBottom: '10px',
}));
export const LogoPreviewRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: "10px",
display: 'flex',
alignItems: 'center',
gap: '10px',
}));
export const TimesIcon = styled(TimesSVG)(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
borderRadius: "50%",
padding: "5px",
transition: "all 0.2s ease-in-out",
"&:hover": {
cursor: "pointer",
scale: "1.1",
borderRadius: '50%',
padding: '5px',
transition: 'all 0.2s ease-in-out',
'&:hover': {
cursor: 'pointer',
scale: '1.1',
},
}));
export const CrowdfundCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "24px",
letterSpacing: "-0.3px",
userSelect: "none",
marginBottom: "auto",
textAlign: "center",
"@media (max-width: 650px)": {
fontSize: "18px",
fontSize: '24px',
letterSpacing: '-0.3px',
userSelect: 'none',
marginBottom: 'auto',
textAlign: 'center',
'@media (max-width: 650px)': {
fontSize: '18px',
},
}));
export const CrowdfundUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Montserrat",
fontSize: "12px",
letterSpacing: "0.2px",
fontSize: '12px',
letterSpacing: '0.2px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CATContainer = styled(Box)(({ theme }) => ({
position: "relative",
display: "flex",
padding: "15px",
flexDirection: "column",
gap: "20px",
justifyContent: "center",
width: "100%",
alignItems: "center",
position: 'relative',
display: 'flex',
padding: '15px',
flexDirection: 'column',
gap: '20px',
justifyContent: 'center',
width: '100%',
alignItems: 'center',
}));
export const AddCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "10px 25px",
fontSize: "15px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '10px 25px',
fontSize: '15px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const EditCrowdFundButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
textTransform: "none",
padding: "5px 12px",
gap: "8px",
color: "#ffffff",
display: 'flex',
alignItems: 'center',
textTransform: 'none',
padding: '5px 12px',
gap: '8px',
color: '#ffffff',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.main : "#2a9a86",
border: "none",
borderRadius: "5px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
theme.palette.mode === 'dark' ? theme.palette.primary.main : '#2a9a86',
border: 'none',
borderRadius: '5px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor:
theme.palette.mode === "dark" ? theme.palette.primary.dark : "#217e6d",
theme.palette.mode === 'dark' ? theme.palette.primary.dark : '#217e6d',
},
}));
export const CrowdfundListWrapper = styled(Box)(({ theme }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
marginTop: "0px",
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginTop: '0px',
background: theme.palette.background.default,
}));
export const CrowdfundTitleRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
gap: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
gap: '10px',
}));
export const CrowdfundPageTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "35px",
fontSize: '35px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundStatusRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: "Mulish",
fontSize: "21px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '21px',
fontWeight: 400,
letterSpacing: 0,
border: `1px solid ${theme.palette.text.primary}`,
borderRadius: "8px",
padding: "15px 25px",
userSelect: "none",
borderRadius: '8px',
padding: '15px 25px',
userSelect: 'none',
}));
export const CrowdfundDescriptionRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
fontFamily: "Montserrat",
fontSize: "18px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
fontSize: '18px',
fontWeight: 400,
letterSpacing: 0,
});
export const AboutMyCrowdfund = styled(Typography)(({ theme }) => ({
fontFamily: "Copse",
fontSize: "23px",
fontSize: '23px',
fontWeight: 400,
letterSpacing: "1px",
userSelect: "none",
letterSpacing: '1px',
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundInlineContentRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
});
export const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
display: 'flex',
fontSize: '19px',
fontWeight: 400,
letterSpacing: 0,
userSelect: "none",
userSelect: 'none',
color: theme.palette.text.primary,
}));
export const CrowdfundAccordion = styled(Accordion)(({ theme }) => ({
backgroundColor: theme.palette.primary.light,
"& .Mui-expanded": {
minHeight: "auto !important",
'& .Mui-expanded': {
minHeight: 'auto !important',
},
}));
export const CrowdfundAccordionSummary = styled(AccordionSummary)({
height: "50px",
"& .Mui-expanded": {
margin: "0px !important",
height: '50px',
'& .Mui-expanded': {
margin: '0px !important',
},
});
export const CrowdfundAccordionFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "20px",
fontSize: '20px',
fontWeight: 400,
letterSpacing: "0px",
letterSpacing: '0px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const CrowdfundAccordionDetails = styled(AccordionDetails)({
padding: "0px 16px 16px 16px",
padding: '0px 16px 16px 16px',
});
export const AddCoverImageButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const CoverImage = styled("img")({
width: "100%",
height: "250px",
objectFit: "cover",
objectPosition: "center",
export const CoverImage = styled('img')({
width: '100%',
height: '250px',
objectFit: 'cover',
objectPosition: 'center',
});
export const CrowdfundActionButtonRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
});
export const CrowdfundActionButton = styled(Button)(({ theme }) => ({
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "16px",
display: 'flex',
alignItems: 'center',
fontSize: '16px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
}));
export const BackToHomeButton = styled(Button)(({ theme }) => ({
position: "absolute",
top: "20px",
left: "20px",
display: "flex",
alignItems: "center",
fontFamily: "Montserrat",
fontSize: "13px",
position: 'absolute',
top: '20px',
left: '20px',
display: 'flex',
alignItems: 'center',
fontSize: '13px',
fontWeight: 400,
letterSpacing: "0.2px",
color: "white",
gap: "5px",
padding: "5px 10px",
letterSpacing: '0.2px',
color: 'white',
gap: '5px',
padding: '5px 10px',
backgroundColor: theme.palette.secondary.main,
transition: "all 0.3s ease-in-out",
"&:hover": {
transition: 'all 0.3s ease-in-out',
'&:hover': {
backgroundColor: theme.palette.secondary.dark,
cursor: "pointer",
cursor: 'pointer',
},
}));
export const CrowdfundLoaderRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "10px",
padding: "10px",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
gap: '10px',
padding: '10px',
});
export const RatingContainer = styled(Box)({
display: "flex",
alignItems: "center",
padding: "1px 5px",
borderRadius: "5px",
backgroundColor: "transparent",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
backgroundColor: "#e4ddddac",
display: 'flex',
alignItems: 'center',
padding: '1px 5px',
borderRadius: '5px',
backgroundColor: 'transparent',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
backgroundColor: '#e4ddddac',
},
});
export const StyledRating = styled(Rating)({
fontSize: "28px",
fontSize: '28px',
});
export const NoReviewsFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
@@ -543,43 +521,40 @@ export const StyledButton = styled(Button)(({ theme }) => ({
}));
export const CustomSelect = styled(Select)(({ theme }) => ({
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
backgroundColor: theme.palette.background.default,
"& .MuiSelect-select": {
padding: "12px",
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiSelect-select': {
padding: '12px',
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
borderRadius: theme.shape.borderRadius, // Match border radius
},
"&:before": {
'&:before': {
// Underline style
borderBottomColor: theme.palette.mode === "light" ? "#B2BAC2" : "#c9cccf",
borderBottomColor: theme.palette.mode === 'light' ? '#B2BAC2' : '#c9cccf',
},
"&:after": {
'&:after': {
// Underline style when focused
borderBottomColor: theme.palette.secondary.main,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#E0E3E7",
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: '#E0E3E7',
},
"&:hover fieldset": {
borderColor: "#B2BAC2",
'&:hover fieldset': {
borderColor: '#B2BAC2',
},
"&.Mui-focused fieldset": {
borderColor: "#6F7E8C",
'&.Mui-focused fieldset': {
borderColor: '#6F7E8C',
},
},
"& .MuiInputBase-root": {
fontFamily: "Mulish",
fontSize: "19px",
letterSpacing: "0px",
'& .MuiInputBase-root': {
fontSize: '19px',
letterSpacing: '0px',
fontWeight: 400,
color: theme.palette.text.primary,
},

21
src/components/common/BlockedNamesModal/BlockedNamesModal-styles.ts
View File

@@ -1,15 +1,11 @@
import { styled } from '@mui/system';
import {
Box,
Modal,
Typography
} from '@mui/material';
import { Box, Modal, Typography } from '@mui/material';
export const StyledModal = styled(Modal)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}))
justifyContent: 'center',
}));
export const ModalContent = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
@@ -17,12 +13,11 @@ export const ModalContent = styled(Box)(({ theme }) => ({
borderRadius: theme.spacing(1),
width: '40%',
'&:focus': {
outline: 'none'
}
}))
outline: 'none',
},
}));
export const ModalText = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "25px",
fontSize: '25px',
color: theme.palette.text.primary,
}));
}));

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

@@ -80,7 +80,6 @@ export const BlockedNamesModal: React.FC<PostModalProps> = ({
sx={{
backgroundColor: theme.palette.primary.light,
color: theme.palette.text.primary,
fontFamily: 'Raleway',
}}
onClick={() => removeFromBlockList(name)}
>

315
src/components/common/Comments/Comments-styles.tsx
View File

@@ -1,281 +1,272 @@
import { styled } from "@mui/system";
import { Card, Box, Typography, Button, TextField } from "@mui/material";
import { styled } from '@mui/system';
import { Card, Box, Typography, Button, TextField } from '@mui/material';
export const StyledCard = styled(Card)(({ theme }) => ({
backgroundColor:
theme.palette.mode === "light"
theme.palette.mode === 'light'
? theme.palette.primary.main
: theme.palette.primary.dark,
maxWidth: "600px",
width: "100%",
margin: "10px 0px",
cursor: "pointer",
"@media (max-width: 450px)": {
width: "100%;",
maxWidth: '600px',
width: '100%',
margin: '10px 0px',
cursor: 'pointer',
'@media (max-width: 450px)': {
width: '100%;',
},
}));
export const CardContentContainer = styled(Box)(({ theme }) => ({
backgroundColor:
theme.palette.mode === "light"
theme.palette.mode === 'light'
? theme.palette.primary.dark
: theme.palette.primary.light,
margin: "5px 10px",
borderRadius: "15px",
margin: '5px 10px',
borderRadius: '15px',
}));
export const CardContentContainerComment = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.mode === "light" ? "#a9d9d038" : "#c3abe414",
backgroundColor: theme.palette.mode === 'light' ? '#a9d9d038' : '#c3abe414',
border: `1px solid ${theme.palette.primary.main}`,
margin: "0px",
padding: "8px 15px",
borderRadius: "8px",
width: "100%",
display: "flex",
flexDirection: "column",
margin: '0px',
padding: '8px 15px',
borderRadius: '8px',
width: '100%',
display: 'flex',
flexDirection: 'column',
}));
export const StyledCardHeader = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px',
});
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "7px",
padding: "9px 7px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '7px',
padding: '9px 7px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardContent = styled(Box)({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-start",
padding: "5px 10px",
gap: "10px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
padding: '5px 10px',
gap: '10px',
});
export const StyledCardContentComment = styled(Box)({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
padding: "5px 10px",
gap: "10px",
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
padding: '5px 10px',
gap: '10px',
});
export const StyledCardComment = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
color: theme.palette.text.primary,
fontSize: "19px",
wordBreak: "break-word",
fontSize: '19px',
wordBreak: 'break-word',
}));
export const TitleText = styled(Typography)({
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%",
fontFamily: "Cairo, sans-serif",
fontSize: "22px",
lineHeight: "1.2",
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '100%',
fontSize: '22px',
lineHeight: '1.2',
});
export const AuthorText = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "16px",
lineHeight: "1.2",
fontSize: '16px',
lineHeight: '1.2',
});
export const AuthorTextComment = styled(Typography)(({ theme }) => ({
fontFamily: "Montserrat, sans-serif",
fontSize: "17px",
letterSpacing: "0.3px",
fontSize: '17px',
letterSpacing: '0.3px',
fontWeight: 400,
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const IconsBox = styled(Box)({
display: "flex",
gap: "3px",
position: "absolute",
top: "12px",
right: "5px",
transition: "all 0.3s ease-in-out",
display: 'flex',
gap: '3px',
position: 'absolute',
top: '12px',
right: '5px',
transition: 'all 0.3s ease-in-out',
});
export const BookmarkIconContainer = styled(Box)({
display: "flex",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
backgroundColor: "#fbfbfb",
color: "#50e3c2",
padding: "5px",
borderRadius: "3px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
transform: "scale(1.1)",
display: 'flex',
boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',
backgroundColor: '#fbfbfb',
color: '#50e3c2',
padding: '5px',
borderRadius: '3px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
transform: 'scale(1.1)',
},
});
export const BlockIconContainer = styled(Box)({
display: "flex",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
backgroundColor: "#fbfbfb",
color: "#c25252",
padding: "5px",
borderRadius: "3px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
transform: "scale(1.1)",
display: 'flex',
boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',
backgroundColor: '#fbfbfb',
color: '#c25252',
padding: '5px',
borderRadius: '3px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
transform: 'scale(1.1)',
},
});
export const CommentsContainer = styled(Box)({
width: "90%",
maxWidth: "1000px",
display: "flex",
flexDirection: "column",
flex: "1",
overflow: "auto",
width: '90%',
maxWidth: '1000px',
display: 'flex',
flexDirection: 'column',
flex: '1',
overflow: 'auto',
});
export const CommentContainer = styled(Box)({
display: "flex",
flexDirection: "column",
margin: "25px 0px 50px 0px",
maxWidth: "100%",
width: "100%",
gap: "10px",
padding: "0px 5px",
display: 'flex',
flexDirection: 'column',
margin: '25px 0px 50px 0px',
maxWidth: '100%',
width: '100%',
gap: '10px',
padding: '0px 5px',
});
export const NoCommentsRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "start",
flex: "1",
padding: "10px 0px",
fontFamily: "Mulish",
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
flex: '1',
padding: '10px 0px',
letterSpacing: 0,
fontWeight: 400,
fontSize: "18px",
fontSize: '18px',
});
export const LoadMoreCommentsButtonRow = styled(Box)({
display: "flex",
display: 'flex',
});
export const EditReplyButton = styled(Button)(({ theme }) => ({
width: "30px",
alignSelf: "flex-end",
width: '30px',
alignSelf: 'flex-end',
background: theme.palette.primary.light,
color: "#ffffff",
color: '#ffffff',
}));
export const LoadMoreCommentsButton = styled(Button)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
letterSpacing: '0.2px',
fontSize: '15px',
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
color: '#ffffff',
}));
export const CommentActionButtonRow = styled(Box)({
display: "flex",
alignItems: "center",
gap: "5px",
display: 'flex',
alignItems: 'center',
gap: '5px',
});
export const CommentEditorContainer = styled(Box)({
width: "100%",
display: "flex",
justifyContent: "start",
width: '100%',
display: 'flex',
justifyContent: 'start',
});
export const CommentDateText = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
fontSize: "13px",
marginLeft: "5px",
fontSize: '13px',
marginLeft: '5px',
color: theme.palette.text.primary,
}));
export const CommentInputContainer = styled(Box)({
display: "flex",
flexDirection: "column",
marginTop: "15px",
width: "90%",
maxWidth: "1000px",
borderRadius: "8px",
gap: "10px",
alignItems: "center",
marginBottom: "25px",
display: 'flex',
flexDirection: 'column',
marginTop: '15px',
width: '90%',
maxWidth: '1000px',
borderRadius: '8px',
gap: '10px',
alignItems: 'center',
marginBottom: '25px',
});
export const CommentInput = styled(TextField)(({ theme }) => ({
backgroundColor: theme.palette.mode === "light" ? "#a9d9d01d" : "#c3abe4a",
backgroundColor: theme.palette.mode === 'light' ? '#a9d9d01d' : '#c3abe4a',
border: `1px solid ${theme.palette.primary.main}`,
width: "100%",
borderRadius: "8px",
width: '100%',
borderRadius: '8px',
'& [class$="-MuiFilledInput-root"]': {
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
color: theme.palette.text.primary,
fontSize: "19px",
minHeight: "100px",
backgroundColor: "transparent",
"&:before": {
borderBottom: "none",
"&:hover": {
borderBottom: "none",
fontSize: '19px',
minHeight: '100px',
backgroundColor: 'transparent',
'&:before': {
borderBottom: 'none',
'&:hover': {
borderBottom: 'none',
},
},
"&:hover": {
backgroundColor: "transparent",
"&:before": {
borderBottom: "none",
'&:hover': {
backgroundColor: 'transparent',
'&:before': {
borderBottom: 'none',
},
},
},
}));
export const SubmitCommentButton = styled(Button)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
letterSpacing: '0.2px',
fontSize: '15px',
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
width: "75%",
color: '#ffffff',
width: '75%',
}));

41
src/components/common/ConsentModal.tsx
View File

@@ -1,14 +1,14 @@
import * as React from "react";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import localForage from "localforage";
import { useTheme } from "@mui/material";
import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import localForage from 'localforage';
import { useTheme } from '@mui/material';
const generalLocal = localForage.createInstance({
name: "q-tube-general",
name: 'q-tube-general',
});
export default function ConsentModal() {
@@ -22,11 +22,11 @@ export default function ConsentModal() {
const getIsConsented = React.useCallback(async () => {
try {
const hasConsented = await generalLocal.getItem("general-consent");
const hasConsented = await generalLocal.getItem('general-consent');
if (hasConsented) return;
setOpen(true);
generalLocal.setItem("general-consent", true);
generalLocal.setItem('general-consent', true);
} catch (error) {}
}, []);
@@ -44,20 +44,21 @@ export default function ConsentModal() {
<DialogTitle id="alert-dialog-title">Welcome</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Q-Tube is currently in its early stages, and may yet have undiscovered bugs.
The Qortal community, including the Qortal Development Group, cannot be held responsible for any
content published with the assistance of Q-Tube. All content published to QDN is done so by the owner of
the registered name, and no one else. The same applies to data loss, social manipulation,
any other potential issue. All responsibility lies with the user, as with every application built by
the Qortal Development Group.
</DialogContentText>
Q-Tube is currently in its early stages, and may yet have
undiscovered bugs. The Qortal community, including the Qortal
Development Group, cannot be held responsible for any content
published with the assistance of Q-Tube. All content published to
QDN is done so by the owner of the registered name, and no one else.
The same applies to data loss, social manipulation, any other
potential issue. All responsibility lies with the user, as with
every application built by the Qortal Development Group.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
sx={{
backgroundColor: theme.palette.primary.light,
color: theme.palette.text.primary,
fontFamily: "Arial",
}}
onClick={handleClose}
autoFocus

2
src/components/common/DownloadTaskManager.tsx
View File

@@ -135,7 +135,6 @@ export const DownloadTaskManager: React.FC = () => {
</Box>
<Typography
sx={{
fontFamily: 'Arial',
color: theme.palette.text.primary,
}}
variant="caption"
@@ -150,7 +149,6 @@ export const DownloadTaskManager: React.FC = () => {
fontSize: '10px',
width: '100%',
textAlign: 'start',
fontFamily: 'Arial',
color: theme.palette.text.primary,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',

315
src/components/common/SuperLikesList/Comments-styles.tsx
View File

@@ -1,281 +1,272 @@
import { styled } from "@mui/system";
import { Card, Box, Typography, Button, TextField } from "@mui/material";
import { styled } from '@mui/system';
import { Card, Box, Typography, Button, TextField } from '@mui/material';
export const StyledCard = styled(Card)(({ theme }) => ({
backgroundColor:
theme.palette.mode === "light"
theme.palette.mode === 'light'
? theme.palette.primary.main
: theme.palette.primary.dark,
maxWidth: "600px",
width: "100%",
margin: "10px 0px",
cursor: "pointer",
"@media (max-width: 450px)": {
width: "100%;",
maxWidth: '600px',
width: '100%',
margin: '10px 0px',
cursor: 'pointer',
'@media (max-width: 450px)': {
width: '100%;',
},
}));
export const CardContentContainer = styled(Box)(({ theme }) => ({
backgroundColor:
theme.palette.mode === "light"
theme.palette.mode === 'light'
? theme.palette.primary.dark
: theme.palette.primary.light,
margin: "5px 10px",
borderRadius: "15px",
margin: '5px 10px',
borderRadius: '15px',
}));
export const CardContentContainerComment = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.mode === "light" ? "#a9d9d038" : "#c3abe414",
backgroundColor: theme.palette.mode === 'light' ? '#a9d9d038' : '#c3abe414',
border: `1px solid gold`,
margin: "0px",
padding: "8px 15px",
borderRadius: "8px",
width: "100%",
display: "flex",
flexDirection: "column",
margin: '0px',
padding: '8px 15px',
borderRadius: '8px',
width: '100%',
display: 'flex',
flexDirection: 'column',
}));
export const StyledCardHeader = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px',
});
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "7px",
padding: "9px 7px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '7px',
padding: '9px 7px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "row",
gap: "2px",
alignItems: "center",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'row',
gap: '2px',
alignItems: 'center',
width: '100%',
});
export const StyledCardContent = styled(Box)({
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-start",
padding: "5px 10px",
gap: "10px",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-start',
padding: '5px 10px',
gap: '10px',
});
export const StyledCardContentComment = styled(Box)({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
padding: "5px 10px",
gap: "10px",
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
padding: '5px 10px',
gap: '10px',
});
export const StyledCardComment = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
color: theme.palette.text.primary,
fontSize: "19px",
wordBreak: "break-word",
fontSize: '19px',
wordBreak: 'break-word',
}));
export const TitleText = styled(Typography)({
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
width: "100%",
fontFamily: "Cairo, sans-serif",
fontSize: "22px",
lineHeight: "1.2",
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
width: '100%',
fontSize: '22px',
lineHeight: '1.2',
});
export const AuthorText = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "16px",
lineHeight: "1.2",
fontSize: '16px',
lineHeight: '1.2',
});
export const AuthorTextComment = styled(Typography)(({ theme }) => ({
fontFamily: "Montserrat, sans-serif",
fontSize: "17px",
letterSpacing: "0.3px",
fontSize: '17px',
letterSpacing: '0.3px',
fontWeight: 400,
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const IconsBox = styled(Box)({
display: "flex",
gap: "3px",
position: "absolute",
top: "12px",
right: "5px",
transition: "all 0.3s ease-in-out",
display: 'flex',
gap: '3px',
position: 'absolute',
top: '12px',
right: '5px',
transition: 'all 0.3s ease-in-out',
});
export const BookmarkIconContainer = styled(Box)({
display: "flex",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
backgroundColor: "#fbfbfb",
color: "#50e3c2",
padding: "5px",
borderRadius: "3px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
transform: "scale(1.1)",
display: 'flex',
boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',
backgroundColor: '#fbfbfb',
color: '#50e3c2',
padding: '5px',
borderRadius: '3px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
transform: 'scale(1.1)',
},
});
export const BlockIconContainer = styled(Box)({
display: "flex",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
backgroundColor: "#fbfbfb",
color: "#c25252",
padding: "5px",
borderRadius: "3px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
transform: "scale(1.1)",
display: 'flex',
boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',
backgroundColor: '#fbfbfb',
color: '#c25252',
padding: '5px',
borderRadius: '3px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
transform: 'scale(1.1)',
},
});
export const CommentsContainer = styled(Box)({
width: "98%",
maxWidth: "1000px",
display: "flex",
flexDirection: "column",
flex: "1",
overflow: "auto",
width: '98%',
maxWidth: '1000px',
display: 'flex',
flexDirection: 'column',
flex: '1',
overflow: 'auto',
});
export const CommentContainer = styled(Box)({
display: "flex",
flexDirection: "column",
margin: "25px 0px 50px 0px",
maxWidth: "100%",
width: "100%",
gap: "10px",
padding: "0px 5px",
display: 'flex',
flexDirection: 'column',
margin: '25px 0px 50px 0px',
maxWidth: '100%',
width: '100%',
gap: '10px',
padding: '0px 5px',
});
export const NoCommentsRow = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "start",
flex: "1",
padding: "10px 0px",
fontFamily: "Mulish",
display: 'flex',
alignItems: 'center',
justifyContent: 'start',
flex: '1',
padding: '10px 0px',
letterSpacing: 0,
fontWeight: 400,
fontSize: "18px",
fontSize: '18px',
});
export const LoadMoreCommentsButtonRow = styled(Box)({
display: "flex",
display: 'flex',
});
export const EditReplyButton = styled(Button)(({ theme }) => ({
width: "30px",
alignSelf: "flex-end",
width: '30px',
alignSelf: 'flex-end',
background: theme.palette.primary.light,
color: "#ffffff",
color: '#ffffff',
}));
export const LoadMoreCommentsButton = styled(Button)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
letterSpacing: '0.2px',
fontSize: '15px',
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
color: '#ffffff',
}));
export const CommentActionButtonRow = styled(Box)({
display: "flex",
alignItems: "center",
gap: "5px",
display: 'flex',
alignItems: 'center',
gap: '5px',
});
export const CommentEditorContainer = styled(Box)({
width: "100%",
display: "flex",
justifyContent: "center",
width: '100%',
display: 'flex',
justifyContent: 'center',
});
export const CommentDateText = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
fontSize: "13px",
marginLeft: "5px",
fontSize: '13px',
marginLeft: '5px',
color: theme.palette.text.primary,
}));
export const CommentInputContainer = styled(Box)({
display: "flex",
flexDirection: "column",
marginTop: "15px",
width: "90%",
maxWidth: "1000px",
borderRadius: "8px",
gap: "10px",
alignItems: "center",
marginBottom: "25px",
display: 'flex',
flexDirection: 'column',
marginTop: '15px',
width: '90%',
maxWidth: '1000px',
borderRadius: '8px',
gap: '10px',
alignItems: 'center',
marginBottom: '25px',
});
export const CommentInput = styled(TextField)(({ theme }) => ({
backgroundColor: theme.palette.mode === "light" ? "#a9d9d01d" : "#c3abe4a",
backgroundColor: theme.palette.mode === 'light' ? '#a9d9d01d' : '#c3abe4a',
border: `1px solid ${theme.palette.primary.main}`,
width: "100%",
borderRadius: "8px",
width: '100%',
borderRadius: '8px',
'& [class$="-MuiFilledInput-root"]': {
fontFamily: "Mulish",
letterSpacing: 0,
fontWeight: 400,
color: theme.palette.text.primary,
fontSize: "19px",
minHeight: "100px",
backgroundColor: "transparent",
"&:before": {
borderBottom: "none",
"&:hover": {
borderBottom: "none",
fontSize: '19px',
minHeight: '100px',
backgroundColor: 'transparent',
'&:before': {
borderBottom: 'none',
'&:hover': {
borderBottom: 'none',
},
},
"&:hover": {
backgroundColor: "transparent",
"&:before": {
borderBottom: "none",
'&:hover': {
backgroundColor: 'transparent',
'&:before': {
borderBottom: 'none',
},
},
},
}));
export const SubmitCommentButton = styled(Button)(({ theme }) => ({
fontFamily: "Montserrat",
fontWeight: 400,
letterSpacing: "0.2px",
fontSize: "15px",
letterSpacing: '0.2px',
fontSize: '15px',
backgroundColor: theme.palette.primary.main,
color: "#ffffff",
width: "75%",
color: '#ffffff',
width: '75%',
}));

15
src/components/common/TextEditor/DisplayHtml.tsx
View File

@@ -1,16 +1,15 @@
import { Box, styled } from "@mui/material";
import DOMPurify from "dompurify";
import { useMemo } from "react";
import { convertQortalLinks } from "./utils";
import { Box, styled } from '@mui/material';
import DOMPurify from 'dompurify';
import { useMemo } from 'react';
import { convertQortalLinks } from './utils';
const CrowdfundInlineContent = styled(Box)(({ theme }) => ({
display: "flex",
fontFamily: "Mulish",
fontSize: "19px",
display: 'flex',
fontSize: '19px',
fontWeight: 400,
letterSpacing: 0,
color: theme.palette.text.primary,
width: "100%",
width: '100%',
}));
export const DisplayHtml = ({ html }) => {

4
src/components/layout/Navbar/Components/UserMenu.tsx
View File

@@ -16,7 +16,7 @@ import { Names } from '../../../../state/global/names.ts';
import { useAuth } from 'qapp-core';
export interface NavBarMenuProps {
isShowMenu: boolean;
userAvatar: string;
userAvatar: string | null;
userName: string | null;
allNames: Names;
}
@@ -56,7 +56,7 @@ export const UserMenu = ({
MenuHeader={
<AvatarContainer>
{!isScreenSmall && <NavbarName>{userName}</NavbarName>}
<Avatar src={userAvatar}>
<Avatar src={userAvatar || ''}>
{userName?.charAt(0).toUpperCase()}
</Avatar>
</AvatarContainer>

135
src/components/layout/Navbar/Navbar-styles.tsx
View File

@@ -1,118 +1,115 @@
import { AppBar, Button, Typography, Box } from "@mui/material";
import { styled } from "@mui/system";
import { LightModeSVG } from "../../../assets/svgs/LightModeSVG";
import { DarkModeSVG } from "../../../assets/svgs/DarkModeSVG";
import { fontSizeSmall } from "../../../constants/Misc.ts";
import { AppBar, Button, Typography, Box } from '@mui/material';
import { styled } from '@mui/system';
import { LightModeSVG } from '../../../assets/svgs/LightModeSVG';
import { DarkModeSVG } from '../../../assets/svgs/DarkModeSVG';
import { fontSizeSmall } from '../../../constants/Misc.ts';
export const CustomAppBar = styled(AppBar)(({ theme }) => ({
display: "flex",
flexDirection: "row",
justifyContent: "start",
alignItems: "center",
width: "100%",
padding: "5px 16px 5px 5px",
backgroundImage: "none",
display: 'flex',
flexDirection: 'row',
justifyContent: 'start',
alignItems: 'center',
width: '100%',
padding: '5px 16px 5px 5px',
backgroundImage: 'none',
borderBottom: `1px solid ${theme.palette.primary.light}`,
backgroundColor: theme.palette.background.default,
height: "50px",
height: '50px',
}));
export const LogoContainer = styled("div")({
cursor: "pointer",
height: "100%",
display: "flex",
alignItems: "center",
export const LogoContainer = styled('div')({
cursor: 'pointer',
height: '100%',
display: 'flex',
alignItems: 'center',
});
export const CustomTitle = styled(Typography)({
fontWeight: 600,
color: "#000000",
color: '#000000',
});
export const AuthenticateButton = styled(Button)(({ theme }) => ({
display: "flex",
flexDirection: "row",
alignItems: "center",
padding: "8px 15px",
borderRadius: "40px",
gap: "4px",
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
padding: '8px 15px',
borderRadius: '40px',
gap: '4px',
backgroundColor: theme.palette.secondary.main,
color: "#fff",
fontFamily: "Raleway",
transition: "all 0.3s ease-in-out",
boxShadow: "none",
"&:hover": {
cursor: "pointer",
boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
color: '#fff',
transition: 'all 0.3s ease-in-out',
boxShadow: 'none',
'&:hover': {
cursor: 'pointer',
boxShadow: 'rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;',
backgroundColor: theme.palette.secondary.dark,
filter: "brightness(1.1)",
filter: 'brightness(1.1)',
},
}));
export const AvatarContainer = styled(Box)({
display: "flex",
alignItems: "center",
"&:hover": {
cursor: "pointer",
"& #expand-icon": {
transition: "all 0.3s ease-in-out",
filter: "brightness(0.7)",
display: 'flex',
alignItems: 'center',
'&:hover': {
cursor: 'pointer',
'& #expand-icon': {
transition: 'all 0.3s ease-in-out',
filter: 'brightness(0.7)',
},
},
});
export const DropdownContainer = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: "5px",
display: 'flex',
alignItems: 'center',
gap: '5px',
backgroundColor: theme.palette.background.paper,
padding: "10px 15px",
transition: "all 0.4s ease-in-out",
"&:hover": {
cursor: "pointer",
padding: '10px 15px',
transition: 'all 0.4s ease-in-out',
'&:hover': {
cursor: 'pointer',
filter:
theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)",
theme.palette.mode === 'light' ? 'brightness(0.95)' : 'brightness(1.1)',
},
}));
export const DropdownText = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const NavbarName = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: fontSizeSmall,
color: theme.palette.text.primary,
marginRight: "10px",
marginRight: '10px',
}));
export const ThemeSelectRow = styled(Box)({
display: "flex",
alignItems: "center",
gap: "10px",
height: "100%",
display: 'flex',
alignItems: 'center',
gap: '10px',
height: '100%',
});
export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
transition: "all 0.1s ease-in-out",
"&:hover": {
cursor: "pointer",
transition: 'all 0.1s ease-in-out',
'&:hover': {
cursor: 'pointer',
filter:
theme.palette.mode === "dark"
? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
theme.palette.mode === 'dark'
? 'drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))'
: 'drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))',
},
}));
export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
transition: "all 0.1s ease-in-out",
"&:hover": {
cursor: "pointer",
transition: 'all 0.1s ease-in-out',
'&:hover': {
cursor: 'pointer',
filter:
theme.palette.mode === "dark"
? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
: "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
theme.palette.mode === 'dark'
? 'drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))'
: 'drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))',
},
}));

290
src/index.css
View File

@@ -1,41 +1,97 @@
/* Roboto Thin 100 */
@font-face {
font-family: 'Cambon Light';
src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
font-family: 'Roboto';
src: url('./fonts/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
/* Roboto Thin Italic 100 */
@font-face {
font-family: 'Merriweather Sans';
src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");
font-family: 'Roboto';
src: url('./fonts/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
/* Roboto Light 300 */
@font-face {
font-family: 'Karla';
src: url("./styles/fonts/Karla.ttf") format("truetype");
font-family: 'Roboto';
src: url('./fonts/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
/* Roboto Light Italic 300 */
@font-face {
font-family: 'Proxima Nova';
src: url("./styles/fonts/ProximaNova.otf") format("opentype");
font-family: 'Roboto';
src: url('./fonts/Roboto-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
/* Roboto Regular 400 */
@font-face {
font-family: 'Raleway';
src: url("./styles/fonts/Raleway.ttf") format("truetype");
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
/* Roboto Italic 400 */
@font-face {
font-family: 'Catamaran';
src: url("./styles/fonts/Catamaran.ttf") format("truetype");
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
/* Roboto Medium 500 */
@font-face {
font-family: 'Oxygen';
src: url("./styles/fonts/Oxygen.ttf") format("truetype");
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
/* Roboto Medium Italic 500 */
@font-face {
font-family: 'Cairo';
src: url("./styles/fonts/Cairo.ttf") format("truetype");
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
/* Roboto Bold 700 */
@font-face {
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
/* Roboto Bold Italic 700 */
@font-face {
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
/* Roboto Black 900 */
@font-face {
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
/* Roboto Black Italic 900 */
@font-face {
font-family: 'Roboto';
src: url('./styles/fonts/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
:root {
@@ -44,7 +100,6 @@
box-sizing: border-box;
}
.line-clamp {
height: 100px;
overflow: hidden;
@@ -55,9 +110,8 @@
}
.edit-btn:hover {
opacity: .75;
transition: .2s all;
opacity: 0.75;
transition: 0.2s all;
}
.post-image {
@@ -67,7 +121,9 @@
height: 100%;
}
a:link { color: #8AB4F8}
a:link {
color: #8ab4f8;
}
.test-grid {
display: grid;
@@ -81,125 +137,125 @@ a:link { color: #8AB4F8}
}
.test-grid-item {
border: 1px solid powderblue;
border: 1px solid powderblue;
}
body::-webkit-scrollbar-track {
background-color: transparent;
background-color: transparent;
}
body::-webkit-scrollbar-track:hover {
background-color: transparent;
}
}
body::-webkit-scrollbar-track:hover {
background-color: transparent;
}
body::-webkit-scrollbar {
width: 16px;
height: 10px;
background-color: white;
}
body::-webkit-scrollbar {
width: 16px;
height: 10px;
background-color: white;
}
body::-webkit-scrollbar-thumb {
background-color: #838eee;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
body::-webkit-scrollbar-thumb {
background-color: #838eee;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #6270f0;
}
body::-webkit-scrollbar-thumb:hover {
background-color: #6270f0;
}
.MuiList-root::-webkit-scrollbar-track {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar-track:hover {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar-track {
background-color: transparent;
.MuiList-root::-webkit-scrollbar {
width: 14px;
height: 10px;
background-color: white;
}
}
.MuiList-root::-webkit-scrollbar-track:hover {
background-color: transparent;
}
.MuiList-root::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
.MuiList-root::-webkit-scrollbar {
width: 14px;
height: 10px;
background-color: white;
}
.MuiList-root::-webkit-scrollbar-thumb:hover {
background-color: lightslategray;
}
.MuiList-root::-webkit-scrollbar-thumb {
background-color: lightgray;
border-radius: 8px;
background-clip: content-box;
border: 4px solid transparent;
}
.my-masonry-grid {
display: -webkit-box; /* Not needed if autoprefixing */
display: -ms-flexbox; /* Not needed if autoprefixing */
display: flex;
margin-left: -20px; /* gutter size offset */
width: auto;
padding: 15px 20px;
}
.MuiList-root::-webkit-scrollbar-thumb:hover {
background-color: lightslategray;
}
.my-masonry-grid_column {
padding-left: 20px; /* gutter size */
background-clip: padding-box;
}
.my-masonry-grid {
display: -webkit-box; /* Not needed if autoprefixing */
display: -ms-flexbox; /* Not needed if autoprefixing */
display: flex;
margin-left: -20px; /* gutter size offset */
width: auto;
padding: 15px 20px;
}
/* Style your items */
.my-masonry-grid_column > li {
/* change div to reference your elements you put in <Masonry> */
margin-bottom: 30px;
}
.my-masonry-grid_column {
padding-left: 20px; /* gutter size */
background-clip: padding-box;
}
/* Style your items */
.my-masonry-grid_column > li { /* change div to reference your elements you put in <Masonry> */
margin-bottom: 30px;
}
.my-svg path {
fill: red;
}
.my-svg path {
fill: red
}
.qortal-link {
text-decoration: none; /* Removes the underline */
color: inherit; /* Inherits the color of the parent element */
}
.qortal-link:hover,
a:focus {
text-decoration: underline; /* Adds underline on hover and focus for accessibility */
}
.qortal-link {
text-decoration: none; /* Removes the underline */
color: inherit; /* Inherits the color of the parent element */
}
.qortal-link:hover, a:focus {
text-decoration: underline; /* Adds underline on hover and focus for accessibility */
}
.download-icon {
transition: all 0.5s ease-in-out;
animation: downloadIconAnimation 2s infinite;
}
.download-icon {
transition: all 0.5s ease-in-out;
animation: downloadIconAnimation 2s infinite;
@keyframes downloadIconAnimation {
0% {
transform: scale(1);
fill: #fff;
}
@keyframes downloadIconAnimation {
0% { transform: scale(1); fill: #fff; }
50% { transform: scale(1.2); fill: #3498db; }
100% { transform: scale(1); fill: #fff; }
}
.closePlayer {
position: absolute;
top: 0px;
width: 100%;
transition: all 0.3s;
display: flex;
justify-content: flex-end;
z-index: 8000;
50% {
transform: scale(1.2);
fill: #3498db;
}
100% {
transform: scale(1);
fill: #fff;
}
}
.closePlayer {
position: absolute;
top: 0px;
width: 100%;
transition: all 0.3s;
display: flex;
justify-content: flex-end;
z-index: 8000;
}
/* When the screen is 600px or less, display .myClassUnder600 and hide .myClassOver600 */
@media screen and (max-width: 600px) {
.myClassUnder600 {
display: none !important;
}
}
@media screen and (min-width: 601px) {
@@ -210,7 +266,7 @@ body::-webkit-scrollbar-track {
.ql-editor {
min-height: 100px;
width: 100%
width: 100%;
}
.ql-editor img {
@@ -218,7 +274,7 @@ body::-webkit-scrollbar-track {
}
.ql-container {
font-size: 16px
font-size: 16px;
}
.hover-click {
@@ -226,4 +282,4 @@ body::-webkit-scrollbar-track {
}
.hover-click:hover {
opacity: 0.7;
}
}

18
src/main.tsx
View File

@@ -1,18 +1,10 @@
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
interface CustomWindow extends Window {
_qdnBase: string;
}
const customWindow = window as unknown as CustomWindow;
const baseUrl = customWindow?._qdnBase || "";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<>
<App />
<div id="modal-root" />
</>
</>
);

80
src/pages/ContentPages/PlaylistContent/PlaylistContent-styles.tsx
View File

@@ -1,26 +1,24 @@
import { styled } from "@mui/system";
import { Box, Grid, Typography, Checkbox } from "@mui/material";
import { styled } from '@mui/system';
import { Box, Grid, Typography, Checkbox } from '@mui/material';
export const VideoPlayerContainer = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}));
export const VideoTitle = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "20px",
fontSize: '20px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const VideoDescription = styled(Typography)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: "none",
wordBreak: "break-word",
userSelect: 'none',
wordBreak: 'break-word',
}));
export const Spacer = ({ height }: any) => {
@@ -34,51 +32,49 @@ export const Spacer = ({ height }: any) => {
};
export const StyledCardHeaderComment = styled(Box)({
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
gap: "5px",
padding: "7px 0px",
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
gap: '5px',
padding: '7px 0px',
});
export const StyledCardCol = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const StyledCardColComment = styled(Box)({
display: "flex",
overflow: "hidden",
flexDirection: "column",
gap: "2px",
alignItems: "flex-start",
width: "100%",
display: 'flex',
overflow: 'hidden',
flexDirection: 'column',
gap: '2px',
alignItems: 'flex-start',
width: '100%',
});
export const AuthorTextComment = styled(Typography)({
fontFamily: "Raleway, sans-serif",
fontSize: "20px",
lineHeight: "1.2",
fontSize: '20px',
lineHeight: '1.2',
});
export const FileAttachmentContainer = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
gap: "20px",
padding: "5px 10px",
display: 'flex',
alignItems: 'center',
gap: '20px',
padding: '5px 10px',
border: `1px solid ${theme.palette.text.primary}`,
width: "350px",
width: '350px',
}));
export const FileAttachmentFont = styled(Typography)(({ theme }) => ({
fontFamily: "Mulish",
color: theme.palette.text.primary,
fontSize: "20px",
fontSize: '20px',
letterSpacing: 0,
fontWeight: 400,
userSelect: "none",
whiteSpace: "nowrap",
userSelect: 'none',
whiteSpace: 'nowrap',
}));

4
src/pages/ContentPages/VideoContent/VideoContent-styles.tsx
View File

@@ -11,14 +11,12 @@ export const VideoContentContainer = styled(Box)(({ theme }) => ({
export const VideoPlayerContainer = styled(Box)(({ theme }) => ({}));
export const VideoTitle = styled(Typography)(({ theme }) => ({
fontFamily: 'Raleway',
fontSize: fontSizeMedium,
color: theme.palette.text.primary,
wordBreak: 'break-word',
}));
export const VideoDescription = styled(Typography)(({ theme }) => ({
fontFamily: 'Raleway',
fontSize: '16px',
color: theme.palette.text.primary,
userSelect: 'none',
@@ -60,7 +58,6 @@ export const StyledCardColComment = styled(Box)({
});
export const AuthorTextComment = styled(Typography)({
fontFamily: 'Raleway, sans-serif',
fontSize: fontSizeMedium,
lineHeight: '1.2',
});
@@ -74,7 +71,6 @@ export const FileAttachmentContainer = styled(Box)(({ theme }) => ({
}));
export const FileAttachmentFont = styled(Typography)(({ theme }) => ({
fontFamily: 'Mulish',
color: theme.palette.text.primary,
fontSize: '20px',
letterSpacing: 0,

206
src/pages/Home/Components/VideoList-styles.tsx
View File

@@ -1,4 +1,4 @@
import { styled } from "@mui/system";
import { styled } from '@mui/system';
import {
Box,
Grid,
@@ -8,55 +8,55 @@ import {
InputLabel,
Autocomplete,
Radio,
} from "@mui/material";
import { fontSizeMedium, fontSizeSmall } from "../../../constants/Misc.ts";
} from '@mui/material';
import { fontSizeMedium, fontSizeSmall } from '../../../constants/Misc.ts';
export const VideoContainer = styled(Grid)(({ theme }) => ({
position: "relative",
display: "flex",
padding: "15px",
flexDirection: "row",
gap: "20px",
flexWrap: "wrap",
justifyContent: "flex-start",
width: "100%",
position: 'relative',
display: 'flex',
padding: '15px',
flexDirection: 'row',
gap: '20px',
flexWrap: 'wrap',
justifyContent: 'flex-start',
width: '100%',
}));
export const VideoCardContainer = styled("div")(({ theme }) => ({
width: "100%",
export const VideoCardContainer = styled('div')(({ theme }) => ({
width: '100%',
}));
export const VideoCardCol = styled("div")({
width: "100%", // Minimum width of each item
maxWidth: "300px",
position: 'relative'
export const VideoCardCol = styled('div')({
width: '100%', // Minimum width of each item
maxWidth: '300px',
position: 'relative',
});
export const VideoCard = styled(Grid)(({ theme }) => ({
position: "relative",
display: "flex",
flexDirection: "column",
height: "320px",
position: 'relative',
display: 'flex',
flexDirection: 'column',
height: '320px',
// width: '300px',
backgroundColor: theme.palette.background.paper,
borderRadius: "8px",
padding: "10px 15px",
gap: "20px",
cursor: "pointer",
borderRadius: '8px',
padding: '10px 15px',
gap: '20px',
cursor: 'pointer',
border:
theme.palette.mode === "dark"
? "none"
theme.palette.mode === 'dark'
? 'none'
: `1px solid ${theme.palette.primary.light}`,
boxShadow:
theme.palette.mode === "dark"
? "0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)"
: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
transition: "all 0.3s ease-in-out",
"&:hover": {
theme.palette.mode === 'dark'
? '0px 4px 5px 0px hsla(0,0%,0%,0.14), 0px 1px 10px 0px hsla(0,0%,0%,0.12), 0px 2px 4px -1px hsla(0,0%,0%,0.2)'
: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
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;",
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;',
},
}));
@@ -68,124 +68,120 @@ const DoubleLine = styled(Typography)`
`;
export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "16px",
letterSpacing: "0.4px",
fontSize: '16px',
letterSpacing: '0.4px',
color: theme.palette.text.primary,
userSelect: "none",
marginBottom: "auto",
userSelect: 'none',
marginBottom: 'auto',
}));
export const VideoCardName = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "16px",
letterSpacing: "0.4px",
fontSize: '16px',
letterSpacing: '0.4px',
color: theme.palette.text.primary,
userSelect: "none",
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
userSelect: 'none',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}));
export const VideoUploadDate = styled(Typography)(({ theme }) => ({
fontFamily: "Cairo",
fontSize: "18px",
letterSpacing: "0.4px",
fontSize: '18px',
letterSpacing: '0.4px',
color: theme.palette.text.primary,
userSelect: "none",
userSelect: 'none',
}));
export const BottomParent = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "flex-start",
flexDirection: "column",
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
}));
export const NameContainer = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
gap: "10px",
marginBottom: "2px",
width: "100%",
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
gap: '10px',
marginBottom: '2px',
width: '100%',
}));
export const VideoManagerRow = styled(Box)(({ theme }) => ({
display: "grid",
gridTemplateColumns: "1fr auto",
alignItems: "center",
justifyContent: "flex-end",
width: "100%",
display: 'grid',
gridTemplateColumns: '1fr auto',
alignItems: 'center',
justifyContent: 'flex-end',
width: '100%',
}));
export const FiltersCol = styled(Grid)(({ theme }) => ({
display: "flex",
flexDirection: "column",
height: "100%",
padding: "20px 15px",
display: 'flex',
flexDirection: 'column',
height: '100%',
padding: '20px 15px',
backgroundColor: theme.palette.background.default,
borderTop: `1px solid ${theme.palette.background.paper}`,
borderRight: `1px solid ${theme.palette.background.paper}`,
}));
export const FiltersContainer = styled(Box)(({ theme }) => ({
display: "flex",
flexDirection: "column",
display: 'flex',
flexDirection: 'column',
}));
export const FiltersRow = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
fontSize: fontSizeSmall,
userSelect: "none",
userSelect: 'none',
}));
export const FiltersCheckbox = styled(Checkbox)(({ theme }) => ({
color: "#c0d4ff",
"&.Mui-checked": {
color: "#6596ff",
color: '#c0d4ff',
'&.Mui-checked': {
color: '#6596ff',
},
}));
export const FiltersRadioButton = styled(Radio)(({ theme }) => ({
color: "#c0d4ff",
"&.Mui-checked": {
color: "#6596ff",
color: '#c0d4ff',
'&.Mui-checked': {
color: '#6596ff',
},
}));
export const FiltersSubContainer = styled(Box)(({ theme }) => ({
display: "flex",
alignItems: "start",
flexDirection: "column",
gap: "5px",
display: 'flex',
alignItems: 'start',
flexDirection: 'column',
gap: '5px',
}));
export const FilterDropdownLabel = styled(InputLabel)(({ theme }) => ({
fontFamily: "Raleway",
fontSize: "16px",
fontSize: '16px',
color: theme.palette.text.primary,
}));
export const IconsBox = styled(Box)({
display: "flex",
gap: "3px",
position: "absolute",
top: "12px",
right: "5px",
transition: "all 0.3s ease-in-out",
display: 'flex',
gap: '3px',
position: 'absolute',
top: '12px',
right: '5px',
transition: 'all 0.3s ease-in-out',
});
export const BlockIconContainer = styled(Box)({
display: "flex",
boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
backgroundColor: "#fbfbfb",
color: "#c25252",
padding: "5px",
borderRadius: "3px",
transition: "all 0.3s ease-in-out",
"&:hover": {
cursor: "pointer",
transform: "scale(1.1)",
display: 'flex',
boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;',
backgroundColor: '#fbfbfb',
color: '#c25252',
padding: '5px',
borderRadius: '3px',
transition: 'all 0.3s ease-in-out',
'&:hover': {
cursor: 'pointer',
transform: 'scale(1.1)',
},
});

BIN
src/styles/fonts/Cairo.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Cambon-Light.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Catamaran.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Karla.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Livvic.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Merriweather Sans.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Oxygen.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/ProximaNova.otf
View File

Binary file not shown.

BIN
src/styles/fonts/Raleway.ttf
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Black.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Bold.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Italic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Light.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Medium.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Regular.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-Thin.ttf Normal file
View File

Binary file not shown.

BIN
src/styles/fonts/Roboto-ThinItalic.ttf Normal file
View File

Binary file not shown.

23
src/styles/theme.ts
View File

@@ -2,42 +2,47 @@ import { createTheme } from '@mui/material/styles';
const commonThemeOptions = {
typography: {
fontFamily: ['Inter'].join(','),
fontFamily: ['Roboto'].join(','),
h1: {
fontSize: '2rem',
fontWeight: 600,
fontWeight: 700, // changed from 600 to match Roboto weights
lineHeight: 1.2,
},
h2: {
fontSize: '1.75rem',
fontWeight: 500,
lineHeight: 1.2,
},
h3: {
fontSize: '1.5rem',
fontWeight: 500,
lineHeight: 1.2,
},
h4: {
fontSize: '1.25rem',
fontWeight: 500,
lineHeight: 1.2,
},
h5: {
fontSize: '1rem',
fontWeight: 500,
lineHeight: 1.2,
},
h6: {
fontSize: '0.875rem',
fontWeight: 500,
lineHeight: 1.2,
},
body1: {
fontSize: '1rem',
fontWeight: 400,
lineHeight: 1.5,
lineHeight: 1.2,
letterSpacing: '0.5px',
},
body2: {
fontSize: '0.875rem',
fontWeight: 400,
lineHeight: 1.4,
lineHeight: 1.2,
letterSpacing: '0.2px',
},
},
@@ -102,12 +107,16 @@ const darkTheme = createTheme({
dark: 'rgb(45, 92, 201)',
light: 'rgb(130, 185, 255)',
},
info: {
main: '#29B6F6',
contrastText: 'rgba(0, 0, 0, 0.87)',
},
secondary: {
main: 'rgb(69, 173, 255)',
},
background: {
default: 'rgb(49, 51, 56)',
paper: 'rgb(62, 64, 68)',
default: '#0C0C10',
paper: '#050507',
},
text: {
primary: 'rgb(255, 255, 255)',