feat: rehauled console (#3525)

* new console

* move npm ci to angular build

* rel path for assets

* local grpc copy

* login policy, rm clear views, features rel path

* lock

Co-authored-by: Livio Amstutz <[email protected]>

console/src/app/modules/org-context/org-context.component.scss

@@ -1,48 +1,106 @@
-.card {
-  border-radius: 0.5rem;
-  z-index: 200;
-  border: 1px solid #ffffff30;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-  min-width: 220px;
-  max-width: 240px;
-  padding-bottom: 0.5rem;
-  position: relative;
+@mixin org-context-theme($theme) {
+  $primary: map-get($theme, primary);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $accent: map-get($theme, accent);
+  $primary-color: mat.get-color-from-palette($primary, 500);
 
-  .filter-wrapper {
-    padding: 0.5rem;
-  }
+  $warn-color: mat.get-color-from-palette($warn, 500);
+  $accent-color: mat.get-color-from-palette($accent, 500);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+  $back: map-get($background, background);
 
-  .spinner-w {
-    top: 1rem;
-    left: 0;
-    right: 0;
-    position: absolute;
+  .org-context-card {
+    border-radius: 0.5rem;
+    z-index: 200;
+    border: 1px solid #ffffff30;
     display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .show-all {
-    width: 100%;
-  }
-
-  .org-wrapper {
-    max-height: 350px;
-    display: flex;
-    align-items: stretch;
     flex-direction: column;
-    overflow-y: auto;
-    width: 100%;
+    align-items: center;
+    padding: 0;
+    min-width: 220px;
+    max-width: 240px;
+    padding-bottom: 0.5rem;
+    position: relative;
+    color: map-get($foreground, text);
+    background: map-get($background, cards);
 
-    button {
-      min-height: 36px;
-      position: relative;
-      overflow: hidden;
-      text-align: start;
-      text-overflow: ellipsis;
+    .filter-wrapper {
+      padding: 0.5rem;
+    }
+
+    .spinner-w {
+      top: 1rem;
+      left: 0;
+      right: 0;
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .show-all {
+      width: 100%;
+    }
+
+    .org-wrapper {
+      max-height: 350px;
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      overflow-y: auto;
+      width: 100%;
+      border-top: 1px solid rgba(#8795a1, 0.2);
+
+      .org-button-with-pin {
+        min-height: 36px;
+        position: relative;
+        overflow: hidden;
+
+        .org-flex-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .org-span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          button {
+            height: 36px;
+            width: 36px;
+            font-size: 1.2rem;
+            line-height: 1rem;
+            margin-right: -0.5rem;
+            visibility: hidden;
+            opacity: 0.5;
+
+            &:hover {
+              opacity: 1;
+            }
+
+            mat-icon {
+              font-size: 20px;
+              height: 20px;
+              width: 20px;
+            }
+          }
+        }
+
+        &.border-bottom {
+          border-bottom: 1px solid #66666630;
+        }
+
+        &:hover {
+          .org-flex-row {
+            button {
+              visibility: visible;
+            }
+          }
+        }
+      }
     }
   }
 }