diff --git a/IdoSellAddOn/script.js b/IdoSellAddOn/script.js
index 8629540..5e2442b 100644
--- a/IdoSellAddOn/script.js
+++ b/IdoSellAddOn/script.js
@@ -144,6 +144,7 @@ function idmGetSingleProdGraphQLPM({
name
link
type
+ icon
${labels ? "zones" : ""}
${
opinions
@@ -406,25 +407,32 @@ async function idmPictureModuleProductsPM(containerEL) {
// OPINIE
let opinionsHTML = "";
- if (isOpinions) {
+ if (
+ isOpinions &&
+ typeof prodData.opinion?.rating === "number" &&
+ typeof prodData.opinion?.count === "number"
+ ) {
opinionsHTML = `
-
-
-
-
-
+
+
+
+
+
${prodData.opinion.rating} / 5.00
${prodData.opinion.count}
`;
}
prodEl.innerHTML = `
- ${isLabels ? `${labelsHTML}` : ""}
- ${isOpinions ? `${opinionsHTML}
` : ""}
- ${prodData.name}
- ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
- ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
+ 
+
+ ${isLabels ? `
${labelsHTML}` : ""}
+ ${isOpinions ? `
${opinionsHTML}
` : ""}
+
${prodData.name}
+ ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
+ ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
+
![]()
{preview && (
- <>
+
{labels && (
Nowość
@@ -130,7 +130,7 @@ function GeneratePreviewSinglePoint({
Do koszyka
)}
-
+
)}
diff --git a/src/features/htmlBuilder/generated/GenerateStyle.jsx b/src/features/htmlBuilder/generated/GenerateStyle.jsx
index f2dc998..7168d16 100644
--- a/src/features/htmlBuilder/generated/GenerateStyle.jsx
+++ b/src/features/htmlBuilder/generated/GenerateStyle.jsx
@@ -3,397 +3,443 @@ function GenerateStyle() {
<>
diff --git a/src/features/photoModule/PhotoGenericOptions.jsx b/src/features/photoModule/PhotoGenericOptions.jsx
index 719fff1..8ef3a2f 100644
--- a/src/features/photoModule/PhotoGenericOptions.jsx
+++ b/src/features/photoModule/PhotoGenericOptions.jsx
@@ -6,6 +6,8 @@ import {
FormGroup,
Switch,
} from "@mui/material";
+import ColorPickerInput from "../../ui/ColorPickerInput";
+import { DEFAULT_COLOR_PALLETE } from "../../constants/photo";
function PhotoGenericOptions() {
const setField = useSharedState((state) => state.setField);
@@ -15,6 +17,8 @@ function PhotoGenericOptions() {
const labels = useSharedState((state) => state.labels);
const opinions = useSharedState((state) => state.opinions);
const addToBasket = useSharedState((state) => state.addToBasket);
+ const bgColor = useSharedState((state) => state.bgColor);
+ const textColor = useSharedState((state) => state.textColor);
const handleUrlRadioChange = (e) => {
toggleField("isRWD");
@@ -67,6 +71,25 @@ function PhotoGenericOptions() {
+
+ setField("bgColor", newColor)}
+ label="Kolor Tła"
+ palette={DEFAULT_COLOR_PALLETE}
+ />
+ setField("textColor", newColor)}
+ label="Kolor Tekstu"
+ palette={DEFAULT_COLOR_PALLETE}
+ />
+
+
+
+
Uwaga!
diff --git a/src/main.jsx b/src/main.jsx
index e8f56c2..5257df6 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,28 +1,26 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import { ThemeProvider, CssBaseline } from '@mui/material';
-import { BrowserRouter } from 'react-router-dom';
-import theme from './styles/theme';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { ThemeProvider, CssBaseline } from "@mui/material";
+import { BrowserRouter } from "react-router-dom";
+import theme from "./styles/theme";
// import ThemeCssVars from './styles/ThemeCssVars';
-
const BASENAME = import.meta.env.VITE_PUBLIC_URL || "/";
const path = window.location.pathname;
-if (path.endsWith('index.html')) {
- window.location.replace(BASENAME);
+if (path.endsWith("index.html")) {
+ window.location.replace(BASENAME);
}
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-
-
-
-
- {/* */}
-
-
-
-
-)
\ No newline at end of file
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+
+
+ {/* */}
+
+
+
+ ,
+);
diff --git a/src/store/useSharedState.js b/src/store/useSharedState.js
index 7df4e6e..b8f4cb1 100644
--- a/src/store/useSharedState.js
+++ b/src/store/useSharedState.js
@@ -13,6 +13,10 @@ const defaultState = {
labels: false,
opinions: false,
addToBasket: false,
+
+ //colros
+ bgColor: "#fff",
+ textColor: "#060606",
};
export const useSharedState = create(
@@ -110,6 +114,9 @@ export const useSharedState = create(
addToBasket: state.addToBasket,
previewMode: state.previewMode,
isRWD: state.isRWD,
+
+ bgColor: state.bgColor,
+ textColor: state.textColor,
}),
},
),
diff --git a/src/ui/ColorPickerInput.jsx b/src/ui/ColorPickerInput.jsx
new file mode 100644
index 0000000..06d5158
--- /dev/null
+++ b/src/ui/ColorPickerInput.jsx
@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from "react";
+import { BlockPicker } from "react-color";
+import { Box, ButtonBase, Typography } from "@mui/material";
+
+function ColorPickerButton({ color, onChange, label = "Color", palette = [] }) {
+ const [open, setOpen] = useState(false);
+ const wrapperRef = useRef(null);
+
+ useEffect(() => {
+ function handleClickOutside(e) {
+ if (!wrapperRef.current?.contains(e.target)) {
+ setOpen(false);
+ }
+ }
+
+ if (open) {
+ document.addEventListener("mousedown", handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [open]);
+
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+
+ setOpen((v) => !v)}
+ sx={{
+ width: "100%",
+ height: 32,
+ borderRadius: 1,
+ border: "1px solid",
+ borderColor: "divider",
+ backgroundColor: color,
+ }}
+ />
+
+ {open && (
+
+ onChange(c.hex)}
+ />
+
+ )}
+
+ );
+}
+
+export default ColorPickerButton;