From 40d2611ef3c1611c787ada03274af733205bc480 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Sun, 19 Apr 2026 23:39:49 +0200
Subject: [PATCH] style: add settings theme styles and refactor settings
 component styles Entire-Checkpoint: c6e522b4276c

---
 apps/web/src/_settings-theme.scss             | 324 ++++++++++++++++++
 .../src/app/settings/settings.component.scss  | 317 -----------------
 apps/web/src/styles.scss                      |   1 +
 3 files changed, 325 insertions(+), 317 deletions(-)
 create mode 100644 apps/web/src/_settings-theme.scss

diff --git a/apps/web/src/_settings-theme.scss b/apps/web/src/_settings-theme.scss
new file mode 100644
index 000000000..437c54977
--- /dev/null
+++ b/apps/web/src/_settings-theme.scss
@@ -0,0 +1,324 @@
+.settings-container {
+    --settings-safe-bottom: env(safe-area-inset-bottom, 0px);
+    --settings-action-bar-offset: 24px;
+    --settings-action-bar-space: 112px;
+    --settings-page-header-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 94%,
+        rgba(255, 255, 255, 0.98)
+    );
+    --settings-page-header-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 72%,
+        transparent
+    );
+    --settings-page-header-shadow:
+        0 10px 20px -28px rgba(15, 23, 42, 0.16),
+        0 1px 0 rgba(255, 255, 255, 0.68) inset;
+    --settings-group-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface) 96%,
+        rgba(255, 255, 255, 0.96)
+    );
+    --settings-group-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 78%,
+        transparent
+    );
+    --settings-group-shadow: 0 14px 28px -32px rgba(15, 23, 42, 0.14);
+    --settings-group-active-bg: color-mix(
+        in srgb,
+        var(--app-selection-color) 2%,
+        rgba(255, 255, 255, 0.98)
+    );
+    --settings-group-active-ring: color-mix(
+        in srgb,
+        var(--app-selection-border) 68%,
+        var(--settings-group-border)
+    );
+    --settings-group-active-glow: color-mix(
+        in srgb,
+        var(--app-selection-glow) 28%,
+        transparent
+    );
+    --settings-group-active-shadow:
+        inset 0 0 0 1px var(--settings-group-active-ring),
+        0 12px 24px -28px var(--settings-group-active-glow);
+    --settings-item-border: var(--app-separator);
+    --settings-item-danger-bg: color-mix(
+        in srgb,
+        var(--mat-sys-error) 4%,
+        rgba(255, 255, 255, 0.96)
+    );
+    --settings-item-danger-border: color-mix(
+        in srgb,
+        var(--mat-sys-error) 14%,
+        transparent
+    );
+    --settings-action-bar-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container-low) 94%,
+        rgba(255, 255, 255, 0.9)
+    );
+    --settings-action-bar-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 62%,
+        transparent
+    );
+    --settings-action-bar-shadow: 0 10px 26px -26px rgba(15, 23, 42, 0.22);
+    --settings-muted: color-mix(
+        in srgb,
+        var(--mat-sys-on-surface) 64%,
+        transparent
+    );
+}
+
+:where(.dark-theme, [data-theme='dark'], .mat-app-background.dark)
+    .settings-container {
+    --settings-page-header-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 92%,
+        rgba(12, 16, 24, 0.94)
+    );
+    --settings-page-header-border: color-mix(
+        in srgb,
+        var(--mat-sys-outline-variant) 38%,
+        transparent
+    );
+    --settings-page-header-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.05),
+        0 16px 26px -34px rgba(0, 0, 0, 0.4);
+    --settings-group-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 94%,
+        rgba(10, 14, 22, 0.82)
+    );
+    --settings-group-border: rgba(255, 255, 255, 0.08);
+    --settings-group-shadow: 0 16px 28px -32px rgba(0, 0, 0, 0.42);
+    --settings-group-active-bg: color-mix(
+        in srgb,
+        var(--app-selection-surface) 24%,
+        rgba(255, 255, 255, 0.015)
+    );
+    --settings-group-active-ring: color-mix(
+        in srgb,
+        var(--app-selection-border) 54%,
+        rgba(255, 255, 255, 0.08)
+    );
+    --settings-group-active-glow: color-mix(
+        in srgb,
+        var(--app-selection-glow) 22%,
+        transparent
+    );
+    --settings-group-active-shadow:
+        inset 0 0 0 1px var(--settings-group-active-ring),
+        0 10px 22px -28px var(--settings-group-active-glow);
+    --settings-item-danger-bg: color-mix(
+        in srgb,
+        var(--mat-sys-error) 8%,
+        rgba(24, 10, 12, 0.86)
+    );
+    --settings-item-danger-border: color-mix(
+        in srgb,
+        var(--mat-sys-error) 24%,
+        transparent
+    );
+    --settings-action-bar-bg: color-mix(
+        in srgb,
+        var(--mat-sys-surface-container) 92%,
+        transparent
+    );
+    --settings-action-bar-border: rgba(255, 255, 255, 0.08);
+    --settings-action-bar-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
+    --settings-muted: color-mix(
+        in srgb,
+        var(--mat-sys-on-surface) 68%,
+        transparent
+    );
+}
+
+.settings-container {
+    .support-card {
+        width: 100%;
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 18px;
+        border-radius: 18px;
+        border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
+        background:
+            radial-gradient(
+                120% 140% at 0% 0%,
+                color-mix(in srgb, #ff4d6d 16%, transparent) 0%,
+                transparent 55%
+            ),
+            radial-gradient(
+                120% 140% at 100% 100%,
+                color-mix(in srgb, #ffb347 14%, transparent) 0%,
+                transparent 60%
+            ),
+            color-mix(
+                in srgb,
+                var(--mat-sys-surface-container-low) 92%,
+                transparent
+            );
+        overflow: hidden;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background: radial-gradient(
+                80% 100% at 50% -10%,
+                color-mix(in srgb, #ff4d6d 12%, transparent) 0%,
+                transparent 70%
+            );
+            opacity: 0.8;
+        }
+    }
+
+    .support-card__intro {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        z-index: 1;
+    }
+
+    .support-card__emblem {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        border-radius: 14px;
+        background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
+        color: #fff;
+        box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.35),
+            0 10px 18px -10px rgba(255, 77, 109, 0.55);
+
+        mat-icon {
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+        }
+    }
+
+    .support-card__copy {
+        min-width: 0;
+        flex: 1 1 auto;
+
+        h4 {
+            margin: 0;
+            font-size: 1rem;
+            font-weight: 700;
+            letter-spacing: -0.01em;
+        }
+
+        p {
+            margin: 4px 0 0;
+            color: var(--settings-muted);
+            font-size: 0.86rem;
+            line-height: 1.5;
+            max-width: 64ch;
+        }
+    }
+
+    .support-card__actions {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+
+    .support-btn {
+        flex: 1 1 220px;
+        display: inline-flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 14px;
+        border-radius: 14px;
+        border: 1px solid transparent;
+        text-decoration: none;
+        color: #fff;
+        transition:
+            transform 0.18s ease,
+            box-shadow 0.18s ease,
+            filter 0.18s ease;
+
+        &:hover {
+            transform: translateY(-1px);
+            filter: brightness(1.04);
+        }
+
+        &:focus-visible {
+            outline: none;
+            box-shadow:
+                0 0 0 2px var(--mat-sys-surface),
+                0 0 0 4px
+                    color-mix(
+                        in srgb,
+                        var(--app-selection-color) 40%,
+                        transparent
+                    );
+        }
+    }
+
+    .support-btn__glyph {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 10px;
+        background: rgba(255, 255, 255, 0.18);
+        color: #fff;
+        flex: 0 0 auto;
+
+        svg {
+            width: 18px;
+            height: 18px;
+        }
+
+        mat-icon {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+        }
+    }
+
+    .support-btn__text {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        strong {
+            font-size: 0.92rem;
+            font-weight: 700;
+            letter-spacing: -0.01em;
+        }
+
+        small {
+            color: rgba(255, 255, 255, 0.82);
+            font-size: 0.75rem;
+            line-height: 1.3;
+        }
+    }
+
+    .support-btn--sponsors {
+        background: linear-gradient(135deg, #d4337a, #ff4d6d);
+        box-shadow: 0 12px 22px -18px rgba(212, 51, 122, 0.7);
+    }
+
+    .support-btn--kofi {
+        background: linear-gradient(135deg, #13c3ff, #29abe0);
+        box-shadow: 0 12px 22px -18px rgba(19, 195, 255, 0.7);
+    }
+}
diff --git a/apps/web/src/app/settings/settings.component.scss b/apps/web/src/app/settings/settings.component.scss
index 58e844a4c..8e46362c7 100644
--- a/apps/web/src/app/settings/settings.component.scss
+++ b/apps/web/src/app/settings/settings.component.scss
@@ -1,142 +1,5 @@
 :host {
     display: block;
-    --settings-safe-bottom: env(safe-area-inset-bottom, 0px);
-    --settings-action-bar-offset: 24px;
-    --settings-action-bar-space: 112px;
-    --settings-page-header-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface-container-low) 94%,
-        rgba(255, 255, 255, 0.98)
-    );
-    --settings-page-header-border: color-mix(
-        in srgb,
-        var(--mat-sys-outline-variant) 72%,
-        transparent
-    );
-    --settings-page-header-shadow:
-        0 10px 20px -28px rgba(15, 23, 42, 0.16),
-        0 1px 0 rgba(255, 255, 255, 0.68) inset;
-    --settings-group-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface) 96%,
-        rgba(255, 255, 255, 0.96)
-    );
-    --settings-group-border: color-mix(
-        in srgb,
-        var(--mat-sys-outline-variant) 78%,
-        transparent
-    );
-    --settings-group-shadow: 0 14px 28px -32px rgba(15, 23, 42, 0.14);
-    --settings-group-active-bg: color-mix(
-        in srgb,
-        var(--app-selection-color) 2%,
-        rgba(255, 255, 255, 0.98)
-    );
-    --settings-group-active-ring: color-mix(
-        in srgb,
-        var(--app-selection-border) 68%,
-        var(--settings-group-border)
-    );
-    --settings-group-active-glow: color-mix(
-        in srgb,
-        var(--app-selection-glow) 28%,
-        transparent
-    );
-    --settings-group-active-shadow:
-        inset 0 0 0 1px var(--settings-group-active-ring),
-        0 12px 24px -28px var(--settings-group-active-glow);
-    --settings-item-border: var(--app-separator);
-    --settings-item-danger-bg: color-mix(
-        in srgb,
-        var(--mat-sys-error) 4%,
-        rgba(255, 255, 255, 0.96)
-    );
-    --settings-item-danger-border: color-mix(
-        in srgb,
-        var(--mat-sys-error) 14%,
-        transparent
-    );
-    --settings-action-bar-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface-container-low) 94%,
-        rgba(255, 255, 255, 0.9)
-    );
-    --settings-action-bar-border: color-mix(
-        in srgb,
-        var(--mat-sys-outline-variant) 62%,
-        transparent
-    );
-    --settings-action-bar-shadow: 0 10px 26px -26px rgba(15, 23, 42, 0.22);
-    --settings-muted: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) 64%,
-        transparent
-    );
-}
-
-:host-context(.dark-theme),
-:host-context([data-theme='dark']),
-:host-context(.mat-app-background.dark) {
-    --settings-page-header-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface-container) 92%,
-        rgba(12, 16, 24, 0.94)
-    );
-    --settings-page-header-border: color-mix(
-        in srgb,
-        var(--mat-sys-outline-variant) 38%,
-        transparent
-    );
-    --settings-page-header-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.05),
-        0 16px 26px -34px rgba(0, 0, 0, 0.4);
-    --settings-group-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface-container) 94%,
-        rgba(10, 14, 22, 0.82)
-    );
-    --settings-group-border: rgba(255, 255, 255, 0.08);
-    --settings-group-shadow: 0 16px 28px -32px rgba(0, 0, 0, 0.42);
-    --settings-group-active-bg: color-mix(
-        in srgb,
-        var(--app-selection-surface) 24%,
-        rgba(255, 255, 255, 0.015)
-    );
-    --settings-group-active-ring: color-mix(
-        in srgb,
-        var(--app-selection-border) 54%,
-        rgba(255, 255, 255, 0.08)
-    );
-    --settings-group-active-glow: color-mix(
-        in srgb,
-        var(--app-selection-glow) 22%,
-        transparent
-    );
-    --settings-group-active-shadow:
-        inset 0 0 0 1px var(--settings-group-active-ring),
-        0 10px 22px -28px var(--settings-group-active-glow);
-    --settings-item-danger-bg: color-mix(
-        in srgb,
-        var(--mat-sys-error) 8%,
-        rgba(24, 10, 12, 0.86)
-    );
-    --settings-item-danger-border: color-mix(
-        in srgb,
-        var(--mat-sys-error) 24%,
-        transparent
-    );
-    --settings-action-bar-bg: color-mix(
-        in srgb,
-        var(--mat-sys-surface-container) 92%,
-        transparent
-    );
-    --settings-action-bar-border: rgba(255, 255, 255, 0.08);
-    --settings-action-bar-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
-    --settings-muted: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) 68%,
-        transparent
-    );
 }
 
 .settings-container {
@@ -653,186 +516,6 @@
         transform 0.18s ease;
 }
 
