create settings page and add possibilitie to pick colors

package-lock.json

@@ -10254,6 +10254,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-colorful": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz",
+      "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg=="
+    },
     "react-dom": {
       "version": "18.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz",

package.json

@@ -242,6 +242,7 @@
     "electron-updater": "^4.6.5",
     "history": "^5.3.0",
     "react": "^18.1.0",
+    "react-colorful": "^5.5.1",
     "react-dom": "^18.1.0",
     "react-icons": "^4.4.0",
     "react-outside-click-handler": "^1.3.0",

src/renderer/App.tsx

@@ -4,6 +4,7 @@ import { Routes, Route } from "react-router-dom";
 import { AvailableVersionsList } from "./pages/available-versions-list.components";
 import { VersionViewer } from "./pages/version-viewer.component";
 import { Modal } from "./components/modal/modal.component";
+import { SettingsPage } from "./pages/settings-page.component";
 
 export default function App() {
 
@@ -16,6 +17,7 @@ export default function App() {
         <div className="bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
           <Routes>
             <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
+            <Route path={"/settings"} element={<SettingsPage/>}/>
             <Route path="*" element={<AvailableVersionsList/>}/>
           </Routes>
         </div>

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -6,40 +6,45 @@ import { BSVersion } from '../../../main/services/bs-version-manager.service';
 import { useEffect, useState } from 'react';
 import { BSVersionManagerService } from '../../services/bs-version-manager.service';
 import { Link } from 'react-router-dom';
+import { ConfigurationService } from 'renderer/services/configuration.service';
 
 export function NavBar() {
 
+  const configService = ConfigurationService.getInstance();
+
   const [installedVersions, setInstalledVersions] = useState([] as BSVersion[]);
 
+  const [firstColor, setFirstColor] = useState(configService.get("first-color") || "#3b82ff");
+  const [secondColor, setSecondColor] = useState(configService.get("second-color") || "#ff4444");
+
   useEffect(() => {
     BSVersionManagerService.getInstance().installedVersions$.subscribe(versions => {
       setInstalledVersions([]);
       setInstalledVersions(versions);
-    })
+    });
+
+    configService.watch("first-color").subscribe(hex => setFirstColor(hex));
+    configService.watch("second-color").subscribe(hex => setSecondColor(hex));
   }, [])
 
   return (
     <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-gray-200 dark:bg-main-color-1'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <div className='relative aspect-square w-16'>
-          <span id='logo-bottom' className='bg-blue-500 aspect-square w-16'> </span>
-          <span id='logo-top' className='bg-red-500 aspect-square w-16'> </span>
+          <span id='logo-bottom' className='aspect-square w-16' style={{backgroundColor: firstColor}}> </span>
+          <span id='logo-top' className='bg-red-500 aspect-square w-16' style={{backgroundColor: secondColor}}> </span>
         </div>
       </div>
       <div id='versions' className='w-fit relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
       {installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
       </div>
       <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
-        <span className='cursor-pointer mb-3'>
-          <Link to={"blah"}>
-            <FaPlus className='text-2xl text-blue-500 drop-shadow-lg'/>
-          </Link>
-
-        </span>
-        <span className='cursor-pointer'>
+        <Link className='mb-2' to={"blah"}>
+          <FaPlus className='text-2xl text-blue-500 drop-shadow-lg'/>
+        </Link>
+        <Link to={"settings"}>
           <AiFillSetting className='text-2xl text-blue-500 drop-shadow-lg'/>
-        </span>
-
+        </Link>
       </div>
     </div>
   )

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

@@ -0,0 +1,22 @@
+import { HexColorPicker } from "react-colorful"
+import { ConfigurationService } from "renderer/services/configuration.service"
+
+export function SettingsPage() {
+
+  const configService = ConfigurationService.getInstance();
+
+  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>
+  )
+}