fix(console): new colorpicker, remove icons logo font (#1826)

* custom color picker, delete font

* delete asset, i18n

* escape deep styles

* ts, proto

* remove fallback img, color clickable, remove font

* stylelint

* fix spinner

* fix deprecated chipinput.input

* improve logo on login

* fix qr code

* always use black on white for qr code

* fix header and footer css

Co-authored-by: Livio Amstutz <livio.a@gmail.com>

internal/ui/login/static/resources/themes/scss/styles/button/button_base.scss

@@ -14,7 +14,7 @@ $lgn-stroked-button-border-width: 1px;
 
 $lgn-icon-button-size: 40px !default;
 $lgn-icon-button-border-radius: 50% !default;
-$lgn-icon-button-line-height: 24px !default;
+$lgn-icon-button-line-height: 40px !default;
 
 // adds base styles to all button types.
 @mixin lgn-button-base {

internal/ui/login/static/resources/themes/scss/styles/container/container.scss

@@ -100,7 +100,8 @@ $lgn-container-bottom-margin: 50px;
     .lgn-left-action {
         position: absolute;
         left: 1rem;
-        top: -40px;
+        top: -75px;
+        transform: translateY(-50%);
     }
 
     .lgn-register-options {

internal/ui/login/static/resources/themes/scss/styles/footer/footer.scss

@@ -30,8 +30,6 @@ footer {
 
     .watermark {
         display: flex;
-        position: relative;
-        width: 100%;
 
         .powered {
             font-size: 12px;
@@ -39,9 +37,9 @@ footer {
         }
 
         .lgn-logo-watermark {
-            height: 34px;
-            width: 125px;
-            margin: 2px;
+            height: 40px;
+            min-width: 125px;
+            margin: auto 2px;
         }
     }
 

internal/ui/login/static/resources/themes/scss/styles/footer/footer_theme.scss

@@ -18,8 +18,8 @@
       }
 
       .lgn-logo-watermark {
-          background: var(--zitadel-logo-powered-by);
-          background-position: auto;
+          background: var(--zitadel-logo-powered-by) no-repeat;
+          background-position: center;
           background-size: contain;
       }
     }

internal/ui/login/static/resources/themes/scss/styles/header/header.scss

@@ -1,16 +1,22 @@
 $lgn-header-padding: 0;
-$lgn-header-margin: 1rem auto .5rem auto;
+$lgn-header-margin: auto;
 
 .lgn-header {
-    display: block;
+    display: flex;
     position: relative;
     margin: $lgn-header-margin;
     padding: $lgn-header-padding;
-    width: 100%;
+    max-width: 250px;
+    min-height: 150px;
+    align-items: center;
+    justify-content: center;
 
     .lgn-logo {
         display: block;
-        max-height: 100px;
+        height: 100px;
         margin: 0 auto;
+        max-width: 250px;
+        max-height: 150px;
+        object-fit: contain;
     }
 }

internal/ui/login/static/resources/themes/scss/styles/vars.scss

@@ -91,6 +91,7 @@
   --zitadel-color-raised-button-background: var(--zitadel-color-white);
 
 
+  --zitadel-color-white: #ffffff;
   --zitadel-color-black: #000000;
   --zitadel-color-grey-50: #fafafa;
   --zitadel-color-grey-100: #f5f5f5;
@@ -109,8 +110,8 @@
   --zitadel-color-google-text: #8b8d8d;
   --zitadel-color-google-background: #ffffff;
 
-  --zitadel-color-qr: var(--zitadel-color-white);
-  --zitadel-color-qr-background: var(--zitadel-color-black);
+  --zitadel-color-qr: var(--zitadel-color-black);
+  --zitadel-color-qr-background: var(--zitadel-color-white);
 }
 
 .lgn-dark-theme {

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

@@ -77,6 +77,7 @@
   --zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
   --zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
   --zitadel-color-raised-button-background: var(--zitadel-color-white);
+  --zitadel-color-white: #ffffff;
   --zitadel-color-black: #000000;
   --zitadel-color-grey-50: #fafafa;
   --zitadel-color-grey-100: #f5f5f5;
@@ -92,8 +93,8 @@
   --zitadel-logo-powered-by: url("../logo-dark.svg");
   --zitadel-color-google-text: #8b8d8d;
   --zitadel-color-google-background: #ffffff;
-  --zitadel-color-qr: var(--zitadel-color-white);
-  --zitadel-color-qr-background: var(--zitadel-color-black);
+  --zitadel-color-qr: var(--zitadel-color-black);
+  --zitadel-color-qr-background: var(--zitadel-color-white);
 }
 
 .lgn-dark-theme {
@@ -221,30 +222,34 @@ footer a {
 }
 footer .watermark {
   display: flex;
-  position: relative;
-  width: 100%;
 }
 footer .watermark .powered {
   font-size: 12px;
   margin: auto 2px;
 }
 footer .watermark .lgn-logo-watermark {
-  height: 34px;
-  width: 125px;
-  margin: 2px;
+  height: 40px;
+  min-width: 125px;
+  margin: auto 2px;
 }
 
 .lgn-header {
-  display: block;
+  display: flex;
   position: relative;
-  margin: 1rem auto 0.5rem auto;
+  margin: auto;
   padding: 0;
-  width: 100%;
+  max-width: 250px;
+  min-height: 150px;
+  align-items: center;
+  justify-content: center;
 }
 .lgn-header .lgn-logo {
   display: block;
-  max-height: 100px;
+  height: 100px;
   margin: 0 auto;
+  max-width: 250px;
+  max-height: 150px;
+  object-fit: contain;
 }
 
 .lgn-button, .lgn-stroked-button, .lgn-icon-button {
@@ -310,7 +315,7 @@ footer .watermark .lgn-logo-watermark {
   border-radius: 50%;
 }
 .lgn-icon-button i, .lgn-icon-button .mat-icon {
-  line-height: 24px;
+  line-height: 40px;
 }
 
 .lgn-stroked-button {
@@ -621,7 +626,8 @@ a.block {
 .content-container .lgn-left-action {
   position: absolute;
   left: 1rem;
-  top: -40px;
+  top: -75px;
+  transform: translateY(-50%);
 }
 .content-container .lgn-register-options {
   display: flex;
@@ -1105,30 +1111,34 @@ footer a {
 }
 footer .watermark {
   display: flex;
-  position: relative;
-  width: 100%;
 }
 footer .watermark .powered {
   font-size: 12px;
   margin: auto 2px;
 }
 footer .watermark .lgn-logo-watermark {
-  height: 34px;
-  width: 125px;
-  margin: 2px;
+  height: 40px;
+  min-width: 125px;
+  margin: auto 2px;
 }
 
 .lgn-header {
-  display: block;
+  display: flex;
   position: relative;
-  margin: 1rem auto 0.5rem auto;
+  margin: auto;
   padding: 0;
-  width: 100%;
+  max-width: 250px;
+  min-height: 150px;
+  align-items: center;
+  justify-content: center;
 }
 .lgn-header .lgn-logo {
   display: block;
-  max-height: 100px;
+  height: 100px;
   margin: 0 auto;
+  max-width: 250px;
+  max-height: 150px;
+  object-fit: contain;
 }
 
 .lgn-button, .lgn-stroked-button, .lgn-icon-button {
@@ -1194,7 +1204,7 @@ footer .watermark .lgn-logo-watermark {
   border-radius: 50%;
 }
 .lgn-icon-button i, .lgn-icon-button .mat-icon {
-  line-height: 24px;
+  line-height: 40px;
 }
 
 .lgn-stroked-button {
@@ -1505,7 +1515,8 @@ a.block {
 .content-container .lgn-left-action {
   position: absolute;
   left: 1rem;
-  top: -40px;
+  top: -75px;
+  transform: translateY(-50%);
 }
 .content-container .lgn-register-options {
   display: flex;
@@ -2307,7 +2318,8 @@ i {
 .content-container .lgn-left-action {
   position: absolute;
   left: 1rem;
-  top: -40px;
+  top: -75px;
+  transform: translateY(-50%);
 }
 .content-container .lgn-register-options {
   display: flex;
@@ -2342,16 +2354,22 @@ i {
 }
 
 .lgn-header {
-  display: block;
+  display: flex;
   position: relative;
-  margin: 1rem auto 0.5rem auto;
+  margin: auto;
   padding: 0;
-  width: 100%;
+  max-width: 250px;
+  min-height: 150px;
+  align-items: center;
+  justify-content: center;
 }
 .lgn-header .lgn-logo {
   display: block;
-  max-height: 100px;
+  height: 100px;
   margin: 0 auto;
+  max-width: 250px;
+  max-height: 150px;
+  object-fit: contain;
 }
 
 @keyframes shake {
@@ -2705,8 +2723,8 @@ footer a {
   color: var(--zitadel-color-primary);
 }
 footer .lgn-logo-watermark {
-  background: var(--zitadel-logo-powered-by);
-  background-position: auto;
+  background: var(--zitadel-logo-powered-by) no-repeat;
+  background-position: center;
   background-size: contain;
 }