feat: setting system branding

app/app.js

@@ -18,7 +18,6 @@ const rootEl = document.getElementById('root')
 
 ReactDOM.render(
   <XpubProvider>
-    <h1>Hello.... it&apos;s me.</h1>
     <JournalProvider journal={JSON.parse(JSON.stringify(journal))}>
       <Root history={history} routes={routes} theme={theme} />
     </JournalProvider>

app/brand-instances-configs/coko.json

+{
+  "logoPath": "/public/logo-kotahi.png",
+  "primaryColor": "red",
+  "secondaryColor": "blue",
+  "brandName": "Coko"
+}

app/brand-instances-configs/elife.json

+{
+  "logoPath": "/public/logo-elife.svg",
+  "primaryColor": "#3AAE2A",
+  "secondaryColor": "#9e9e9e",
+  "brandName": "Elife"
+}

app/brandConfig.json

+{
+  "logoPath": "/public/logo-elife.svg",
+  "primaryColor": "#3AAE2A",
+  "secondaryColor": "#9e9e9e",
+  "brandName": "Elife"
+}

app/components/component-login/src/Login.jsx

@@ -5,6 +5,9 @@ import { th, grid, lighten } from '@pubsweet/ui-toolkit'
 import { Button } from '@pubsweet/ui'
 import styled from 'styled-components'
 
+
+import brandConfig from '../../../brandConfig.json'
+
 const getNextUrl = () => {
   const url = new URL(window.location.href)
 
@@ -117,12 +120,7 @@ const Login = ({ logo = null, ...props }) => {
     <Container>
       <Centered>
         <Content>
-          {journalName === 'Aperture' && (
-            <img alt="Aperture" src="/public/logo-aperture.png" />
-          )}
-          {journalName === 'Kotahi' && (
-            <img alt="Kotahi" src="/public/logo-kotahi.png" />
-          )}
+          <img alt={brandConfig.brandName} src={brandConfig.logoPath} />
           <LoginButton
             onClick={() => (window.location = '/auth/orcid')}
             primary

app/theme/index.js

@@ -13,12 +13,14 @@ import {
   Logo,
 } from './elements'
 
+import brandConfig from '../brandConfig.json'
+
 const cokoTheme = {
   /* Colors */
   colorBackground: 'white',
   colorSecondaryBackground: '#f9fafb', // custom
-  colorPrimary: '#3AAE2A',
-  colorSecondary: '#9e9e9e',
+  colorPrimary: brandConfig.primaryColor,
+  colorSecondary: brandConfig.secondaryColor,
   colorFurniture: '#E8E8E8',
   colorBorder: '#AAA',
   colorBackgroundHue: '#f4f5f7',

public/logo-elife.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="136" height="51" viewBox="0 0 136 51"><title>elife-logo-xs</title><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 0h136v51H0z"/><g transform="translate(4 4)"><circle stroke="#BEC3C5" stroke-width="2" fill="#FFF" cx="21.5" cy="21.5" r="20.5"/><path d="M18.454 18.454a2.82 2.82 0 0 0 3.978 0L32.725 8.162a17.444 17.444 0 0 0-4.98-2.976l-9.29 9.29a2.82 2.82 0 0 0 0 3.978" fill="#7CB13F"/><path d="M24.42 24.42a2.82 2.82 0 0 1 0 3.978l-7.955 7.955a2.821 2.821 0 0 1-3.977 0 2.82 2.82 0 0 1 0-3.977l7.955-7.955a2.82 2.82 0 0 1 3.977 0" fill="#D71D62"/><path d="M16.465 20.443a2.82 2.82 0 0 1 0 3.978 2.82 2.82 0 0 1-3.977 0 2.82 2.82 0 0 1 0-3.978 2.82 2.82 0 0 1 3.977 0M26.41 10.5a2.82 2.82 0 0 1 0 3.977 2.82 2.82 0 0 1-3.978 0 2.82 2.82 0 0 1 0-3.978 2.82 2.82 0 0 1 3.977 0" fill="#336A2D"/><path d="M18.454 30.387a2.82 2.82 0 0 1 0 3.977 2.82 2.82 0 0 1-3.977 0 2.82 2.82 0 0 1 0-3.977 2.82 2.82 0 0 1 3.977 0M36.353 12.488a2.82 2.82 0 0 1 0 3.978 2.82 2.82 0 0 1-3.977 0 2.82 2.82 0 0 1 0-3.978 2.82 2.82 0 0 1 3.977 0" fill="#861450"/><path d="M30.387 18.454a2.82 2.82 0 0 1 0 3.978 2.82 2.82 0 0 1-3.978 0 2.82 2.82 0 0 1 0-3.978 2.82 2.82 0 0 1 3.978 0" fill="#D71D62"/><path d="M32.376 28.398a2.82 2.82 0 0 1 0 3.978 2.82 2.82 0 0 1-3.978 0 2.82 2.82 0 0 1 0-3.978 2.82 2.82 0 0 1 3.978 0" fill="#2994D2"/><path d="M16.465 8.51a2.82 2.82 0 0 1 0 3.978 2.82 2.82 0 0 1-3.977 0 2.82 2.82 0 0 1 0-3.977 2.82 2.82 0 0 1 3.977 0" fill="#08589B"/><path d="M10.5 26.41a2.82 2.82 0 0 0-3.978 0l-1.337 1.335a17.437 17.437 0 0 0 2.977 4.98l2.337-2.338a2.82 2.82 0 0 0 0-3.978" fill="#861450"/><path d="M18.454 6.522a2.82 2.82 0 0 0 3.978 0l1.989-1.99c.073-.073.13-.157.193-.237A17.457 17.457 0 0 0 21.438 4c-1.303 0-2.571.148-3.793.42-.03.758.234 1.526.81 2.102" fill="#D71D62"/><path d="M10.5 18.454a2.82 2.82 0 0 0 0-3.977 2.82 2.82 0 0 0-3.978 0L4.807 16.19a17.386 17.386 0 0 0-.594 7.964c.482-.118.94-.354 1.314-.729l4.972-4.972z" fill="#2994D2"/><path d="M34.364 22.432a2.82 2.82 0 0 0 0 3.977c1.016 1.016 2.625 1.076 3.726.205a17.371 17.371 0 0 0 .49-8.354c-.08.064-.164.12-.238.194l-3.978 3.978z" fill="#08589B"/><path d="M26.41 34.364a2.82 2.82 0 0 0-3.978 0l-3.978 3.978c-.074.074-.13.158-.194.238a17.384 17.384 0 0 0 8.354-.489c.87-1.102.81-2.71-.205-3.727" fill="#7CB13F"/></g><g fill="#666B6E"><path d="M61.334 21.815c-1.136 0-2.027.36-2.672 1.08-.644.722-1.013 1.744-1.107 3.068h7.523c-.023-1.325-.369-2.347-1.037-3.068-.668-.72-1.57-1.08-2.707-1.08m.756 16.558c-3.164 0-5.637-.873-7.418-2.619C52.89 34.008 52 31.535 52 28.336c0-3.293.823-5.839 2.47-7.637 1.646-1.8 3.922-2.699 6.829-2.699 2.777 0 4.94.791 6.486 2.373 1.547 1.582 2.32 3.768 2.32 6.556v2.603H57.431c.06 1.523.51 2.712 1.354 3.567.844.856 2.027 1.284 3.551 1.284a14.72 14.72 0 0 0 3.357-.37c1.055-.246 2.157-.638 3.305-1.177v4.148c-.938.469-1.94.818-3.006 1.046-1.066.229-2.367.343-3.902.343M73 38V13h5v21h10v4zM91 38h5V19h-5v19zm0-23.508C91 12.83 91.834 12 93.5 12c1.667 0 2.5.83 2.5 2.492 0 .791-.208 1.407-.625 1.847-.416.44-1.041.661-1.875.661-1.666 0-2.5-.836-2.5-2.508zM112 23h-5v15h-5V23h-3v-3l3-1v-1c0-2.238.608-4.422 1.709-5.453C104.81 11.515 106.574 11 109 11c1.852 0 3.498.275 4.94.826l-1.451 3.683C111.41 15.17 109.914 15 109 15c-.761 0-1.312.226-1.652.677-.34.451-.348 1.62-.348 2.323v1h5v4zM123.334 21.815c-1.136 0-2.028.36-2.672 1.08-.645.722-1.014 1.744-1.108 3.068h7.524c-.023-1.325-.369-2.347-1.037-3.068-.668-.72-1.57-1.08-2.707-1.08m.756 16.558c-3.164 0-5.637-.873-7.418-2.619-1.781-1.746-2.672-4.219-2.672-7.418 0-3.293.824-5.839 2.47-7.637 1.646-1.8 3.922-2.699 6.829-2.699 2.777 0 4.94.791 6.486 2.373 1.547 1.582 2.32 3.768 2.32 6.556v2.603h-12.673c.058 1.523.51 2.712 1.353 3.567.844.856 2.028 1.284 3.551 1.284a14.72 14.72 0 0 0 3.358-.37c1.054-.246 2.156-.638 3.304-1.177v4.148c-.938.469-1.94.818-3.006 1.046-1.066.229-2.367.343-3.902.343"/></g></g></svg>