Franknoirot/adjust color ramps (#2116)

* Update chalkboard color ramp to have less saturation

* Remove the hue number from settings display

src/lib/settings/initialSettings.tsx

@@ -137,7 +137,13 @@ export function createSettings() {
         description: 'The hue of the primary theme color for the app',
         validate: (v) => Number(v) >= 0 && Number(v) < 360,
         Component: ({ value, updateValue }) => (
-          <div className="flex item-center gap-2 px-2">
+          <div className="flex item-center gap-4 px-2 m-0 py-0">
+            <div
+              className="w-4 h-4 rounded-full bg-primary border border-solid border-chalkboard-100 dark:border-chalkboard-30"
+              style={{
+                backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) ${value})`,
+              }}
+            />
             <input
               type="range"
               onChange={(e) => updateValue(e.currentTarget.value)}
@@ -147,13 +153,6 @@ export function createSettings() {
               step={1}
               className="block flex-1"
             />
-            <span className="text-xs block w-[6ch] text-right">{value}º</span>
-            <div
-              className="w-3 h-3 rounded-full bg-primary"
-              style={{
-                backgroundColor: `oklch(var(--primary-lightness) var(--primary-chroma) ${value})`,
-              }}
-            />
           </div>
         ),
       }),