add interface to delete steam session, change primary colors, and switch theme

src/renderer/components/settings/setting-color-chooser.component.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { motion, AnimatePresence } from "framer-motion"
+import OutsideClickHandler from "react-outside-click-handler";
+
+export default function SettingColorChooser({color, onChange}: {color?: string, onChange?: (color: string) => void}) {
+
+    const [colorVisible, setColorVisible] = useState(false);
+
+  return (
+    <OutsideClickHandler onOutsideClick={() => setColorVisible(false)}>
+        <div className="relative cursor-pointer mx-3 h-full aspect-square flex flex-col items-center">
+            <span className="z-[1] block h-full w-full border-2 border-white rounded-full" onClick={() => setColorVisible(!colorVisible)} style={{backgroundColor: color}}/>
+            <AnimatePresence>
+                {colorVisible && 
+                    <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: .1}} exit={{opacity: 0}} className="absolute flex items-center justify-center translate-y-9 shadow-lg rounded-lg shadow-black">
+                        <div className="absolute w-2/4 aspect-square rotate-45 bg-main-color-3 -translate-y-12"></div>
+                        <HexColorPicker color={color} onChange={onChange} className="" />
+                    </motion.div>
+                }
+            </AnimatePresence>
+        </div>
+    </OutsideClickHandler>
+  )
+}

src/renderer/components/settings/setting-container.component.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export function SettingContainer({className, title, minorTitle, description, children}: {className?: string, title?: string, minorTitle?: string, description?: string, children?: ReactNode}) {
+  return (
+    <div className={className || "relative mb-5"}>
+        { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{title}</h1> }
+        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-400">{minorTitle}</h2> }
+        { description && <p className="mb-3 text-sm text-gray-400">{description}</p> }
+        { children }
+    </div>
+  )
+}

src/renderer/components/settings/setting-radio-array.component.tsx

@@ -0,0 +1,30 @@
+import { motion } from "framer-motion"
+import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component"
+
+export function SettingRadioArray({items, selectedItem = items[0].id, onItemSelected}: {items: RadioItem[], selectedItem?: number, onItemSelected?: (id: number) => void}) {
+
+  return (
+    <div className="w-full">
+        { items.map(i => (
+            <div onClick={() => onItemSelected(i.id)} key={i.id} className={`py-3 my-[6px] w-full flex justify-between items-center rounded-md px-2 transition-colors duration-200 ${i.id === selectedItem ? "bg-main-color-3" : "bg-main-color-1"}`}>
+                <div className="flex items-center">
+                    <div className="h-5 rounded-full aspect-square border-2 border-white p-[3px] mr-2">
+                        <motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-white rounded-full"/>
+                    </div>
+                    <h2 className="font-extrabold">{i.text}</h2>
+                </div>
+                {i.icon && (
+                    <>
+                        <div className="flex items-center">
+                            {i.textIcon && <span>{i.textIcon}</span>}
+                        </div>
+                        <BsmIcon icon={i.icon}/>
+                    </>
+                )}
+            </div>
+        )) }
+    </div>
+  )
+}
+
+export interface RadioItem { id: number, text: string, icon?: BsmIconType, textIcon?: string }

src/renderer/pages/settings-page.component.tsx

@@ -1,22 +1,78 @@
-import { HexColorPicker } from "react-colorful"
+import { useEffect, useState } from "react";
+import SettingColorChooser from "renderer/components/settings/setting-color-chooser.component";
+import { SettingContainer } from "renderer/components/settings/setting-container.component";
+import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component";
+import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 import { ConfigurationService } from "renderer/services/configuration.service"
 
 export function SettingsPage() {
 
   const configService = ConfigurationService.getInstance();
 
-  const setFirstColorSetting = (hex: string) => {
-    configService.set("first-color", hex);
+  const [firstColor, setFirstColor] = useState("#fff");
+  const [secondColor, setSecondColor] = useState("#fff");
+
+  const[themeIdSelected, setThemeIdSelected]= useState(0);
+
+  useEffect(() => {
+    const [fColorObs, sColorObs] = [configService.watch("first-color"), configService.watch("second-color")];
+    const fColorSub = fColorObs.subscribe(color => setFirstColor(color));
+    const sColorSub = sColorObs.subscribe(color => setSecondColor(color));
+  
+    return () => {
+      configService.stopWatch("first-color" as DefaultConfigKey, fColorObs);
+      configService.stopWatch("second-color" as DefaultConfigKey, sColorObs);
+
+      [fColorSub, sColorSub].forEach(s => s.unsubscribe());
+    }
+  }, []);
+
+  const themeItem: RadioItem[] = [
+    {id: 0, text: "Dark"},
+    {id: 1, text: "Light"},
+    {id: 3, text: "Operating System"}
+  ]
+
+  const resetColors = () => {
+    configService.delete("first-color" as DefaultConfigKey);
+    configService.delete("second-color" as DefaultConfigKey);
   }
 
-  const setSecondColorSetting = (hex: string) => {
-    configService.set("second-color", hex);
-  }
+  const setFirstColorSetting = (hex: string) => configService.set("first-color", hex);
+  const setSecondColorSetting = (hex: string) => configService.set("second-color", hex);
+
+
 
   return (
-    <div>
-      <HexColorPicker onChange={setFirstColorSetting}/>
-      <HexColorPicker onChange={setSecondColorSetting}/>
+    <div className="w-full flex justify-center px-40 pt-10 text-gray-200">
+
+      <div className="w-fit">
+
+        <SettingContainer title="Steam Logout" description="If you logout of your Steam account, you must reconect for download a new BS instance">
+          <BsmButton className="bg-red-500 w-fit px-3 py-[2px] rounded-md hover:brightness-75" withBar={false} text="Logout of Steam"/>
+        </SettingContainer>
+
+        <SettingContainer title="Appearance" description="Choose the two primary colors of BSManager">
+          <div className="relative w-full h-8 bg-main-color-1 flex justify-center rounded-md py-1">
+            <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
+            <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
+            <div className="absolute right-[6px] top-0 h-full flex items-center">
+              <BsmButton onClick={resetColors} className=" px-2 font-bold italic text-sm rounded-md" text="Reset" withBar={false}/>
+            </div>
+          </div>
+          <SettingContainer minorTitle="Theme" className="mt-3">
+            <SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={(id) => setThemeIdSelected(id)}/>
+          </SettingContainer>
+        </SettingContainer>
+
+      </div>
+
+      
+
+
+      {/* <HexColorPicker onChange={setFirstColorSetting}/>
+      <HexColorPicker onChange={setSecondColorSetting}/> */}
     </div>
   )
 }