feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>

console/src/app/modules/theme-setting/theme-setting.component.html

@@ -1,13 +1,34 @@
-<button mat-stroked-button class="theme-setting-button" (click)="setTheme()">
-  <i class="las la-moon" *ngIf="darkTheme"></i>
-  <i class="lar la-sun" *ngIf="darkTheme === false"></i>
-  <span>{{ (darkTheme ? 'FOOTER.THEME.DARK' : 'FOOTER.THEME.LIGHT') | translate }}</span>
-  <svg _ngcontent-tfd-c127="" xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-    <path
-      _ngcontent-tfd-c127=""
-      fill-rule="evenodd"
-      d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
-      clip-rule="evenodd"
-    ></path>
-  </svg>
-</button>
+<div class="theme-flex">
+  <button class="theme-setting-button" [ngClass]="{ active: darkTheme }" (click)="setTheme()">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="moon"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+      />
+    </svg>
+  </button>
+  <button class="theme-setting-button" [ngClass]="{ active: !darkTheme }" (click)="setTheme()">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="sun"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+      />
+    </svg>
+  </button>
+</div>

console/src/app/modules/theme-setting/theme-setting.component.scss

@@ -1,12 +1,57 @@
-@use '@angular/material' as mat;
-
 @mixin theme-setting($theme) {
   $primary: map-get($theme, primary);
   $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
   $back: map-get($background, background);
 
-  .theme-setting-button {
-    background-color: if($is-dark-theme, #ffffff10, #fff) !important;
+  .theme-flex {
+    display: flex;
+    align-items: center;
+    border: 1px solid if($is-dark-theme, #ffffff20, #00000020);
+    border-radius: 50vw;
+    padding: 0.25rem;
+
+    .theme-setting-button {
+      background-color: transparent;
+      border-radius: 50vw;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 2rem;
+      width: 2rem;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+
+      .moon,
+      .sun {
+        color: map-get($foreground, text);
+        fill: transparent;
+        height: 1rem;
+        width: 1rem;
+        opacity: 0.7;
+      }
+
+      .sun {
+        height: 1.5rem;
+        width: 1.5rem;
+      }
+
+      &:hover {
+        .moon,
+        .sun {
+          opacity: 1;
+        }
+      }
+
+      &.active {
+        background-color: if($is-dark-theme, #ffffff10, #00000010) !important;
+        .moon,
+        .sun {
+          opacity: 1;
+        }
+      }
+    }
   }
 }

console/src/app/modules/theme-setting/theme-setting.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { ThemeSettingComponent } from './theme-setting.component';