fix: structure, opacity helper

src/components/options/ChangeCard.tsx

@@ -2,7 +2,10 @@ import react from "react";
 import "../../assets/styles/App.css";
 import { IoIosBrush } from "react-icons/io";
 import CardTitle from "../global/CardTitle";
-import { pintSetNoReload, pintGetUpdate } from "../../methods/helper";
+import {
+  pintSetNoReload,
+  pintGetUpdate,
+} from "../../methods/helpers/storageHelper";
 
 var defaultValue = "#c0ffee";
 

src/components/popup/QuickChange.tsx

@@ -4,7 +4,7 @@ import { HexColorPicker, HexColorInput } from "react-colorful";
 import { TextField } from "@mui/material";
 import { IoIosBrush } from "react-icons/io";
 import CardTitle from "../global/CardTitle";
-import { pintGetUpdate } from "../../methods/helper";
+import { pintGetUpdate } from "../../methods/helpers/storageHelper";
 import {
   bgGen,
   generateAccent,

src/methods/config/colorGroups.js

@@ -1,7 +1,7 @@
 // Generated using cgGen
 
 // color group: 1 | default color: #00000000
-export var cg1_00000000 = [
+export var cg1_000000 = [
   "__color_action_list_item_default_active_border",
   "__color_action_list_item_default_hover_border",
   "__color_counter_border",

src/methods/helpers/opacityHelper.js

@@ -0,0 +1,153 @@
+import chroma from "chroma-js";
+import { pintGetUpdate, updateMultiple } from "./storageHelper.js";
+import * as settings from "../config/colorGroups.js";
+
+// may god have mercy if you are working with this spaghetti code.
+// can someone please help me find a way of implementing this better because this looks like shit.
+// it's like this because of the goddamn chrome extension limitation
+// PLEASE FILE AN ISSUE OR PR IF YOU HAVE A WAY TO MAKE THIS HANDLE BETTER BECAUSE GOD
+// I AM DYING LOOKING AND MAINTAINING THIS SPAGHETTI CODE
+
+function setCG1(value) {
+  updateMultiple(settings.cg1a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG3(value) {
+  updateMultiple(settings.cg3a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg3a_cc, chroma(value).alpha(0.8).hex());
+}
+
+function setCG8(value) {
+  updateMultiple(settings.cg8a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg8a_f2, chroma(value).alpha(0.95).hex());
+}
+
+function setCG13(value) {
+  updateMultiple(settings.cg13a_00, chroma(value).alpha(0).hex());
+}
+
+function setCG15(value) {
+  updateMultiple(settings.cg15a_0f, chroma(value).alpha(0.06).hex());
+}
+
+function setCG16(value) {
+  updateMultiple(settings.cg16a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg16a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg16a_59, chroma(value).alpha(0.35).hex());
+  updateMultiple(settings.cg16a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg16a_a5, chroma(value).alpha(0.65).hex());
+}
+
+function setCG18(value) {
+  updateMultiple(settings.cg18a_99, chroma(value).alpha(0.6).hex());
+}
+
+function setCG21(value) {
+  updateMultiple(settings.cg21a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg21a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG22(value) {
+  updateMultiple(settings.cg22a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG24(value) {
+  updateMultiple(settings.cg24a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg24a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG29(value) {
+  updateMultiple(settings.cg29a_4d, chroma(value).alpha(0.16).hex());
+}
+
+function setCG38(value) {
+  updateMultiple(settings.cg38a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG46(value) {
+  updateMultiple(settings.cg46a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg46a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg46a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG60(value) {
+  updateMultiple(settings.cg60a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg60a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG64(value) {
+  updateMultiple(settings.cg64a_14, chroma(value).alpha(0.08).hex());
+  updateMultiple(settings.cg64a_1e, chroma(value).alpha(0.12).hex());
+  updateMultiple(settings.cg64a_33, chroma(value).alpha(0.2).hex());
+}
+
+function setCG67(value) {
+  updateMultiple(settings.cg67a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg67a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG74(value) {
+  updateMultiple(settings.cg74a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG76(value) {
+  updateMultiple(settings.cg76a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg76a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG77(value) {
+  updateMultiple(settings.cg77a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg77a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG78(value) {
+  updateMultiple(settings.cg78a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg78a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG84(value) {
+  updateMultiple(settings.cg84a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG89(value) {
+  updateMultiple(settings.cg89a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg89a_28, chroma(value).alpha(0.16).hex());
+  updateMultiple(settings.cg89a_3d, chroma(value).alpha(0.24).hex());
+  updateMultiple(settings.cg89a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg89a_66, chroma(value).alpha(0.4).hex());
+  updateMultiple(settings.cg89a_7f, chroma(value).alpha(0.5).hex());
+}
+
+function setCG106(value) {
+  updateMultiple(settings.cg106a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg106a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg106a_33, chroma(value).alpha(0.2).hex());
+  updateMultiple(settings.cg106a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg106a_b2, chroma(value).alpha(0.7).hex());
+}
+
+export function updateOpacity() {
+  pintGetUpdate(settings.cg1_000000[0], setCG1);
+  pintGetUpdate(settings.cg3_010409[0], setCG3);
+  pintGetUpdate(settings.cg8_0d1117[0], setCG8);
+  pintGetUpdate(settings.cg13_161b22[0], setCG13);
+  pintGetUpdate(settings.cg15_1b1f230a[0], setCG15);
+  pintGetUpdate(settings.cg16_1f6feb[0], setCG16);
+  pintGetUpdate(settings.cg18_238636[0], setCG18);
+  pintGetUpdate(settings.cg21_2ea043[0], setCG21);
+  pintGetUpdate(settings.cg22_30363d[0], setCG22);
+  pintGetUpdate(settings.cg24_388bfd[0], setCG24);
+  pintGetUpdate(settings.cg29_3fb950[0], setCG29);
+  pintGetUpdate(settings.cg38_58a6ff[0], setCG38);
+  pintGetUpdate(settings.cg46_6e7681[0], setCG46);
+  pintGetUpdate(settings.cg60_a371f7[0], setCG60);
+  pintGetUpdate(settings.cg64_b1bac4[0], setCG64);
+  pintGetUpdate(settings.cg67_bb8009[0], setCG67);
+  pintGetUpdate(settings.cg74_d29922[0], setCG74);
+  pintGetUpdate(settings.cg76_da3633[0], setCG76);
+  pintGetUpdate(settings.cg77_db61a2[0], setCG77);
+  pintGetUpdate(settings.cg78_db6d28[0], setCG78);
+  pintGetUpdate(settings.cg84_f0f6fc[0], setCG84);
+  pintGetUpdate(settings.cg89_f85149[0], setCG89);
+  pintGetUpdate(settings.cg106_ffffff[0], setCG106);
+}

src/methods/helpers/scaleHelper.js

@@ -0,0 +1,153 @@
+import chroma from "chroma-js";
+import { pintGetUpdate, updateMultiple } from "./storageHelper.js";
+import * as settings from "../config/colorGroups.js";
+
+// may god have mercy if you are working with this spaghetti code.
+// can someone please help me find a way of implementing this better because this looks like shit.
+// it's like this because of the goddamn chrome extension limitation
+// PLEASE FILE AN ISSUE OR PR IF YOU HAVE A WAY TO MAKE THIS HANDLE BETTER BECAUSE GOD
+// I AM DYING LOOKING AND MAINTAINING THIS SPAGHETTI CODE
+
+function setCG1(value) {
+  updateMultiple(settings.cg1a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG3(value) {
+  updateMultiple(settings.cg3a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg3a_cc, chroma(value).alpha(0.8).hex());
+}
+
+function setCG8(value) {
+  updateMultiple(settings.cg8a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg8a_f2, chroma(value).alpha(0.95).hex());
+}
+
+function setCG13(value) {
+  updateMultiple(settings.cg13a_00, chroma(value).alpha(0).hex());
+}
+
+function setCG15(value) {
+  updateMultiple(settings.cg15a_0f, chroma(value).alpha(0.06).hex());
+}
+
+function setCG16(value) {
+  updateMultiple(settings.cg16a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg16a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg16a_59, chroma(value).alpha(0.35).hex());
+  updateMultiple(settings.cg16a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg16a_a5, chroma(value).alpha(0.65).hex());
+}
+
+function setCG18(value) {
+  updateMultiple(settings.cg18a_99, chroma(value).alpha(0.6).hex());
+}
+
+function setCG21(value) {
+  updateMultiple(settings.cg21a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg21a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG22(value) {
+  updateMultiple(settings.cg22a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG24(value) {
+  updateMultiple(settings.cg24a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg24a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG29(value) {
+  updateMultiple(settings.cg29a_4d, chroma(value).alpha(0.16).hex());
+}
+
+function setCG38(value) {
+  updateMultiple(settings.cg38a_80, chroma(value).alpha(0.5).hex());
+}
+
+function setCG46(value) {
+  updateMultiple(settings.cg46a_00, chroma(value).alpha(0).hex());
+  updateMultiple(settings.cg46a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg46a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG60(value) {
+  updateMultiple(settings.cg60a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg60a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG64(value) {
+  updateMultiple(settings.cg64a_14, chroma(value).alpha(0.08).hex());
+  updateMultiple(settings.cg64a_1e, chroma(value).alpha(0.12).hex());
+  updateMultiple(settings.cg64a_33, chroma(value).alpha(0.2).hex());
+}
+
+function setCG67(value) {
+  updateMultiple(settings.cg67a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg67a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG74(value) {
+  updateMultiple(settings.cg74a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG76(value) {
+  updateMultiple(settings.cg76a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg76a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG77(value) {
+  updateMultiple(settings.cg77a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg77a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG78(value) {
+  updateMultiple(settings.cg78a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg78a_66, chroma(value).alpha(0.4).hex());
+}
+
+function setCG84(value) {
+  updateMultiple(settings.cg84a_19, chroma(value).alpha(0.1).hex());
+}
+
+function setCG89(value) {
+  updateMultiple(settings.cg89a_26, chroma(value).alpha(0.15).hex());
+  updateMultiple(settings.cg89a_28, chroma(value).alpha(0.16).hex());
+  updateMultiple(settings.cg89a_3d, chroma(value).alpha(0.24).hex());
+  updateMultiple(settings.cg89a_4c, chroma(value).alpha(0.3).hex());
+  updateMultiple(settings.cg89a_66, chroma(value).alpha(0.4).hex());
+  updateMultiple(settings.cg89a_7f, chroma(value).alpha(0.5).hex());
+}
+
+function setCG106(value) {
+  updateMultiple(settings.cg106a_0c, chroma(value).alpha(0.05).hex());
+  updateMultiple(settings.cg106a_19, chroma(value).alpha(0.1).hex());
+  updateMultiple(settings.cg106a_33, chroma(value).alpha(0.2).hex());
+  updateMultiple(settings.cg106a_7f, chroma(value).alpha(0.5).hex());
+  updateMultiple(settings.cg106a_b2, chroma(value).alpha(0.7).hex());
+}
+
+export function updateOpacity() {
+  pintGetUpdate(settings.cg1_000000[0], setCG1);
+  pintGetUpdate(settings.cg3_010409[0], setCG3);
+  pintGetUpdate(settings.cg8_0d1117[0], setCG8);
+  pintGetUpdate(settings.cg13_161b22[0], setCG13);
+  pintGetUpdate(settings.cg15_1b1f230a[0], setCG15);
+  pintGetUpdate(settings.cg16_1f6feb[0], setCG16);
+  pintGetUpdate(settings.cg18_238636[0], setCG18);
+  pintGetUpdate(settings.cg21_2ea043[0], setCG21);
+  pintGetUpdate(settings.cg22_30363d[0], setCG22);
+  pintGetUpdate(settings.cg24_388bfd[0], setCG24);
+  pintGetUpdate(settings.cg29_3fb950[0], setCG29);
+  pintGetUpdate(settings.cg38_58a6ff[0], setCG38);
+  pintGetUpdate(settings.cg46_6e7681[0], setCG46);
+  pintGetUpdate(settings.cg60_a371f7[0], setCG60);
+  pintGetUpdate(settings.cg64_b1bac4[0], setCG64);
+  pintGetUpdate(settings.cg67_bb8009[0], setCG67);
+  pintGetUpdate(settings.cg74_d29922[0], setCG74);
+  pintGetUpdate(settings.cg76_da3633[0], setCG76);
+  pintGetUpdate(settings.cg77_db61a2[0], setCG77);
+  pintGetUpdate(settings.cg78_db6d28[0], setCG78);
+  pintGetUpdate(settings.cg84_f0f6fc[0], setCG84);
+  pintGetUpdate(settings.cg89_f85149[0], setCG89);
+  pintGetUpdate(settings.cg106_ffffff[0], setCG106);
+}

src/methods/helpers/storageHelper.js

@@ -1,7 +1,5 @@
 /*global chrome*/
 
-import chroma from "chroma-js";
-
 /**
  *  Set a key and autoreload
  *  @param {string} setting - setting to update

src/methods/opacityGroup.js

@@ -1,67 +0,0 @@
-export var cg1 = ["cg1_00000000", "cg1a_19"];
-
-export var cg3 = ["cg3_010409", "cg3a_4c", "cg3a_cc"];
-
-export var cg8 = ["cg8_0d1117", "cg8a_00", "cg8a_f2"];
-
-export var cg13 = ["cg13_161b22", "cg13a_00"];
-
-export var cg15 = ["cg15_1b1f230a", "cg15a_0f"];
-
-export var cg16 = [
-  "cg16_1f6feb",
-  "cg16a_0c",
-  "cg16a_19",
-  "cg16a_59",
-  "cg16a_7f",
-  "cg16a_a5",
-];
-
-export var cg18 = ["cg18_238636", "cg18a_99"];
-
-export var cg21 = ["cg21_2ea043", "cg21a_26", "cg21a_66"];
-
-export var cg22 = ["cg22_30363d", "cg22a_7a", "cg22a_80"];
-
-export var cg24 = ["cg24_388bfd", "cg24a_26", "cg24a_66"];
-
-export var cg29 = ["cg29_3fb950", "cg29a_4d"];
-
-export var cg38 = ["cg38_58a6ff", "cg38a_80"];
-
-export var cg46 = ["cg46_6e7681", "cg46a_00", "cg46a_19", "cg46a_66"];
-
-export var cg60 = ["cg60_a371f7", "cg60a_26", "cg60a_66"];
-
-export var cg64 = ["cg64_b1bac4", "cg64a_14", "cg64a_1e", "cg64a_33"];
-
-export var cg67 = ["cg67_bb8009", "cg67a_26", "cg67a_66"];
-
-export var cg74 = ["cg74_d29922", "cg74a_66"];
-
-export var cg76 = ["cg76_da3633", "cg76a_0c", "cg76a_19"];
-
-export var cg77 = ["cg77_db61a2", "cg77a_26", "cg77a_66"];
-
-export var cg78 = ["cg78_db6d28", "cg78a_26", "cg78a_66"];
-
-export var cg84 = ["cg84_f0f6fc", "cg84a_19"];
-
-export var cg89 = [
-  "cg89_f85149",
-  "cg89a_26",
-  "cg89a_28",
-  "cg89a_3d",
-  "cg89a_4c",
-  "cg89a_66",
-  "cg89a_7f",
-];
-
-export var cg106 = [
-  "cg106_ffffff",
-  "cg106a_0c",
-  "cg106a_19",
-  "cg106a_33",
-  "cg106a_7f",
-  "cg106a_b2",
-];

src/methods/opacityHelper.js

@@ -1,225 +0,0 @@
-/*global chrome*/
-
-import * as opacity from "./opacityGroup.js";
-import chroma from "chroma-js";
-import { pintGetUpdate, updateMultiple } from "./helper.js";
-import * as settings from "./colorGroups.js";
-
-// may god have mercy if you are working with this spaghetti code.
-// can someone please help me find a way of implementing this better because this looks like shit.
-// it's like this because of the goddamn chrome extension limitation
-// PLEASE FILE AN ISSUE OR PR IF YOU HAVE A WAY TO MAKE THIS HANDLE BETTER BECAUSE GOD
-// I AM DYING LOOKING AND MAINTAINING THIS SPAGHETTI CODE
-
-export function updateOpacity() {
-  var cg1 = "";
-  var cg3 = "";
-  var cg8 = "";
-  var cg13 = "";
-  var cg15 = "";
-  var cg16 = "";
-  var cg18 = "";
-  var cg21 = "";
-  var cg22 = "";
-  var cg24 = "";
-  var cg29 = "";
-  var cg38 = "";
-  var cg46 = "";
-  var cg60 = "";
-  var cg64 = "";
-  var cg67 = "";
-  var cg74 = "";
-  var cg76 = "";
-  var cg77 = "";
-  var cg78 = "";
-  var cg84 = "";
-  var cg89 = "";
-  var cg106 = "";
-
-  function setCG1(value) {
-    cg1 = value;
-  }
-  function setCG3(value) {
-    cg3 = value;
-  }
-  function setCG8(value) {
-    cg8 = value;
-  }
-  function setCG13(value) {
-    cg13 = value;
-  }
-  function setCG15(value) {
-    cg15 = value;
-  }
-  function setCG16(value) {
-    cg16 = value;
-  }
-  function setCG18(value) {
-    cg18 = value;
-  }
-  function setCG21(value) {
-    cg21 = value;
-  }
-  function setCG22(value) {
-    cg22 = value;
-  }
-  function setCG24(value) {
-    cg24 = value;
-  }
-  function setCG29(value) {
-    cg29 = value;
-  }
-  function setCG38(value) {
-    cg38 = value;
-  }
-  function setCG46(value) {
-    cg46 = value;
-  }
-  function setCG60(value) {
-    cg60 = value;
-  }
-  function setCG64(value) {
-    cg64 = value;
-  }
-  function setCG67(value) {
-    cg67 = value;
-  }
-  function setCG74(value) {
-    cg74 = value;
-  }
-  function setCG76(value) {
-    cg76 = value;
-  }
-  function setCG77(value) {
-    cg77 = value;
-  }
-  function setCG78(value) {
-    cg78 = value;
-  }
-  function setCG84(value) {
-    cg84 = value;
-  }
-  function setCG89(value) {
-    cg89 = value;
-  }
-  function setCG106(value) {
-    cg106 = value;
-  }
-
-  pintGetUpdate(settings.cg1_000000[0], setCG1);
-  opacity.cg1.forEach((element) => {
-    updateMultiple(element, chroma(cg1).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg3_010409[0], setCG3);
-  opacity.cg3.forEach((element) => {
-    updateMultiple(element, chroma(cg3).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg8_0d1117[0], setCG8);
-  opacity.cg8.forEach((element) => {
-    updateMultiple(element, chroma(cg8).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg13_161b22[0], setCG13);
-  opacity.cg13.forEach((element) => {
-    updateMultiple(element, chroma(cg13).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg15_1b1f230a[0], setCG15);
-  opacity.cg15.forEach((element) => {
-    updateMultiple(element, chroma(cg15).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg16_1f6feb[0], setCG16);
-  opacity.cg16.forEach((element) => {
-    updateMultiple(element, chroma(cg16).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg18_238636[0], setCG18);
-  opacity.cg18.forEach((element) => {
-    updateMultiple(element, chroma(cg18).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg21_2ea043[0], setCG21);
-  opacity.cg21.forEach((element) => {
-    updateMultiple(element, chroma(cg21).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg22_30363d[0], setCG22);
-  opacity.cg22.forEach((element) => {
-    updateMultiple(element, chroma(cg22).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg24_388bfd[0], setCG24);
-  opacity.cg24.forEach((element) => {
-    updateMultiple(element, chroma(cg24).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg29_3fb950[0], setCG29);
-  opacity.cg29.forEach((element) => {
-    updateMultiple(element, chroma(cg29).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg38_58a6ff[0], setCG38);
-  opacity.cg38.forEach((element) => {
-    updateMultiple(element, chroma(cg38).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg46_6e7681[0], setCG46);
-  opacity.cg46.forEach((element) => {
-    updateMultiple(element, chroma(cg46).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg60_a371f7[0], setCG60);
-  opacity.cg60.forEach((element) => {
-    updateMultiple(element, chroma(cg60).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg64_b1bac4[0], setCG64);
-  opacity.cg64.forEach((element) => {
-    updateMultiple(element, chroma(cg64).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg67_bb8009[0], setCG67);
-  opacity.cg67.forEach((element) => {
-    updateMultiple(element, chroma(cg67).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg74_d29922[0], setCG74);
-  opacity.cg74.forEach((element) => {
-    updateMultiple(element, chroma(cg74).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg76_da3633[0], setCG76);
-  opacity.cg76.forEach((element) => {
-    updateMultiple(element, chroma(cg76).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg77_db61a2[0], setCG77);
-  opacity.cg77.forEach((element) => {
-    updateMultiple(element, chroma(cg77).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg78_db6d28[0], setCG78);
-  opacity.cg78.forEach((element) => {
-    updateMultiple(element, chroma(cg78).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg84_f0f6fc[0], setCG84);
-  opacity.cg84.forEach((element) => {
-    updateMultiple(element, chroma(cg84).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg89_f85149[0], setCG89);
-  opacity.cg89.forEach((element) => {
-    updateMultiple(element, chroma(cg89).hex() + element.slice(-2));
-  });
-
-  pintGetUpdate(settings.cg106_ffffff[0], setCG106);
-  opacity.cg106.forEach((element) => {
-    updateMultiple(element, chroma(cg106).hex() + element.slice(-2));
-  });
-
-  chrome.tabs.reload();
-}

src/methods/schemeGen.js

@@ -1,10 +1,10 @@
 /*global chrome*/
 import chroma from "chroma-js";
 
-import { pintSetNoReload, updateMultiple, pintGetUpdate } from "./helper.js";
+import { pintSetNoReload, updateMultiple } from "./helpers/storageHelper.js";
 import * as qs from "./quickScheme.js";
-import * as settings from "./colorGroups.js";
-import { updateOpacity } from "./opacityHelper.js";
+import * as settings from "./config/colorGroups.js";
+import { updateOpacity } from "./helpers/opacityHelper.js";
 
 // function to convert hex to rgb
 export function hexToRgb(hex) {

src/views/Options.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import "../assets/styles/App.css";
 import Header from "../components/options/Header";
 import QuickSettings from "../components/popup/QuickSettings";
-import "../methods/settings.js";
-import { settings } from "../methods/settings";
+import "../methods/config/settings.js";
+import { settings } from "../methods/config/settings";
 import ChangeCard from "../components/options/ChangeCard";
 import react from "react";
 import { RgbaColorPicker } from "react-colorful";