restyles spellslot-modal

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

@@ -12,20 +12,23 @@
     </mat-slide-toggle>
     <!-- Zauberplätze in der Übersicht anzeigen -->
     @if (showSpellslots) {
-      <div class="t-1">
+      <div class="t-2">
         @for (level of spellslots; let levelIndex = $index; track level) {
-          <div class="t-05">
-            {{ "general.level" | translate }} {{ levelIndex + 1 }}
-            <select
-              [(ngModel)]="spellslots[levelIndex].totalSlots"
-              style="padding-left: 0.5rem"
-            >
-              @for (number of [1, 2, 3, 4]; track number) {
-                <option [value]="number">
-                  {{ number }}
-                </option>
-              }
-            </select>
+          <div class="t-1">
+            <mat-form-field appearance="outline">
+              <mat-label
+                >{{ "general.level" | translate }}
+                {{ levelIndex + 1 }}</mat-label
+              >
+              <mat-select
+                [(ngModel)]="spellslots[levelIndex].totalSlots"
+                name="class"
+              >
+                @for (number of [1, 2, 3, 4]; track number) {
+                  <mat-option [value]="number">{{ number }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
             <icon-button
               style="display: inline; margin-left: 0.25rem"
               [icon]="'delete'"
@@ -35,7 +38,11 @@
         }
       </div>
       @if (spellslots.length < 9) {
-        <icon-button [icon]="'add'" (click)="addSpellLevel()"></icon-button>
+        <icon-button
+          class="add-level"
+          [icon]="'add'"
+          (click)="addSpellLevel()"
+        ></icon-button>
       }
     }
   } @else {

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.scss

@@ -1,3 +1,11 @@
 .dimensions {
   width: 35rem;
 }
+
+::ng-deep .mat-mdc-text-field-wrapper {
+  width: 10rem !important;
+}
+
+.add-level {
+  margin: 0.75rem 3.5rem;
+}

src/colors.scss

@@ -19,6 +19,7 @@
   --gold-dark: #c0a042;
   --gold-active: #98895c;
 
+  --grey-light: #d4d4d4;
   --grey: #8d8c8c;
   --grey-dark: #6e6d6d;
 

src/styles.scss

@@ -338,3 +338,15 @@ body {
 .mat-mdc-radio-button.mat-mdc-radio-checked .mat-ripple-element {
   background-color: var(--primary) !important;
 }
+
+.mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after,
+.mdc-switch.mdc-switch--selected:enabled .mdc-switch__handle::after {
+  background-color: var(--gold) !important;
+}
+
+.mdc-switch:enabled .mdc-switch__track::before {
+  background-color: var(--grey-light) !important;
+}
+.mdc-switch:enabled .mdc-switch__track::after {
+  background-color: var(--grey) !important;
+}