From f0e0191c7bca0b90fc6ebcfcbcc5142b3c5bef1a Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 16 Mar 2023 07:53:46 +0100
Subject: [PATCH] refactor(console): common idp provider styles (#5450)

common idp provider styles
---
 .../provider-azure-ad.component.html          | 10 +-
 .../provider-azure-ad.component.scss          | 87 -----------------
 .../provider-azure-ad.component.ts            |  1 -
 .../provider-github-es.component.html         | 10 +-
 .../provider-github-es.component.scss         | 96 -------------------
 .../provider-github-es.component.ts           |  1 -
 .../provider-github.component.html            | 10 +-
 .../provider-github.component.ts              |  1 -
 ...provider-gitlab-self-hosted.component.html | 10 +-
 ...provider-gitlab-self-hosted.component.scss | 87 -----------------
 .../provider-gitlab-self-hosted.component.ts  |  1 -
 .../provider-gitlab.component.html            | 10 +-
 .../provider-gitlab.component.scss            | 87 -----------------
 .../provider-gitlab.component.ts              |  1 -
 .../provider-google.component.html            | 10 +-
 .../provider-google.component.scss            | 87 -----------------
 .../provider-google.component.ts              |  1 -
 .../provider-jwt/provider-jwt.component.html  |  8 +-
 .../provider-jwt/provider-jwt.component.scss  | 85 ----------------
 .../provider-jwt/provider-jwt.component.ts    |  1 -
 .../provider-oauth.component.html             | 10 +-
 .../provider-oauth.component.scss             | 84 ----------------
 .../provider-oauth.component.ts               |  1 -
 .../provider-oidc.component.html              | 12 +--
 .../provider-oidc.component.scss              | 84 ----------------
 .../provider-oidc/provider-oidc.component.ts  |  1 -
 ...r-github.component.scss => providers.scss} | 46 ++++-----
 console/src/component-themes.scss             |  6 +-
 28 files changed, 70 insertions(+), 778 deletions(-)
 delete mode 100644 console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-github-es/provider-github-es.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-google/provider-google.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-oauth/provider-oauth.component.scss
 delete mode 100644 console/src/app/modules/providers/provider-oidc/provider-oidc.component.scss
 rename console/src/app/modules/providers/{provider-github/provider-github.component.scss => providers.scss} (71%)

diff --git a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html
index e78f108770..49756c2410 100644
--- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html
+++ b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.html
@@ -2,19 +2,19 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="azure-ad-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo" src="./assets/images/idp/ms.svg" alt="microsoft" />
       <h1>{{ 'IDP.CREATE.AZUREAD.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">
+    <p class="identity-provider-desc cnsl-secondary-text">
       {{ !provider ? ('IDP.CREATE.AZUREAD.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
     </p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="azure-ad-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
           <input cnslInput formControlName="name" />
@@ -33,7 +33,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
@@ -97,7 +97,7 @@
         </div>
       </div>
 
-      <div class="azure-ad-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>
diff --git a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.scss b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.scss
deleted file mode 100644
index 71901ab02a..0000000000
--- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.azure-ad-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;
-
-    .name-hint {
-      font-size: 12px;
-    }
-
-    .mat-chip-input {
-      width: 100%;
-      margin: 0;
-    }
-
-    .chip {
-      border-radius: 0.5rem;
-      height: 40px;
-    }
-
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
-
-  .azure-ad-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;
-        }
-      }
-    }
-  }
-}
-
-.azure-ad-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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts
index cf81d287ec..71b4086a96 100644
--- a/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts
+++ b/console/src/app/modules/providers/provider-azure-ad/provider-azure-ad.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-azure-ad',
   templateUrl: './provider-azure-ad.component.html',
-  styleUrls: ['./provider-azure-ad.component.scss'],
 })
 export class ProviderAzureADComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html
