refactor(console): common idp provider styles (#5450)

common idp provider styles

console/src/app/modules/providers/provider-jwt/provider-jwt.component.html

@@ -2,17 +2,17 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="jwt-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <mat-icon class="idp-logo" svgIcon="mdi_jwt" alt="jwt" />
       <h1>{{ 'IDP.CREATE.JWT.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.JWT.DESCRIPTION' | translate }}</p>
+    <p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.JWT.DESCRIPTION' | translate }}</p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="jwt-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
           <input cnslInput formControlName="name" />
@@ -35,7 +35,7 @@
         </cnsl-form-field>
       </div>
 
-      <div class="optional-h-wrapper">
+      <div class="identity-provider-optional-h-wrapper">
         <h2>{{ 'IDP.OPTIONAL' | translate }}</h2>
         <button (click)="showOptional = !showOptional" type="button" mat-icon-button>
           <mat-icon *ngIf="showOptional">keyboard_arrow_up</mat-icon

console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss

@@ -1,85 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.jwt-create-content {
-  .title-row {
-    display: flex;
-    align-items: center;
-
-    .idp-logo {
-      height: 36px;
-      width: 36px;
-      margin-right: 1rem;
-      flex-shrink: 0;
-    }
-
-    h1 {
-      margin: 0 1rem 0 0;
-    }
-  }
-
-  .formfield {
-    display: block;
-    max-width: 400px;
-
-    .mat-chip-input {
-      width: 100%;
-      margin: 0;
-    }
-
-    .chip {
-      border-radius: 0.5rem;
-      height: 40px;
-    }
-
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
-
-  .jwt-content {
-    .desc {
-      margin-bottom: 1rem;
-    }
-
-    .scope-card {
-      max-width: 400px;
-      display: block;
-
-      .idp-scopes {
-        .flex-line {
-          display: flex;
-          align-items: flex-start;
-
-          .formfield {
-            flex: 1;
-          }
-
-          .scope-add-button {
-            margin-top: 1.75rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-.jwt-create-actions {
-  display: flex;
-  margin-top: 1rem;
-
-  button[mat-raised-button] {
-    border-radius: 0.5rem;
-    padding: 0.5rem 4rem;
-  }
-}
-
-.optional-h-wrapper {
-  display: flex;
-  align-items: center;
-
-  h2 {
-    margin-right: 0.25rem;
-  }
-}

console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts

@@ -26,7 +26,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-jwt',
   templateUrl: './provider-jwt.component.html',
-  styleUrls: ['./provider-jwt.component.scss'],
 })
 export class ProviderJWTComponent {
   public showOptional: boolean = false;