Feat(collections-branding): Collections branding

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%;
     }
   }
 

src/app/features/registries/mappers/providers.mapper.ts

@@ -26,6 +26,7 @@ export class ProvidersMapper {
         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,
     };

src/app/shared/helpers/header-style.helper.ts

@@ -4,7 +4,7 @@ export class HeaderStyleHelper {
 
     root.style.setProperty('--header-color', textColor);
     root.style.setProperty('--header-background-color', backgroundColor || '');
-    root.style.setProperty('--header-background-image-url', `url(${backgroundImageUrl})`);
+    root.style.setProperty('--header-background-image-url', `url(${backgroundImageUrl || ''})`);
   }
 
   static resetToDefaults() {

src/app/shared/mappers/collections/collections.mapper.ts

@@ -58,6 +58,18 @@ export class CollectionsMapper {
         id: response.relationships.primary_collection.data.id,
         type: response.relationships.primary_collection.data.type,
       },
+      brand: response.embeds.brand.data
+        ? {
+            id: response.embeds.brand.data.id,
+            name: response.embeds.brand.data.attributes.name,
+            heroLogoImageUrl: response.embeds.brand.data.attributes.hero_logo_image,
+            topNavLogoImageUrl: response.embeds.brand.data.attributes.topnav_logo_image,
+            heroBackgroundImageUrl: response.embeds.brand.data.attributes.hero_background_image,
+            primaryColor: response.embeds.brand.data.attributes.primary_color,
+            secondaryColor: response.embeds.brand.data.attributes.secondary_color,
+            backgroundColor: response.embeds.brand.data.attributes.background_color,
+          }
+        : null,
     };
   }
 

src/app/shared/models/brand.json-api.model.ts

@@ -8,5 +8,6 @@ export interface BrandDataJsonApi {
     topnav_logo_image: string;
     primary_color: string;
     secondary_color: string;
+    background_color: string;
   };
 }

src/app/shared/models/brand.model.ts

@@ -6,4 +6,5 @@ export interface Brand {
   topNavLogoImageUrl: string;
   primaryColor: string;
   secondaryColor: string;
+  backgroundColor: string | null;
 }

src/app/shared/models/collections/collections-json-api.models.ts

@@ -1,4 +1,4 @@
-import { JsonApiResponse } from '@shared/models';
+import { BrandDataJsonApi, JsonApiResponse } from '@shared/models';
 
 export interface CollectionProviderResponseJsonApi {
   id: string;
@@ -26,13 +26,24 @@ export interface CollectionProviderResponseJsonApi {
     permissions: string[];
     reviews_workflow: string;
   };
+  embeds: {
+    brand: {
+      data?: BrandDataJsonApi;
+    };
+  };
   relationships: {
     primary_collection: {
       data: {
         id: string;
         type: string;
       };
     };
+    brand: {
+      data: {
+        id: string;
+        type: string;
+      } | null;
+    };
   };
 }
 
@@ -166,10 +177,6 @@ export interface SparseCollectionsResponseJsonApi {
   data: SparseCollectionJsonAi[];
 }
 
-export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse<CollectionProviderResponseJsonApi, null> {
-  data: CollectionProviderResponseJsonApi;
-}
-
 export interface CollectionDetailsGetResponseJsonApi extends JsonApiResponse<CollectionDetailsResponseJsonApi, null> {
   data: CollectionDetailsResponseJsonApi;
 }

src/app/shared/models/collections/collections.models.ts

@@ -1,4 +1,5 @@
 import { CollectionSubmissionReviewAction } from '@osf/features/moderation/models';
+import { Brand } from '@shared/models';
 
 export interface CollectionProvider {
   id: string;
@@ -28,6 +29,7 @@ export interface CollectionProvider {
     id: string;
     type: string;
   };
+  brand: Brand | null;
 }
 
 export interface CollectionFilters {

src/app/shared/services/brand.service.ts

@@ -6,6 +6,7 @@ export class BrandService {
 
     root.style.setProperty('--branding-primary-color', brand.primaryColor);
     root.style.setProperty('--branding-secondary-color', brand.secondaryColor);
+    root.style.setProperty('--branding-background-color', brand.backgroundColor || '');
     root.style.setProperty('--branding-hero-logo-image-url', `url(${brand.topNavLogoImageUrl})`);
     root.style.setProperty('--branding-hero-background-image-url', `url(${brand.heroBackgroundImageUrl})`);
   }
@@ -15,6 +16,7 @@ export class BrandService {
 
     root.style.setProperty('--branding-primary-color', '');
     root.style.setProperty('--branding-secondary-color', '');
+    root.style.setProperty('--branding-background-color', '');
     root.style.setProperty('--branding-hero-logo-image-url', '');
     root.style.setProperty('--branding-hero-background-image-url', '');
   }

src/app/shared/services/collections.service.ts

@@ -15,7 +15,7 @@ import {
   CollectionDetailsGetResponseJsonApi,
   CollectionDetailsResponseJsonApi,
   CollectionProvider,
-  CollectionProviderGetResponseJsonApi,
+  CollectionProviderResponseJsonApi,
   CollectionSubmission,
   CollectionSubmissionActionType,
   CollectionSubmissionJsonApi,
@@ -46,10 +46,10 @@ export class CollectionsService {
   });
 
   getCollectionProvider(collectionName: string): Observable<CollectionProvider> {
-    const url = `${environment.apiUrl}/providers/collections/${collectionName}/`;
+    const url = `${environment.apiUrl}/providers/collections/${collectionName}/?embed=brand`;
 
     return this.jsonApiService
-      .get<CollectionProviderGetResponseJsonApi>(url)
+      .get<JsonApiResponse<CollectionProviderResponseJsonApi, null>>(url)
       .pipe(map((response) => CollectionsMapper.fromGetCollectionProviderResponse(response.data)));
   }
 

src/assets/styles/_variables.scss

@@ -169,6 +169,7 @@ $white-60: var(--white-60);
 
   --branding-primary-color: var(--pr-blue-1);
   --branding-secondary-color: var(--white);
+  --branding-background-color: var(--white);
   --branding-hero-logo-image-url: none;
   --branding-hero-background-image-url: none;
 }

src/assets/styles/components/collections.scss

@@ -1,14 +1,30 @@
 @use "assets/styles/mixins" as mix;
 
 .collections-content {
-  background: var(--collection-bg-color);
+  background: var(--branding-background-color);
   border-top: none;
 
   .collections-sub-header {
     margin: mix.rem(48px) mix.rem(28px);
 
-    .collections-icon {
-      font-size: mix.rem(42px);
+    .collections-logo {
+      background: var(--branding-background-color);
+    }
+
+    .collections-heading {
+      color: var(--branding-secondary-color);
+    }
+
+    .collections-heading-btn {
+      --p-button-primary-background: var(--branding-primary-color);
+      --p-button-primary-border-color: var(--branding-primary-color);
+      --p-button-primary-color: var(--branding-secondary-color);
+      --p-button-primary-hover-background: var(--branding-primary-color);
+      --p-button-primary-hover-border-color: var(--branding-primary-color);
+      --p-button-primary-hover-color: var(--branding-secondary-color);
+      --p-button-primary-active-background: var(--branding-primary-color);
+      --p-button-primary-active-border-color: var(--branding-primary-color);
+      --p-button-primary-active-color: var(--branding-secondary-color);
     }
   }