[AAE-15316] - Refactored UserInfoComponent to get typography from theme (#8937)

* [AAE-15316] - Refactored UserInfoComponent to get typography from theme

* AAE-15316: Code improvements

lib/content-services/src/lib/content-user-info/content-user-info.component.html

@@ -55,22 +55,21 @@
                                 [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                         </ng-template>
 
-                        <div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                        <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
                     </mat-card-header>
                     <mat-card-content>
                         <div class="adf-userinfo-supporting-text">
                             <div class="adf-userinfo-detail">
-                                <span id="ecm-full-name"
+                                <h2 id="ecm-full-name"
-                                      class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
+                                      class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
-                                <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
+                                <span id="ecm-email"> {{ecmUser.email}} </span>
-                                <a class="adf-userinfo__detail-profile" href="#/profile">
+                                <a href="#/profile">
                                     {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
                             </div>
                             <div class="adf-userinfo-detail">
                                     <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                         {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
-                                        <span id="ecm-job-title"
+                                        <span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
-                                              class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                     </span>
                             </div>
                         </div>
@@ -90,16 +89,15 @@
                             <div
                                 [outerHTML]="identityUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                         </ng-template>
-                        <div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
+                        <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
                     </mat-card-header>
                     <mat-card-content>
                         <div class="adf-userinfo-supporting-text">
                             <div class="adf-userinfo-detail">
-                                <span id="identity-full-name"
+                                <h2 id="identity-full-name"
-                                      class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
+                                      class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
-                                <span class="adf-userinfo__detail-profile"
+                                <span id="identity-email"> {{identityUser.email}} </span>
-                                      id="identity-email"> {{identityUser.email}} </span>
+                                <a href="#/profile">
-                                <a class="adf-userinfo__detail-profile" href="#/profile">
                                       {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
                             </div>
                         </div>

lib/content-services/src/lib/content-user-info/content-user-info.component.scss

@@ -84,10 +84,6 @@
     }
 
     &-userinfo-supporting-text {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
         overflow: hidden;
         padding: 32px;
         column-count: 2;
@@ -99,28 +95,8 @@
         }
     }
 
-    &-userinfo-title {
-        font-size: var(--theme-title-font-size);
-    }
-
-    &-userinfo__detail-profile {
-        align-items: flex-start;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        display: block;
-        padding: 0;
-        margin: 0;
-    }
-
     &-userinfo__detail-title {
         text-overflow: ellipsis;
-        font-size: var(--theme-subheading-2-font-size);
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        line-height: 20px;
-        align-items: flex-start;
     }
 
     &-userinfo__secondary-info {

lib/core/src/lib/identity-user-info/identity-user-info.component.html

@@ -24,18 +24,14 @@
                 <mat-card class="adf-userinfo-card">
                     <mat-card-header class="adf-userinfo-card-header"
                                      [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                        <div class="adf-userinfo-title" id="identity-username">{{identityUser | fullName}}</div>
+                        <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
                     </mat-card-header>
                     <mat-card-content>
                         <div class="adf-userinfo-supporting-text">
-                            <div class="adf-userinfo-detail">
+                            <h2 id="identity-full-name"
-                                <span id="identity-full-name"
+                                  class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
-                                      class="adf-userinfo__detail-title">{{identityUser | fullName}}</span>
+                            <span id="identity-email"> {{identityUser.email}} </span>
-                                <span class="adf-userinfo__detail-profile"
+                            <a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                                      id="identity-email"> {{identityUser.email}} </span>
-                                <a class="adf-userinfo__detail-profile" href="#/profile">
-                                      {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                            </div>
                         </div>
                     </mat-card-content>
                 </mat-card>

lib/core/src/lib/identity-user-info/identity-user-info.component.scss

@@ -31,18 +31,6 @@
         line-height: var(--adf-identity-user-info-line-height);
     }
 
-    &-userinfo-profile-image {
-        background: var(--adf-identity-user-info-background);
-        text-align: center;
-        border-radius: 90%;
-        width: var(--adf-identity-user-info-width);
-        height: var(--adf-identity-user-info-height);
-        margin-right: 0;
-        cursor: pointer;
-        vertical-align: middle;
-        margin-left: 0;
-    }
-
     &-userinfo-profile-container {
         display: inline-block;
     }
@@ -84,51 +72,19 @@
     }
 
     &-userinfo-supporting-text {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
         overflow: hidden;
         padding: 32px;
         column-count: 2;
         display: flex;
-        justify-content: space-between;
+        flex-direction: column;
 
         @media screen and (max-width: 599px) {
             padding: 10px;
         }
     }
 
-    &-userinfo-title {
-        font-size: var(--theme-title-font-size);
-    }
-
-    &-userinfo__detail-profile {
-        align-items: flex-start;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        display: block;
-        padding: 0;
-        margin: 0;
-    }
-
     &-userinfo__detail-title {
         text-overflow: ellipsis;
-        font-size: var(--theme-subheading-2-font-size);
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        line-height: 20px;
-        align-items: flex-start;
-    }
-
-    &-userinfo__secondary-info {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        align-items: flex-end;
     }
 
     &-userinfo-profile-picture {
@@ -141,36 +97,14 @@
         margin-right: 8px;
     }
 
-    &-userinfo-profile-initials {
-        text-transform: uppercase;
-        background-size: cover;
-        background-color: var(--adf-identity-user-info-background);
-        border-radius: 50%;
-        height: 80px;
-        width: 80px;
-        margin-left: 0;
-        margin-right: 8px;
-        font-size: 35px;
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 78px;
-        overflow: hidden;
-        display: flex;
-        justify-content: space-around;
-    }
-
     &-userinfo-button-profile {
         display: inline-block;
         border: 0;
         vertical-align: middle;
     }
 
-    &-userinfo-detail {
-        text-align: left;
-    }
-
     &-hide-tab .mat-tab-label-active {
-        display: none !important;
+        display: none;
     }
 }
 

lib/process-services/src/lib/process-user-info/process-user-info.component.html

@@ -52,20 +52,19 @@
                                 [outerHTML]="ecmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                         </ng-template>
 
-                        <div class="adf-userinfo-title" id="ecm-username">{{ecmUser | fullName}}</div>
+                        <div class="mat-title" id="ecm-username">{{ecmUser | fullName}}</div>
                     </mat-card-header>
                     <mat-card-content>
                         <div class="adf-userinfo-supporting-text">
                             <div class="adf-userinfo-detail">
-                                  <span id="ecm-full-name"
+                                  <h2 id="ecm-full-name"
-                                        class="adf-userinfo__detail-title">{{ecmUser | fullName}}</span>
+                                        class="adf-userinfo__detail-title">{{ecmUser | fullName}}</h2>
-                                <span class="adf-userinfo__detail-profile" id="ecm-email"> {{ecmUser.email}} </span>
+                                <span id="ecm-email"> {{ecmUser.email}} </span>
                             </div>
                             <div class="adf-userinfo-detail">
                                       <span class="adf-userinfo__secondary-info" id="ecm-job-title-label">
                                           {{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}
-                                          <span id="ecm-job-title"
+                                          <span id="ecm-job-title"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
-                                                class="adf-userinfo__detail-profile"> {{ ecmUser.jobTitle ? ecmUser.jobTitle : 'N/A' }} </span>
                                       </span>
                             </div>
                         </div>
@@ -84,20 +83,19 @@
                             <div
                                 [outerHTML]="bpmUser | usernameInitials:'adf-userinfo-profile-initials adf-hide-small'"></div>
                         </ng-template>
-                        <div class="adf-userinfo-title" id="bpm-username">{{bpmUser | fullName}}</div>
+                        <div class="mat-title" id="bpm-username">{{bpmUser | fullName}}</div>
                     </mat-card-header>
                     <mat-card-content>
                         <div class="adf-userinfo-supporting-text">
                             <div class="adf-userinfo-detail">
-                                <span id="bpm-full-name"
+                                <h2 id="bpm-full-name"
-                                      class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</span>
+                                      class="adf-userinfo__detail-title">{{ bpmUser | fullName }}</h2>
-                                <span class="adf-userinfo__detail-profile" id="bpm-email"> {{bpmUser.email}} </span>
+                                <span id="bpm-email"> {{bpmUser.email}} </span>
                             </div>
                             <div class="adf-userinfo-detail">
                                 <span id="bpm-tenant" class="adf-userinfo__secondary-info">
                                     {{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}
-                                    <span
+                                    <span>{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
-                                        class="adf-userinfo__detail-profile">{{ bpmUser.tenantName ? bpmUser.tenantName : '' }}</span>
                                 </span>
                             </div>
                         </div>

lib/process-services/src/lib/process-user-info/process-user-info.component.scss

@@ -84,10 +84,6 @@
     }
 
     &-userinfo-supporting-text {
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
         overflow: hidden;
         padding: 32px;
         column-count: 2;
@@ -99,28 +95,8 @@
         }
     }
 
-    &-userinfo-title {
-        font-size: var(--theme-title-font-size);
-    }
-
-    &-userinfo__detail-profile {
-        align-items: flex-start;
-        font-size: var(--theme-body-1-font-size);
-        font-weight: 400;
-        letter-spacing: 0;
-        line-height: 18px;
-        display: block;
-        padding: 0;
-        margin: 0;
-    }
-
     &-userinfo__detail-title {
         text-overflow: ellipsis;
-        font-size: var(--theme-subheading-2-font-size);
-        font-weight: 400;
-        letter-spacing: 0.04em;
-        line-height: 20px;
-        align-items: flex-start;
     }
 
     &-userinfo__secondary-info {