-.support-card {
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-    padding: 18px;
-    border-radius: 18px;
-    border: 1px solid color-mix(in srgb, #ff4d6d 26%, transparent);
-    background:
-        radial-gradient(
-            120% 140% at 0% 0%,
-            color-mix(in srgb, #ff4d6d 16%, transparent) 0%,
-            transparent 55%
-        ),
-        radial-gradient(
-            120% 140% at 100% 100%,
-            color-mix(in srgb, #ffb347 14%, transparent) 0%,
-            transparent 60%
-        ),
-        color-mix(
-            in srgb,
-            var(--mat-sys-surface-container-low) 92%,
-            transparent
-        );
-    overflow: hidden;
-
-    &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        background: radial-gradient(
-            80% 100% at 50% -10%,
-            color-mix(in srgb, #ff4d6d 12%, transparent) 0%,
-            transparent 70%
-        );
-        opacity: 0.8;
-    }
-}
-
-.support-card__intro {
-    position: relative;
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    z-index: 1;
-}
-
-.support-card__emblem {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    border-radius: 14px;
-    background: linear-gradient(135deg, #ff4d6d, #ff8b5e);
-    color: #fff;
-    box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.35),
-        0 10px 18px -10px rgba(255, 77, 109, 0.55);
-
-    mat-icon {
-        font-size: 22px;
-        width: 22px;
-        height: 22px;
-    }
-}
-
-.support-card__copy {
-    min-width: 0;
-    flex: 1 1 auto;
-
-    h4 {
-        margin: 0;
-        font-size: 1rem;
-        font-weight: 700;
-        letter-spacing: -0.01em;
-    }
-
-    p {
-        margin: 4px 0 0;
-        color: var(--settings-muted);
-        font-size: 0.86rem;
-        line-height: 1.5;
-        max-width: 64ch;
-    }
-}
-
-.support-card__actions {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.support-btn {
-    flex: 1 1 220px;
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
-    border-radius: 14px;
-    border: 1px solid transparent;
-    text-decoration: none;
-    color: #fff;
-    transition:
-        transform 0.18s ease,
-        box-shadow 0.18s ease,
-        filter 0.18s ease;
-
-    &:hover {
-        transform: translateY(-1px);
-        filter: brightness(1.04);
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow:
-            0 0 0 2px var(--mat-sys-surface),
-            0 0 0 4px
-                color-mix(in srgb, var(--app-selection-color) 40%, transparent);
-    }
-}
-
-.support-btn__glyph {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    background: rgba(255, 255, 255, 0.18);
-    color: #fff;
-    flex: 0 0 auto;
-
-    svg {
-        width: 18px;
-        height: 18px;
-    }
-
-    mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
-    }
-}
-
-.support-btn__text {
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-
-    strong {
-        font-size: 0.92rem;
-        font-weight: 700;
-        letter-spacing: -0.01em;
-    }
-
-    small {
-        color: rgba(255, 255, 255, 0.82);
-        font-size: 0.75rem;
-        line-height: 1.3;
-    }
-}
-
-.support-btn--sponsors {
-    background: linear-gradient(135deg, #d4337a, #ff4d6d);
-    box-shadow: 0 12px 22px -18px rgba(212, 51, 122, 0.7);
-}
-
-.support-btn--kofi {
-    background: linear-gradient(135deg, #13c3ff, #29abe0);
-    box-shadow: 0 12px 22px -18px rgba(19, 195, 255, 0.7);
-}
-
 .settings-note {
     margin: 12px 18px 18px;
     padding: 10px 12px;
diff --git a/apps/web/src/styles.scss b/apps/web/src/styles.scss
index ff6a212fb..5c9724c0a 100644
--- a/apps/web/src/styles.scss
+++ b/apps/web/src/styles.scss
@@ -1,4 +1,5 @@
 @use '../../../libs/ui/components/src/lib/resizable/resizable.scss';
+@use './settings-theme';
 
 // ─── Tailwind CSS ─────────────────────────────────────────────────────────────
 // Preflight is disabled in tailwind.config.js to avoid conflicts with