fix settings

interface/src/App.tsx

@@ -7,45 +7,25 @@ import logoDark from './assets/betterseqta-light-full.png';
 import Shortcuts from './pages/Shortcuts';
 import About from './pages/About';
 
-export interface SettingsState {
-  notificationCollector: boolean;
-  lessonAlerts: boolean;
-  animatedBackground: boolean;
-  animatedBackgroundSpeed: boolean;
-  customThemeColor: string;
-  betterSEQTAPlus: boolean;
-}
+import type { SettingsState } from './types/AppProps';
+import useSettingsState from './hooks/settingsState';
 
 const App: React.FC = () => {
   const [settingsState, setSettingsState] = useState<SettingsState>({
     notificationCollector: false,
     lessonAlerts: false,
     animatedBackground: false,
-    animatedBackgroundSpeed: false,
+    animatedBackgroundSpeed: "0",
     customThemeColor: "#db6969",
     betterSEQTAPlus: true
   });
 
-  // Handler for Switches
-  const switchChange = (key: string, isOn: boolean) => {
-    setSettingsState({
-      ...settingsState,
-      [key]: isOn,
-    });
-  };
-
-  // Handler for ColorPicker
-  const colorChange = (color: string) => {
-    setSettingsState({
-      ...settingsState,
-      customThemeColor: color,
-    });
-  };
+  useSettingsState({ settingsState, setSettingsState });
 
   const tabs = [
     {
       title: 'Settings',
-      content: <Settings settingsState={settingsState} switchChange={switchChange} colorChange={colorChange} />
+      content: <Settings settingsState={settingsState} setSettingsState={setSettingsState} />
     },
     {
       title: 'Shortcuts',
@@ -59,7 +39,7 @@ const App: React.FC = () => {
 
   {/* <div className="flex justify-center w-screen h-screen pt-4 overflow-hidden" style={{ background: settingsState.customThemeColor }}> */}
   return (
-    <div className="flex flex-col w-[24rem] shadow-2xl gap-2 bg-white rounded-xl h-[590px] dark:bg-zinc-800 dark:text-white">
+    <div className="flex flex-col w-[384px] shadow-2xl gap-2 bg-white rounded-xl h-[590px] dark:bg-zinc-800 dark:text-white">
       <div className="grid border-b border-b-zinc-200/40 place-items-center">
         <img src={logo} className="w-4/5 dark:hidden" />
         <img src={logoDark} className="hidden w-4/5 dark:block" />