From 9d29098aa63557902436f347b37dce1f2e3a2885 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Mon, 15 Jul 2024 13:25:59 +0200
Subject: [PATCH] fix(console): identity provider title layout (#8302)

# Which Problems Are Solved

Fixes the alignment of the identity provider layouts

<img width="432" alt="Screenshot 2024-07-15 at 08 42 21"
src="https://github.com/user-attachments/assets/c45e4226-fc7e-4b5e-a25b-164bd31864c5">

# Context

- noted internally while implementing
https://github.com/zitadel/zitadel/pull/8295

---------

Co-authored-by: Livio Spring <livio.a@gmail.com>
---
 .../providers/provider-apple/provider-apple.component.html      | 2 +-
 .../provider-azure-ad/provider-azure-ad.component.html          | 2 +-
 .../provider-github-es/provider-github-es.component.html        | 2 +-
 .../providers/provider-github/provider-github.component.html    | 2 +-
 .../provider-gitlab-self-hosted.component.html                  | 2 +-
 .../providers/provider-gitlab/provider-gitlab.component.html    | 2 +-
 .../providers/provider-google/provider-google.component.html    | 2 +-
 .../modules/providers/provider-jwt/provider-jwt.component.html  | 2 +-
 .../providers/provider-ldap/provider-ldap.component.html        | 2 +-
 .../providers/provider-next/provider-next.component.html        | 2 +-
 .../providers/provider-oauth/provider-oauth.component.html      | 2 +-
 .../providers/provider-oidc/provider-oidc.component.html        | 2 +-
 .../providers/provider-saml-sp/provider-saml-sp.component.html  | 2 +-
 console/src/app/modules/providers/providers.scss                | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/console/src/app/modules/providers/provider-apple/provider-apple.component.html b/console/src/app/modules/providers/provider-apple/provider-apple.component.html
index c4ff96e47..4fd1c1694 100644
--- a/console/src/app/modules/providers/provider-apple/provider-apple.component.html
+++ b/console/src/app/modules/providers/provider-apple/provider-apple.component.html
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo apple dark" src="./assets/images/idp/apple-dark.svg" alt="apple" />
       <img class="idp-logo apple light" src="./assets/images/idp/apple.svg" alt="apple" />
       <h1>{{ 'IDP.CREATE.APPLE.TITLE' | translate }}</h1>
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 17b00492c..a6a9ef6ec 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/ms.svg" alt="microsoft" />
       <h1>{{ 'IDP.CREATE.AZUREAD.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
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 820deb14d..d48d8df58 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-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" />
       <h1>{{ 'IDP.CREATE.GITHUBES.TITLE' | translate }}</h1>
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 7c2a6f26d..9f7a169c4 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-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" />
       <h1>{{ 'IDP.CREATE.GITHUB.TITLE' | translate }}</h1>
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 9a0085b0d..6a94e1a90 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
       <h1>{{ 'IDP.CREATE.GITLABSELFHOSTED.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
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 e86455188..d9efddd1c 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/gitlab.svg" alt="gitlab" />
       <h1>{{ 'IDP.CREATE.GITLAB.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
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 4c3053f4d..af409c7c5 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/google.png" alt="google" />
       <h1>{{ 'IDP.CREATE.GOOGLE.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
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 8e8a45658..f86c5cec4 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <mat-icon class="idp-logo" svgIcon="mdi_jwt" alt="jwt" />
       <h1>{{ 'IDP.CREATE.JWT.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
diff --git a/console/src/app/modules/providers/provider-ldap/provider-ldap.component.html b/console/src/app/modules/providers/provider-ldap/provider-ldap.component.html
index 342546051..23b09b310 100644
--- a/console/src/app/modules/providers/provider-ldap/provider-ldap.component.html
+++ b/console/src/app/modules/providers/provider-ldap/provider-ldap.component.html
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <i class="idp-icon las la-building"></i>
       <h1>{{ 'IDP.CREATE.LDAP.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
diff --git a/console/src/app/modules/providers/provider-next/provider-next.component.html b/console/src/app/modules/providers/provider-next/provider-next.component.html
index cd6d0af4b..59243d825 100644
--- a/console/src/app/modules/providers/provider-next/provider-next.component.html
+++ b/console/src/app/modules/providers/provider-next/provider-next.component.html
@@ -5,7 +5,7 @@
     *ngIf="configureProvider || autofillLink || activateLink"
   >
     <cnsl-info-section *ngIf="activateLink">
-      <div class="title-row">
+      <div class="identity-provider-title-row">
         <div class="left">
           <h2 class="title">{{ 'DESCRIPTIONS.SETTINGS.IDPS.ACTIVATE.TITLE' | translate }}</h2>
           <div>
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 1af56521b..b8f43a856 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/oauth.svg" alt="oauth" />
       <h1>{{ 'IDP.CREATE.OAUTH.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
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 a62016f7e..6a86ac6b3 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
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <mat-icon class="idp-logo" svgIcon="mdi_openid" alt="openid" />
       <h1>{{ 'IDP.CREATE.OIDC.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
diff --git a/console/src/app/modules/providers/provider-saml-sp/provider-saml-sp.component.html b/console/src/app/modules/providers/provider-saml-sp/provider-saml-sp.component.html
index 79bab0f3d..d738b3fec 100644
--- a/console/src/app/modules/providers/provider-saml-sp/provider-saml-sp.component.html
+++ b/console/src/app/modules/providers/provider-saml-sp/provider-saml-sp.component.html
@@ -3,7 +3,7 @@
   (closed)="close()"
 >
   <div class="identity-provider-create-content">
-    <div class="title-row">
+    <div class="identity-provider-title-row">
       <img class="idp-logo" src="./assets/images/idp/saml-icon.svg" alt="saml" />
       <h1>{{ 'IDP.CREATE.SAML.TITLE' | translate }}</h1>
       <ng-container *ngIf="exists$ | async">
diff --git a/console/src/app/modules/providers/providers.scss b/console/src/app/modules/providers/providers.scss
index 85584b956..7baffada8 100644
--- a/console/src/app/modules/providers/providers.scss
+++ b/console/src/app/modules/providers/providers.scss
@@ -10,7 +10,7 @@
   }
 
   .identity-provider-create-content {
-    .title-row {
+    .identity-provider-title-row {
       display: flex;
       align-items: center;