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

common idp provider styles

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

@@ -2,7 +2,7 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="oauth-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo" src="./assets/images/idp/oauth.svg" alt="oauth" />
 
@@ -10,7 +10,7 @@
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.OAUTH.DESCRIPTION' | translate }}</p>
+    <p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.OAUTH.DESCRIPTION' | translate }}</p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
       <cnsl-form-field class="formfield">
@@ -38,7 +38,7 @@
         <input cnslInput formControlName="idAttribute" />
       </cnsl-form-field>
 
-      <div class="oauth-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -52,7 +52,7 @@
           <input cnslInput formControlName="clientSecret" />
         </cnsl-form-field>
 
-        <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
@@ -100,7 +100,7 @@
         </div>
       </div>
 
-      <div class="oauth-create-actions">
+      <div class="identity-provider-create-actions">
         <button color="primary" mat-raised-button class="continue-button" [disabled]="form.invalid" type="submit">
           <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
           <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>

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

@@ -1,84 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.oauth-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;
-    }
-  }
-
-  .oauth-content {
-    .desc {
-      margin-bottom: 1rem;
-    }
-
-    .idp-scopes {
-      padding-bottom: 0.5rem;
-
-      .flex-line {
-        display: flex;
-        align-items: flex-start;
-        max-width: 400px;
-
-        .formfield {
-          flex: 1;
-        }
-
-        .scope-add-button {
-          margin-top: 1.75rem;
-        }
-      }
-    }
-  }
-}
-
-.oauth-create-actions {
-  display: flex;
-  margin-top: 1rem;
-
-  button[mat-raised-button] {
-    border-radius: 0.5rem;
-    margin-right: 1rem;
-    padding: 0.5rem 4rem;
-  }
-}
-
-.optional-h-wrapper {
-  display: flex;
-  align-items: center;
-
-  h2 {
-    margin-right: 0.25rem;
-  }
-}

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

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