better settings styles

src/routes/settings.tsx

···
 import { createFileRoute } from "@tanstack/react-router";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Slider, Switch } from "radix-ui";
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Header } from "~/components/Header";
 import Login from "~/components/Login";
···
         <Login />
       </div>
       <div className="h-4" />
+
+      <SettingHeading title="Personalization" top />
+      <Hue />
+
+      <SettingHeading title="Network Configuration" />
+      <div className="flex flex-col px-4 pb-2">
+        <span className="text-md">Service Endpoints</span>
+        <span className="text-sm text-gray-500 dark:text-gray-400">
+          Customize the servers to be used by the app
+        </span>
+      </div>
       <TextInputSetting
         atom={constellationURLAtom}
         title={"Constellation"}
···
         init={defaultVideoCDN}
       />
 
-      <Hue />
+      <SettingHeading title="Experimental" />
       <SwitchSetting
         atom={enableBitesAtom}
         title={"Bites"}
-        description={"Enable Wafrn Bites"}
+        description={"Enable Wafrn Bites to bite other people"}
         //init={false}
-        />
-      <p className="text-gray-500 dark:text-gray-400 py-4 px-6 text-sm">
-        please restart/refresh the app if changes arent applying correctly
+      />
+      <p className="text-gray-500 dark:text-gray-400 py-4 px-4 text-sm border rounded-xl mx-4 mt-8 mb-4">
+        Notice: Please restart/refresh the app if changes arent applying
+        correctly
       </p>
     </>
   );
 }
 
+export function SettingHeading({
+  title,
+  top,
+}: {
+  title: string;
+  top?: boolean;
+}) {
+  return (
+    <div
+      className="px-4"
+      style={{ marginTop: top ? 0 : 18, paddingBottom: 12 }}
+    >
+      <span className=" text-sm font-medium text-gray-500 dark:text-gray-400">
+        {title}
+      </span>
+    </div>
+  );
+}
+
 export function SwitchSetting({
   atom,
   title,
···
   }
 
   return (
-    <div className="flex items-center gap-4 px-4 py-2">
+    <div className="flex items-center gap-4 px-4 ">
       <div className="flex flex-col">
-        <label htmlFor="switch-demo" className="text-lg">
+        <label htmlFor="switch-demo" className="text-md">
           {title}
         </label>
-        <span className="text-sm">{description}</span>
+        <span className="text-sm text-gray-500 dark:text-gray-400">
+          {description}
+        </span>
       </div>
+
+      <div className="flex-1" />
 
       <Switch.Root
         id="switch-demo"
         checked={value}
         onCheckedChange={(v) => setValue(v)}
-        className="w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-blue-500 transition-colors"
+        className="m3switch root"
       >
-        <Switch.Thumb
-          className="block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]"
-        />
+        <Switch.Thumb className="m3switch thumb " />
       </Switch.Root>
     </div>
   );
···
 function Hue() {
   const [hue, setHue] = useAtom(hueAtom);
   return (
-    <div className="flex flex-col px-4 mt-4 ">
-      <span className="z-10">Hue</span>
-      <div className="flex flex-row items-center gap-4">
-        <SliderComponent
-          atom={hueAtom}
-          max={360}
-        />
+    <div className="flex flex-col px-4">
+      <span className="z-[2] text-md">Hue</span>
+      <span className="z-[2] text-sm text-gray-500 dark:text-gray-400">
+        Change the colors of the app
+      </span>
+      <div className="z-[1] flex flex-row items-center gap-4">
+        <SliderComponent atom={hueAtom} max={360} />
         <button
           onClick={() => setHue(defaulthue ?? 28)}
           className="px-6 py-2 h-12 rounded-full bg-gray-100 dark:bg-gray-800 
···
   );
 }
 
-
 interface SliderProps {
   atom: typeof hueAtom;
   min?: number;
···
   max = 100,
   step = 1,
 }) => {
-
-  const [value, setValue] = useAtom(atom)
+  const [value, setValue] = useAtom(atom);
 
   return (
     <Slider.Root
···
       <Slider.Thumb className="shadow-[0_0_0_8px_var(--color-white)] dark:shadow-[0_0_0_8px_var(--color-gray-950)] block w-[3px] h-12 bg-gray-500 dark:bg-gray-400 rounded-md focus:outline-none" />
     </Slider.Root>
   );
-};
+};

src/styles/app.css

···
       }
     }
   }
+}
+
+:root{
+--thumb-size: 2rem;
+--root-size: 3.25rem;
+
+--switch-off-border: var(--color-gray-400);
+--switch-off-bg: var(--color-gray-200);
+--switch-off-thumb: var(--color-gray-400);
+
+
+--switch-on-bg: var(--color-gray-500);
+--switch-on-thumb: var(--color-gray-50);
+
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --switch-off-border: var(--color-gray-500);
+    --switch-off-bg: var(--color-gray-800);
+    --switch-off-thumb: var(--color-gray-500);
+
+
+    --switch-on-bg: var(--color-gray-400);
+    --switch-on-thumb: var(--color-gray-700);
+  }
+}
+
+.m3switch.root{
+  /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/
+  /*width: 40px;
+  height: 24px;*/
+
+  inline-size: var(--root-size);
+  block-size: 2rem;
+  border-radius: 99999px;
+
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+  transition-duration: var(--default-transition-duration); /* 150ms */
+
+  .m3switch.thumb{
+    /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
+    
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    display: inline-block;
+    border-radius: 9999px;
+
+    transform-origin: center;
+
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
+    transition-duration: var(--default-transition-duration); /* 150ms */
+    
+  }
+
+  &[aria-checked="true"] {
+    box-shadow: inset 0px 0px 0px 1.8px transparent;
+    background-color: var(--switch-on-bg);
+
+    .m3switch.thumb{
+      /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
+
+      background-color: var(--switch-on-thumb);
+      transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72);
+      &:active {
+        transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
+      }
+
+    }
+    &:active .m3switch.thumb{
+      transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
+    }
+  }
+
+  &[aria-checked="false"] {
+    box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border);
+    background-color: var(--switch-off-bg);
+    .m3switch.thumb{
+      /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
+      
+      background-color: var(--switch-off-thumb);
+      transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5);
+      &:active {
+        transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
+      }
+    }
+    &:active .m3switch.thumb{
+      transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
+    }
+  }
 }