Feat(collections-branding): Collections branding (#285)

* feat(collections-branding): added collections branding

* feat(collections-branding): changed hero logo height

Author: rnastyuk

src/app/core/components/header/header.component.html

@@ -4,7 +4,6 @@
   <div class="header-dropdown-button ml-auto">
     @if (currentUser()) {
       <p-button
-        class="custom-dark-hover"
         icon="fas fa-chevron-down"
         iconPos="right"
         variant="text"

src/app/core/components/header/header.component.scss

@@ -15,7 +15,7 @@
 
     &:hover,
     &:active {
-      --p-button-text-contrast-color: var(--dark-blue-2);
+      filter: contrast(2);
     }
   }
 }

src/app/features/collections/components/add-to-collection/add-to-collection.component.html

@@ -4,8 +4,11 @@
       class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row"
     >
       <div class="flex gap-3">
-        <i class="collections-icon text-white osf-icon-collections"></i>
-        <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}</h1>
+        @let provider = collectionProvider();
+        @if (provider && provider.brand) {
+          <img class="collections-logo" alt="Collections Logo" height="64" [src]="provider.brand.heroLogoImageUrl" />
+        }
+        <h1 class="collections-heading flex align-items-center">{{ collectionProvider()?.name }}</h1>
       </div>
     </div>
 

src/app/features/collections/components/add-to-collection/add-to-collection.component.ts

@@ -28,7 +28,9 @@ import {
   CreateCollectionSubmission,
 } from '@osf/features/collections/store/add-to-collection';
 import { LoadingSpinnerComponent } from '@shared/components';
+import { HeaderStyleHelper } from '@shared/helpers';
 import { CanDeactivateComponent } from '@shared/models';
+import { BrandService } from '@shared/services';
 import { CollectionsSelectors, GetCollectionProvider } from '@shared/stores';
 import { ProjectsSelectors } from '@shared/stores/projects/projects.selectors';
 
@@ -163,8 +165,20 @@ export class AddToCollectionComponent implements CanDeactivateComponent {
       this.destroyRef.onDestroy(() => {
         this.actions.clearAddToCollectionState();
         this.allowNavigation.set(false);
+
+        HeaderStyleHelper.resetToDefaults();
+        BrandService.resetBranding();
       });
     });
+
+    effect(() => {
+      const provider = this.collectionProvider();
+
+      if (provider && provider.brand) {
+        BrandService.applyBranding(provider.brand);
+        HeaderStyleHelper.applyHeaderStyles(provider.brand.secondaryColor, provider.brand.backgroundColor || '');
+      }
+    });
   }
 
   @HostListener('window:beforeunload', ['$event'])

src/app/features/collections/components/collections-discover/collections-discover.component.html

@@ -4,8 +4,12 @@
       class="collections-sub-header flex justify-content-between flex-column gap-4 mb-4 sm:mb-6 sm:gap-0 sm:flex-row"
     >
       <div class="flex gap-3">
-        <i class="collections-icon text-white osf-icon-collections"></i>
-        <h1 class="flex align-items-center text-white">{{ collectionProvider()?.name }}</h1>
+        @let provider = collectionProvider();
+        @if (provider && provider.brand) {
+          <img class="collections-logo" alt="Collections Logo" height="64" [src]="provider.brand.heroLogoImageUrl" />
+        }
+
+        <h1 class="collections-heading flex align-items-center">{{ collectionProvider()?.name }}</h1>
       </div>
 
       <p-button

src/app/features/collections/components/collections-discover/collections-discover.component.scss

@@ -1,7 +1,6 @@
 @use "assets/styles/mixins" as mix;
 
 :host {
-  --collection-bg-color: #013b5c;
   @include mix.flex-column;
   flex: 1;
 }

src/app/features/collections/components/collections-discover/collections-discover.component.ts

@@ -15,7 +15,9 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { CollectionsHelpDialogComponent, CollectionsMainContentComponent } from '@osf/features/collections/components';
 import { CollectionsQuerySyncService } from '@osf/features/collections/services';
 import { LoadingSpinnerComponent, SearchInputComponent } from '@shared/components';
+import { HeaderStyleHelper } from '@shared/helpers';
 import { CollectionsFilters } from '@shared/models';
+import { BrandService } from '@shared/services';
 import {
   ClearCollections,
   ClearCollectionSubmissions,
@@ -114,6 +116,15 @@ export class CollectionsDiscoverComponent {
       }
     });
 
+    effect(() => {
+      const provider = this.collectionProvider();
+
+      if (provider && provider.brand) {
+        BrandService.applyBranding(provider.brand);
+        HeaderStyleHelper.applyHeaderStyles(provider.brand.secondaryColor, provider.brand.backgroundColor || '');
+      }
+    });
+
     effect(() => {
       const searchText = this.searchText();
       const sortBy = this.sortBy();
@@ -143,6 +154,8 @@ export class CollectionsDiscoverComponent {
     effect(() => {
       this.destroyRef.onDestroy(() => {
         this.actions.clearCollections();
+        HeaderStyleHelper.resetToDefaults();
+        BrandService.resetBranding();
       });
     });
   }

src/app/features/preprints/mappers/preprint-providers.mapper.ts

@@ -28,6 +28,7 @@ export class PreprintProvidersMapper {
         topNavLogoImageUrl: brandRaw.attributes.topnav_logo_image,
         primaryColor: brandRaw.attributes.primary_color,
         secondaryColor: brandRaw.attributes.secondary_color,
+        backgroundColor: brandRaw.attributes.background_color,
       },
       iri: response.links.iri,
       faviconUrl: response.attributes.assets.favicon,

src/app/features/project/overview/components/recent-activity/recent-activity.component.html

@@ -4,7 +4,7 @@ <h2 class="mb-2">{{ 'project.overview.recentActivity.title' | translate }}</h2>
   @if (!isLoading()) {
     @if (formattedActivityLogs().length) {
       @for (activityLog of formattedActivityLogs(); track activityLog.id) {
-        <div class="activities-activity flex justify-content-between gap-3 pb-2 align-items-center">
+        <div class="activities-activity flex justify-content-between pb-2 align-items-center">
           <div [innerHTML]="activityLog.formattedActivity"></div>
           <p class="hidden activity-date sm:block text-right">{{ activityLog.date | date: 'MMM d, y hh:mm a' }}</p>
         </div>

src/app/features/project/overview/components/recent-activity/recent-activity.component.scss

@@ -10,7 +10,7 @@
     border-bottom: 1px solid var.$grey-2;
 
     .activity-date {
-      width: 30%;
+      min-width: 27%;
     }
   }