- 
-
-
+
pint for github
-2.0-dev - simple mode
+
+
pint for github
++ sign in to broadcast your palette +
diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx
index c638b9f..60a55f1 100644
--- a/src/components/popup/QuickChange.tsx
+++ b/src/components/popup/QuickChange.tsx
@@ -2,135 +2,345 @@ import react from "react";
import "../../assets/styles/App.css";
import "../../assets/styles/RC.css";
import { HexColorPicker, HexColorInput } from "react-colorful";
-import updateScale from "../../methods/helpers/scaleHelper";
+import updateScale, { updateSpecific } from "../../methods/helpers/scaleHelper";
import * as scaleHelper from "../../methods/helpers/scaleHelper";
-import { TextField } from "@mui/material";
-import { IoIosBrush } from "react-icons/io";
-import CardTitle from "../global/CardTitle";
-import { pintGetUpdate } from "../../methods/helpers/storageHelper";
+import {
+ pintGetUpdate,
+ updateMultiple,
+} from "../../methods/helpers/storageHelper";
import { updateOpacity } from "../../methods/helpers/opacityHelper";
+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 quickScheme: string[] = [];
+
export default function QuickChange() {
react.useLayoutEffect(() => {
- pintGetUpdate("__color_canvas_default", setBgColor);
- pintGetUpdate("__color_calendar_graph_day_L4_bg", setL4);
- pintGetUpdate("__color_scale_gray_1", setTextColor);
+ 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);
+ quickScheme = scaleHelper.generateScheme(color, "analogic", "default", 0.5);
});
- const [bgColor, setBgColor] = react.useState(`${defaultValue}`);
const [color, setColor] = react.useState(`${defaultValue}`);
- const [textColor, setTextColor] = react.useState(`${defaultValue}`);
- // l1-l4 and other used shit
- const [l4, setL4] = react.useState(`${defaultValue}`);
+ // scale colors
+ const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`);
- function paintAccent() {
- scaleHelper.updateAccent(color);
- setL4(color);
+ function paintGray() {
+ updateSpecific(color, 0, 0, scales.gray);
+ setScaleGray(color);
}
- function paintBg() {
- setBgColor(color);
- updateScale(color);
- updateOpacity();
- chrome.tabs.reload();
+ 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() {
- scaleHelper.updateText(color);
- setTextColor(color);
+ updateMultiple(settings.cg106_ffffff, chroma(color).hex());
+ setScaleGray(color);
+ }
+
+ 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, "analogic", "default", 0.5);
}
return (
-
-
-
-
-
-
+
+
-
+
+
+ + Need ideas? These colors compliment your current pick! +
+
+ {quickScheme.map((qsColor) => {
+ return (
+
+ );
+ })}
+
-
-
+
diff --git a/src/components/popup/QuickSettings.tsx b/src/components/popup/QuickSettings.tsx
deleted file mode 100644
index 89bdc7e..0000000
--- a/src/components/popup/QuickSettings.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Switch } from "@mui/material";
-import "../../assets/styles/App.css";
-
-export default function QuickSettings() {
- return (
-
+
-
+
+
+
+ color picker
+
+
-
-
-
- {/*
-
-
-
-
*/}
-
-
Made with ❤️ - fuwa
+
+
+
+
+
+ color painter
+
+
+
+
+ Click a button to set a color
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
+ Not Enough Settings?
+
+
+ All Settings
+
+
*/}
Made with ❤️ - fuwa
+
-
- );
-}
diff --git a/src/methods/helpers/scaleHelper.js b/src/methods/helpers/scaleHelper.js
index 32f074c..21df753 100644
--- a/src/methods/helpers/scaleHelper.js
+++ b/src/methods/helpers/scaleHelper.js
@@ -6,7 +6,7 @@ import * as settings from "../config/colorGroups.js";
import { updateMultiple } from "./storageHelper.js";
// ----------- ASSIGNABLES -----------
-let orange = [
+export let orange = [
settings.cg28_3d1300,
settings.cg39_5a1e02,
settings.cg47_762d0a,
@@ -19,7 +19,7 @@ let orange = [
settings.cg105_ffdfb6,
];
-let yellow = [
+export let yellow = [
settings.cg23_341a00,
settings.cg34_4b2900,
settings.cg44_693e00,
@@ -32,7 +32,7 @@ let yellow = [
settings.cg90_f8e3a1,
];
-let gray = [
+export let gray = [
settings.cg8_0d1117,
settings.cg13_161b22,
settings.cg17_21262d,
@@ -45,7 +45,7 @@ let gray = [
settings.cg84_f0f6fc,
];
-let blue = [
+export let blue = [
settings.cg6_051d4d,
settings.cg7_0c2d6b,
settings.cg9_0d419d,
@@ -58,7 +58,7 @@ let blue = [
settings.cg72_cae8ff,
];
-let green = [
+export let green = [
settings.cg5_04260f,
settings.cg4_033a16,
settings.cg11_0f5323,
@@ -71,7 +71,7 @@ let green = [
settings.cg63_aff5b4,
];
-let red = [
+export let red = [
settings.cg33_490202,
settings.cg43_67060c,
settings.cg56_8e1519,
@@ -84,7 +84,7 @@ let red = [
settings.cg103_ffdcd7,
];
-let purple = [
+export let purple = [
settings.cg20_271052,
settings.cg27_3c1e70,
settings.cg35_553098,
@@ -97,7 +97,7 @@ let purple = [
settings.cg82_eddeff,
];
-let pink = [
+export let pink = [
settings.cg30_42062a,
settings.cg40_5e103e,
settings.cg50_7d2457,
@@ -110,7 +110,7 @@ let pink = [
settings.cg102_ffdaec,
];
-let coral = [
+export let coral = [
settings.cg31_460701,
settings.cg42_640D04,
settings.cg53_872012,
@@ -123,7 +123,7 @@ let coral = [
settings.cg105_ffdfb6,
];
-let calendar = [
+export let calendar = [
settings.cg10_0e4429,
settings.cg2_006d32,
settings.cg19_26a641,
@@ -225,9 +225,10 @@ export function updateAccent(color) {
export function generateScheme(color, scheme, variation, distance) {
let s = new ColorScheme();
- s.from_hex(chroma(color).hex())
+ s.from_hex(chroma(color).hex().slice(-6))
.scheme(scheme)
.variation(variation)
+ .add_complement(true)
.distance(distance);
return s.colors();
diff --git a/src/views/Options.tsx b/src/views/Options.tsx
index b5df974..9162e65 100644
--- a/src/views/Options.tsx
+++ b/src/views/Options.tsx
@@ -1,7 +1,6 @@
import React from "react";
import "../assets/styles/App.css";
import Header from "../components/options/Header";
-import QuickSettings from "../components/popup/QuickSettings";
import "../methods/config/settings.js";
import { settings } from "../methods/config/settings";
import ChangeCard from "../components/options/ChangeCard";
@@ -31,7 +30,6 @@ export default function Options() {
-
- quick settings
-
-
-
-
-
- view global user pints?
-hex-rgba converter
diff --git a/src/views/Popup.tsx b/src/views/Popup.tsx index 69ece72..024cfd1 100644 --- a/src/views/Popup.tsx +++ b/src/views/Popup.tsx @@ -3,13 +3,10 @@ import "../assets/styles/App.css"; import QuickChange from "../components/popup/QuickChange"; import Header from "../components/popup/Header"; -import QuickSettings from "../components/popup/QuickSettings"; - function Popup() { return (