+
{{ activityLog.date | date: 'MMM d, y hh:mm a' }}
diff --git a/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss b/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss
index 800d08df0..33ff6e203 100644
--- a/src/app/features/project/overview/components/recent-activity/recent-activity.component.scss
+++ b/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%;
}
}
diff --git a/src/app/features/registries/mappers/providers.mapper.ts b/src/app/features/registries/mappers/providers.mapper.ts
index f2857e480..46139e7b6 100644
--- a/src/app/features/registries/mappers/providers.mapper.ts
+++ b/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,
};
diff --git a/src/app/shared/helpers/header-style.helper.ts b/src/app/shared/helpers/header-style.helper.ts
index 7e11601fd..e40447b77 100644
--- a/src/app/shared/helpers/header-style.helper.ts
+++ b/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() {
diff --git a/src/app/shared/mappers/collections/collections.mapper.ts b/src/app/shared/mappers/collections/collections.mapper.ts
index 2c5740d4c..f50ea46ef 100644
--- a/src/app/shared/mappers/collections/collections.mapper.ts
+++ b/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,
};
}
diff --git a/src/app/shared/models/brand.json-api.model.ts b/src/app/shared/models/brand.json-api.model.ts
index 043736566..cadfea6a6 100644
--- a/src/app/shared/models/brand.json-api.model.ts
+++ b/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;
};
}
diff --git a/src/app/shared/models/brand.model.ts b/src/app/shared/models/brand.model.ts
index d0edbaa69..8e0adb77f 100644
--- a/src/app/shared/models/brand.model.ts
+++ b/src/app/shared/models/brand.model.ts
@@ -6,4 +6,5 @@ export interface Brand {
topNavLogoImageUrl: string;
primaryColor: string;
secondaryColor: string;
+ backgroundColor: string | null;
}
diff --git a/src/app/shared/models/collections/collections-json-api.models.ts b/src/app/shared/models/collections/collections-json-api.models.ts
index 30fa9f6d9..69e6384ad 100644
--- a/src/app/shared/models/collections/collections-json-api.models.ts
+++ b/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,6 +26,11 @@ export interface CollectionProviderResponseJsonApi {
permissions: string[];
reviews_workflow: string;
};
+ embeds: {
+ brand: {
+ data?: BrandDataJsonApi;
+ };
+ };
relationships: {
primary_collection: {
data: {
@@ -33,6 +38,12 @@ export interface CollectionProviderResponseJsonApi {
type: string;
};
};
+ brand: {
+ data: {
+ id: string;
+ type: string;
+ } | null;
+ };
};
}
@@ -166,10 +177,6 @@ export interface SparseCollectionsResponseJsonApi {
data: SparseCollectionJsonAi[];
}
-export interface CollectionProviderGetResponseJsonApi extends JsonApiResponse
{
- data: CollectionProviderResponseJsonApi;
-}
-
export interface CollectionDetailsGetResponseJsonApi extends JsonApiResponse {
data: CollectionDetailsResponseJsonApi;
}
diff --git a/src/app/shared/models/collections/collections.models.ts b/src/app/shared/models/collections/collections.models.ts
index 9de873dda..ff94c7df3 100644
--- a/src/app/shared/models/collections/collections.models.ts
+++ b/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 {
diff --git a/src/app/shared/services/brand.service.ts b/src/app/shared/services/brand.service.ts
index da2f0bc46..054dab0c9 100644
--- a/src/app/shared/services/brand.service.ts
+++ b/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', '');
}
diff --git a/src/app/shared/services/collections.service.ts b/src/app/shared/services/collections.service.ts
index 3d3b02616..809d56e74 100644
--- a/src/app/shared/services/collections.service.ts
+++ b/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 {
- const url = `${environment.apiUrl}/providers/collections/${collectionName}/`;
+ const url = `${environment.apiUrl}/providers/collections/${collectionName}/?embed=brand`;
return this.jsonApiService
- .get(url)
+ .get>(url)
.pipe(map((response) => CollectionsMapper.fromGetCollectionProviderResponse(response.data)));
}
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index 22da43d57..c92991071 100644
--- a/src/assets/styles/_variables.scss
+++ b/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;
}
diff --git a/src/assets/styles/components/collections.scss b/src/assets/styles/components/collections.scss
index ebfdebd5c..c4e7a4eeb 100644
--- a/src/assets/styles/components/collections.scss
+++ b/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);
}
}