kubernetes · romdhanisam · Oct 5, 2023
diff --git a/modules/web/src/_theming.scss b/modules/web/src/_theming.scss
@@ -14,6 +14,7 @@
 
 @use 'sass:map';
 @use 'sass:color';
+@use '@angular/material' as mat;
 @use '@angular/material/theming';
 @use 'variables' as *;
 
@@ -38,6 +39,10 @@
 
   // Global style overrides.
 
+  // Angular Material 15/16 Density
+  @include mat.form-field-density(-4);
+  @include mat.icon-button-density(-3);
+
   a {
     color: map.get($colors, primary);
 
@@ -174,24 +179,24 @@
     background-color: $border;
   }
 
-  .kd-chips-show-button {
-    color: map.get($colors, primary);
-
-    &:hover {
-      color: map.get($colors, primary-hover);
-    }
-  }
-
   .kd-minimized-card-header:hover {
     background: $border;
   }
 
   .kd-search {
-    background-color: color.adjust($background, $lightness: -2.5%);
+      mat-form-field {
+        .mdc-text-field__input {
+          font-size: $subhead-font-size-base;
+        }
 
-    input {
-      color: theming.mat-color($foreground-palette, base);
-    }
+        .mdc-text-field {
+          background-color: color.adjust($background, $lightness: -2.5%);
+        }
+
+        .mdc-notched-outline__trailing {
+          display: none;
+        }
+      }
   }
 
   .kd-nav-item-button {
@@ -215,31 +220,29 @@
     }
   }
 
-  .mat-chip.mat-standard-chip {
-    background: $card-background-dark;
-  }
+  /* MAT chips Theming */
 
