pr #28: popup ui revamp

docs/README.md

@@ -12,7 +12,7 @@
 
 [pint](https://projects.fuwa.sh/pint/) is a theming engine that allows you to rice your github experience.
 
-![pintpreview](https://go.fuwa.sh/u/ufuvwg.png)
+![image](https://user-images.githubusercontent.com/53419401/180970561-02cc824d-f4e5-4935-97f0-560d3860b05a.png)
 <br>
 <br>
 

src/assets/styles/RC.css

@@ -9,17 +9,17 @@
 }
 
 .custom-layout .react-colorful__saturation {
-  border-radius: 5px;
+  border-radius: 0px;
   border-bottom: none;
   width: inherit;
   height: inherit;
-  margin: 5px 0;
+  margin: 0;
 }
 
 .custom-layout .react-colorful__hue {
   order: -1;
   height: 14px;
-  border-radius: 5px;
+  border-radius: 0px;
 }
 .custom-layout .react-colorful__alpha {
   display: none;

src/assets/styles/index.css

@@ -6,10 +6,9 @@ html,
 body {
   /* width: 375px; */
   margin: 0;
-  background-color: #0d1117;
+  background-color: #010409;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/components/global/CardTitle.tsx

@@ -4,6 +4,7 @@ interface Props {
   name: string;
   color?: string;
   textcolor?: string | "#ffffff";
+  className?: string;
 }
 
 export default function CardTitle(props: Props) {

src/components/popup/Header.tsx

@@ -1,8 +1,16 @@
 import logo from "../../assets/images/pint.svg";
 import "../../assets/styles/App.css";
 import { IoMdSettings } from "react-icons/io";
-import { AiFillGithub } from "react-icons/ai";
+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();
@@ -14,13 +22,16 @@ export default function Header() {
       selected: true,
     });
   }
+
   return (
-    <div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1  justify-between items-center">
+    <div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
       <div className="flex flex-row">
-        <img src={logo} className="flex-none w-12" alt="logo" />
+        <img src={logo} className="flex-none w-10" alt="logo" />
-        <div className="flex-col p-1 text-white">
+        <div className="flex-col p-1 text-white align-middle ml-2 ">
-          <p className="flex-1 self-center text-xl"> pint for github </p>
+          <p className="flex-1 text-left text-md mt-1"> pint for github</p>
-          <p className="flex-1 self-center text-l">2.0-dev - simple mode</p>
+          <p className="flex-1 text-left text-md mb-1 text-gray-400">
+            sign in to broadcast your palette
+          </p>
         </div>
       </div>
       <div>

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 {
-import { IoIosBrush } from "react-icons/io";
+  pintGetUpdate,
-import CardTitle from "../global/CardTitle";
+  updateMultiple,
-import { pintGetUpdate } from "../../methods/helpers/storageHelper";
+} 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(settings.cg46_6e7681[0], setScaleGray);
-    pintGetUpdate("__color_calendar_graph_day_L4_bg", setL4);
+    pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow);
-    pintGetUpdate("__color_scale_gray_1", setTextColor);
+    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
+  // scale colors
-  const [l4, setL4] = react.useState(`${defaultValue}`);
+  const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`);
 
-  function paintAccent() {
+  function paintGray() {
-    scaleHelper.updateAccent(color);
+    updateSpecific(color, 0, 0, scales.gray);
-    setL4(color);
+    setScaleGray(color);
   }
 
-  function paintBg() {
+  const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
-    setBgColor(color);
+
-    updateScale(color);
+  function paintYellow() {
-    updateOpacity();
+    updateSpecific(color, 0, 0, scales.yellow);
-    chrome.tabs.reload();
+    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);
+    updateMultiple(settings.cg106_ffffff, chroma(color).hex());
-    setTextColor(color);
+    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 (
-    <div className="pint flex flex-row  mb-2 mt-1 mx-2">
+    <div>
-      <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
+      <div className="flex flex-col rounded-lg mt-4 mx-3">
-        <div className="flex flex-row justify-content text-center justify-center">
+        <div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 ">
-          <CardTitle name="color picker - " />
+          <div className="flex flex-row justify-content text-left text-white justify-left items-center  mt-2 ml-2">
-          <HexColorInput
+            <FcIdea className="mx-1" />
-            style={{ width: 40, textAlign: "center" }}
+            <p className="text-semibold">
-            color={color}
+              Need ideas? These colors compliment your current pick!
-            onChange={setColor}
+            </p>
-          />
+          </div>
-        </div>
+          <div className="flex flex-row justify-content p-1 ml-2 mb-2">
-        <div className="flex justify-content p-1">
+            {quickScheme.map((qsColor) => {
-          <HexColorPicker
+              return (
-            className="custom-layout"
+                <button
-            color={color}
+                  title="Use this Color"
-            onChange={setColor}
+                  className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[15px] w-[15px] border-solid border-[#40363d] flex justify-between mr-1"
-          />
+                  onClick={() => {
+                    setColor(qsColor);
+                  }}
+                  style={{
+                    borderWidth: "2px 2px 2px 2px",
+                    borderStyle: "solid",
+                    borderColor: "#30363d",
+                    backgroundColor: chroma(qsColor).hex(),
+                  }}
+                ></button>
+              );
+            })}
+          </div>
         </div>
       </div>
-      <div className="flex-grow flex-col rounded-lg m-1 p-1 bg-white">
+      <div className="pint flex flex-row  m-2">
-        <CardTitle name="theme painter" />
+        <div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
-        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
+          <div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
-          <TextField
+            <BsFillPaletteFill className="mx-1" size={15} />
-            id="acentColor"
+            <div className="flex-start align-left text-l p-1 rounded-t-lg ">
-            label="accent color"
+              <p className="text-semibold">color picker </p>
-            disabled={true}
+            </div>
-            value={l4}
+            <HexColorInput
-            variant="outlined"
+              style={{
-            size="small"
+                width: 40,
-          />
+                textAlign: "left",
-          <button
+                color: "#b2b2b2",
-            title="updateAccent"
+                backgroundColor: "#161b22",
-            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
+              }}
-            onClick={paintAccent}
+              color={color}
-          >
+              onChange={updateColor}
-            <IoIosBrush className="text-xl p-0 text-white" />
+            />
-          </button>
+          </div>
+          <div className="flex justify-content p-1">
+            <HexColorPicker
+              className="custom-layout"
+              color={color}
+              onChange={updateColor}
+            />
+          </div>
         </div>
-        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
+        <div className="flex-grow flex-col align-center m-1 text-white flex-1  rounded-[6px] bg-[#010409] border-solid border-[#30363d] border-2 justify-center">
-          <TextField
+          <div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
-            id="bgColorHex"
+            <BsFillBrushFill className="mx-1" size={15} />
-            label="background"
+            <div className="flex-start align-left text-l p-1 rounded-t-lg ">
-            disabled={true}
+              <p className="text-semibold"> color painter </p>
-            value={bgColor}
+            </div>
-            variant="outlined"
+          </div>
-            size="small"
+          <div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
-          />
+            <div className="flex-start align-left text-l  mb-2 rounded-t-lg">
-          <button
+              <p className="">Click a button to set a color</p>
-            title="updateBackground"
+            </div>
-            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
+          </div>
-            onClick={paintBg}
+          <div className="flex-wrap flex flex-row justify-content text-center text-white justify-center items-center p-1">
-          >
+            <button
-            <IoIosBrush className="text-xl p-0 text-white" />
+              title="Paint Canvas"
-          </button>
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
-        </div>
+              onClick={paintGray}
-        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
+              style={{
-          <TextField
+                borderWidth: "2px 2px 2px 2px",
-            id="textColorHex"
+                borderStyle: "solid",
-            label="text color"
+                borderColor: "#30363d",
-            disabled={true}
+                backgroundColor: scaleGray,
-            value={textColor}
+              }}
-            variant="outlined"
+            >
-            size="small"
+              <MdTextSnippet className="   self-center text-xl p-1 text-[#30363d]" />
-          />
+            </button>
-          <button
+            <button
-            title="updateText"
+              title="Paint Text Colors"
-            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
-            onClick={paintText}
+              onClick={paintText}
-          >
+              style={{
-            <IoIosBrush className="text-xl p-0 text-white" />
+                borderWidth: "2px 2px 2px 2px",
-          </button>
+                borderStyle: "solid",
-        </div>
+                borderColor: "#30363d",
-        {/* <div className="flex flex-row justify-center">
+                backgroundColor: scaleText,
-        <div
+              }}
-        style={{ backgroundColor: activeButton }}
+            >
-        className="w-5 h-5 p-1 m-1 rounded-full"
+              <MdFormatColorText className="   self-center text-xl p-1 text-[#30363d]" />
-      ></div>
+            </button>
-        <div
+            <button
-        style={{ backgroundColor: accentEmphasis }}
+              title="Paint Primary Accents"
-        className="w-5 h-5 p-1 m-1 rounded-full"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
-      ></div>
+              onClick={paintBlue}
-      <div
+              style={{
-        style={{ backgroundColor: bgColor }}
+                borderWidth: "2px 2px 2px 2px",
-        className="w-5 h-5 p-1 m-1 rounded-full"
+                borderStyle: "solid",
-      ></div>
+                borderColor: "#30363d",
-        </div> */}
+                backgroundColor: scaleBlue,
-        <div className="flex flex-row justify-center">
+              }}
-          <p className="text-center">Made with ❤️ - fuwa</p>
+            >
+              <BsMenuButtonWideFill className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint GitHub Calendar"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintCalendar}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scaleCalendar,
+              }}
+            >
+              <BsFillCalendar3WeekFill className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint CI/CD Tasks"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintPurple}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scalePurple,
+              }}
+            >
+              <AiFillCiCircle className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint Checks and Successors"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintGreen}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scaleGreen,
+              }}
+            >
+              <AiFillCheckCircle className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint Warnings and Waits"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintYellow}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scaleYellow,
+              }}
+            >
+              <AiFillClockCircle className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint Errors and Dangers"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintRed}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scaleRed,
+              }}
+            >
+              <AiFillCloseCircle className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint GitHub Sponsors"
+              className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
+              onClick={paintPink}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+                backgroundColor: scalePink,
+              }}
+            >
+              <AiFillHeart className="   self-center text-xl p-1 text-[#30363d]" />
+            </button>
+            <button
+              title="Paint Everything"
+              className="bg-[#30363d] hover:bg-[#40363d] active:bg-[#676767] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] w-[132px] border-solid border-[#40363d] flex justify-center m-1"
+              onClick={paintAll}
+              style={{
+                borderWidth: "2px 2px 2px 2px",
+                borderStyle: "solid",
+                borderColor: "#30363d",
+              }}
+            >
+              <p className=" self-center text-center text-md p-1 text-white">
+                Update All
+              </p>
+            </button>
+          </div>
+          {/* <div className="flex-start align-left text-l  mb-1 rounded-t-lg text-blue">
+            <p className="">Not Enough Settings?</p>
+          </div>
+          <div className="flex-start align-left text-l  mb-2 rounded-t-lg text-blue-600 ">
+            <p className="">All Settings</p>
+          </div>
+          <div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 justify-center mt-2">
+            <p className="text-center">Made with ❤️ - fuwa</p>
+          </div> */}
         </div>
       </div>
     </div>

src/components/popup/QuickSettings.tsx

@@ -1,36 +0,0 @@
-import { Switch } from "@mui/material";
-import "../../assets/styles/App.css";
-
-export default function QuickSettings() {
-  return (
-    <div className="flex flex-col rounded-lg mt-4 mx-3 p-1 bg-white">
-      <div className=" bg-whiteflex-start align-left text-l p-1">
-        <p>quick settings</p>
-        <div className="flex-col">
-          <div className="flex flex-row justify-between items-center">
-            <p className="flex-start my-1">view global user pints?</p>
-            <Switch defaultChecked size="small" />
-          </div>
-          <form
-            className="flex flex-row justify-between items-center"
-            action="#"
-          >
-            <label>select color scheme: </label>
-            <div>
-              <select
-                title="colorSchemeSelector"
-                name="colorschemes"
-                id="lang"
-                defaultValue="1"
-              >
-                <option value="0">Solarized Dark</option>
-                <option value="1">Github Dark</option>
-                <option value="2">Github Light</option>
-              </select>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}

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();

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() {
         <div className=" w-[300px]"></div>
         <div className=" fixed w-[300px]">
           <Header />
-          <QuickSettings />
           <div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
             <div className=" bg-whiteflex-start align-left text-l p-1">
               <p>hex-rgba converter</p>

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 (
     <div className="relative text-center">
       <Header />
-      <QuickSettings />
       <QuickChange />
     </div>
   );