SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: design colors

Browse Source
This commit is contained in:
IlyaDoronin 2024-03-05 14:53:30 +03:00
parent a1249b422d
commit 2a02773c46
6 changed files with 78 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

@ -36,26 +36,26 @@ export const StartPageViewPublication = () => {
const background =
settings.cfg.startpage.background.type === "image" ? (
settings.cfg.startpage.background.desktop ? (
<img
src={
DESIGN_LIST[settings.cfg.design] ||
settings.cfg.startpage.background.desktop
}
alt=""
style={{
display: "block",
width:
isMobile || settings.cfg.startpageType === "expanded"
? "100%"
: undefined,
height: "100%",
maxHeight: "100vh",
objectFit: "cover",
overflow: "hidden",
}}
/>
) : null
<img
src={
settings.cfg.startpage.background.desktop ||
DESIGN_LIST[settings.cfg.theme] ||
""
}
alt=""
style={{
display: "block",
width:
isMobile || settings.cfg.startpageType === "expanded"
? "100%"
: undefined,
height: "100%",
minWidth: "100%",
maxHeight: "100vh",
objectFit: "cover",
overflow: "hidden",
}}
/>
) : settings.cfg.startpage.background.type === "video" ? (
settings.cfg.startpage.background.video ? (
<YoutubeEmbedIframe

8
lib/ui_kit/Stepper.tsx
View File

@ -1,5 +1,6 @@
import { useTheme } from "@mui/material";
import MobileStepper from "@mui/material/MobileStepper";
import { hexToRgba } from "@utils/hexToRgba";
interface Props {
activeStep: number;
@ -23,11 +24,10 @@ export default function ProgressMobileStepper({ activeStep, steps }: Props) {
height: "4px",
background: theme.palette.primary.light,
width: "100%",
opacity: 0.5,
},
"& .MuiLinearProgress-bar": {
background: theme.palette.primary.main,
opacity: 1,
"& .MuiLinearProgress-bar": { background: theme.palette.primary.main },
"& .MuiMobileStepper-progress": {
background: hexToRgba(theme.palette.primary.main, 0.5),
},
}}
nextButton={<></>}

7
lib/utils/hexToRgba.ts Normal file
View File

@ -0,0 +1,7 @@
import hexRgb from "hex-rgb";
export const hexToRgba = (hexColor: string, opacity?: number): string => {
const { red, green, blue, alpha } = hexRgb(hexColor);
return `rgba(${red}, ${green}, ${blue}, ${opacity || alpha})`;
};

80
lib/utils/themes/Publication/themePublication.ts
View File

@ -239,7 +239,7 @@ const Design1 = createTheme({
},
background: {
default: "#FFFCF6",
default: "#333647",
},
},
});
@ -248,34 +248,14 @@ const Design2 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
main: "#3D9A63",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#758E4F",
},
background: {
default: "#F9FBF1",
},
},
});
const Design3 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
secondary: "#3D9A63",
},
background: {
@ -284,22 +264,42 @@ const Design3 = createTheme({
},
});
const Design3 = createTheme({
...themePublic,
palette: {
primary: {
main: "#4B6A99",
},
secondary: {
main: "#252734",
},
text: {
primary: "#333647",
secondary: "#4B6A99",
},
background: {
default: "#FFFFFF",
},
},
});
const Design4 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
main: "#FF9431",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#F2B133",
secondary: "#FF9431",
},
background: {
default: "#FFFCF6",
default: "#333647",
},
},
});
@ -308,14 +308,14 @@ const Design5 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
main: "#2D99BA",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
secondary: "#2D99BA",
},
background: {
@ -344,18 +344,18 @@ const Design6 = createTheme({
},
});
const Design8 = createTheme({
const Design7 = createTheme({
...themePublic,
palette: {
primary: {
main: "#D34085",
main: "#B47C3B",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#D34085",
secondary: "#B47C3B",
},
background: {
@ -364,22 +364,22 @@ const Design8 = createTheme({
},
});
const Design7 = createTheme({
const Design8 = createTheme({
...themePublic,
palette: {
primary: {
main: "#F2B133",
main: "#F0B136",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#F2B133",
secondary: "#F0B136",
},
background: {
default: "#FFFCF6",
default: "#333647",
},
},
});
@ -388,18 +388,18 @@ const Design9 = createTheme({
...themePublic,
palette: {
primary: {
main: "#758E4F",
main: "#678F48",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#758E4F",
secondary: "#678F48",
},
background: {
default: "#F9FBF1",
default: "#333647",
},
},
});
@ -408,14 +408,14 @@ const Design10 = createTheme({
...themePublic,
palette: {
primary: {
main: "#07A0C3",
main: "#3666AF",
},
secondary: {
main: "#252734",
},
text: {
primary: "#FFFFFF",
secondary: "#07A0C3",
secondary: "#3666AF",
},
background: {

3
package.json
View File

@ -85,6 +85,7 @@
"zustand": "^4.3.8"
},
"dependencies": {
"country-flag-emoji-polyfill": "^0.1.8"
"country-flag-emoji-polyfill": "^0.1.8",
"hex-rgb": "^5.0.0"
}
}

5
yarn.lock
View File

@ -2269,6 +2269,11 @@ he@^1.2.0:
resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
hex-rgb@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-5.0.0.tgz#e2c9eb6a37498d66c5a350a221ed4c2c7d1a92d6"
integrity sha512-NQO+lgVUCtHxZ792FodgW0zflK+ozS9X9dwGp9XvvmPlH7pyxd588cn24TD3rmPm/N0AIRXF10Otah8yKqGw4w==
hoist-non-react-statics@^3.3.1:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"