Preprints branding update (#1922)

-   Ticket: []
-   Feature flag: n/a

## Purpose
- Remove possible failure point by not using preprintProvider.asset
- Add special casing to address nutrixiv's navbar color https://osf.io/preprints/nutrixiv/

## Summary of Changes
- Remove use of ThemeStyles from preprint (this set the navbar logo to use the preprintProvider.asset. square_color_transparent, when we want to just use the brand. topnavLogoImage going forward)
- Add special case for nutrixiv to use a white background similar to biohackrxiv

app/preprints/template.hbs

@@ -1,6 +1,5 @@
 {{page-title this.theme.provider.providerTitle replace=true}}
 <div {{with-branding (get-model this.theme.provider.brand)}}>
-    <ThemeStyles />
     <BrandedNavbar
         @translateKey='collections.general.brand'
         @brandRoute='preprints.discover'

lib/app-components/addon/components/branded-navbar/component.ts

@@ -56,6 +56,14 @@ export default class BrandedNavbar extends Component {
     @alias('theme.provider.id') providerId!: string;
     @alias('theme.provider.brand.primaryColor') brandPrimaryColor!: BrandModel;
 
+    get useWhiteBackground(): boolean {
+        const { provider } = this.theme;
+        if (provider) {
+            return this.theme.providerType === 'preprint' && ['biohackrxiv', 'nutrixiv'].includes(provider.id);
+        }
+        return false;
+    }
+
     @computed('intl.locale', 'theme.{providerType,provider.providerTitle}', 'translateKey')
     get brandTitle(): string {
         if (this.theme.providerType === 'collection') {

lib/app-components/addon/components/branded-navbar/styles.scss

@@ -63,8 +63,8 @@
     background-position-y: center;
     background-size: contain;
     background-repeat: no-repeat;
-    // This is overwritten by theme-styles component,
-    // but if there is no provider.asset.square_color_transparent, we fallback to use the logo off the brand
+    // Preprints uses the brand's navbar logo
+    // Collections uses the theme-styles component and will overwrite this
     background-image: var(--navbar-logo-img-url);
 }
 
@@ -133,7 +133,7 @@
     }
 }
 
-.biohackrxiv-branded-navbar.biohackrxiv-branded-navbar.biohackrxiv-branded-navbar {
+.white-background-branded-navbar.white-background-branded-navbar.white-background-branded-navbar {
     background-color: #fff;
 
     a,

lib/app-components/addon/components/branded-navbar/template.hbs

@@ -3,7 +3,7 @@
         local-class='branded-nav
         {{if (eq this.theme.providerType 'preprint') 'preprint-branded-navbar'}}
         {{if (sufficient-contrast this.brandPrimaryColor '#fff') 'light-text' 'dark-text'}}
-        {{if (eq this.theme.id 'biohackrxiv') 'biohackrxiv-branded-navbar'}}'
+        {{if this.useWhiteBackground 'white-background-branded-navbar'}}'
         class='navbar navbar-inverse navbar-fixed-top'
         id='navbarScope'
     >

mirage/fixtures/preprint-providers.ts

@@ -63,6 +63,12 @@ const preprintProviders: Array<Partial<PreprintProvider>> = [
         preprintWord: 'preprint',
         assets: randomAssets(),
     },
+    {
+        id: 'nutrixiv',
+        name: 'NutriXiv',
+        preprintWord: 'preprint',
+        assets: randomAssets(),
+    },
 ];
 
 export default preprintProviders;

mirage/scenarios/preprints.ts

@@ -37,10 +37,21 @@ export function preprintsScenario(
         description: '<p style="color: black">This is the description for agrixiv!</p>',
     });
 
+    const nutrixiv = server.schema.preprintProviders.find('nutrixiv') as ModelInstance<PreprintProvider>;
+    const nutrixivBrand = server.create('brand', {
+        primaryColor: '#000000',
+        secondaryColor: '#888888',
+        heroBackgroundImage: 'https://singlecolorimage.com/get/4a4a4a/1000x1000',
+    });
+    nutrixiv.update({
+        brand: nutrixivBrand,
+        description: '<p style="color: green">This is the description for nutrixiv!</p>',
+    });
+
     const biohackrxiv = server.schema.preprintProviders.find('biohackrxiv') as ModelInstance<PreprintProvider>;
     const biohackrxivBrand = server.create('brand', {
         primaryColor: '#000000',
-        secondaryColor: '#888888',
+        secondaryColor: '#ccc',
         heroBackgroundImage: 'https://singlecolorimage.com/get/ffffff/1000x1000',
     });
     biohackrxiv.update({