Fix lint, make design more consistent, add license texts,

toju-app/src/app/features/settings/settings-modal/settings-modal.component.html

@@ -16,8 +16,8 @@
   <!-- Modal -->
   <div class="fixed inset-0 z-[91] flex items-center justify-center p-4 pointer-events-none">
     <div
-      class="pointer-events-auto relative flex w-full max-w-4xl overflow-hidden rounded-xl border border-border bg-card shadow-2xl transition-all duration-200"
-      style="height: min(680px, 85vh)"
+      class="pointer-events-auto relative flex w-full max-w-5xl overflow-hidden rounded-lg border border-border bg-card shadow-lg transition-all duration-200"
+      style="height: min(720px, 88vh)"
       [class.scale-100]="animating()"
       [class.opacity-100]="animating()"
       [class.scale-95]="!animating()"
@@ -30,24 +30,25 @@
       tabindex="-1"
     >
       <!-- Side Navigation -->
-      <nav class="flex w-52 flex-shrink-0 flex-col border-r border-border bg-secondary/40">
-        <div class="p-4 border-b border-border">
+      <nav class="flex w-56 flex-shrink-0 flex-col border-r border-border bg-card">
+        <div class="border-b border-border px-3 py-3">
           <h2 class="text-lg font-semibold text-foreground">Settings</h2>
         </div>
 
         <div class="flex-1 overflow-y-auto py-2">
           <!-- Global section -->
