From 8be64f49911ea0bf33782812f29e562e36a3de73 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Thu, 14 Mar 2024 14:38:09 +0100
Subject: [PATCH] fix(console): phone, email, branding dialogs (#7539)

* fix: phone, email, branding dialogs

* use full width for phone number

* fix user create phone width

* reset width

---------

Co-authored-by: Elio Bischof <elio@zitadel.com>
---
 ...ect-private-labeling-dialog.component.html |  6 ++--
 .../user-create/user-create.component.scss    |  1 -
 .../edit-dialog/edit-dialog.component.html    | 33 ++++++++++++++-----
 .../edit-dialog/edit-dialog.component.scss    | 32 +++++++++---------
 4 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/console/src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component.html b/console/src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component.html
index 9d95cfa4dc..228ad674ac 100644
--- a/console/src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component.html
+++ b/console/src/app/modules/project-private-labeling-dialog/project-private-labeling-dialog.component.html
@@ -1,6 +1,8 @@
-<h1 class="title">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.TITLE' | translate }} {{ data?.number }}</h1>
-<p class="desc cnsl-secondary-text">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.DESCRIPTION' | translate }}</p>
+<h1 mat-dialog-title class="title">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.TITLE' | translate }} {{ data?.number }}</h1>
+
 <div mat-dialog-content>
+  <p class="desc cnsl-secondary-text">{{ 'PROJECT.PAGES.PRIVATELABEL.DIALOG.DESCRIPTION' | translate }}</p>
+
   <mat-radio-group class="project-radio-group" [(ngModel)]="setting">
     <mat-radio-button class="radio-button" *ngFor="let selection of settings" [value]="selection">
       <span class="label">{{ 'PROJECT.PAGES.PRIVATELABEL.' + selection + '.TITLE' | translate }}</span>
diff --git a/console/src/app/pages/users/user-create/user-create.component.scss b/console/src/app/pages/users/user-create/user-create.component.scss
index 494828944c..113429c36c 100644
--- a/console/src/app/pages/users/user-create/user-create.component.scss
+++ b/console/src/app/pages/users/user-create/user-create.component.scss
@@ -56,7 +56,6 @@
 }
 
 .phone-grid {
-  max-width: 22rem;
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 1rem;
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
index 924adb58d5..5e13504a52 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.html
@@ -1,18 +1,22 @@
 <h1 mat-dialog-title>
   <span class="title">{{ data.titleKey | translate }}</span>
 </h1>
-<p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
 <div mat-dialog-content>
-  <form [formGroup]="dialogForm" (ngSubmit)="closeDialogWithValue()">
-    <div class="phone-grid">
-      <cnsl-form-field *ngIf="isPhone">
+  <p class="desc cnsl-secondary-text">{{ data.descriptionKey | translate }}</p>
+
+  <form class="edit-dialog-form" [formGroup]="dialogForm" (ngSubmit)="closeDialogWithValue()">
+    <div class="phone-grid" *ngIf="isPhone">
+      <cnsl-form-field class="edit-dialog-formfield">
         <cnsl-label>{{ 'USER.PROFILE.COUNTRY' | translate }}</cnsl-label>
         <mat-select [(value)]="selected" [compareWith]="compareCountries" (selectionChange)="setCountryCallingCode()">
-          <mat-select-trigger> <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span></mat-select-trigger>
+          <mat-select-trigger>
+            <span class="fi fi-{{ selected?.countryCode | lowercase }}"></span>
+            <span class="edit-dialog-phone-country-name">{{ selected?.countryName }}</span>
+          </mat-select-trigger>
           <mat-option *ngFor="let country of countryPhoneCodes" [value]="country">
             <span class="fi fi-{{ country.countryCode | lowercase }}"></span>
-            <span class="phone-country-name">{{ country.countryName }}</span>
-            <span class="phone-country-code">+{{ country.countryCallingCode }}</span>
+            <span class="edit-dialog-phone-country-name">{{ country.countryName }}</span>
+            <span class="edit-dialog-phone-country-code">+{{ country.countryCallingCode }}</span>
           </mat-option>
         </mat-select>
       </cnsl-form-field>
@@ -26,6 +30,17 @@
         />
       </cnsl-form-field>
     </div>
+    <div *ngIf="!isPhone">
+      <cnsl-form-field>
+        <cnsl-label>{{ data.labelKey | translate }}</cnsl-label>
+        <input
+          cnslInput
+          [formControlName]="controlKey"
+          matTooltip="{{ 'USER.PROFILE.PHONE_HINT' | translate }}"
+          [matTooltipDisabled]="!isPhone"
+        />
+      </cnsl-form-field>
+    </div>
 
     <ng-container *ngIf="data.type === EditDialogType.EMAIL && data.isVerifiedTextKey">
       <mat-checkbox class="verified-checkbox" [(ngModel)]="isVerified">
@@ -37,8 +52,8 @@
     </ng-container>
   </form>
 </div>
-<div mat-dialog-actions class="action">
-  <button mat-stroked-button class="ok-button" (click)="closeDialog()">
+<div mat-dialog-actions class="edit-dialog-actions">
+  <button mat-stroked-button (click)="closeDialog()">
     {{ data.cancelKey | translate }}
   </button>
 
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.scss b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.scss
index 8f5bd2358c..b8a6f3d1a8 100644
--- a/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/edit-dialog/edit-dialog.component.scss
@@ -1,4 +1,4 @@
-.formfield {
+.edit-dialog-formfield {
   width: 100%;
 }
 
@@ -10,34 +10,34 @@
   font-size: 14px;
 }
 
-.action {
+.edit-dialog-actions {
   display: flex;
-  justify-content: flex-end;
-
-  .ok-button {
-    margin-left: 0.5rem;
-  }
+  justify-content: space-between;
 
   button {
     border-radius: 0.5rem;
   }
 }
 
-.phone-grid {
-  max-width: 22rem;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: 1rem;
+.edit-dialog-form {
+  width: 100%;
 
-  @media only screen and (max-width: 500px) {
-    grid-template-columns: 1fr;
+  .phone-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    column-gap: 1rem;
+
+    @media only screen and (max-width: 500px) {
+      grid-template-columns: 1fr;
+    }
   }
 }
 
-.phone-country-name {
+.edit-dialog-phone-country-name {
   padding: 0 0.5em;
+  margin-left: 1rem;
 }
 
-.phone-country-code {
+.edit-dialog-phone-country-code {
   color: darkgrey;
 }