From 6766a32f31a36fae64dca6fa544bb54e04f86f61 Mon Sep 17 00:00:00 2001
From: fuwaa <ohayo@fuwa.sh>
Date: Sun, 24 Jul 2022 22:49:46 +0800
Subject: [PATCH] chore: use new instead of old scaling system

---
 src/components/popup/QuickChange.tsx | 25 ++++++++++++++-----------
 src/views/Options.tsx                |  9 +++++----
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx
index b27e563..fe6697d 100644
--- a/src/components/popup/QuickChange.tsx
+++ b/src/components/popup/QuickChange.tsx
@@ -1,16 +1,14 @@
 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 * as updateManual 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 {
-  bgGen,
-  generateAccent,
-  updateText,
-  updateViaQuickScheme,
-} from "../../methods/schemeGen";
+import { updateOpacity } from "../../methods/helpers/opacityHelper";
 
 var defaultValue = "#c0ffee";
 
@@ -29,18 +27,19 @@ export default function QuickChange() {
   const [l4, setL4] = react.useState(`${defaultValue}`);
 
   function paintAccent() {
-    updateViaQuickScheme(color);
+    updateManual.updateAccent(color);
     setL4(color);
   }
 
   function paintBg() {
     setBgColor(color);
-    bgGen(color);
-    updateText(generateAccent(color, -130));
+    updateScale(color);
+    updateOpacity();
+    chrome.tabs.reload();
   }
 
   function paintText() {
-    updateText(color);
+    updateManual.text(color);
     setTextColor(color);
   }
 
@@ -56,7 +55,11 @@ export default function QuickChange() {
           />
         </div>
         <div className="flex justify-content p-1">
-          <HexColorPicker color={color} onChange={setColor} />
+          <HexColorPicker
+            className="custom-layout"
+            color={color}
+            onChange={setColor}
+          />
         </div>
       </div>
       <div className="flex-grow flex-col rounded-lg m-1 p-1 bg-white">
diff --git a/src/views/Options.tsx b/src/views/Options.tsx
index cd9b829..b5df974 100644
--- a/src/views/Options.tsx
+++ b/src/views/Options.tsx
@@ -8,7 +8,7 @@ import ChangeCard from "../components/options/ChangeCard";
 import react from "react";
 import { RgbaColorPicker } from "react-colorful";
 import CardTitle from "../components/global/CardTitle";
-import { rgba2hex } from "../methods/schemeGen";
+import chroma from "chroma-js";
 
 var settingsList = Object.keys(settings);
 
@@ -17,11 +17,12 @@ var stringifiedColor = `rgba(${defaultValue.r},${defaultValue.g},${defaultValue.
 
 export default function Options() {
   const [color, setColor] = react.useState(defaultValue);
-  const [hexColor, setHexColor] = react.useState();
+  const [hexColor, setHexColor] = react.useState(
+    chroma(stringifiedColor).hex()
+  );
 
   react.useLayoutEffect(() => {
-    stringifiedColor = `rgba(${color.r},${color.g},${color.b},${color.a})`;
-    setHexColor(rgba2hex(stringifiedColor));
+    setHexColor(chroma(stringifiedColor).hex());
   });
 
   return (