index 3501933b0b..014a3f9a52 100644
--- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.html
+++ b/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>
diff --git a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.scss b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.scss
deleted file mode 100644
index 167ce8e736..0000000000
--- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts b/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts
index e57a80be45..19e8092e0d 100644
--- a/console/src/app/modules/providers/provider-github-es/provider-github-es.component.ts
+++ b/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;
diff --git a/console/src/app/modules/providers/provider-github/provider-github.component.html b/console/src/app/modules/providers/provider-github/provider-github.component.html
index 57527abacb..f2248b7400 100644
--- a/console/src/app/modules/providers/provider-github/provider-github.component.html
+++ b/console/src/app/modules/providers/provider-github/provider-github.component.html
@@ -2,7 +2,7 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="github-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" />
@@ -10,12 +10,12 @@
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">
+    <p class="identity-provider-desc cnsl-secondary-text">
       {{ !provider ? ('IDP.CREATE.GITHUB.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
     </p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="github-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -29,7 +29,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
@@ -83,7 +83,7 @@
         </div>
       </div>
 
-      <div class="github-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>
diff --git a/console/src/app/modules/providers/provider-github/provider-github.component.ts b/console/src/app/modules/providers/provider-github/provider-github.component.ts
index 511b47657e..212112ec4c 100644
--- a/console/src/app/modules/providers/provider-github/provider-github.component.ts
+++ b/console/src/app/modules/providers/provider-github/provider-github.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-github',
   templateUrl: './provider-github.component.html',
-  styleUrls: ['./provider-github.component.scss'],
 })
 export class ProviderGithubComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html
index abc88d91c1..b09217a7ca 100644
--- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html
+++ b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.html
@@ -2,19 +2,19 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="gitlab-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
       <h1>{{ 'IDP.CREATE.GITLABSELFHOSTED.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">
+    <p class="identity-provider-desc cnsl-secondary-text">
       {{ !provider ? ('IDP.CREATE.GITLABSELFHOSTED.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
     </p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="gitlab-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.ISSUER' | translate }}</cnsl-label>
           <input cnslInput formControlName="issuer" />
@@ -33,7 +33,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
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div class="gitlab-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>
diff --git a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss
deleted file mode 100644
index 0d4325a044..0000000000
--- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.gitlab-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;
-
-    .name-hint {
-      font-size: 12px;
-    }
-
-    .mat-chip-input {
-      width: 100%;
-      margin: 0;
-    }
-
-    .chip {
-      border-radius: 0.5rem;
-      height: 40px;
-    }
-
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
-
-  .gitlab-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;
-        }
-      }
-    }
-  }
-}
-
-.gitlab-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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts
index 3249d36b97..3167554ad4 100644
--- a/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts
+++ b/console/src/app/modules/providers/provider-gitlab-self-hosted/provider-gitlab-self-hosted.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-gitlab-self-hosted',
   templateUrl: './provider-gitlab-self-hosted.component.html',
-  styleUrls: ['./provider-gitlab-self-hosted.component.scss'],
 })
 export class ProviderGitlabSelfHostedComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html
index cf99610387..6d8802a6a9 100644
--- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html
+++ b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.html
@@ -2,19 +2,19 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="gitlab-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
       <h1>{{ 'IDP.CREATE.GITLAB.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">
+    <p class="identity-provider-desc cnsl-secondary-text">
       {{ !provider ? ('IDP.CREATE.GITLAB.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
     </p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="gitlab-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -28,7 +28,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
@@ -82,7 +82,7 @@
         </div>
       </div>
 
-      <div class="gitlab-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>
diff --git a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss
deleted file mode 100644
index 0d4325a044..0000000000
--- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.gitlab-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;
-
-    .name-hint {
-      font-size: 12px;
-    }
-
-    .mat-chip-input {
-      width: 100%;
-      margin: 0;
-    }
-
-    .chip {
-      border-radius: 0.5rem;
-      height: 40px;
-    }
-
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
-
-  .gitlab-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;
-        }
-      }
-    }
-  }
-}
-
-.gitlab-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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts
index d478c5e686..3a7f3ed5ee 100644
--- a/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts
+++ b/console/src/app/modules/providers/provider-gitlab/provider-gitlab.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-gitlab',
   templateUrl: './provider-gitlab.component.html',
-  styleUrls: ['./provider-gitlab.component.scss'],
 })
 export class ProviderGitlabComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-google/provider-google.component.html b/console/src/app/modules/providers/provider-google/provider-google.component.html
