From c0fd0f241cb8b4b6c8f0a5caff38ee7703421a45 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <daniel.p4l4fox@gmail.com>
Date: Tue, 12 Mar 2024 18:34:13 -0600
Subject: [PATCH 1/2] style: Align progress bad and update max width authorize
 card

---
 .../form-authorize.component.html             | 584 +++++++++---------
 .../form-authorize.component.scss             | 238 +++----
 .../pages/authorize/authorize.component.html  |  56 +-
 .../pages/sign-in/sign-in.component.html      | 308 ++++-----
 4 files changed, 597 insertions(+), 589 deletions(-)

diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.html b/src/app/authorize/components/form-authorize/form-authorize.component.html
index a419322a32..9e4324be28 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.html
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.html
@@ -1,292 +1,292 @@
-<ng-container *ngIf="oauthRequest && userName && orcidUrl">
-  <ng-container *ngIf="!signInUpdatesV1Togglz">
-    <mat-card-header>
-      <img
-        class="logo mat-card-logo"
-        src="./assets/vectors/orcid.logo.svg"
-        alt="orcid logo"
-        role="link"
-        i18n="@@authorize.authorizeAccess"
-      />
-      <mat-card-title i18n="@@authorize.authorize"
-        >Authorize access</mat-card-title
-      >
-    </mat-card-header>
-    <mat-progress-bar
-      id="loading-bar"
-      *ngIf="
-        loadingUserInfo || loadingTrustedIndividuals || loadingAuthorizeEndpoint
-      "
-      mode="indeterminate"
-    ></mat-progress-bar>
-    <mat-card-content>
-      <mat-divider class="orcid-divider"></mat-divider>
-      <p
-        class="mat-caption m-b-16 m-t-16"
-        i18n="@@authorize.youAreCurrentlySignin"
-      >
-        You are currently signed in as:
-      </p>
-      <div class="m-t-small m-b-8">
-        <div class="mat-body-2">
-          <strong id="user-name">{{ userName }}</strong>
-        </div>
-        <a class="mat-button-font" href="{{ orcidUrl }}" target="_blank">{{
-          orcidUrl
-        }}</a>
-      </div>
-      <div c class="mat-body-2 user-links m-b-8">
-        <a
-          class="mat-button-font"
-          i18n="@@public-layout.sign_out"
-          (click)="navigateTo('/signout')"
-          >Sign out</a
-        >
-        <app-trusted-individuals-dropdown
-          *ngIf="trustedIndividuals"
-          (changeUser)="changeAccount($event)"
-          [trustedIndividuals]="trustedIndividuals"
-        ></app-trusted-individuals-dropdown>
-      </div>
-      <mat-divider class="orcid-divider m-b-16"></mat-divider>
-
-      <app-info-drop-down
-        class="m-t-16"
-        [name]="oauthRequest.clientName"
-        [description]="oauthRequest.clientDescription"
-      ></app-info-drop-down>
-
-      <p class="mat-body-1 m-t-4 m-b-base" i18n="@@authorize.hasAskedAccess">
-        has asked for the following access to your ORCID record:
-      </p>
-
-      <ul class="mat-body-1 m-t-base m-b-base">
-        <ng-container
-          *ngFor="let scope of this.oauthRequest.scopes; let last = last"
-        >
-          <li [matTooltip]="getLongDescription(scope)" [attr.id]="scope.value">
-            <mat-divider></mat-divider>
-            <div>
-              <ng-container
-                [ngTemplateOutlet]="
-                  (getIconName(scope) === 'updateIcon' && updateIconTemplate) ||
-                  (getIconName(scope) === 'viewIcon' && viewIconTemplate) ||
-                  (getIconName(scope) === 'orcidIcon' && orcidIconTemplate)
-                "
-              ></ng-container>
-              <div>{{ getDescription(scope) }}</div>
-            </div>
-            <mat-divider *ngIf="last"></mat-divider>
-          </li>
-        </ng-container>
-      </ul>
-
-      <button
-        mat-raised-button
-        color="primary"
-        i18n="@@authorize.authorize"
-        (click)="authorize()"
-        id="authorize-button"
-      >
-        Authorize access
-      </button>
-      <button
-        mat-stroked-button
-        color="primary"
-        i18n="@@authorize.deny"
-        (click)="authorize(false)"
-        id="deny-button"
-      >
-        Deny access
-      </button>
-
-      <p class="mat-caption m-t-0">
-        <ng-container i18n="@@authorize.ifAuthorize">
-          If authorized, this organization will have access to your ORCID
-          record, as outlined above and described in further detail
-          in</ng-container
-        >
-        <a
-          href="{{ environment.INFO_SITE + 'privacy-policy' }}"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="mat-button-font"
-          i18n="@@authorize.privacyPolicy"
-          >ORCID’s privacy policy.</a
-        >
-      </p>
-      <p class="mat-caption">
-        <ng-container i18n="@@authorize.youCanManage">
-          You can manage access permissions for this and other Trusted
-          Organizations in your
-        </ng-container>
-        <a
-          href="/account#manage-permissions"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="mat-button-font"
-          i18n="@@authorize.accountSettings"
-          >account settings.</a
-        >
-      </p>
-    </mat-card-content>
-
-    <ng-template #updateIconTemplate>
-      <mat-icon class="material-icons-outlined" role="presentation"
-        >update</mat-icon
-      >
-    </ng-template>
-
-    <ng-template #viewIconTemplate>
-      <mat-icon class="material-icons-outlined" role="presentation"
-        >remove_red_eye</mat-icon
-      >
-    </ng-template>
-
-    <ng-template #orcidIconTemplate>
-      <mat-icon role="presentation">
-        <img src="/assets/vectors/orcid.logo.black.icon.svg" alt=""
-      /></mat-icon>
-    </ng-template>
-  </ng-container>
-
-  <ng-container *ngIf="signInUpdatesV1Togglz">
-    <mat-card-header class="authorize-header">
-      <mat-card-title role="heading" aria-level="1">
-        <mat-icon class="logo-icon" aria-hidden="false" [attr.aria-label]=""
-          ><img src="./assets/vectors/orcid.logo.icon.svg" />
-        </mat-icon>
-        <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
-          Authorize access
-        </h1>
-      </mat-card-title>
-    </mat-card-header>
-    <mat-progress-bar
-      id="loading-bar"
-      *ngIf="
-        loadingUserInfo || loadingTrustedIndividuals || loadingAuthorizeEndpoint
-      "
-      mode="indeterminate"
-    ></mat-progress-bar>
-    <mat-card-content class="authorize-content">
-      <p
-        class="mat-caption m-b-16 m-t-16"
-        i18n="@@authorize.youAreCurrentlySignin"
-      >
-        You are currently signed in as:
-      </p>
-      <mat-divider class="orcid-divider"></mat-divider>
-      <div class="row">
-        <div class="col l3 profile-icon-wrapper">
-          <div class="icon">
-            <mat-icon
-              class="profile-icon"
-              aria-hidden="false"
-              [attr.aria-label]=""
-              ><img src="./assets/vectors/profile-not-verified.svg" />
-            </mat-icon>
-          </div>
-        </div>
-        <div class="col l9 user-wrapper">
-          <div class="row">
-            <div class="m-b-8">
-              <div class="mat-body-2">
-                <strong id="user-name">{{ userName }}</strong>
-              </div>
-              <span>{{ orcidUrl }}</span>
-            </div>
-          </div>
-          <div class="user-links m-b-8">
-            <a
-              class="underline"
-              i18n="@@public-layout.sign_out"
-              (click)="navigateTo('/signout')"
-              >Sign out</a
-            >
-            <app-trusted-individuals-dropdown
-              *ngIf="trustedIndividuals"
-              (changeUser)="changeAccount($event)"
-              [trustedIndividuals]="trustedIndividuals"
-              [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-            ></app-trusted-individuals-dropdown>
-          </div>
-        </div>
-      </div>
-      <mat-divider class="orcid-divider"></mat-divider>
-
-      <app-info-drop-down
-        class="m-t-32 m-b-32"
-        [name]="oauthRequest.clientName"
-        [description]="oauthRequest.clientDescription"
-        [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-      ></app-info-drop-down>
-
-      <p
-        class="mat-body-1 m-t-16 m-b-32"
-        i18n="@@authorize.organizationAskedFollowingAccess"
-      >
-        This organization has asked for the following access to your ORCID
-        record
-      </p>
-
-      <ul class="mat-body-1 m-t-base m-b-64">
-        <ng-container
-          *ngFor="let scope of this.oauthRequest.scopes; let last = last"
-        >
-          <li [matTooltip]="getLongDescription(scope)" [attr.id]="scope.value">
-            <mat-divider></mat-divider>
-            <div>
-              <ng-container
-                [ngTemplateOutlet]="
-                  (getIconName(scope) === 'updateIcon' && updateIconTemplate) ||
-                  (getIconName(scope) === 'viewIcon' && viewIconTemplate) ||
-                  (getIconName(scope) === 'orcidIcon' && orcidIconTemplate)
-                "
-              ></ng-container>
-              <div>{{ getDescription(scope) }}</div>
-            </div>
-            <mat-divider *ngIf="last"></mat-divider>
-          </li>
-        </ng-container>
-      </ul>
-
-      <button
-        class="authorize-button"
-        mat-raised-button
-        i18n="@@authorize.authorize"
-        (click)="authorize()"
-        id="authorize-button"
-      >
-        Authorize access
-      </button>
-      <div class="row deny-button-wrapper">
-        <a
-          id="deny-button"
-          class="underline"
-          (click)="authorize(false)"
-          i18n="@@authorize.deny"
-        >
-          Deny access
-        </a>
-      </div>
-    </mat-card-content>
-
-    <ng-template #updateIconTemplate>
-      <mat-icon class="material-icons-outlined scope" role="presentation"
-        >update</mat-icon
-      >
-    </ng-template>
-
-    <ng-template #viewIconTemplate>
-      <mat-icon class="material-icons-outlined scope" role="presentation"
-        >remove_red_eye</mat-icon
-      >
-    </ng-template>
-
-    <ng-template #orcidIconTemplate>
-      <mat-icon role="presentation scope">
-        <img src="/assets/vectors/orcid.logo.black.icon.svg" alt=""
-      /></mat-icon>
-    </ng-template>
-  </ng-container>
-</ng-container>
+<ng-container *ngIf="oauthRequest && userName && orcidUrl">
+  <ng-container *ngIf="!signInUpdatesV1Togglz">
+    <mat-card-header>
+      <img
+        class="logo mat-card-logo"
+        src="./assets/vectors/orcid.logo.svg"
+        alt="orcid logo"
+        role="link"
+        i18n="@@authorize.authorizeAccess"
+      />
+      <mat-card-title i18n="@@authorize.authorize"
+        >Authorize access</mat-card-title
+      >
+    </mat-card-header>
+    <mat-progress-bar
+      id="loading-bar"
+      *ngIf="
+        loadingUserInfo || loadingTrustedIndividuals || loadingAuthorizeEndpoint
+      "
+      mode="indeterminate"
+    ></mat-progress-bar>
+    <mat-card-content>
+      <mat-divider class="orcid-divider"></mat-divider>
+      <p
+        class="mat-caption m-b-16 m-t-16"
+        i18n="@@authorize.youAreCurrentlySignin"
+      >
+        You are currently signed in as:
+      </p>
+      <div class="m-t-small m-b-8">
+        <div class="mat-body-2">
+          <strong id="user-name">{{ userName }}</strong>
+        </div>
+        <a class="mat-button-font" href="{{ orcidUrl }}" target="_blank">{{
+          orcidUrl
+        }}</a>
+      </div>
+      <div c class="mat-body-2 user-links m-b-8">
+        <a
+          class="mat-button-font"
+          i18n="@@public-layout.sign_out"
+          (click)="navigateTo('/signout')"
+          >Sign out</a
+        >
+        <app-trusted-individuals-dropdown
+          *ngIf="trustedIndividuals"
+          (changeUser)="changeAccount($event)"
+          [trustedIndividuals]="trustedIndividuals"
+        ></app-trusted-individuals-dropdown>
+      </div>
+      <mat-divider class="orcid-divider m-b-16"></mat-divider>
+
+      <app-info-drop-down
+        class="m-t-16"
+        [name]="oauthRequest.clientName"
+        [description]="oauthRequest.clientDescription"
+      ></app-info-drop-down>
+
+      <p class="mat-body-1 m-t-4 m-b-base" i18n="@@authorize.hasAskedAccess">
+        has asked for the following access to your ORCID record:
+      </p>
+
+      <ul class="mat-body-1 m-t-base m-b-base">
+        <ng-container
+          *ngFor="let scope of this.oauthRequest.scopes; let last = last"
+        >
+          <li [matTooltip]="getLongDescription(scope)" [attr.id]="scope.value">
+            <mat-divider></mat-divider>
+            <div>
+              <ng-container
+                [ngTemplateOutlet]="
+                  (getIconName(scope) === 'updateIcon' && updateIconTemplate) ||
+                  (getIconName(scope) === 'viewIcon' && viewIconTemplate) ||
+                  (getIconName(scope) === 'orcidIcon' && orcidIconTemplate)
+                "
+              ></ng-container>
+              <div>{{ getDescription(scope) }}</div>
+            </div>
+            <mat-divider *ngIf="last"></mat-divider>
+          </li>
+        </ng-container>
+      </ul>
+
+      <button
+        mat-raised-button
+        color="primary"
+        i18n="@@authorize.authorize"
+        (click)="authorize()"
+        id="authorize-button"
+      >
+        Authorize access
+      </button>
+      <button
+        mat-stroked-button
+        color="primary"
+        i18n="@@authorize.deny"
+        (click)="authorize(false)"
+        id="deny-button"
+      >
+        Deny access
+      </button>
+
+      <p class="mat-caption m-t-0">
+        <ng-container i18n="@@authorize.ifAuthorize">
+          If authorized, this organization will have access to your ORCID
+          record, as outlined above and described in further detail
+          in</ng-container
+        >
+        <a
+          href="{{ environment.INFO_SITE + 'privacy-policy' }}"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mat-button-font"
+          i18n="@@authorize.privacyPolicy"
+          >ORCID’s privacy policy.</a
+        >
+      </p>
+      <p class="mat-caption">
+        <ng-container i18n="@@authorize.youCanManage">
+          You can manage access permissions for this and other Trusted
+          Organizations in your
+        </ng-container>
+        <a
+          href="/account#manage-permissions"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="mat-button-font"
+          i18n="@@authorize.accountSettings"
+          >account settings.</a
+        >
+      </p>
+    </mat-card-content>
+
+    <ng-template #updateIconTemplate>
+      <mat-icon class="material-icons-outlined" role="presentation"
+        >update</mat-icon
+      >
+    </ng-template>
+
+    <ng-template #viewIconTemplate>
+      <mat-icon class="material-icons-outlined" role="presentation"
+        >remove_red_eye</mat-icon
+      >
+    </ng-template>
+
+    <ng-template #orcidIconTemplate>
+      <mat-icon role="presentation">
+        <img src="/assets/vectors/orcid.logo.black.icon.svg" alt=""
+      /></mat-icon>
+    </ng-template>
+  </ng-container>
+
+  <ng-container *ngIf="signInUpdatesV1Togglz">
+    <mat-progress-bar
+      id="loading-bar"
+      *ngIf="
+        loadingUserInfo || loadingTrustedIndividuals || loadingAuthorizeEndpoint
+      "
+      mode="indeterminate"
+    ></mat-progress-bar>
+    <mat-card-header class="authorize-header">
+      <mat-card-title role="heading" aria-level="1">
+        <mat-icon class="logo-icon" aria-hidden="false" [attr.aria-label]=""
+          ><img src="./assets/vectors/orcid.logo.icon.svg" />
+        </mat-icon>
+        <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
+          Authorize access
+        </h1>
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content class="authorize-content">
+      <p
+        class="mat-caption m-b-16 m-t-16"
+        i18n="@@authorize.youAreCurrentlySignin"
+      >
+        You are currently signed in as:
+      </p>
+      <mat-divider class="orcid-divider"></mat-divider>
+      <div class="row">
+        <div class="col l3 profile-icon-wrapper">
+          <div class="icon">
+            <mat-icon
+              class="profile-icon"
+              aria-hidden="false"
+              [attr.aria-label]=""
+              ><img src="./assets/vectors/profile-not-verified.svg" />
+            </mat-icon>
+          </div>
+        </div>
+        <div class="col l9 user-wrapper">
+          <div class="row">
+            <div class="m-b-8">
+              <div class="mat-body-2">
+                <strong id="user-name">{{ userName }}</strong>
+              </div>
+              <span>{{ orcidUrl }}</span>
+            </div>
+          </div>
+          <div class="user-links m-b-8">
+            <a
+              class="underline"
+              i18n="@@public-layout.sign_out"
+              (click)="navigateTo('/signout')"
+              >Sign out</a
+            >
+            <app-trusted-individuals-dropdown
+              *ngIf="trustedIndividuals"
+              (changeUser)="changeAccount($event)"
+              [trustedIndividuals]="trustedIndividuals"
+              [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
+            ></app-trusted-individuals-dropdown>
+          </div>
+        </div>
+      </div>
+      <mat-divider class="orcid-divider"></mat-divider>
+
+      <app-info-drop-down
+        class="m-t-32 m-b-32"
+        [name]="oauthRequest.clientName"
+        [description]="oauthRequest.clientDescription"
+        [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
+      ></app-info-drop-down>
+
+      <p
+        class="mat-body-1 m-t-16 m-b-32"
+        i18n="@@authorize.organizationAskedFollowingAccess"
+      >
+        This organization has asked for the following access to your ORCID
+        record
+      </p>
+
+      <ul class="mat-body-1 m-t-base m-b-64">
+        <ng-container
+          *ngFor="let scope of this.oauthRequest.scopes; let last = last"
+        >
+          <li [matTooltip]="getLongDescription(scope)" [attr.id]="scope.value">
+            <mat-divider></mat-divider>
+            <div>
+              <ng-container
+                [ngTemplateOutlet]="
+                  (getIconName(scope) === 'updateIcon' && updateIconTemplate) ||
+                  (getIconName(scope) === 'viewIcon' && viewIconTemplate) ||
+                  (getIconName(scope) === 'orcidIcon' && orcidIconTemplate)
+                "
+              ></ng-container>
+              <div>{{ getDescription(scope) }}</div>
+            </div>
+            <mat-divider *ngIf="last"></mat-divider>
+          </li>
+        </ng-container>
+      </ul>
+
+      <button
+        class="authorize-button"
+        mat-raised-button
+        i18n="@@authorize.authorize"
+        (click)="authorize()"
+        id="authorize-button"
+      >
+        Authorize access
+      </button>
+      <div class="row deny-button-wrapper">
+        <a
+          id="deny-button"
+          class="underline"
+          (click)="authorize(false)"
+          i18n="@@authorize.deny"
+        >
+          Deny access
+        </a>
+      </div>
+    </mat-card-content>
+
+    <ng-template #updateIconTemplate>
+      <mat-icon class="material-icons-outlined scope" role="presentation"
+        >update</mat-icon
+      >
+    </ng-template>
+
+    <ng-template #viewIconTemplate>
+      <mat-icon class="material-icons-outlined scope" role="presentation"
+        >remove_red_eye</mat-icon
+      >
+    </ng-template>
+
+    <ng-template #orcidIconTemplate>
+      <mat-icon role="presentation scope">
+        <img src="/assets/vectors/orcid.logo.black.icon.svg" alt=""
+      /></mat-icon>
+    </ng-template>
+  </ng-container>
+</ng-container>
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.scss b/src/app/authorize/components/form-authorize/form-authorize.component.scss
index d9ed7f1ca8..ca59249302 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.scss
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.scss
@@ -1,117 +1,121 @@
-@import '../../../../assets/scss/orcid.spacing.scss';
-
-.logo {
-  width: 130px;
-}
-
-.user-links {
-  display: flex;
-  justify-content: space-between;
-}
-
-.university-dropdown {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-:host {
-  ul {
-    padding: 0;
-
-    li {
-      list-style-type: none;
-      flex-direction: column;
-      align-items: baseline;
-
-      div {
-        display: flex;
-        align-items: center;
-        mat-icon {
-          margin-bottom: -4px; // Compensates mat icon bottom with space
-          margin-left: $spacing-small;
-          margin-right: $spacing-small;
-        }
-      }
-    }
-  }
-}
-
-button {
-  width: 100%;
-  margin-bottom: $spacing-base;
-}
-
-mat-divider {
-  margin-top: $spacing-12;
-  margin-bottom: $spacing-12;
-}
-
-mat-icon > img {
-  height: 20px;
-  margin-top: 2px; // Fix icon component with SVG image
-}
-
-.col {
-  overflow: hidden;
-}
-
-app-info-drop-down {
-  max-width: 100%;
-  display: block;
-}
-
-mat-card-header.authorize-header {
-  mat-card-title {
-    margin: 0 0 32px 0 !important;
-  }
-
-  h1 {
-    margin-top: 0;
-  }
-
-  .orc-font-heading-small {
-    font-style: normal;
-    font-weight: 500;
-  }
-
-  mat-icon.logo-icon {
-    height: 80px;
-    width: 64px;
-    img {
-      height: 64px;
-    }
-  }
-}
-
-mat-card-content.authorize-content {
-  margin: 0px !important;
-
-  div.profile-icon-wrapper {
-    padding: 0 !important;
-  }
-
-  div.user-wrapper {
-    padding: 0 !important;
-  }
-
-  div.deny-button-wrapper {
-    justify-content: center;
-  }
-
-  mat-icon.profile-icon {
-    height: 80px;
-    width: 64px;
-    img {
-      height: 64px;
-    }
-  }
-
-  mat-icon.scope {
-    width: 32px;
-  }
-
-  .user-links {
-    width: 100%;
-  }
-}
+@import '../../../../assets/scss/orcid.spacing.scss';
+
+.logo {
+  width: 130px;
+}
+
+.user-links {
+  display: flex;
+  justify-content: space-between;
+}
+
+.university-dropdown {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+:host {
+  ul {
+    padding: 0;
+
+    li {
+      list-style-type: none;
+      flex-direction: column;
+      align-items: baseline;
+
+      div {
+        display: flex;
+        align-items: center;
+        mat-icon {
+          margin-bottom: -4px; // Compensates mat icon bottom with space
+          margin-left: $spacing-small;
+          margin-right: $spacing-small;
+        }
+      }
+    }
+  }
+}
+
+button {
+  width: 100%;
+  margin-bottom: $spacing-base;
+}
+
+mat-divider {
+  margin-top: $spacing-12;
+  margin-bottom: $spacing-12;
+}
+
+mat-icon > img {
+  height: 20px;
+  margin-top: 2px; // Fix icon component with SVG image
+}
+
+.col {
+  overflow: hidden;
+}
+
+app-info-drop-down {
+  max-width: 100%;
+  display: block;
+}
+
+.progress-bar {
+  top: 0;
+}
+
+mat-card-header.authorize-header {
+  mat-card-title {
+    margin: 0 0 32px 0 !important;
+  }
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .orc-font-heading-small {
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  mat-icon.logo-icon {
+    height: 80px;
+    width: 64px;
+    img {
+      height: 64px;
+    }
+  }
+}
+
+mat-card-content.authorize-content {
+  margin: 0px !important;
+
+  div.profile-icon-wrapper {
+    padding: 0 !important;
+  }
+
+  div.user-wrapper {
+    padding: 0 !important;
+  }
+
+  div.deny-button-wrapper {
+    justify-content: center;
+  }
+
+  mat-icon.profile-icon {
+    height: 80px;
+    width: 64px;
+    img {
+      height: 64px;
+    }
+  }
+
+  mat-icon.scope {
+    width: 32px;
+  }
+
+  .user-links {
+    width: 100%;
+  }
+}
diff --git a/src/app/authorize/pages/authorize/authorize.component.html b/src/app/authorize/pages/authorize/authorize.component.html
index ab75457170..a4a6ce17f4 100644
--- a/src/app/authorize/pages/authorize/authorize.component.html
+++ b/src/app/authorize/pages/authorize/authorize.component.html
@@ -1,26 +1,30 @@
-<main id="main">
-  <div class="container">
-    <div class="row space-around">
-      <div class="col l5 m6 s4">
-        <mat-card
-          class="orcid-wizard-2"
-          class="orcid-wizard"
-          [ngClass]="{
-            'orcid-wizard-2': !signInUpdatesV1Togglz,
-            'orcid-wizard': signInUpdatesV1Togglz,
-            'authorize-wrapper': signInUpdatesV1Togglz,
-            mobile: !platform.columns12
-          }"
-        >
-          <app-form-authorize
-            [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-            *ngIf="showAuthorizationComponent"
-          ></app-form-authorize>
-          <app-oauth-error
-            *ngIf="!showAuthorizationComponent"
-          ></app-oauth-error>
-        </mat-card>
-      </div>
-    </div>
-  </div>
-</main>
+<main id="main">
+  <div class="container">
+    <div class="row space-around">
+      <div
+        class="col  m6 s4"
+        [ngClass]="{
+          'l5': !signInUpdatesV1Togglz,
+          'l6': signInUpdatesV1Togglz,
+        }"
+      >
+        <mat-card
+          [ngClass]="{
+            'orcid-wizard-2': !signInUpdatesV1Togglz,
+            'orcid-wizard': signInUpdatesV1Togglz,
+            'authorize-wrapper': signInUpdatesV1Togglz,
+            mobile: !platform.columns12
+          }"
+        >
+          <app-form-authorize
+            [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
+            *ngIf="showAuthorizationComponent"
+          ></app-form-authorize>
+          <app-oauth-error
+            *ngIf="!showAuthorizationComponent"
+          ></app-oauth-error>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/app/sign-in/pages/sign-in/sign-in.component.html b/src/app/sign-in/pages/sign-in/sign-in.component.html
index cdccbed2cb..f2fc029df4 100644
--- a/src/app/sign-in/pages/sign-in/sign-in.component.html
+++ b/src/app/sign-in/pages/sign-in/sign-in.component.html
@@ -1,154 +1,154 @@
-<main id="main">
-  <app-my-orcid-alerts
-    *ngIf="!signInUpdatesV1Togglz && (emailVerified || invalidVerifyUrl)"
-    [emailVerified]="emailVerified"
-    [invalidVerifyUrl]="invalidVerifyUrl"
-  ></app-my-orcid-alerts>
-  <div class="container">
-    <div class="row space-around">
-      <div class="col l6 m6 s4">
-        <mat-card class="orcid-wizard" *ngIf="!signInUpdatesV1Togglz">
-          <mat-progress-bar
-            role="heading"
-            aria-level="2"
-            *ngIf="loading"
-            mode="indeterminate"
-          ></mat-progress-bar>
-          <mat-card-header>
-            <mat-card-title role="heading" aria-level="1" *ngIf="!isOauthError">
-              <div class="icon">
-                <img src="assets/vectors/orcid.logo.icon.svg" alt="" />
-              </div>
-              <ng-container i18n="@@ngOrcid.signin.signInToOrcid"
-                >Sign in to ORCID</ng-container
-              >
-            </mat-card-title>
-          </mat-card-header>
-          <mat-card-content>
-            <ng-container
-              *ngIf="(!isLoggedIn && !isOauthError) || isForceLogin"
-            >
-              <app-form-sign-in
-                (loading)="loading = $event"
-                [email]="email"
-                #formSignInComponent
-                [signInType]="signInType"
-                [emailVerified]="emailVerified"
-                [invalidVerifyUrl]="invalidVerifyUrl"
-                (show2FAEmitter)="show2FAEmitter($event)"
-                (isOauthError)="isOauthError = $event"
-                (errorDescription)="errorDescription = $event"
-              >
-                <button
-                  mat-raised-button
-                  (click)="formSignInComponent.onSubmit()"
-                  color="primary"
-                  class="row sign-in-button mat-elevation-z0"
-                  type="submit"
-                  [disabled]="loading"
-                  *ngIf="!show2FA"
-                  i18n="@@ngOrcid.signin.button"
-                  id="signin-button"
-                >
-                  SIGN IN
-                </button>
-              </app-form-sign-in>
-              <p class="mat-subheading-2" i18n="@@ngOrcid.signin.or">or</p>
-              <mat-divider></mat-divider>
-              <br />
-              <app-social></app-social>
-            </ng-container>
-            <app-logged-in
-              *ngIf="isLoggedIn && !isForceLogin && !isOauthError"
-              [displayName]="displayName"
-              [realUserOrcid]="realUserOrcid"
-            >
-            </app-logged-in>
-          </mat-card-content>
-        </mat-card>
-        <mat-card
-          *ngIf="signInUpdatesV1Togglz"
-          class="orcid-wizard sign-in-wrapper"
-          [ngClass]="{
-            mobile: !platform.columns12
-          }"
-        >
-          <mat-progress-bar
-            role="heading"
-            aria-level="2"
-            *ngIf="loading"
-            mode="indeterminate"
-          ></mat-progress-bar>
-          <mat-card-header>
-            <mat-card-title role="heading" aria-level="1" *ngIf="!isOauthError">
-              <div class="icon">
-                <img src="assets/vectors/orcid.logo.icon.svg" alt="" />
-              </div>
-              <h1
-                class="orc-font-heading-small"
-                i18n="@@ngOrcid.signin.signInToOrcid"
-              >
-                Sign in to ORCID
-              </h1>
-              <div class="row">
-                <div class="mat-body-1">
-                  <ng-container i18n="@@ngOrcid.signin.dontHaveYourOrcid">
-                    Don't have your ORCID iD yet?
-                  </ng-container>
-                  <a
-                    class="row register-now underline"
-                    i18n="@@ngOrcid.signin.registerNow"
-                    (click)="register()"
-                    id="register-button"
-                    >Register now
-                  </a>
-                </div>
-              </div>
-            </mat-card-title>
-          </mat-card-header>
-          <mat-card-content>
-            <ng-container
-              *ngIf="(!isLoggedIn && !isOauthError) || isForceLogin"
-            >
-              <app-form-sign-in
-                (loading)="loading = $event"
-                [email]="email"
-                #formSignInComponent
-                [signInType]="signInType"
-                (show2FAEmitter)="show2FAEmitter($event)"
-                (isOauthError)="isOauthError = $event"
-                (errorDescription)="errorDescription = $event"
-                [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-              >
-                <button
-                  mat-raised-button
-                  (click)="formSignInComponent.onSubmit()"
-                  class="row sign-in-button sign-in-to-orcid-button mat-elevation-z0"
-                  type="submit"
-                  [disabled]="loading"
-                  *ngIf="!show2FA"
-                  i18n="@@ngOrcid.signin.signInToOrcid"
-                  id="signin-button"
-                >
-                  Sign in to ORCID
-                </button>
-              </app-form-sign-in>
-              <div class="separator orc-font-body">
-                {{ orLabel | uppercase }}
-              </div>
-              <app-social
-                [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
-              ></app-social>
-            </ng-container>
-            <app-logged-in
-              *ngIf="isLoggedIn && !isForceLogin && !isOauthError"
-              [displayName]="displayName"
-              [realUserOrcid]="realUserOrcid"
-            >
-            </app-logged-in>
-          </mat-card-content>
-        </mat-card>
-      </div>
-    </div>
-  </div>
-</main>
+<main id="main">
+  <app-my-orcid-alerts
+    *ngIf="!signInUpdatesV1Togglz && (emailVerified || invalidVerifyUrl)"
+    [emailVerified]="emailVerified"
+    [invalidVerifyUrl]="invalidVerifyUrl"
+  ></app-my-orcid-alerts>
+  <div class="container">
+    <div class="row space-around">
+      <div class="col l6 m6 s4">
+        <mat-card class="orcid-wizard" *ngIf="!signInUpdatesV1Togglz">
+          <mat-progress-bar
+            role="heading"
+            aria-level="2"
+            *ngIf="loading"
+            mode="indeterminate"
+          ></mat-progress-bar>
+          <mat-card-header>
+            <mat-card-title role="heading" aria-level="1" *ngIf="!isOauthError">
+              <div class="icon">
+                <img src="assets/vectors/orcid.logo.icon.svg" alt="" />
+              </div>
+              <ng-container i18n="@@ngOrcid.signin.signInToOrcid"
+                >Sign in to ORCID</ng-container
+              >
+            </mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <ng-container
+              *ngIf="(!isLoggedIn && !isOauthError) || isForceLogin"
+            >
+              <app-form-sign-in
+                (loading)="loading = $event"
+                [email]="email"
+                #formSignInComponent
+                [signInType]="signInType"
+                [emailVerified]="emailVerified"
+                [invalidVerifyUrl]="invalidVerifyUrl"
+                (show2FAEmitter)="show2FAEmitter($event)"
+                (isOauthError)="isOauthError = $event"
+                (errorDescription)="errorDescription = $event"
+              >
+                <button
+                  mat-raised-button
+                  (click)="formSignInComponent.onSubmit()"
+                  color="primary"
+                  class="row sign-in-button mat-elevation-z0"
+                  type="submit"
+                  [disabled]="loading"
+                  *ngIf="!show2FA"
+                  i18n="@@ngOrcid.signin.button"
+                  id="signin-button"
+                >
+                  SIGN IN
+                </button>
+              </app-form-sign-in>
+              <p class="mat-subheading-2" i18n="@@ngOrcid.signin.or">or</p>
+              <mat-divider></mat-divider>
+              <br />
+              <app-social></app-social>
+            </ng-container>
+            <app-logged-in
+              *ngIf="isLoggedIn && !isForceLogin && !isOauthError"
+              [displayName]="displayName"
+              [realUserOrcid]="realUserOrcid"
+            >
+            </app-logged-in>
+          </mat-card-content>
+        </mat-card>
+        <mat-card
+          *ngIf="signInUpdatesV1Togglz"
+          class="orcid-wizard sign-in-wrapper"
+          [ngClass]="{
+            mobile: !platform.columns12
+          }"
+        >
+          <mat-progress-bar
+            role="heading"
+            aria-level="2"
+            *ngIf="loading"
+            mode="indeterminate"
+          ></mat-progress-bar>
+          <mat-card-header>
+            <mat-card-title role="heading" aria-level="1" *ngIf="!isOauthError">
+              <div class="icon">
+                <img src="assets/vectors/orcid.logo.icon.svg" alt="" />
+              </div>
+              <h1
+                class="orc-font-heading-small"
+                i18n="@@ngOrcid.signin.signInToOrcid"
+              >
+                Sign in to ORCID
+              </h1>
+              <div class="row">
+                <div class="mat-body-1">
+                  <ng-container i18n="@@ngOrcid.signin.dontHaveYourOrcid">
+                    Don't have your ORCID iD yet?
+                  </ng-container>
+                  <a
+                    class="row register-now underline"
+                    i18n="@@ngOrcid.signin.registerNow"
+                    (click)="register()"
+                    id="register-button"
+                    >Register now
+                  </a>
+                </div>
+              </div>
+            </mat-card-title>
+          </mat-card-header>
+          <mat-card-content>
+            <ng-container
+              *ngIf="(!isLoggedIn && !isOauthError) || isForceLogin"
+            >
+              <app-form-sign-in
+                (loading)="loading = $event"
+                [email]="email"
+                #formSignInComponent
+                [signInType]="signInType"
+                (show2FAEmitter)="show2FAEmitter($event)"
+                (isOauthError)="isOauthError = $event"
+                (errorDescription)="errorDescription = $event"
+                [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
+              >
+                <button
+                  mat-raised-button
+                  (click)="formSignInComponent.onSubmit()"
+                  class="row sign-in-button sign-in-to-orcid-button mat-elevation-z0"
+                  type="submit"
+                  [disabled]="loading"
+                  *ngIf="!show2FA"
+                  i18n="@@ngOrcid.signin.signInToOrcid"
+                  id="signin-button"
+                >
+                  Sign in to ORCID
+                </button>
+              </app-form-sign-in>
+              <div class="separator orc-font-body">
+                {{ orLabel | uppercase }}
+              </div>
+              <app-social
+                [signInUpdatesV1Togglz]="signInUpdatesV1Togglz"
+              ></app-social>
+            </ng-container>
+            <app-logged-in
+              *ngIf="isLoggedIn && !isForceLogin && !isOauthError"
+              [displayName]="displayName"
+              [realUserOrcid]="realUserOrcid"
+            >
+            </app-logged-in>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </div>
+  </div>
+</main>

From f36d05dd2bbfc560ab2a16a2ebc38a38bf2fc506 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <daniel.p4l4fox@gmail.com>
Date: Tue, 12 Mar 2024 18:34:33 -0600
Subject: [PATCH 2/2] fix: Remove whitespace

---
 src/app/authorize/pages/authorize/authorize.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/authorize/pages/authorize/authorize.component.html b/src/app/authorize/pages/authorize/authorize.component.html
index a4a6ce17f4..bb5ca7f75f 100644
--- a/src/app/authorize/pages/authorize/authorize.component.html
+++ b/src/app/authorize/pages/authorize/authorize.component.html
@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row space-around">
       <div
-        class="col  m6 s4"
+        class="col m6 s4"
         [ngClass]="{
           'l5': !signInUpdatesV1Togglz,
           'l6': signInUpdatesV1Togglz,