-  .mat-active,
-  .mat-selected {
-    color: map.get($colors, primary) !important;
+  .mat-mdc-chip.mat-mdc-standard-chip {
+    background: $card-background-dark;
   }
 
-  kd-namespace-selector {
-    border: 1px solid $border;
+  .kd-chips-show-button {
+    color: map.get($colors, primary);
 
-    .kd-namespace-select {
-      color: theming.mat-color($foreground-palette, secondary-text);
+    &:hover {
+      color: map.get($colors, primary-hover);
     }
+  }
 
-    .kd-namespace-select-input-container {
-      .mat-form-field-underline {
-        display: none;
-      }
+  /* MAT chips Theming End */
 
-      .mat-select-arrow {
-        color: $muted-light !important;
-      }
-    }
+  button.mat-mdc-icon-button {
+    color: theming.mat-color($foreground-palette, text);
+  }
+
+  .mat-active,
+  .mat-mdc-selected {
+    color: map.get($colors, primary) !important;
   }
 
   .kd-namespace-select-input {
@@ -252,9 +255,9 @@
     color: theming.mat-color($foreground-palette, secondary-text);
   }
 
-  .kd-namespace-select-input-border,
   .kd-shell-toolbar-select,
-  .kd-dialog-propagation-select {
+  .kd-dialog-propagation-select,
+  .kd-namespace-select-input-border {
     border-bottom: 1px solid $border !important;
   }
 
@@ -266,14 +269,6 @@
     stroke: $background;
   }
 
-  .mat-button-toggle-group {
-    border: 1px solid $border;
-  }
-
-  .mat-button-toggle-checked {
-    background-color: $card-background-dark;
-  }
-
   .kd-user-help {
     color: $muted;
 
@@ -286,7 +281,7 @@
     border-right: 0;
   }
 
-  .mat-icon-button:hover:not([disabled]) {
+  .mat-mdc-icon-button:hover:not([disabled]) {
     background-color: $border !important;
   }
 
@@ -297,22 +292,13 @@
   }
 
   .kd-secret-detail-text {
-    .mat-form-field-infix {
-      border-top: 0;
-    }
-
-    .mat-form-field-underline {
-      background: none;
+    mat-form-field {
+      width: 100%;
 
-      .mat-form-field-ripple {
-        background: none;
+      .mdc-text-field {
+        background-color: $border;
       }
     }
-
-    textarea {
-      background-color: $border;
-      border: 0;
-    }
   }
 
   .kd-edit-active {
@@ -323,7 +309,7 @@
     border: 1px solid $border;
   }
 
-  .mat-list {
+  .mat-mdc-list {
     border: 1px solid $border;
   }
 
@@ -353,4 +339,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/chrome/search/component.ts b/modules/web/src/chrome/search/component.ts
@@ -18,11 +18,21 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {SEARCH_QUERY_STATE_PARAM} from '@common/params/params';
 import {ParamsService} from '@common/services/global/params';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
 
 @Component({
   selector: 'kd-search',
   templateUrl: './template.html',
   styleUrls: ['./style.scss'],
+  providers: [
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        appearance: 'outline',
+        subscriptSizing: 'dynamic',
+      },
+    },
+  ],
 })
 export class SearchComponent implements OnInit {
   query: string;

diff --git a/modules/web/src/chrome/search/style.scss b/modules/web/src/chrome/search/style.scss
@@ -23,11 +23,10 @@
     border: 0;
     font-size: $subhead-font-size-base;
     outline: none;
-    padding: $baseline-grid * 1.25;
+    padding: 0 $baseline-grid * 1.25;
   }
 
   .kd-search-icon {
     margin-left: $baseline-grid * 2;
-    padding-right: $baseline-grid * 2;
   }
 }
diff --git a/modules/web/src/chrome/search/template.html b/modules/web/src/chrome/search/template.html
@@ -39,4 +39,3 @@
     />
   </form>
 </div>
-<div fxFlex></div>
diff --git a/modules/web/src/common/components/card/style.scss b/modules/web/src/common/components/card/style.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .mat-card {
+  .mat-mdc-card {
     min-width: $min-content-width;
     padding: 0;
 
@@ -46,7 +46,7 @@
       height: auto;
       width: 100%;
 
-      .mat-card-content {
+      .mat-mdc-card-content {
         flex-grow: 1;
         overflow: auto;
         padding: 0;
@@ -57,7 +57,7 @@
       box-shadow: none;
       margin: 0;
 
-      .mat-card-content {
+      .mat-mdc-card-content {
         padding: 0;
       }
     }
@@ -67,11 +67,11 @@
     }
   }
 
-  .mat-card-title {
+  .mat-mdc-card-title {
     margin: 0;
   }
 
-  .mat-card-footer {
+  .mat-mdc-card-footer {
     display: inline;
     margin: 0;
   }

diff --git a/modules/web/src/common/components/card/template.html b/modules/web/src/common/components/card/template.html
@@ -14,8 +14,8 @@
 limitations under the License.
 -->
 
-<mat-card
-  [ngClass]="{
+<mat-card appearance="outlined"
+          [ngClass]="{
     'kd-minimized-card': !expanded && !graphMode,
     'kd-graph': graphMode,
     'kd-inner-table': role === 'inner',

diff --git a/modules/web/src/common/components/chips/component.ts b/modules/web/src/common/components/chips/component.ts
@@ -53,7 +53,6 @@ const MAX_CHIP_VALUE_LENGTH = 63;
 
 @Component({
   selector: 'kd-chips',
-  styleUrls: ['./style.scss'],
   templateUrl: './template.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/modules/web/src/common/components/chips/style.scss b/modules/web/src/common/components/chips/style.scss
diff --git a/modules/web/src/common/components/chips/template.html b/modules/web/src/common/components/chips/template.html
@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<mat-chip-list>
+<mat-chip-listbox>
   <ng-container *ngFor="let key of keys; let i = index">
     <mat-chip
       *ngIf="isVisible(i)"
@@ -75,4 +75,4 @@
     >
   </div>
   <ng-container *ngIf="keys.length === 0">-</ng-container>
-</mat-chip-list>
+</mat-chip-listbox>
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,4 +39,3 @@ @@
         />
       </form>
     </div>
-    <div fxFlex></div>