index 77f313fdf9..32643471a8 100644
--- a/console/src/app/modules/providers/provider-google/provider-google.component.html
+++ b/console/src/app/modules/providers/provider-google/provider-google.component.html
@@ -2,19 +2,19 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="google-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <img class="idp-logo" src="./assets/images/idp/google.png" alt="google" />
       <h1>{{ 'IDP.CREATE.GOOGLE.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">
+    <p class="identity-provider-desc cnsl-secondary-text">
       {{ !provider ? ('IDP.CREATE.GOOGLE.DESCRIPTION' | translate) : ('IDP.DETAIL.DESCRIPTION' | translate) }}
     </p>
 
     <form [formGroup]="form" (ngSubmit)="submitForm()">
-      <div class="google-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -28,7 +28,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
@@ -82,7 +82,7 @@
         </div>
       </div>
 
-      <div class="google-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>
diff --git a/console/src/app/modules/providers/provider-google/provider-google.component.scss b/console/src/app/modules/providers/provider-google/provider-google.component.scss
deleted file mode 100644
index ce8b8dc9d1..0000000000
--- a/console/src/app/modules/providers/provider-google/provider-google.component.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.google-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;
-
-    .name-hint {
-      font-size: 12px;
-    }
-
-    .mat-chip-input {
-      width: 100%;
-      margin: 0;
-    }
-
-    .chip {
-      border-radius: 0.5rem;
-      height: 40px;
-    }
-
-    @media only screen and (max-width: 450px) {
-      max-width: none;
-    }
-  }
-
-  .google-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;
-        }
-      }
-    }
-  }
-}
-
-.google-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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-google/provider-google.component.ts b/console/src/app/modules/providers/provider-google/provider-google.component.ts
index 221c621b39..d1a0f86eca 100644
--- a/console/src/app/modules/providers/provider-google/provider-google.component.ts
+++ b/console/src/app/modules/providers/provider-google/provider-google.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-google',
   templateUrl: './provider-google.component.html',
-  styleUrls: ['./provider-google.component.scss'],
 })
 export class ProviderGoogleComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.html b/console/src/app/modules/providers/provider-jwt/provider-jwt.component.html
index c8d9cc99eb..3c72264ac1 100644
--- a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.html
+++ b/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
diff --git a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss b/console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss
deleted file mode 100644
index 91a8d06ed4..0000000000
--- a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts b/console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts
index 29ea834c08..1abbd9be4b 100644
--- a/console/src/app/modules/providers/provider-jwt/provider-jwt.component.ts
+++ b/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;
diff --git a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html
index c04122dc81..c18544ae0d 100644
--- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.html
+++ b/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>
diff --git a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.scss b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.scss
deleted file mode 100644
index 7b9fadbb72..0000000000
--- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts b/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts
index d4331be27c..fd2fc783d4 100644
--- a/console/src/app/modules/providers/provider-oauth/provider-oauth.component.ts
+++ b/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;
diff --git a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html
index 79bcfdfd8c..49805f4405 100644
--- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html
+++ b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.html
@@ -2,17 +2,17 @@
   title="{{ id ? ('IDP.DETAIL.TITLE' | translate) : ('IDP.CREATE.TITLE' | translate) }}"
   (closed)="close()"
 >
-  <div class="oidc-create-content">
+  <div class="identity-provider-create-content">
     <div class="title-row">
       <mat-icon class="idp-logo" svgIcon="mdi_openid" alt="openid" />
       <h1>{{ 'IDP.CREATE.OIDC.TITLE' | translate }}</h1>
       <mat-spinner diameter="25" *ngIf="loading" color="primary"></mat-spinner>
     </div>
 
-    <p class="desc cnsl-secondary-text">{{ 'IDP.CREATE.OIDC.DESCRIPTION' | translate }}</p>
+    <p class="identity-provider-desc cnsl-secondary-text">{{ 'IDP.CREATE.OIDC.DESCRIPTION' | translate }}</p>
 
     <form [formGroup]="oidcFormGroup" (ngSubmit)="submitForm()">
-      <div class="oidc-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.NAME' | translate }}</cnsl-label>
           <input cnslInput formControlName="name" />
@@ -23,7 +23,7 @@
         </cnsl-form-field>
       </div>
 
-      <div class="oidc-content">
+      <div class="identity-provider-content">
         <cnsl-form-field class="formfield">
           <cnsl-label>{{ 'IDP.CLIENTID' | translate }}</cnsl-label>
           <input cnslInput formControlName="clientId" />
@@ -37,7 +37,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
@@ -85,7 +85,7 @@
         </div>
       </div>
 
-      <div class="oidc-create-actions">
+      <div class="identity-provider-create-actions">
         <button color="primary" mat-raised-button class="continue-button" [disabled]="oidcFormGroup.invalid" type="submit">
           <span *ngIf="id">{{ 'ACTIONS.SAVE' | translate }}</span>
           <span *ngIf="!id">{{ 'ACTIONS.CREATE' | translate }}</span>
