feat(console, login): v2 notification settings, login avatar (#3606)

* instance routing

* instance naming

* org list

* rm isonsystem

* breadcrumb  type

* routing

* instance members

* fragment refresh org

* settings pages

* settings list, sidenav grouping, i18n

* org-settings, policy changes

* lint

* grid

* rename grid

* fallback to general

* cleanup

* general settings, remove cards

* sidenav for settings, label policy

* i18n

* header, nav backbuild

* general, project nav rehaul

* login text background adapt

* org nav anim

* org, instance settings, fix policy layout, roles

* i18n, active route for project

* lint

* notification-settings

* idp create redirect, sms provider create, i18n

* oidc configuration

* settings list

* new avatar colors for login

* cleaner js

* avatar theme login

* remove avatar elevation

internal/api/ui/login/static/resources/themes/scss/styles/avatar/avatar_theme.scss

@@ -1,45 +1,53 @@
-@import 'avatar';
+@import "avatar";
 @import "../elevation/elevation";
 
 @mixin lgn-avatar-theme() {
-    @include lgn-avatar-color();
+  @include lgn-avatar-color();
 }
 
 @mixin lgn-avatar-color() {
-    .lgn-avatar:not(.transparent) {
-        @include _lgn-avatar-theme-property("background-color", false);
-        @include lgn-avatar-elevation(2);
-    }
+  .lgn-avatar:not(.transparent) {
+    @include _lgn-avatar-theme-property("background-color", false);
+    // @include lgn-avatar-elevation(2);
+  }
 
-    .lgn-avatar .initials{
-        @include _lgn-avatar-theme-property("color", true);
-    }
+  //   .lgn-avatar .initials {
+  //     @include _lgn-avatar-theme-property("color", true);
+  //   }
 }
 
 @mixin _lgn-avatar-theme-property($property, $contrast) {
-    $color: if($contrast, var(--zitadel-color-primary-contrast), var(--zitadel-color-primary));
+  $color: if(
+    $contrast,
+    var(--zitadel-color-primary-contrast),
+    var(--zitadel-color-primary)
+  );
 
-    &.lgn-primary {
-      #{$property}: $color;
-    }
-    &.lgn-accent {
-      #{$property}: $color;
-    }
-    &.lgn-warn {
-      #{$property}: $color;
-    }
-  
-    &.lgn-primary,
-    &.lgn-accent,
-    &.lgn-warn,
+  &.lgn-primary {
+    #{$property}: $color;
+  }
+  &.lgn-accent {
+    #{$property}: $color;
+  }
+  &.lgn-warn {
+    #{$property}: $color;
+  }
+
+  &.lgn-primary,
+  &.lgn-accent,
+  &.lgn-warn,
+  &[disabled] {
     &[disabled] {
-        &[disabled] {
-            $btn-color: if($property == "color", var(--zitadel-color-button-disabled), var(--itadel-color-button-disabled-background));
-            #{$property}: $btn-color;
-        }
+      $btn-color: if(
+        $property == "color",
+        var(--zitadel-color-button-disabled),
+        var(--itadel-color-button-disabled-background)
+      );
+      #{$property}: $btn-color;
     }
+  }
 }
 
 @mixin lgn-avatar-elevation($zValue, $opacity: $lgn-elevation-opacity) {
-    @include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
-  }
+  @include lgn-elevation($zValue, rgb(0, 0, 0), $opacity);
+}

internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css

@@ -2798,9 +2798,6 @@ a:hover, a:active {
   color: var(--zitadel-color-warn);
 }
 
-.lgn-avatar:not(.transparent) {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
 .lgn-avatar:not(.transparent).lgn-primary {
   background-color: var(--zitadel-color-primary);
 }
@@ -2814,19 +2811,6 @@ a:hover, a:active {
   background-color: var(--itadel-color-button-disabled-background);
 }
 
-.lgn-avatar .initials.lgn-primary {
-  color: var(--zitadel-color-primary-contrast);
-}
-.lgn-avatar .initials.lgn-accent {
-  color: var(--zitadel-color-primary-contrast);
-}
-.lgn-avatar .initials.lgn-warn {
-  color: var(--zitadel-color-primary-contrast);
-}
-.lgn-avatar .initials.lgn-primary[disabled], .lgn-avatar .initials.lgn-accent[disabled], .lgn-avatar .initials.lgn-warn[disabled], .lgn-avatar .initials[disabled][disabled] {
-  color: var(--zitadel-color-button-disabled);
-}
-
 .lgn-select, select {
   background-image: var(--zitadel-icon-select);
 }