-          <p class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider">General</p>
+          <p class="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">General</p>
           @for (page of globalPages; track page.id) {
             <button
               (click)="navigate(page.id)"
               type="button"
-              class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
-              [class.bg-primary/10]="activePage() === page.id"
-              [class.text-primary]="activePage() === page.id"
+              class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+              [class.bg-secondary]="activePage() === page.id"
+              [class.text-foreground]="activePage() === page.id"
               [class.font-medium]="activePage() === page.id"
-              [class.text-foreground]="activePage() !== page.id"
-              [class.hover:bg-secondary]="activePage() !== page.id"
+              [class.text-muted-foreground]="activePage() !== page.id"
+              [class.hover:bg-secondary/70]="activePage() !== page.id"
+              [class.hover:text-foreground]="activePage() !== page.id"
             >
               <ng-icon
                 [name]="page.icon"
@@ -60,12 +61,12 @@
           <!-- Server section -->
           @if (manageableRooms().length > 0) {
             <div class="mt-3 pt-3 border-t border-border">
-              <p class="px-4 py-1.5 text-[11px] font-semibold text-muted-foreground/70 uppercase tracking-wider">Server</p>
+              <p class="px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Server</p>
 
               <!-- Server selector -->
               <div class="px-3 pb-2">
                 <select
-                  class="w-full px-2 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+                  class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
                   [value]="selectedServerId() || ''"
                   (change)="onServerSelect($event)"
                 >
@@ -81,12 +82,13 @@
                   <button
                     (click)="navigate(page.id)"
                     type="button"
-                    class="w-full flex items-center gap-2.5 px-4 py-2 text-sm transition-colors"
-                    [class.bg-primary/10]="activePage() === page.id"
-                    [class.text-primary]="activePage() === page.id"
+                    class="mx-2 flex w-[calc(100%-1rem)] items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors"
+                    [class.bg-secondary]="activePage() === page.id"
+                    [class.text-foreground]="activePage() === page.id"
                     [class.font-medium]="activePage() === page.id"
-                    [class.text-foreground]="activePage() !== page.id"
-                    [class.hover:bg-secondary]="activePage() !== page.id"
+                    [class.text-muted-foreground]="activePage() !== page.id"
+                    [class.hover:bg-secondary/70]="activePage() !== page.id"
+                    [class.hover:text-foreground]="activePage() !== page.id"
                   >
                     <ng-icon
                       [name]="page.icon"
@@ -100,15 +102,7 @@
           }
         </div>
 
-        <div class="mt-auto space-y-3 border-t border-border px-4 py-3">
-          <button
-            type="button"
-            (click)="restoreDefaultTheme()"
-            class="w-full rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-left text-xs font-medium text-destructive transition-colors hover:bg-destructive/15"
-          >
-            Restore default theme
-          </button>
-
+        <div class="mt-auto border-t border-border px-3 py-3">
           <button
             type="button"
             (click)="openThirdPartyLicenses()"
@@ -122,7 +116,7 @@
       <!-- Content -->
       <div class="flex-1 flex flex-col min-w-0">
         <!-- Header -->
-        <div class="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+        <div class="flex items-center justify-between border-b border-border px-5 py-3 flex-shrink-0">
           <h3 class="text-lg font-semibold text-foreground">
             @switch (activePage()) {
               @case ('general') {
@@ -164,7 +158,7 @@
             <button
               (click)="close()"
               type="button"
-              class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+              class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
             >
               <ng-icon
                 name="lucideX"
@@ -175,7 +169,7 @@
         </div>
 
         <!-- Scrollable Content Area -->
-        <div class="flex-1 overflow-y-auto p-6">
+        <div class="flex-1 overflow-y-auto bg-background px-4 py-4 sm:px-5 sm:py-4">
           @switch (activePage()) {
             @case ('general') {
               <app-general-settings />
@@ -184,70 +178,79 @@
               <app-network-settings />
             }
             @case ('theme') {
-              <div class="mx-auto flex h-full max-w-3xl items-center justify-center">
-                <div class="w-full rounded-[1.5rem] border border-border bg-card/90 p-6 shadow-sm">
-                  <div class="flex flex-wrap items-start justify-between gap-4">
-                    <div>
-                      <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
-                      <h4 class="mt-2 text-xl font-semibold text-foreground">{{ activeThemeName() }}</h4>
-                    </div>
-
-                    @if (themeStudioMinimized()) {
-                      <span class="rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Minimized</span>
-                    }
+              <div class="max-w-3xl space-y-5">
+                <div class="flex flex-wrap items-start justify-between gap-4">
+                  <div>
+                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Active Theme</p>
+                    <h4 class="mt-2 text-lg font-semibold text-foreground">{{ activeThemeName() }}</h4>
+                    <p class="mt-2 max-w-2xl text-sm text-muted-foreground">
+                      Launch Theme Studio to edit the live draft, inspect themeable regions, or switch to a saved theme.
+                    </p>
                   </div>
 
-                  @if (savedThemesAvailable()) {
-                    <div class="mt-5">
-                      <label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Saved Theme</label>
-
-                      <div class="mt-2 flex flex-wrap gap-2">
-                        <select
-                          class="min-w-[16rem] flex-1 rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-2 focus:ring-primary/15"
-                          [value]="selectedSavedTheme()?.fileName || ''"
-                          [disabled]="savedThemesBusy() && savedThemes().length === 0"
-                          (change)="onSavedThemeSelect($event)"
-                        >
-                          <option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
-                          @for (savedTheme of savedThemes(); track savedTheme.fileName) {
-                            <option
-                              [value]="savedTheme.fileName"
-                              [disabled]="!savedTheme.isValid"
-                            >
-                              {{ savedTheme.themeName }}
-                            </option>
-                          }
-                        </select>
-
-                        <button
-                          type="button"
-                          (click)="editSelectedSavedTheme()"
-                          [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
-                          class="inline-flex items-center rounded-full border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-60"
-                        >
-                          Edit In Studio
-                        </button>
-                      </div>
-                    </div>
+                  @if (themeStudioMinimized()) {
+                    <span class="rounded-full bg-primary/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary"
+                      >Minimized</span
+                    >
                   }
+                </div>
 
-                  <div class="mt-5 flex flex-wrap gap-2">
-                    <button
-                      type="button"
-                      (click)="openThemeStudio()"
-                      class="inline-flex items-center rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+                @if (savedThemesAvailable()) {
+                  <div class="space-y-2">
+                    <label
+                      for="settings-saved-theme-select"
+                      class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground"
                     >
-                      {{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
-                    </button>
+                      Saved Theme
+                    </label>
 
-                    <button
-                      type="button"
-                      (click)="restoreDefaultTheme()"
-                      class="inline-flex items-center rounded-full border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
-                    >
-                      Restore Default
-                    </button>
+                    <div class="flex flex-wrap gap-2">
+                      <select
+                        id="settings-saved-theme-select"
+                        class="min-w-[16rem] flex-1 rounded-lg border border-border bg-secondary px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary/40 focus:ring-1 focus:ring-primary"
+                        [value]="selectedSavedTheme()?.fileName || ''"
+                        [disabled]="savedThemesBusy() && savedThemes().length === 0"
+                        (change)="onSavedThemeSelect($event)"
+                      >
+                        <option value="">{{ savedThemes().length > 0 ? 'Choose saved theme' : 'No saved themes' }}</option>
+                        @for (savedTheme of savedThemes(); track savedTheme.fileName) {
+                          <option
+                            [value]="savedTheme.fileName"
+                            [disabled]="!savedTheme.isValid"
+                          >
+                            {{ savedTheme.themeName }}
+                          </option>
+                        }
+                      </select>
+
+                      <button
+                        type="button"
+                        (click)="editSelectedSavedTheme()"
+                        [disabled]="!selectedSavedTheme()?.isValid || (savedThemesBusy() && savedThemes().length === 0)"
+                        class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-60"
+                      >
+                        Edit In Studio
+                      </button>
+                    </div>
                   </div>
+                }
+
+                <div class="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    (click)="openThemeStudio()"
+                    class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
+                  >
+                    {{ themeStudioMinimized() ? 'Re-open Theme Studio' : 'Open Theme Studio' }}
+                  </button>
+
+                  <button
+                    type="button"
+                    (click)="restoreDefaultTheme()"
+                    class="inline-flex items-center rounded-lg border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive transition-colors hover:bg-destructive/15"
+                  >
+                    Restore Default
+                  </button>
                 </div>
               </div>
             }
@@ -304,18 +307,20 @@
           aria-label="Close third-party licenses"
         ></div>
 
-        <div class="pointer-events-none absolute inset-0 z-[11] flex items-center justify-center p-4 sm:p-6">
-          <div class="pointer-events-auto w-full max-w-2xl max-h-full overflow-hidden rounded-xl border border-border bg-card shadow-2xl">
+        <div class="pointer-events-none absolute inset-0 z-[11] flex justify-center p-4 sm:p-6">
+          <div
+            class="pointer-events-auto flex min-h-0 w-full max-w-2xl self-stretch flex-col overflow-hidden rounded-lg border border-border bg-card shadow-lg"
+          >
             <div class="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
               <div>
                 <h4 class="text-base font-semibold text-foreground">Third-party licenses</h4>
-                <p class="mt-1 text-sm text-muted-foreground">License notices for bundled third-party libraries used by the app.</p>
+                <p class="mt-1 text-sm text-muted-foreground">License information for bundled third-party libraries used by the app.</p>
               </div>
 
               <button
                 type="button"
                 (click)="closeThirdPartyLicenses()"
-                class="p-2 hover:bg-secondary rounded-lg transition-colors text-muted-foreground hover:text-foreground"
+                class="grid h-9 w-9 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                 aria-label="Close third-party licenses"
               >
                 <ng-icon
@@ -325,7 +330,7 @@
               </button>
             </div>
 
-            <div class="max-h-[min(70vh,42rem)] overflow-y-auto px-5 py-4 space-y-4">
+            <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4 space-y-4">
               @for (license of thirdPartyLicenses; track license.id) {
                 <section class="rounded-lg border border-border bg-secondary/20 p-4">
                   <div class="flex items-start justify-between gap-4">
@@ -340,14 +345,32 @@
                       rel="noopener noreferrer"
                       class="text-xs font-medium text-primary hover:underline underline-offset-4"
                     >
-                      Source
+                      View license
                     </a>
                   </div>
 
-                  <pre
-                    class="mt-4 whitespace-pre-wrap break-words rounded-md bg-background/80 px-3 py-2 text-[11px] leading-5 text-muted-foreground"
-                    >{{ license.text }}</pre
-                  >
+                  <div class="mt-4 rounded-md bg-background/80 px-3 py-3">
+                    <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">Packages</p>
+                    <div class="mt-3 flex flex-wrap gap-2">
+                      @for (packageName of license.packages; track packageName) {
+                        <span class="rounded-full border border-border bg-card px-2.5 py-1 text-[11px] font-medium leading-4 text-foreground">
+                          {{ packageName }}
+                        </span>
+                      }
+                    </div>
+
+                    @if (license.note) {
+                      <p class="mt-3 text-xs leading-5 text-muted-foreground">{{ license.note }}</p>
+                    }
+
+                    <div class="mt-4">
+                      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">License text</p>
+                      <pre
+                        class="mt-2 whitespace-pre-wrap break-words rounded-md border border-border/70 bg-card px-3 py-3 text-[11px] leading-5 text-muted-foreground"
+                        >{{ license.text }}</pre
+                      >
+                    </div>
+                  </div>
                 </section>
               }
             </div>