feat(angular-material): review kd-theme

upgrade angular-material to 16 BREAKING CHANGE: ⛵upgrade angular-material to 16
kubernetes · Oct 18, 2023 · 36994ea · 36994ea
1 parent 29bd6a7
commit 36994ea
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 35 deletions.
diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss
@@ -36,40 +36,10 @@
 
   // Global style overrides.
 
+  // Angular Material 15/16 Density
   @include mat.form-field-density(-4);
   @include mat.icon-button-density(-3);
 
-  .kd-namespace-select-form-field {
-    mat-form-field {
-      width: 100%;
-    }
-
-    .mdc-notched-outline {
-      .mdc-notched-outline__leading {
-        display: none !important;
-      }
-
-      .mdc-notched-outline__trailing {
-        border: 1px solid $border !important;
-        border-radius: 2px !important;
-      }
-    }
-  }
-
-  mat-card-title,
-  mat-card-footer {
-    color: map.get($foreground-palette, text);
-  }
-
-  .kd-card-content {
-    color: map.get($foreground-palette, text);
-  }
-
-  .kd-create-from-file-info,
-  .kd-create-from-input-info {
-    color: map.get($foreground-palette, text);
-  }
-
   a {
     color: map.get($colors, primary);
 
@@ -363,4 +333,32 @@
       }
     }
   }
+
+  .kd-namespace-select-form-field {
+    mat-form-field {
+      width: 100%;
+    }
+
+    .mdc-notched-outline {
+      .mdc-notched-outline__leading {
+        display: none;
+      }
+
+      .mdc-notched-outline__trailing {
+        border: 1px solid $border !important;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .mat-mdc-card-title,
+  .mat-mdc-card-content,
+  .mat-mdc-card-footer {
+    color: map.get($foreground-palette, text);
+  }
+
+  .kd-create-from-file-info,
+  .kd-create-from-input-info {
+    color: map.get($foreground-palette, text);
+  }
 }
diff --git a/modules/web/src/index.scss b/modules/web/src/index.scss
@@ -283,7 +283,7 @@ router-outlet::after {
   z-index: 1;
 }
 
-/* MDC MAT chips */
+/* Angular Material 15/16 chips */
 .mat-mdc-chip.mat-mdc-standard-chip {
   box-shadow: none !important;
   font-size: $body-font-size-base;
@@ -312,10 +312,9 @@ router-outlet::after {
 }
 
 .mat-mdc-chip-focus-overlay {
-  background: none !important;
+  display: none !important;
 }
 
-/* MDC MAT chips end */
 
 .kd-chips-show-button {
   cursor: pointer;
@@ -394,6 +393,7 @@ kd-logs {
   }
 }
 
+// Angular Material 15/16 standard appearance in form field
 .kd-standard-form-field {
   mat-form-field {
     width: 100%;

diff --git a/modules/web/src/logs/component.ts b/modules/web/src/logs/component.ts
@@ -35,7 +35,15 @@ const i18n = {
   selector: 'kd-logs',
   templateUrl: './template.html',
   styleUrls: ['./style.scss'],
-  providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill', subscriptSizing: 'dynamic'}}],
+  providers: [
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        appearance: 'outline',
+        subscriptSizing: 'dynamic',
+      },
+    },
+  ],
 })
 export class LogsComponent implements OnDestroy {
   @ViewChild('logViewContainer', {static: true}) logViewContainer_: ElementRef;