Updates for branding

CenterForOpenScience · Aug 4, 2023 · ce09855 · ce09855
1 parent b930c43
commit ce09855
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 16 deletions.
diff --git a/app/preprints/index/route.ts b/app/preprints/index/route.ts
@@ -18,7 +18,7 @@ export default class Preprints extends Route {
         try {
             const provider_id = params.provider_id ? params.provider_id : 'osf';
 
-            const provider = await this.store.findRecord('preprint-provider', provider_id);
+            const provider = await this.store.findRecord('preprint-provider', provider_id, {include: 'brand'});
             this.theme.set('providerType', 'preprint');
             this.theme.set('id', provider_id);
 
@@ -37,6 +37,7 @@ export default class Preprints extends Route {
                 provider,
                 taxonomies,
                 brandedProviders,
+                brand: provider.brand.content,
             };
 
         } catch (error) {

diff --git a/app/preprints/index/styles.scss b/app/preprints/index/styles.scss
@@ -13,10 +13,6 @@
         background-color: var(--secondary-color);
         color: var(--primary-color) !important;
 
-        &.osf {
-            background: url('images/default-brand/bg-dark.jpg');
-        }
-
         a:not(:global(.btn)) {
             color: var(--primary-color);
             text-decoration: underline;
@@ -38,6 +34,20 @@
             align-items: center;
             color: var(--primary-color);
 
+            .or-container {
+                font-size: 21px;
+                margin-bottom: 20px;
+                font-weight: 300;
+                line-height: 1.4;
+                color: $color-text-white;
+
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+            }
+
             .example-container {
                 display: flex;
                 justify-content: center;
@@ -83,7 +93,7 @@
 
     /* Preprint providers and become provider */
     .preprint-tool-container {
-        background: url('images/default-brand/bg-dark.jpg');
+        background: var(--hero-background-img-url);
         color: $color-text-white;
         text-shadow: 0 0 5px #506069;
         background-size: cover;
@@ -142,9 +152,7 @@
                     .links {
                         color: $color-text-white;
                         text-decoration: underline;
-
                     }
-
                 }
 
                 .contact {
@@ -156,7 +164,9 @@
         h2 {
             text-transform: capitalize;
         }
-
     }
 
+    .osf-preprint-advisory-container {
+        background-image: none;
+    }
 }
diff --git a/app/preprints/index/template.hbs b/app/preprints/index/template.hbs
@@ -1,9 +1,9 @@
 {{page-title (t 'preprints.title')}}
 
-<div local-class='preprints-page-container' {{with-branding (get-model this.theme.provider.brand) }}
+<div local-class='preprints-page-container'
+    {{with-branding this.model.brand}}
     data-analytics-scope='preprints landing page'
 >
-
     {{!HEADER}}
     <div local-class='preprint-header'>
         <BrandedHeader
@@ -29,7 +29,7 @@
             {{#branded-header.row}}
                 {{#if this.theme.provider.allowSubmissions}}
                     <div local-class='submit-container'>
-                        <div class='lead'>{{t 'preprints.header.or'}}</div>
+                        <div local-class='or-container'>{{t 'preprints.header.or'}}</div>
                         <OsfLink
                             data-test-submit-button
                             data-analytics-name='submit button'
@@ -152,7 +152,10 @@
 
     {{!ADVISORY GROUP}}
     {{#if this.theme.provider.advisoryBoard.length}}
-        <div class='preprint-advisory-container'>
+        <div
+            class='preprint-advisory-container'
+            local-class='{{if this.isOsf 'osf-preprint-advisory-container'}}'
+        >
             <div class='preprint-advisory-inner-container'>
                 {{html-safe this.theme.provider.advisoryBoard 'advisory-board'}}
             </div>

diff --git a/app/styles/_branding.scss b/app/styles/_branding.scss
@@ -2,8 +2,7 @@
     --primary-color: #{$color-osf-primary};
     --secondary-color: #{$color-osf-secondary};
     --navbar-logo-img-url: url('images/default-brand/cos-logo-white.svg');
-    --hero-logo-registries-img-url: url('images/default-brand/osf-registries-white.png');
-    --hero-logo-preprints-img-url: url('images/default-brand/osf-preprints-white.png');
+    --hero-logo-img-url: url('images/default-brand/osf-registries-white.png');
     --hero-background-img-url: url('images/default-brand/bg-dark.jpg');
 }
 

diff --git a/app/styles/_preprint.scss b/app/styles/_preprint.scss
@@ -1,6 +1,7 @@
 // stylelint-disable max-nesting-depth, selector-max-compound-selectors
 
 .preprint-advisory-container {
+    background: var(--hero-background-img-url);
     background-color: $color-bg-gray-lighter;
     border-bottom: 1px solid #6d8a98;
     padding-top: 15px;

diff --git a/lib/osf-components/addon/components/branded-header/styles.scss b/lib/osf-components/addon/components/branded-header/styles.scss
@@ -8,6 +8,7 @@
     justify-content: center;
     align-items: center;
     color: $color-text-white;
+    background: var(--hero-background-img-url);
 
     .lead {
         font-size: 21px;

diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss
@@ -9,7 +9,7 @@
 }
 
 .provider-logo {
-    background: var(--hero-logo-registries-img-url) top center no-repeat;
+    background: var(--hero-logo-img-url) top center no-repeat;
     background-size: contain;
     height: 70px;
     width: 100%;

diff --git a/mirage/scenarios/preprints.ts b/mirage/scenarios/preprints.ts
@@ -19,6 +19,8 @@ function buildOSF(
     const brand = server.create('brand', {
         primaryColor: '#286090',
         secondaryColor: '#fff',
+        heroLogoImage: 'images/default-brand/osf-preprints-white.png',
+        heroBackgroundImage: 'images/default-brand/bg-dark.jpg',
     });
     const currentUserModerator = server.create('moderator',
         { id: currentUser.id, user: currentUser, provider: osf }, 'asAdmin');
@@ -49,6 +51,7 @@ function buildThesisCommons(
     const brand = server.create('brand', {
         primaryColor: '#721a0e',
         secondaryColor: '#fec216',
+        heroBackgroundImage: 'https://singlecolorimage.com/get/fec216/1000x1000',
     });
     const currentUserModerator = server.create('moderator',
         { id: currentUser.id, user: currentUser, provider: thesisCommons }, 'asAdmin');