-
-
-
pint for github
-
2.0-dev - advanced mode
+
+
+
pint for github
+
+ sign in to broadcast your palette
+
-
+
);
}
diff --git a/src/components/options/QuickChange.tsx b/src/components/options/QuickChange.tsx
deleted file mode 100644
index 740c824..0000000
--- a/src/components/options/QuickChange.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import react from "react";
-import "../../assets/styles/App.css";
-import { HexColorInput, HexColorPicker } from "react-colorful";
-import CardTitle from "../global/CardTitle";
-
-var defaultValue = "#c0ffee";
-
-export default function QuickChange() {
- react.useLayoutEffect(() => {});
-
- const [color, setColor] = react.useState(`${defaultValue}`);
-
- return (
-
- );
-}
diff --git a/src/components/options/Sidebar.tsx b/src/components/options/Sidebar.tsx
new file mode 100644
index 0000000..2e95dec
--- /dev/null
+++ b/src/components/options/Sidebar.tsx
@@ -0,0 +1,547 @@
+import react from "react";
+import "../../assets/styles/App.css";
+import "../../assets/styles/RC.css";
+import { HexColorPicker, HexColorInput } from "react-colorful";
+import updateScale, { updateSpecific } from "../../methods/helpers/scaleHelper";
+import * as scaleHelper from "../../methods/helpers/scaleHelper";
+import {
+ pintGetUpdate,
+ pintSetNoReload,
+ updateMultiple,
+} from "../../methods/helpers/storageHelper";
+import {
+ BsFillBrushFill,
+ BsFillCalendar3WeekFill,
+ BsFillPaletteFill,
+ BsMenuButtonWideFill,
+} from "react-icons/bs";
+import {
+ AiFillCheckCircle,
+ AiFillCiCircle,
+ AiFillClockCircle,
+ AiFillCloseCircle,
+ AiFillHeart,
+} from "react-icons/ai";
+import { MdFormatColorText, MdTextSnippet } from "react-icons/md";
+import * as settings from "../../methods/config/colorGroups.js";
+import * as scales from "../../methods/helpers/scaleHelper.js";
+import chroma from "chroma-js";
+import { FcIdea } from "react-icons/fc";
+
+var defaultValue = "#c0ffee";
+
+var defaultScheme = "analogic";
+var defaultVariation = "default";
+
+var quickScheme: string[] = [];
+
+interface Props {
+ color: string;
+ setColor: (type: string) => void;
+}
+
+export default function Sidebar(props: Props) {
+ var { color, setColor } = props;
+
+ react.useLayoutEffect(() => {
+ pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
+ pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow);
+ pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue);
+ pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen);
+ pintGetUpdate(settings.cg89_f85149[0], setScaleRed);
+ pintGetUpdate(settings.cg77_db61a2[0], setScalePink);
+ pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
+ pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
+ pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
+ pintGetUpdate("variation", setVariation);
+ pintGetUpdate("scheme", setScheme);
+ pintGetUpdate("hiddenQS", setHiddenQS);
+ quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
+ });
+
+ // scale colors
+ const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`);
+
+ 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);
+ setScaleGray(color);
+ }
+
+ const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
+
+ function paintYellow() {
+ updateSpecific(color, 0, 0, scales.yellow);
+ setScaleGray(color);
+ }
+
+ const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
+
+ function paintBlue() {
+ updateSpecific(color, 0, 0, scales.blue);
+ setScaleGray(color);
+ }
+
+ const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
+
+ function paintGreen() {
+ updateSpecific(color, 0, 0, scales.green);
+ setScaleGray(color);
+ }
+
+ const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
+
+ function paintRed() {
+ updateSpecific(color, 0, 0, scales.red);
+ setScaleGray(color);
+ }
+
+ const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
+
+ function paintPurple() {
+ updateSpecific(color, 0, 0, scales.purple);
+ setScaleGray(color);
+ }
+
+ const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
+
+ function paintPink() {
+ updateSpecific(color, 0, 0, scales.pink);
+ setScaleGray(color);
+ }
+
+ const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
+
+ function paintCalendar() {
+ updateSpecific(color, 0, 0, scales.calendar);
+ setScaleGray(color);
+ }
+
+ const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
+
+ 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");
+ 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");
+ 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");
+ setScheme("triade");
+ quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
+ }
+
+ function setTetrade() {
+ pintSetNoReload("scheme", "tetrade");
+ setScheme("tetrade");
+ quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
+ }
+
+ function setAnalogic() {
+ pintSetNoReload("scheme", "analogic");
+ setScheme("analogic");
+ quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
+ }
+
+ function paintAll() {
+ updateScale(color);
+ pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
+ pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow);
+ pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue);
+ pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen);
+ pintGetUpdate(settings.cg89_f85149[0], setScaleRed);
+ pintGetUpdate(settings.cg77_db61a2[0], setScalePink);
+ pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
+ pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
+ pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
+ }
+
+ function updateColor(color: string) {
+ setColor(color);
+ 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 (
+
+ );
+}
diff --git a/src/components/popup/Header.tsx b/src/components/popup/Header.tsx
index e8cf4e7..60e34ea 100644
--- a/src/components/popup/Header.tsx
+++ b/src/components/popup/Header.tsx
@@ -3,14 +3,8 @@ import "../../assets/styles/App.css";
import { IoMdSettings } from "react-icons/io";
import {
AiFillGithub,
- AiFillCloseCircle,
- AiFillClockCircle,
- AiFillCheckCircle,
- AiFillCiCircle,
- AiFillHeart,
} from "react-icons/ai";
-import { BsFillCalendar3WeekFill, BsMenuButtonWideFill } from "react-icons/bs";
-import { MdTextSnippet, MdFormatColorText } from "react-icons/md";
+
export default function Header() {
function openOptions() {
chrome.runtime.openOptionsPage();
@@ -37,14 +31,14 @@ export default function Header() {