[CST-5270] Improvement requested from pull-1633

src/app/submission/sections/container/section-container.component.html

@@ -3,9 +3,10 @@
   [submissionId]="submissionId" [sectionType]="sectionData.sectionType" [sectionId]="sectionData.id">
   <ngb-accordion #acc="ngbAccordion" *ngIf="(sectionRef.isEnabled() | async)"
     (panelChange)="sectionRef.sectionChange($event)" activeIds="{{ sectionData.id }}" [destroyOnHide]="false">
-    <ngb-panel id="{{ sectionData.id }}">
+    <ngb-panel id="{{ sectionData.id }}" [type]="sectionRef.isInfo() ? 'alert-info' : ''">
       <ng-template ngbPanelTitle>
-        <span class="float-left section-title" tabindex="0">{{ 'submission.sections.'+sectionData.header | translate
+        <span [ngClass]="{ 'light' : sectionRef.isInfo()}" class="float-left section-title" tabindex="0">{{
+          'submission.sections.'+sectionData.header | translate
           }}</span>
         <div class="d-inline-block float-right">
           <i *ngIf="!(sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
@@ -20,7 +21,7 @@
             class="fas fa-check-circle text-success mr-3"
             title="{{'submission.sections.status.valid.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
-          <i *ngIf="sectionRef.isInfo() " class="fas fa-info-circle text-info mr-3"
+          <i *ngIf="sectionRef.isInfo()" class="fas fa-info-circle text-info mr-3"
             title="{{'submission.sections.status.info.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.info.aria' | translate"></i>
           <a class="close" tabindex="0" role="button"

src/app/submission/sections/container/section-container.component.scss

@@ -10,7 +10,7 @@
 
 // TODO to remove the following when upgrading @ng-bootstrap
 :host ::ng-deep .card:first-of-type {
-  border-bottom: var(--bs-card-border-width) solid  var(--bs-card-border-color) !important;
+  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color) !important;
   border-bottom-left-radius: var(--bs-card-border-radius) !important;
   border-bottom-right-radius: var(--bs-card-border-radius) !important;
 }
@@ -19,3 +19,11 @@
   box-shadow: none !important;
   width: 100%;
 }
+
+:host .light {
+  color: #113d4f;
+}
+
+:host ::ng-deep .bg-alert-info {
+  background-color: #d2e4ea;
+}

src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html

@@ -1,13 +1,4 @@
 <div class="ml-4">
-    <div class="row">
-        <div class="col-12">
-            <p class="m-1">
-                <ds-alert [type]="AlertTypeEnum.Info"
-                    [content]="'submission.sections.sherpa.publisher.policy.openaccess'| translate">
-                </ds-alert>
-            </p>
-        </div>
-    </div>
     <ds-content-accordion *ngFor="let permittedVersions of policy.permittedVersions" [version]="permittedVersions">
     </ds-content-accordion>
     <div class="row" *ngIf="!!policy?.urls">

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html

@@ -1,7 +1,18 @@
-<ds-alert [type]="'alert-info'" *ngIf="hasNoData()" [content]="'submission.sections.sherpa-policy.title-empty'">
-</ds-alert>
+<!-- <ds-alert [type]="'alert-info'" *ngIf="hasNoData()" [content]="'submission.sections.sherpa-policy.title-empty'">
+</ds-alert> -->
 
-<div *ngIf="!hasNoData()" class="d-flex justify-content-end mt-2 mb-2">
+<div>
+    <span>
+        {{'submission.sections.sherpa-policy.title-empty' | translate}}
+    </span>
+</div>
+
+<div *ngIf="!hasNoData()" class="d-flex justify-content-between mt-2 mb-2">
+    <div class="text-information-section mr-2">
+        <span>
+            {{'submission.sections.sherpa.publisher.policy.description' | translate}}
+        </span>
+    </div>
     <button type="button" class="btn btn-secondary pull-right" (click)="refresh()" data-test="refresh-btn">
         <span><i class="fas fa-sync"></i> {{'submission.sections.sherpa.publisher.policy.refresh' | translate}} </span>
     </button>

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.scss

@@ -0,0 +1,3 @@
+.text-information-section {
+    flex: 1;
+}

src/assets/i18n/en.json5

@@ -4001,9 +4001,10 @@
 
   "submission.sections.submit.progressbar.upload": "Upload files",
 
+  "submission.sections.submit.progressbar.sherpaPolicies": "Publisher open access policy information",
 
 
-  "submission.sections.sherpa-policy.title-empty": "No information available",
+  "submission.sections.sherpa-policy.title-empty": "No publisher policy information available. If your work has an associated ISSN, please enter it above to see any related publisher open access policies.",
 
   "submission.sections.status.errors.title": "Errors",
 
@@ -4134,9 +4135,10 @@
 
   "submission.sections.sherpa.publication.information.zetoPub": "Zeto Pub",
 
-
   "submission.sections.sherpa.publisher.policy": "Publisher Policy",
 
+  "submission.sections.sherpa.publisher.policy.description": "The below information was found via Sherpa Romeo. Based on the policies of your publisher, it provides advice regarding whether an embargo may be necessary and/or which files you are allowed to upload. If you have questions, please contact your site administrator via the feedback form in the footer.",
+
   "submission.sections.sherpa.publisher.policy.openaccess": "Open Access pathways permitted by this journal's policy are listed below by article version. Click on a pathway for a more detailed view",
 
   "submission.sections.sherpa.publisher.policy.more.information": "For more information, please see the following links:",