diff --git a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.scss b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.scss
deleted file mode 100644
index f0af9c7f12..0000000000
--- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-.desc {
-  font-size: 14px;
-}
-
-.oidc-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;
-    }
-  }
-
-  .oidc-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;
-        }
-      }
-    }
-  }
-}
-
-.oidc-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;
-  }
-}
diff --git a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts
index 7c4a3ff99a..34ed1783be 100644
--- a/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts
+++ b/console/src/app/modules/providers/provider-oidc/provider-oidc.component.ts
@@ -27,7 +27,6 @@ import { PolicyComponentServiceType } from '../../policies/policy-component-type
 @Component({
   selector: 'cnsl-provider-oidc',
   templateUrl: './provider-oidc.component.html',
-  styleUrls: ['./provider-oidc.component.scss'],
 })
 export class ProviderOIDCComponent {
   public showOptional: boolean = false;
diff --git a/console/src/app/modules/providers/provider-github/provider-github.component.scss b/console/src/app/modules/providers/providers.scss
similarity index 71%
rename from console/src/app/modules/providers/provider-github/provider-github.component.scss
rename to console/src/app/modules/providers/providers.scss
index 006149e38f..a506e4bbf4 100644
--- a/console/src/app/modules/providers/provider-github/provider-github.component.scss
+++ b/console/src/app/modules/providers/providers.scss
@@ -1,11 +1,11 @@
-.desc {
-  font-size: 14px;
-}
-
-@mixin provider-github-theme($theme) {
+@mixin identity-provider-theme($theme) {
   $is-dark-theme: map-get($theme, is-dark);
 
-  .github-create-content {
+  .identity-provider-desc {
+    font-size: 14px;
+  }
+
+  .identity-provider-create-content {
     .title-row {
       display: flex;
       align-items: center;
@@ -53,7 +53,7 @@
       }
     }
 
-    .github-content {
+    .identity-provider-content {
       .desc {
         margin-bottom: 1rem;
       }
@@ -77,23 +77,23 @@
       }
     }
   }
-}
 
-.github-create-actions {
-  display: flex;
-  margin-top: 1rem;
+  .identity-provider-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;
+    button[mat-raised-button] {
+      border-radius: 0.5rem;
+      padding: 0.5rem 4rem;
+    }
+  }
+
+  .identity-provider-optional-h-wrapper {
+    display: flex;
+    align-items: center;
+
+    h2 {
+      margin-right: 0.25rem;
+    }
   }
 }
diff --git a/console/src/component-themes.scss b/console/src/component-themes.scss
index e3f67772c2..74927a0a18 100644
--- a/console/src/component-themes.scss
+++ b/console/src/component-themes.scss
@@ -14,7 +14,6 @@
 @import 'src/app/modules/nav/nav.component';
 @import 'src/app/modules/nav-toggle/nav-toggle.component';
 @import './styles/toast.scss';
-@import 'src/app/modules/providers/provider-github-es/provider-github-es.component';
 @import 'src/app/modules/table-actions/table-actions.component';
 @import 'src/app/modules/org-context/org-context.component.scss';
 @import 'src/app/modules/action-keys/action-keys.component.scss';
@@ -26,11 +25,11 @@
 @import 'src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component';
 @import 'src/app/pages/projects/apps/app-detail/app-detail.component';
 @import 'src/app/pages/projects/apps/redirect-uris/redirect-uris.component';
-@import 'src/app/modules/providers/provider-github/provider-github.component';
 @import 'src/app/modules/filter-events/filter-events.component';
 @import 'src/app/modules/top-view/top-view.component';
 @import 'src/app/pages/projects/projects.component';
 @import 'src/app/modules/edit-text/edit-text.component.scss';
+@import 'src/app/modules/providers/providers.scss';
 @import 'src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component';
 @import 'src/app/pages/users/user-detail/user-detail/user-detail.component';
 @import 'src/app/pages/users/user-list/user-table/user-table.component';
@@ -90,9 +89,8 @@
   @include footer-theme($theme);
   @include table-theme($theme);
   @include detail-layout-theme($theme);
-  @include provider-github-es-theme($theme);
   @include app-card-theme($theme);
-  @include provider-github-theme($theme);
+  @include identity-provider-theme($theme);
   @include login-policy-mfas-theme($theme);
   @include changes-theme($theme);
   @include home-theme($theme);