feat: add reset feature

public/background.js

@@ -469,12 +469,6 @@ chrome.runtime.onInstalled.addListener(() => {
     let key = {};
     key[`${initialSetting}`] = defaultColorScheme[initialSetting];
     chrome.storage.local.set(key);
-    console.log(
-      "Setup: Configuring " +
-        initialSetting +
-        " >> " +
-        defaultColorScheme[initialSetting]
-    );
   });
   chrome.tabs.create({ url: "https://pint.sh/success" });
 });

src/components/global/CardTitle.tsx

@@ -12,7 +12,7 @@ export default function CardTitle(props: Props) {
   return (
     <div
       style={{ backgroundColor: textcolor }}
-      className={`flex-start align-left text-white text-l p-1 rounded-t-[6px]`}
+      className={`flex-start align-left text-white text-l p-1 rounded-t-[4px]`}
     >
       <p className="text-bold">
         {name} {color}

src/components/options/ChangeCard.tsx

@@ -1,14 +1,18 @@
 import react from "react";
 import "../../assets/styles/App.css";
 import { IoIosBrush } from "react-icons/io";
+import { BiReset } from "react-icons/bi";
 import CardTitle from "../global/CardTitle";
 import {
   pintSetNoReload,
   pintGetUpdate,
 } from "../../methods/helpers/storageHelper";
+import { settings } from "../../methods/config/settings";
 
 var defaultValue = "#c0ffee";
 
+var settingsList = Object.entries(settings);
+
 interface Props {
   settingName: string;
   colorPickerColor: string;
@@ -38,6 +42,15 @@ export default function ChangeCard(props: Props) {
     pintSetNoReload(settingName, value);
   }
 
+  function resetDefaults() {
+    // get default value from settingsList
+    var defaults = settingsList.find(
+      (setting) => setting[0] === settingName
+    )[1];
+    setCurrent(defaults);
+    pintSetNoReload(settingName, defaults);
+  }
+
   return (
     <div className="pint flex flex-row w-[260px] text-center">
       <div className="flex-1 flex-col rounded-[6px] m-1 p-1 bg-[#010409] border-solid border-[#30363d] border-2">
@@ -55,11 +68,18 @@ export default function ChangeCard(props: Props) {
           </div>
           <button
             title="updateColor"
-            className="bg-[#0041c4] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mx-2 my-1 rounded-full text-white"
+            className="bg-[#0041c4] hover:bg-[#004de5] active:bg-[#0035A0]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1  rounded-full text-white"
             onClick={updateColor}
           >
             <IoIosBrush className="text-xl p-1 text-white" />
           </button>
+          <button
+            title="Reset to defaults"
+            className="bg-[#3a3a3a] hover:bg-[#585858] active:bg-[#272727]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1 rounded-full text-white"
+            onClick={resetDefaults}
+          >
+            <BiReset className="text-xl p-1 text-white" />
+          </button>
         </div>
       </div>
     </div>

src/components/options/Header.tsx

@@ -1,13 +1,9 @@
 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 { SiGithubsponsors } from "react-icons/si";
 
 export default function Header() {
-  function openOptions() {
-    chrome.runtime.openOptionsPage();
-  }
-
   function openGithub() {
     chrome.tabs.create({
       url: "https://github.com/fuwaa/pint",
@@ -15,6 +11,13 @@ export default function Header() {
     });
   }
 
+  function supportProject() {
+    chrome.tabs.create({
+      url: "https://github.com/sponsors/fuwaa",
+      selected: true,
+    });
+  }
+
   return (
     <div className="sticky top-0 z-30 w-screen flex flex-row mb-2 p-1 justify-between items-center bg-[#161b22] h-[64px]  px-3 px-md-4 px-lg-5 ">
       <div className="flex flex-row">
@@ -22,25 +25,26 @@ export default function Header() {
         <div className="flex-col p-1 text-white align-middle ml-2 ">
           <p className="flex-1 text-left text-md mt-1"> pint for github</p>
           <p className="flex-1 text-left text-md mb-1 text-gray-400">
-            sign in to broadcast your palette
+            advanced settings
           </p>
         </div>
       </div>
-      <div>
+      <div className="flex flex-row">
         <button
-          title="Advanced"
+          title="Support this project"
+          className=" hover:bg-[#40363d] active:bg-[#5b5b5b] focus:outline-none focus:ring focus:bg-[#444444] p-2 rounded-[6px] h-[30px] border-solid border-2 border-[#404040] hover:border-[#ffffff] flex flex-row justify-between m-1"
+          onClick={supportProject}
+        >
+          <SiGithubsponsors className="self-center text-xl p-1 text-[#db61a2]" />
+          <p className="self-center p-1 text-white"> Support this project </p>
+        </button>
+        <button
+          title="View the Source"
           className="flex-none rounded-lg text-xl text-white p-2"
           onClick={openGithub}
         >
           <AiFillGithub />
         </button>
-        <button
-          title="Advanced"
-          className="flex-none rounded-lg text-xl text-white p-2"
-          onClick={openOptions}
-        >
-          <IoMdSettings />
-        </button>
       </div>
     </div>
   );

src/components/options/Sidebar.tsx

@@ -27,6 +27,8 @@ 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";
+import { BiReset } from "react-icons/bi";
+import * as baseSettings from "../../methods/config/settings";
 
 var defaultValue = "#c0ffee";
 
@@ -35,6 +37,8 @@ var defaultVariation = "default";
 
 var quickScheme: string[] = [];
 
+var defaultSettings = Object.entries(baseSettings.settings);
+
 interface Props {
   color: string;
   setColor: (type: string) => void;
@@ -69,6 +73,7 @@ export default function Sidebar(props: Props) {
   function paintGray() {
     updateSpecific(color, 0, 0, scales.gray);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
@@ -76,6 +81,7 @@ export default function Sidebar(props: Props) {
   function paintYellow() {
     updateSpecific(color, 0, 0, scales.yellow);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
@@ -83,6 +89,7 @@ export default function Sidebar(props: Props) {
   function paintBlue() {
     updateSpecific(color, 0, 0, scales.blue);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
@@ -90,6 +97,7 @@ export default function Sidebar(props: Props) {
   function paintGreen() {
     updateSpecific(color, 0, 0, scales.green);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
@@ -97,6 +105,7 @@ export default function Sidebar(props: Props) {
   function paintRed() {
     updateSpecific(color, 0, 0, scales.red);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
@@ -104,6 +113,7 @@ export default function Sidebar(props: Props) {
   function paintPurple() {
     updateSpecific(color, 0, 0, scales.purple);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
@@ -111,6 +121,7 @@ export default function Sidebar(props: Props) {
   function paintPink() {
     updateSpecific(color, 0, 0, scales.pink);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
@@ -118,6 +129,7 @@ export default function Sidebar(props: Props) {
   function paintCalendar() {
     updateSpecific(color, 0, 0, scales.calendar);
     setScaleGray(color);
+    setColor(color);
   }
 
   const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
@@ -125,6 +137,7 @@ export default function Sidebar(props: Props) {
   function paintText() {
     updateMultiple(settings.cg106_ffffff, chroma(color).hex());
     setScaleGray(color);
+    setColor(color);
     quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
   }
 
@@ -193,6 +206,7 @@ export default function Sidebar(props: Props) {
     pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
     pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
     pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
+    setColor(color);
   }
 
   function updateColor(color: string) {
@@ -210,9 +224,16 @@ export default function Sidebar(props: Props) {
     }
   }
 
+  function resetAll() {
+    defaultSettings.forEach((setting) => {
+      pintSetNoReload(setting[0], setting[1]);
+    });
+    chrome.tabs.reload();
+  }
+
   return (
     <aside className="w-[428px] sticky flex left-0 top-0 flex-col h-screen ">
-      <div className="w-[410px] pint flex flex-row  mx-2 mt-2 mb-1 pt-[80px]">
+      <div className="w-[410px] pint flex flex-row  mx-2 mt-2 mb-1 pt-[78px]">
         <div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
           <div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
             <BsFillPaletteFill className="mx-1" size={15} />
@@ -383,15 +404,17 @@ export default function Sidebar(props: Props) {
               </p>
             </button>
           </div>
-          {/* <div className="flex-start align-left text-l  mb-1 rounded-t-lg text-blue">
+        </div>
-            <p className="">Not Enough Settings?</p>
+      </div>
-          </div>
+      <div className="flex flex-col rounded-lg mb-2 mx-3">
-          <div className="flex-start align-left text-l  mb-2 rounded-t-lg text-blue-600 ">
+        <div className="flex-1 flex-col rounded-[6px] bg-[#3a0606] border-solid border-[#6d1616] border-2 ">
-            <p className="">All Settings</p>
+          <button
-          </div>
+            className="flex flex-row justify-content text-left text-white justify-left items-center  mt-2 ml-2 mb-2"
-          <div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 justify-center mt-2">
+            onClick={resetAll}
-            <p className="text-center">Made with ❤️ - fuwa</p>
+          >
-          </div> */}
+            <BiReset className="mx-1" />
+            <p className="text-semibold">Reset everything to defaults</p>
+          </button>
         </div>
       </div>
       <div className="flex flex-col rounded-lg mb-3 mx-3">

src/components/popup/Header.tsx

@@ -1,9 +1,8 @@
 import logo from "../../assets/images/pint.svg";
 import "../../assets/styles/App.css";
 import { IoMdSettings } from "react-icons/io";
-import {
+import { AiFillGithub } from "react-icons/ai";
-  AiFillGithub,
+import { SiGithubsponsors } from "react-icons/si";
-} from "react-icons/ai";
 
 export default function Header() {
   function openOptions() {
@@ -17,6 +16,13 @@ export default function Header() {
     });
   }
 
+  function supportProject() {
+    chrome.tabs.create({
+      url: "https://github.com/sponsors/fuwaa",
+      selected: true,
+    });
+  }
+
   return (
     <div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
       <div className="flex flex-row">
@@ -24,13 +30,20 @@ export default function Header() {
         <div className="flex-col p-1 text-white align-middle ml-2 ">
           <p className="flex-1 text-left text-md mt-1"> pint for github</p>
           <p className="flex-1 text-left text-md mb-1 text-gray-400">
-            sign in to broadcast your palette
+            quick settings
           </p>
         </div>
       </div>
       <div>
         <button
-          title="Advanced"
+          title="Support this project"
+          className="flex-none rounded-lg text-xl text-[#db61a2] p-2"
+          onClick={supportProject}
+        >
+          <SiGithubsponsors />
+        </button>
+        <button
+          title="View the Source"
           className="flex-none rounded-lg text-xl text-white p-2"
           onClick={openGithub}
         >

src/components/popup/QuickChange.tsx

@@ -378,15 +378,6 @@ export default function QuickChange() {
               </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 className="flex flex-col rounded-lg mb-3 mx-3">

src/views/Options.tsx

@@ -5,7 +5,6 @@ import "../methods/config/settings.js";
 import { settings } from "../methods/config/settings";
 import ChangeCard from "../components/options/ChangeCard";
 import react from "react";
-import chroma from "chroma-js";
 import Sidebar from "../components/options/Sidebar";
 
 var settingsList = Object.keys(settings);