fix: improve setting styles

package.json

@@ -16,6 +16,7 @@
     "just-debounce": "1.1.0",
     "mathjs": "11.5.1",
     "react": "18.2.0",
+    "react-colorful": "^5.6.1",
     "react-dom": "18.2.0",
     "react-textra": "0.1.3",
     "tauri-plugin-autostart-api": "https://github.com/tauri-apps/tauri-plugin-autostart",

settings.html

@@ -16,7 +16,7 @@
             padding: 0 2em;
             font-family: sans-serif;
             color: rgb(241, 238, 238);
-            background-color: rgb(32, 41, 64);
+            background-color: rgb(22, 22, 23);
         }
 
     </style>

src/components/Settings/BGColor.tsx

@@ -1,18 +1,17 @@
+import { HexColorPicker } from "react-colorful";
 import { settings } from "@utils/settingsStorage";
-import styles from "./index.module.css";
+import "./bgcolor.css";
 import * as ls from "@utils/localStorage";
 
 export const BGColor = () => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    ls.set("background", event.target.value);
+  const handlePickerChange = (color: string) => {
+    ls.set("background", color);
   };
 
   return (
-    <input
-      type="color"
-      defaultValue={settings.getCache("background")}
-      onChange={handleChange}
-      className={styles.settingValue}
+    <HexColorPicker
+      color={settings.getCache("background")}
+      onChange={handlePickerChange}
     />
   );
 };

src/components/Settings/Checkbox.tsx

@@ -24,6 +24,11 @@ export const Checkbox = (props: CheckboxProps) => {
 
   return (
     <input
+      style={{
+        accentColor: "white",
+        width: "30%",
+        height: "1.25rem",
+      }}
       type="checkbox"
       checked={isChecked}
       onChange={(e) => onChange(e.target.checked)}

src/components/Settings/bgcolor.css

@@ -0,0 +1,20 @@
+.react-colorful {
+  height: 95px !important;
+  width: 30% !important;
+}
+
+.react-colorful__saturation {
+  height: 80px !important;
+  border-radius: 0px 10px 0px 0px !important;
+}
+
+.react-colorful__hue {
+  height: 15px !important;
+  border-radius: 0px 0px 10px 0px !important;
+}
+
+.react-colorful__pointer {
+  border: 2px solid white !important;
+  width: 15px !important;
+  height: 15px !important;
+}

src/components/Settings/index.module.css

@@ -1,31 +1,32 @@
 .settingsContainer {
+    color: whitesmoke;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
-    width: 100%;
+    width: 95%;
+    margin: 0 auto;
     gap: 1em;
 }
 
 .settingItem {
-    padding: 0.5em;
-    border: 1px solid white;
+    background-color: #1f6dbb;
+    border-radius: 10px;
     width: 100%;
     display: inline-flex;
-    gap: 0.5em;
-    justify-content: space-between;
+    justify-content: space-evenly;
     align-items: center;
+    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.206);
 }
 
 .settingTextZone {
-    width: 80%;
-    align-self: flex-start;
+    width: 85%;
+    padding: 1em;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
-    gap: 0.25em;
+    gap: 1em;
 }
 
 .settingTitle {
@@ -59,7 +60,7 @@
     font-weight: bold;
     color: white;
     background-color: #1f6dbb;
-    border: 1px solid #ffffff;
+    border: 1px solid #2d2b2b;
     border-radius: 0.25em;
     padding: 0.5em;
     cursor: pointer;
@@ -71,8 +72,17 @@
     font-weight: bold;
     color: white;
     background-color: #1f6dbb;
-    border: 1px solid #ffffff;
+    border: 1px solid #2d2b2b;
     border-radius: 0.25em;
     padding: 0.5em;
     cursor: pointer;
 }
+
+button:hover {
+    background-color: #0f69ca;
+}
+
+button:focus {
+    background-color: #2689f3;
+    outline-color: cornflowerblue;
+}