Refactor Settings UI (#20392)

* refactor with sidebar and mobile page

* sidebar spacing and color tweaks

* layout tweaks

* move camera switch button to header

* improve mobile

* remove back button on mobile page header

* mobile fixes

* remove debug

* don't use mobilepage

* more mobile tweaks

* use mobile page for components

* add optional actions to mobile page header for top right buttons

* fix alignment

* use page toggle

* tweaks

* sidebar inset tweaks

* move triggers to notifications sub menu

* consistency

* fix padding

* more padding fixes

* navigate history

web/tailwind.config.cjs

@@ -119,12 +119,12 @@ module.exports = {
           DEFAULT: "hsl(var(--neutral_variant))",
         },
         sidebar: {
-          DEFAULT: "hsl(var(--secondary))",
+          DEFAULT: "hsl(var(--background))",
           foreground: "hsl(var(--secondary-foreground))",
           primary: "hsl(var(--primary))",
           "primary-foreground": "hsl(var(--primary-foreground))",
-          accent: "hsl(var(--primary-variant))",
-          "accent-foreground": "hsl(var(--primary-foreground))",
+          accent: "hsl(var(--background-alt))",
+          "accent-foreground": "hsl(var(--primary))",
           border: "hsl(var(--border))",
           ring: "hsl(var(--ring))",
         },