Fix/9084-qa-record-header-spacing-layout-records-with-special-status (#…

…2159)

* style: Update spacing and layout on new public page

* style: Remove padding from first element and add gap

* fix: Add missing deprecated message

* style: Aligh names in mobile version

* fix: Remove whitespace and alig h2 tag

src/app/cdk/side-bar/side-bar/side-bar.component.scss

@@ -19,10 +19,6 @@ app-panel {
   margin-top: 16px;
 }
 
-app-panel:first-of-type {
-  margin-top: 32px;
-}
-
 .orc-font-body {
   margin: unset;
 }

src/app/record/components/record-header/record-header.component.html

@@ -4,10 +4,10 @@
   color="accent"
 ></mat-progress-bar>
 <div class="record-header-wrapper" [ngClass]="{ mobile: !platform.columns12 }">
-  <div class="row container record-header">
+  <div class="row container record-header no-padding">
     <section [id]="'names'" role="region" [attr.aria-label]="regionNames">
       <div
-        class="names-wrapper"
+        class="row names-wrapper"
         *ngIf="
           !userInfo?.RECORD_WITH_ISSUES &&
           (userRecord?.names || userRecord?.otherNames)

src/app/record/components/record-header/record-header.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  padding: 32px;
+  padding: 32px 16px;
   margin-bottom: 32px;
   align-items: flex-start;
   word-break: break-all;
@@ -26,6 +26,8 @@
     }
 
     .names-wrapper {
+      gap: 8px;
+
       .names {
         line-height: 40px;
       }
@@ -76,6 +78,11 @@
 .record-header-wrapper.mobile {
   padding: 32px 16px;
   text-align: center;
+
+  .record-header {
+    justify-content: center;
+  }
+
   .names {
     justify-content: center;
   }

src/app/record/components/record-info/record-info.component.html

@@ -1,6 +1,6 @@
 <section *ngIf="userInfo?.RECORD_WITH_ISSUES || affiliations === 0">
   <div
-    class="container record-info orc-font-body-small"
+    class="container record-info orc-font-body-small no-padding"
     [ngClass]="{ 'no-padding': displayBiography || displaySideBar }"
   >
     <ng-container
@@ -58,6 +58,17 @@
     </ng-container>
 
     <ng-container *ngIf="userInfo.PRIMARY_RECORD">
+      <p>
+        <ng-container i18n="@@topBar.accountDeprecated">
+          This account has been deprecated, please see account
+        </ng-container
+        >&nbsp;<a [href]="userInfo.PRIMARY_RECORD">{{
+          'https:' + baseUrl + userInfo.PRIMARY_RECORD
+        }}</a
+        >&nbsp;<ng-container i18n="@@topBar.accountDeprecated2"
+          >for the latest information
+        </ng-container>
+      </p>
       <p>
         <ng-container i18n="@@topBar.deprecatedRecordIsDuplicate">
           A deprecated record is a duplicate or unwanted ORCID record that has
@@ -76,11 +87,9 @@
       </p>
     </ng-container>
     <ng-container *ngIf="affiliations === 0 && !userInfo?.RECORD_WITH_ISSUES">
-      <p *ngIf="isNamePublic">
-        <b i18n="@@record.noPublicInformation"
-          >No public information available</b
-        >
-      </p>
+      <h2 class="orc-font-body-large" *ngIf="isNamePublic" i18n="@@record.noPublicInformation">
+        No public information available
+      </h2>
       <p>
         <ng-container i18n="@@topBar.recordOwnerNotHaveAdded">
           The record owner may not have added information to their record or the

src/app/record/components/record-info/record-info.component.scss

@@ -1,12 +1,16 @@
 .record-info {
   display: flex;
-  padding: 0px 32px;
+  padding: 0;
   flex-direction: column;
   align-items: start;
-  gap: 32px;
+  gap: 16px;
   flex: 1 0 0;
   align-self: stretch;
 
+  h2 {
+    margin: 0;
+  }
+
   p {
     margin: 0;
     line-height: 21px;

src/app/record/components/record-info/record-info.component.ts

@@ -4,6 +4,7 @@ import { takeUntil } from 'rxjs/operators'
 import { RecordService } from 'src/app/core/record/record.service'
 import { RecordUtil as RecordUtil } from 'src/app/shared/utils/record.util'
 import { UserInfo } from 'src/app/types'
+import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'app-record-info',
@@ -20,6 +21,7 @@ export class RecordInfoComponent implements OnInit {
 
   userInfo: UserInfo
   isNamePublic: boolean
+  baseUrl = environment.BASE_URL
 
   constructor(private _record: RecordService) {}