From c51c1ad9c04e642880f5f6970587507d4cb85e31 Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Wed, 6 Mar 2024 20:09:11 -0600
Subject: [PATCH] feature: Add new authorize styling (#2182)

Co-authored-by: Daniel Palafox <daniel.p4l4fox@gmail.com>
---
 .../form-authorize.component.html             | 421 ++++++++++++------
 .../form-authorize.component.scss             |  55 +++
 .../form-authorize.component.scss-theme.scss  |  17 +
 .../form-authorize.component.ts               |  20 +-
 .../pages/authorize/authorize.component.html  |  12 +-
 .../pages/authorize/authorize.component.scss  |  35 ++
 .../pages/authorize/authorize.component.ts    |  22 +-
 .../info-drop-down.component.html             |  41 +-
 .../info-drop-down.component.scss             |   4 +-
 .../info-drop-down.component.ts               |   1 +
 ...rusted-individuals-dropdown.component.html |   5 +-
 .../trusted-individuals-dropdown.component.ts |   1 +
 12 files changed, 475 insertions(+), 159 deletions(-)
 create mode 100644 src/app/authorize/components/form-authorize/form-authorize.component.scss-theme.scss

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 dbbbc6bd52..61dfd86b1d 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.html
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.html
@@ -1,149 +1,290 @@
 <ng-container *ngIf="oauthRequest && userName && orcidUrl">
-  <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>
+  <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>
-      <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
+      <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
       >
-      <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"
+    </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"
       >
-        <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>
+        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>
-          <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
+        </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"
       >
-      <a
-        href="{{ environment.INFO_SITE + 'privacy-policy' }}"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="mat-button-font"
-        i18n="@@authorize.privacyPolicy"
-        >ORCID’s privacy policy.</a
+        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
       >
-    </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
+    </ng-template>
+
+    <ng-template #viewIconTemplate>
+      <mat-icon class="material-icons-outlined scope" role="presentation"
+        >remove_red_eye</mat-icon
       >
-    </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-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 e0b57dfcea..d9ed7f1ca8 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.scss
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.scss
@@ -60,3 +60,58 @@ 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%;
+  }
+}
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.scss-theme.scss b/src/app/authorize/components/form-authorize/form-authorize.component.scss-theme.scss
new file mode 100644
index 0000000000..4480c28779
--- /dev/null
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.scss-theme.scss
@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin form-authorize-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .authorize-button {
+    color: $orcid-light-primary-text;
+    background: mat.get-color-from-palette($primary, 700);
+  }
+}
+
+@include form-authorize-theme($orcid-app-theme);
diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.ts b/src/app/authorize/components/form-authorize/form-authorize.component.ts
index 835ce1aa5a..86d15fda78 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.ts
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { forkJoin, Observable, Subject } from 'rxjs'
 import { catchError, map, take, takeUntil } from 'rxjs/operators'
