chore(console): change icon of past steps to checkbox (#5580)

checkbox for app create stepper

console/src/app/modules/create-layout/create-layout.component.scss

@@ -1,3 +1,33 @@
+@use '@angular/material' as mat;
+
+@mixin app-create-theme($theme) {
+  $primary: map-get($theme, primary);
+  $primary-color: mat.get-color-from-palette($primary, 500);
+
+  // Number of steps creating app
+  $steps: 3;
+
+  .app-create-wrapper {
+    // Reference: https://github.com/angular/components/issues/10681#issuecomment-695185806
+    @for $i from 1 through $steps {
+      @for $j from 1 through $i {
+        .last-edited-step-#{$i}
+          .mat-horizontal-stepper-header-container
+          .mat-step-header:nth-child(#{1 + 2 * ($j - 1)})::after,
+        .last-edited-step-#{$i}
+          .mat-horizontal-stepper-header-container
+          .mat-stepper-horizontal-line:nth-child(#{2 + 2 * ($j - 1)}),
+        .last-edited-step-#{$i}
+          .mat-horizontal-stepper-header-container
+          .mat-step-header:nth-child(#{3 + 2 * ($j - 1)})::before {
+          border-top-width: 3px;
+          border-top-color: $primary-color;
+        }
+      }
+    }
+  }
+}
+
 .create-layout-container {
   display: flex;
   align-items: center;

console/src/app/pages/projects/apps/app-create/app-create.component.html

@@ -1,5 +1,6 @@
 <cnsl-create-layout
   title="{{ 'APP.PAGES.CREATE' | translate }}"
+  class="app-create-wrapper"
   [createSteps]="
     appType?.value?.createType === AppCreateType.OIDC
       ? appType?.value.oidcAppType !== OIDCAppType.OIDC_APP_TYPE_NATIVE
@@ -22,7 +23,7 @@
   </mat-checkbox>
 
   <mat-horizontal-stepper
-    class="stepper"
+    class="stepper {{ 'last-edited-step-' + stepper.selectedIndex }}"
     *ngIf="!devmode"
     linear
     #stepper
@@ -334,6 +335,11 @@
         </button>
       </div>
     </mat-step>
+
+    <!-- Icon override -->
+    <ng-template matStepperIcon="edit">
+      <mat-icon>check</mat-icon>
+    </ng-template>
   </mat-horizontal-stepper>
 
   <div *ngIf="devmode" class="dev">

console/src/app/pages/projects/apps/app-create/app-create.component.scss

@@ -50,6 +50,14 @@ p.desc {
   .step-description {
     font-size: 0.9rem;
   }
+
+  .mat-step-icon-content {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+    top: 50%;
+    left: 50%;
+  }
 }
 
 .checkbox-container {

console/src/component-themes.scss

@@ -65,6 +65,7 @@
 @import 'src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss';
 @import 'src/app/modules/policies/login-policy/factor-table/factor-table.component.scss';
 @import 'src/app/modules/info-overlay/info-overlay.component.scss';
+@import 'src/app/modules/create-layout/create-layout.component.scss';
 @import './styles/codemirror.scss';
 
 @mixin component-themes($theme) {
@@ -136,4 +137,5 @@
   @include action-keys-theme($theme);
   @include codemirror-theme($theme);
   @include contact-theme($theme);
+  @include app-create-theme($theme);
 }