Feat(collections-branding): Collections branding (CenterForOpenScience#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%;
  }
  }