feat: design colors

lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx

@@ -36,11 +36,11 @@ 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 ||
-            settings.cfg.startpage.background.desktop
+          DESIGN_LIST[settings.cfg.theme] ||
+          ""
         }
         alt=""
         style={{
@@ -50,12 +50,12 @@ export const StartPageViewPublication = () => {
               ? "100%"
               : undefined,
           height: "100%",
+          minWidth: "100%",
           maxHeight: "100vh",
           objectFit: "cover",
           overflow: "hidden",
         }}
       />
-      ) : null
     ) : settings.cfg.startpage.background.type === "video" ? (
       settings.cfg.startpage.background.video ? (
         <YoutubeEmbedIframe

lib/ui_kit/Stepper.tsx

@@ -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": {
+        "& .MuiLinearProgress-bar": { background: theme.palette.primary.main },
-          background: theme.palette.primary.main,
+        "& .MuiMobileStepper-progress": {
-          opacity: 1,
+          background: hexToRgba(theme.palette.primary.main, 0.5),
         },
       }}
       nextButton={<></>}

lib/utils/hexToRgba.ts

@@ -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})`;
+};

lib/utils/themes/Publication/themePublication.ts

@@ -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",
+      secondary: "#3D9A63",
-    },
-
-    background: {
-      default: "#F9FBF1",
-    },
-  },
-});
-
-const Design3 = createTheme({
-  ...themePublic,
-  palette: {
-    primary: {
-      main: "#07A0C3",
-    },
-    secondary: {
-      main: "#252734",
-    },
-    text: {
-      primary: "#FFFFFF",
-      secondary: "#07A0C3",
     },
 
     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: {

package.json

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

yarn.lock

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