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

common idp provider styles

console/src/app/modules/providers/provider-github-es/provider-github-es.component.html

@@ -2,7 +2,7 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="github-es-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo dark" src="./assets/images/idp/github-dark.svg" alt="github" />
       <img class="idp-logo light" src="./assets/images/idp/github.svg" alt="github" />
@@ -11,7 +11,7 @@
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.GITHUBES.DESCRIPTION' | translate }}</p>
+    <p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.GITHUBES.DESCRIPTION' | translate }}</p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
       <cnsl-form-field class="formfield">
@@ -34,7 +34,7 @@
         <input cnslInput formControlName="userEndpoint" />
       </cnsl-form-field>
 
-      <div class="github-es-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -48,7 +48,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
@@ -96,7 +96,7 @@
         </div>
       </div>
 
-      <div class="github-es-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-github-es/provider-github-es.component.scss

@@ -1,96 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-@mixin provider-github-es-theme($theme) {
-  $is-dark-theme: map-get($theme, is-dark);
-
-  .github-es-create-content {
-    .title-row {
-      display: flex;
-      align-items: center;
-
-      .idp-logo {
-        height: 36px;
-        width: 36px;
-        margin-right: 1rem;
-        flex-shrink: 0;
-
-        &.dark {
-          display: if($is-dark-theme, block, none);
-        }
-
-        &.light {
-          display: if($is-dark-theme, none, block);
-        }
-      }
-
-      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;
-    }
-  }
-
-  .github-es-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;
-        }
-      }
-    }
-  }
-}
-
-.github-es-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-github-es/provider-github-es.component.ts

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