@@ -23,10 +23,14 @@ import { GoogleTagManagerService } from '../../../core/google-tag-manager/google
 @Component({
   selector: 'app-form-authorize',
   templateUrl: './form-authorize.component.html',
-  styleUrls: ['./form-authorize.component.scss'],
+  styleUrls: [
+    './form-authorize.component.scss',
+    './form-authorize.component.scss-theme.scss'
+  ],
   preserveWhitespaces: true,
 })
 export class FormAuthorizeComponent implements OnInit, OnDestroy {
+  @Input() signInUpdatesV1Togglz: boolean
   environment = environment
   $destroy: Subject<boolean> = new Subject<boolean>()
   orcidUrl: string
@@ -146,15 +150,21 @@ export class FormAuthorizeComponent implements OnInit, OnDestroy {
     }
 
     if (scope === '/person/update') {
-      return $localize`:@@authorize.personUpdate:Add/update other information about you (country, keywords, etc.)`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.personUpdate:Add/update other information about you (country, keywords, etc.)` :
+        $localize`:@@authorize.addUpdateInformation:Add/update information about your (country, keywords, etc.)`
     }
 
     if (scope === '/activities/update') {
-      return $localize`:@@authorize.activitiesUpdate:Add/update your research activities (works, affiliations, etc)`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.activitiesUpdate:Add/update your research activities (works, affiliations, etc)` :
+        $localize`:@@authorize.addUpdateReseachActivities:Add/update your research activities (works, affiliations, etc.)`
     }
 
     if (scope === '/read-limited') {
-      return $localize`:@@authorize.readLimited:Read your information with visibility set to Trusted Organizations`
+      return !this.signInUpdatesV1Togglz ?
+        $localize`:@@authorize.readLimited:Read your information with visibility set to Trusted Organizations` :
+        $localize`:@@authorize.readInfomationVisibilityTrustedParties:Read your information with visibility set to Trusted parties`
     }
 
     // For any unreconized scope just use the description  from the backend
diff --git a/src/app/authorize/pages/authorize/authorize.component.html b/src/app/authorize/pages/authorize/authorize.component.html
index b136c437d9..1b9b38d51a 100644
--- a/src/app/authorize/pages/authorize/authorize.component.html
+++ b/src/app/authorize/pages/authorize/authorize.component.html
@@ -2,8 +2,18 @@
   <div class="container">
     <div class="row space-around">
       <div class="col l5 m6 s4">
-        <mat-card class="orcid-wizard-2">
+        <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
diff --git a/src/app/authorize/pages/authorize/authorize.component.scss b/src/app/authorize/pages/authorize/authorize.component.scss
index f16e7a7ffc..21d3e4f338 100644
--- a/src/app/authorize/pages/authorize/authorize.component.scss
+++ b/src/app/authorize/pages/authorize/authorize.component.scss
@@ -10,3 +10,38 @@
 .logo {
   width: 130px;
 }
+
+.authorize-wrapper {
+  padding: 64px;
+  margin-top: 0 !important;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  .orc-font-heading-small {
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  mat-card-title {
+    margin: 0 0 32px 0 !important;
+  }
+
+  mat-card-content {
+    margin: 0px !important;
+  }
+
+  .icon {
+    margin-bottom: 32px !important;
+  }
+
+  mat-divider {
+    margin: 24px 0;
+  }
+
+}
+
+.authorize-wrapper.mobile {
+  padding: 0;
+}
diff --git a/src/app/authorize/pages/authorize/authorize.component.ts b/src/app/authorize/pages/authorize/authorize.component.ts
index 73a1d5592e..16d9a6f74c 100644
--- a/src/app/authorize/pages/authorize/authorize.component.ts
+++ b/src/app/authorize/pages/authorize/authorize.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core'
+import { take } from 'rxjs/operators'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { UserService } from 'src/app/core'
+import { TogglzService } from 'src/app/core/togglz/togglz.service'
 
 @Component({
   templateUrl: './authorize.component.html',
@@ -7,8 +10,15 @@ import { UserService } from 'src/app/core'
   preserveWhitespaces: true,
 })
 export class AuthorizeComponent implements OnInit {
+  platform: PlatformInfo
   showAuthorizationComponent: boolean
-  constructor(_user: UserService) {
+  signInUpdatesV1Togglz = false
+
+  constructor(
+    _user: UserService,
+    private _platformInfo: PlatformInfoService,
+    private _togglz: TogglzService,
+    ) {
     _user.getUserSession().subscribe((session) => {
       if (session.oauthSession && session.oauthSession.error) {
         this.showAuthorizationComponent = false
@@ -16,7 +26,15 @@ export class AuthorizeComponent implements OnInit {
         this.showAuthorizationComponent = true
       }
     })
+    _platformInfo.get().subscribe((platformInfo) => {
+      this.platform = platformInfo
+    })
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  this._togglz
+    .getStateOf('SIGN_IN_UPDATES_V1')
+    .pipe(take(1))
+    .subscribe((value) => (this.signInUpdatesV1Togglz = value))
+  }
 }
diff --git a/src/app/cdk/info-drop-down/info-drop-down.component.html b/src/app/cdk/info-drop-down/info-drop-down.component.html
index 841c1a495f..9b2c72c070 100644
--- a/src/app/cdk/info-drop-down/info-drop-down.component.html
+++ b/src/app/cdk/info-drop-down/info-drop-down.component.html
@@ -1,14 +1,37 @@
-<div
-  class="university-dropdown orc-font-body-large"
-  [ngClass]="{ active: show }"
-  (click)="show = !show"
->
-  <a class="mat-body-2 black-underline-url body-2 black-url" id="app-name">
+<ng-container *ngIf="!signInUpdatesV1Togglz">
+  <div
+    class="university-dropdown orc-font-body-large"
+    [ngClass]="{ active: show }"
+    (click)="show = !show"
+  >
+    <a class="mat-body-2 black-underline-url body-2 black-url" id="app-name">
+      {{ name }}
+    </a>
+    <mat-icon class="large-material-icon" role="presentation">help</mat-icon>
+  </div>
+
+  <div class="description-container" *ngIf="show">
+    {{ description }}
+  </div>
+
+</ng-container>
+
+<ng-container *ngIf="signInUpdatesV1Togglz">
+<div class="row">
+  <b class="orc-font-body m-b-16">
     {{ name }}
+  </b>
+  <a
+    class="underline "
+    [ngClass]="{ 'm-b-16': show }"
+    (click)="show = !show"
+  >
+    <ng-container i18n="@@shared.showDetails" *ngIf="!show">Show details</ng-container>
+    <ng-container i18n="@@shared.hideDetails" *ngIf="show">Hide details</ng-container>
   </a>
-  <mat-icon class="large-material-icon" role="presentation">help</mat-icon>
 </div>
-
-<div class="description-container" *ngIf="show">
+<div class="description-container description-client" *ngIf="show">
   {{ description }}
 </div>
+</ng-container>
+
diff --git a/src/app/cdk/info-drop-down/info-drop-down.component.scss b/src/app/cdk/info-drop-down/info-drop-down.component.scss
index d9e967a4f7..a969d89ebc 100644
--- a/src/app/cdk/info-drop-down/info-drop-down.component.scss
+++ b/src/app/cdk/info-drop-down/info-drop-down.component.scss
@@ -9,6 +9,9 @@
   word-break: break-word;
   box-sizing: border-box;
 }
+.description-client {
+  margin: 0 !important;
+}
 mat-icon {
   margin-top: 2px; // Compensates mat icon bottom with space
   margin-left: 4px;
@@ -28,6 +31,5 @@ mat-icon {
 }
 
 :host {
-  margin-bottom: 8px;
   display: block;
 }
diff --git a/src/app/cdk/info-drop-down/info-drop-down.component.ts b/src/app/cdk/info-drop-down/info-drop-down.component.ts
index 3fb322cd34..df61707120 100644
--- a/src/app/cdk/info-drop-down/info-drop-down.component.ts
+++ b/src/app/cdk/info-drop-down/info-drop-down.component.ts
@@ -11,6 +11,7 @@ import { Component, OnInit, Input } from '@angular/core'
 export class InfoDropDownComponent implements OnInit {
   @Input() name
   @Input() description
+  @Input() signInUpdatesV1Togglz: boolean
   show = false
   constructor() {}
 
diff --git a/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html b/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html
index 3e1f3de1d3..ff3e88a682 100644
--- a/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html
+++ b/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html
@@ -1,6 +1,9 @@
 <a
   *ngIf="delegators?.length || switchToMeAccount"
-  class="mat-button-font"
+  [ngClass]="{
+    'mat-button-font': !signInUpdatesV1Togglz,
+    'underline': signInUpdatesV1Togglz
+  }"
   [matMenuTriggerFor]="menu"
   i18n="@@delegators.switchAccount"
   [attr.aria-label]="labelSwitchAccount"
diff --git a/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.ts b/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.ts
index 5e8948af66..a772ee0159 100644
--- a/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.ts
+++ b/src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.ts
@@ -28,6 +28,7 @@ export class TrustedIndividualsDropdownComponent implements OnInit {
   get trustedIndividuals() {
     return this._trustedIndividuals
   }
+  @Input() signInUpdatesV1Togglz: boolean
   @Output() changeUser = new EventEmitter<Delegator>()
   ngOnInit(): void {}