diff --git a/public/Initial.js b/public/Initial.js index a6b068b..ea09f01 100644 --- a/public/Initial.js +++ b/public/Initial.js @@ -456,6 +456,7 @@ defaultColorScheme = { __color_text_disabled: "#6e7681", scheme: "analogic", variation: "default", + hiddenQS: "true", }; colorSettings = Object.keys(defaultColorScheme); diff --git a/public/background.js b/public/background.js index e8e59e4..95366d1 100644 --- a/public/background.js +++ b/public/background.js @@ -456,6 +456,7 @@ defaultColorScheme = { __color_text_disabled: "#6e7681", scheme: "analogic", variation: "default", + hiddenQS: "true", }; initialSettings = Object.keys(defaultColorScheme); diff --git a/src/App.tsx b/src/App.tsx index 5397bda..8622741 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import Popup from "./views/Popup"; import Options from "./views/Options"; export default function App() { - const [isOptionsUi, setOptionsUI] = useState(window.innerWidth > 375); + const [isOptionsUi, setOptionsUI] = useState(window.innerWidth > 475); const updateMedia = () => { setOptionsUI(window.innerWidth > 475); diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 6e2d48d..7a75630 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -4,7 +4,7 @@ html, body { - /* width: 375px; */ + width: 428px; margin: 0; background-color: #010409; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx index 677f6c1..35893ec 100644 --- a/src/components/popup/QuickChange.tsx +++ b/src/components/popup/QuickChange.tsx @@ -49,6 +49,7 @@ export default function QuickChange() { pintGetUpdate(settings.cg106_ffffff[0], setScaleText); pintGetUpdate("variation", setVariation); pintGetUpdate("scheme", setScheme); + pintGetUpdate("hiddenQS", setHiddenQS); quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); }); @@ -59,6 +60,7 @@ export default function QuickChange() { const [scheme, setScheme] = react.useState(`${defaultScheme}`); const [variation, setVariation] = react.useState(`${defaultVariation}`); + const [hiddenQS, setHiddenQS] = react.useState("true"); function paintGray() { updateSpecific(color, 0, 0, scales.gray); @@ -119,54 +121,62 @@ export default function QuickChange() { function paintText() { updateMultiple(settings.cg106_ffffff, chroma(color).hex()); setScaleGray(color); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); } function setDefault() { - pintSetNoReload("variation", "default"); - setVariation("default"); - } + pintSetNoReload("variation", "default"); + setVariation("default"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setPastel() { pintSetNoReload("variation", "pastel"); setVariation("pastel"); - } + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } - function setSoft() { - pintSetNoReload("variation", "soft"); - setVariation("soft"); - } + function setSoft() { + pintSetNoReload("variation", "soft"); + setVariation("soft"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setLight() { pintSetNoReload("variation", "light"); setVariation("light"); - } + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setHard() { pintSetNoReload("variation", "hard"); setVariation("hard"); - } + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setPale() { pintSetNoReload("variation", "pale"); setVariation("pale"); - } + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setTriade() { pintSetNoReload("scheme", "triade"); - setVariation("triade"); - } + setScheme("triade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setTetrade() { pintSetNoReload("scheme", "tetrade"); - setVariation("tetrade"); - } + setScheme("tetrade"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function setAnalogic() { pintSetNoReload("scheme", "analogic"); - setVariation("analogic"); - } - - + setScheme("analogic"); + quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); + } function paintAll() { updateScale(color); @@ -186,66 +196,19 @@ export default function QuickChange() { quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5); } + function hideQS() { + if (hiddenQS === "true") { + pintSetNoReload("hiddenQS", "false"); + setHiddenQS("false"); + } else { + pintSetNoReload("hiddenQS", "true"); + setHiddenQS("true"); + } + } + return (
- Need ideas? These colors compliment your current pick! -
-- Scheme Variations -
-- Color Variations -
-- Generated Colors -
-Click a button to set a color
Scheme Variations
+Color Variations
+Generated Colors
+