fix(console): dependency updates, cleanup styling (#5185)

* cli, core

* cdk material

* schematics

* chore(deps-dev): bump @types/node from 18.11.17 to 18.13.0 in /console (#5175)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 18.11.17 to 18.13.0.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump prettier from 2.8.1 to 2.8.4 in /console (#5174)

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.1 to 2.8.4.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.8.1...2.8.4)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump eslint from 8.31.0 to 8.33.0 in /console (#5118)

Bumps [eslint](https://github.com/eslint/eslint) from 8.31.0 to 8.33.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](https://github.com/eslint/eslint/compare/v8.31.0...v8.33.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* codemirror

* fix action coloring

* rm css var

* fix audit

* lock

* deps

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

console/package.json

@@ -12,19 +12,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.0.2",
+    "@angular/animations": "^15.1.4",
-    "@angular/cdk": "^15.0.4",
+    "@angular/cdk": "^15.1.4",
-    "@angular/common": "^15.0.2",
+    "@angular/common": "^15.1.4",
-    "@angular/compiler": "^15.0.2",
+    "@angular/compiler": "^15.1.4",
-    "@angular/core": "^15.0.2",
+    "@angular/core": "^15.1.4",
-    "@angular/forms": "^15.0.2",
+    "@angular/forms": "^15.1.4",
-    "@angular/material": "^15.0.4",
+    "@angular/material": "^15.1.4",
-    "@angular/material-moment-adapter": "^15.0.4",
+    "@angular/material-moment-adapter": "^15.1.4",
-    "@angular/platform-browser": "^15.0.2",
+    "@angular/platform-browser": "^15.1.4",
-    "@angular/platform-browser-dynamic": "^15.0.2",
+    "@angular/platform-browser-dynamic": "^15.1.4",
-    "@angular/router": "^15.0.2",
+    "@angular/router": "^15.1.4",
-    "@angular/service-worker": "^15.0.2",
+    "@angular/service-worker": "^15.1.4",
-    "@ctrl/ngx-codemirror": "^5.1.1",
+    "@ctrl/ngx-codemirror": "^6.1.0",
     "@grpc/grpc-js": "^1.8.1",
     "@ngx-translate/core": "^14.0.0",
     "@types/file-saver": "^2.0.2",
@@ -46,31 +46,31 @@
     "moment": "^2.29.4",
     "ngx-color": "^8.0.3",
     "rxjs": "~7.8.0",
-    "tinycolor2": "^1.5.2",
+    "tinycolor2": "^1.6.0",
     "tslib": "^2.4.1",
     "uuid": "^9.0.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.2",
+    "@angular-devkit/build-angular": "^15.1.5",
-    "@angular-eslint/builder": "^15.1.0",
+    "@angular-eslint/builder": "^15.2.0",
-    "@angular-eslint/eslint-plugin": "^15.1.0",
+    "@angular-eslint/eslint-plugin": "^15.2.0",
-    "@angular-eslint/eslint-plugin-template": "^15.1.0",
+    "@angular-eslint/eslint-plugin-template": "^15.2.0",
-    "@angular-eslint/schematics": "^15.1.0",
+    "@angular-eslint/schematics": "^15.2.0",
-    "@angular-eslint/template-parser": "^15.1.0",
+    "@angular-eslint/template-parser": "^15.2.0",
-    "@angular/cli": "^15.0.2",
+    "@angular/cli": "^15.1.5",
-    "@angular/compiler-cli": "^15.0.2",
+    "@angular/compiler-cli": "^15.1.4",
-    "@angular/language-service": "^15.0.4",
+    "@angular/language-service": "^15.1.4",
     "@bufbuild/buf": "^1.14.0",
     "@types/jasmine": "~4.3.0",
     "@types/jasminewd2": "~2.0.10",
-    "@types/jsonwebtoken": "^9.0.0",
+    "@types/jsonwebtoken": "^9.0.1",
-    "@types/node": "^18.8.1",
+    "@types/node": "^18.13.0",
     "@types/qrcode": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "5.48.0",
+    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.48.0",
+    "@typescript-eslint/parser": "5.51.0",
-    "codelyzer": "^6.0.0",
+    "codelyzer": "^6.0.2",
-    "eslint": "^8.31.0",
+    "eslint": "^8.33.0",
     "jasmine-core": "~4.5.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.1",
@@ -78,7 +78,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
     "protractor": "~7.0.0",
     "typescript": "^4.8.4"
   }

console/src/app/modules/policies/domain-policy/domain-policy.component.scss

@@ -1,8 +1,3 @@
-.default {
-  color: var(--color-main);
-  margin-top: 0;
-}
-
 .policy-applied-to {
   margin: -1rem 0 0 0;
   font-size: 14px;

console/src/app/pages/actions/actions.component.html

@@ -1,5 +1,5 @@
 <div class="max-width-container">
-  <div class="enlarged-container">
+  <div class="enlarged-container actions-enlarged-container">
     <h1>{{ 'FLOWS.TITLE' | translate }}</h1>
     <p class="desc cnsl-secondary-text">{{ 'FLOWS.DESCRIPTION' | translate }}</p>
 
@@ -21,7 +21,7 @@
     <p class="desc cnsl-secondary-text">{{ 'FLOWS.FLOWSDESCRIPTION' | translate }}</p>
 
     <ng-template cnslHasRole [hasRole]="['org.flow.read']">
-      <div class="flow">
+      <div class="actions-flow">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'FLOWS.FLOWTYPE' | translate }}</cnsl-label>
           <mat-select [formControl]="typeControl">
@@ -32,7 +32,7 @@
         </cnsl-form-field>
 
         <div *ngIf="flow" class="trigger-wrapper">
-          <div class="topbottomline"></div>
+          <div class="actions-topbottomline"></div>
 
           <div class="flow-type">
             <i class="type-icon las la-dot-circle"></i>

console/src/app/pages/actions/actions.component.scss

@@ -1,3 +1,13 @@
+@use '@angular/material' as mat;
+
+@mixin actions-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $primary-color: map-get($primary, 500);
+
+  .actions-enlarged-container {
     h1 {
       margin: 0;
     }
@@ -22,7 +32,7 @@ h1 {
       }
     }
 
-.flow {
+    .actions-flow {
       display: flex;
       flex-direction: column;
       max-width: 1000px;
@@ -40,7 +50,7 @@ h1 {
         padding: 0 1.5rem;
 
         .type-icon {
-      color: var(--color-main);
+          color: $primary-color;
         }
 
         .type-button-icon,
@@ -76,7 +86,7 @@ h1 {
 
           .icon {
             margin-right: 1rem;
-        color: var(--color-main);
+            color: $primary-color;
           }
 
           .fill-space {
@@ -114,14 +124,14 @@ h1 {
         }
       }
 
-  .topbottomline {
+      .actions-topbottomline {
         position: absolute;
         top: 26px;
         bottom: 1.5rem;
         left: 35px;
         width: 2px;
         z-index: 0;
-    background-color: var(--color-main);
+        background-color: $primary-color;
       }
 
       .add-btn {
@@ -139,7 +149,7 @@ h1 {
       font-size: 14px;
       border-radius: 0.5rem;
       padding: 0 0.5rem;
-  background-color: var(--color-main);
+      background-color: $primary-color;
       box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
 
       i {
@@ -154,3 +164,5 @@ h1 {
     .cdk-drag-animating {
       transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     }
+  }
+}

console/src/app/pages/domains/domains.component.scss

@@ -55,7 +55,6 @@
 
     .verified,
     .primary {
-      color: var(--color-main);
       margin-right: 1rem;
     }
 

console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/auth-passwordless.component.scss

@@ -7,11 +7,6 @@
 .centered {
   display: flex;
   align-items: center;
-
-  i {
-    margin-left: 1rem;
-    color: var(--color-main);
-  }
 }
 
 .table {

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.scss

@@ -7,11 +7,6 @@
 .centered {
   display: flex;
   align-items: center;
-
-  i {
-    margin-left: 1rem;
-    color: var(--color-main);
-  }
 }
 
 .table {

console/src/app/pages/users/user-detail/user-detail/passwordless/passwordless.component.scss

@@ -7,11 +7,6 @@
 .centered {
   display: flex;
   align-items: center;
-
-  i {
-    margin-left: 1rem;
-    color: var(--color-main);
-  }
 }
 
 .table {

console/src/app/pages/users/user-detail/user-detail/user-mfa/user-mfa.component.scss

@@ -25,11 +25,6 @@
 .centered {
   display: flex;
   align-items: center;
-
-  i {
-    margin-left: 1rem;
-    color: var(--color-main);
-  }
 }
 
 .table {

console/src/component-themes.scss

@@ -34,6 +34,7 @@
 @import 'src/app/pages/users/user-list/user-table/user-table.component';
 @import 'src/app/pages/users/user-detail/contact/contact.component';
 @import 'src/app/pages/projects/project-grid/project-grid.component';
+@import 'src/app/pages/actions/actions.component';
 @import 'src/app/app.component.scss';
 @import './styles/color.scss';
 @import 'src/app/pages/instance/instance.component.scss';
@@ -113,6 +114,7 @@
   @include accounts-card-theme($theme);
   @include sidenav-theme($theme);
   @include info-section-theme($theme);
+  @include actions-theme($theme);
   @include filter-theme($theme);
   @include private-label-theme($theme);
   @include project-grid-theme($theme);