Merge pull request #4433 from Ocelot-Social-Community/4432-fix-header-logo-rebrand-replacement

chore: 🍰 Refactor Logos

README.md

@@ -13,7 +13,7 @@ ocelot.social is a nonprofit social, action and knowledge network that connects
 * **Action**: Don't just read about how to make the world a better place, but come into **Action** by following provided suggestions on the **Action** tab provided by other people or **Organisations**.
 
 <p align="center">
-  <img src="webapp/static/img/custom/welcome.svg" alt="Ocelot-Social" width="40%" height="40%">
+  <img src="webapp/static/img/custom/logo-squared.svg" alt="ocelot.social" width="40%" height="40%">
 </p>
 
 ## Live demo

backend/src/config/links.js

@@ -1,3 +1,4 @@
+// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding
 export default {
   ORGANIZATION: 'https://ocelot.social',
   DONATE: 'https://ocelot-social.herokuapp.com/donations',

backend/src/config/logos.js

@@ -0,0 +1,10 @@
+// this file is duplicated in `backend/src/config/logos.js` and `webapp/constants/logos.js` and replaced on rebranding
+// this are the paths in the webapp
+export default {
+  LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
+  LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
+  LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
+  LOGO_PASSWORD_RESET_PATH: '/img/custom/logo-squared.svg',
+  LOGO_MAINTENACE_RESET_PATH: '/img/custom/logo-squared.svg',
+}

backend/src/config/metadata.js

@@ -1,7 +1,9 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
 export default {
   APPLICATION_NAME: 'ocelot.social',
   APPLICATION_SHORT_NAME: 'ocelot',
   APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
+  COOKIE_NAME: 'ocelot-social-token',
   ORGANIZATION_NAME: 'ocelot.social Community',
   ORGANIZATION_JURISDICTION: 'City of Angels',
 }

backend/src/middleware/email/templateBuilder.js

@@ -1,10 +1,11 @@
 import mustache from 'mustache'
 import CONFIG from '../../config'
+import logosWebapp from '../../config/logos.js'
 
 import * as templates from './templates'
 
 const from = CONFIG.EMAIL_DEFAULT_SENDER
-const welcomeImageUrl = new URL(`/img/custom/welcome.svg`, CONFIG.CLIENT_URI)
+const welcomeImageUrl = new URL(logosWebapp.LOGO_WELCOME_PATH, CONFIG.CLIENT_URI)
 
 const defaultParams = {
   supportUrl: CONFIG.SUPPORT_URL,

webapp/components/LoginForm/LoginForm.vue

@@ -7,7 +7,7 @@
     <base-card>
       <template #imageColumn>
         <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-          <img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
+          <logo logoType="welcome" />
         </a>
       </template>
       <h2 class="title">{{ $t('login.login') }}</h2>
@@ -52,14 +52,16 @@
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
 import ShowPassword from '../ShowPassword/ShowPassword.vue'
 
 export default {
   components: {
     LocaleSwitch,
+    Logo,
     ShowPassword,
   },
   data() {
@@ -119,9 +121,6 @@ export default {
     margin-top: $space-large;
     margin-bottom: $space-small;
   }
-  .image {
-    width: 100%;
-  }
 }
 
 .password-wrapper {

webapp/components/Logo/Logo.spec.js

@@ -4,18 +4,20 @@ import Logo from './Logo.vue'
 const localVue = global.localVue
 
 describe('Logo.vue', () => {
-  let wrapper
-  let mocks
+  let mocks, propsData, wrapper
 
   beforeEach(() => {
     mocks = {
       $t: jest.fn(),
     }
+    propsData = {
+      logoType: 'header',
+    }
   })
 
   describe('mount', () => {
     const Wrapper = () => {
-      return mount(Logo, { mocks, localVue })
+      return mount(Logo, { mocks, localVue, propsData })
     }
 
     beforeEach(() => {

webapp/components/Logo/Logo.vue

@@ -1,24 +1,47 @@
 <template>
   <component :is="tag" class="ds-logo" :class="[inverse && 'ds-logo-inverse']">
-    <svg-logo v-if="!inverse" class="ds-logo-svg" />
-    <svg-logo-inverse v-else class="ds-logo-svg" />
+    <img
+      v-if="!inverse"
+      class="ds-logo-svg"
+      :alt="metadata.APPLICATION_NAME + ' ' + logo.alt"
+      :src="logo.path"
+      :style="logoWidthStyle"
+    />
+    <img
+      v-else
+      class="ds-logo-svg"
+      :alt="metadata.APPLICATION_NAME + ' ' + logo.alt"
+      :src="logo.path"
+      :style="logoWidthStyle"
+    />
   </component>
 </template>
 
 <script>
-import svgLogo from '~/static/img/custom/Logo-Horizontal.svg'
-import svgLogoInverse from '~/static/img/custom/Logo-Horizontal-Dark.svg'
+import logos from '~/constants/logos.js'
+import metadata from '~/constants/metadata.js'
+
 /**
  * This component displays the brand's logo.
  * @version 1.0.0
  */
 export default {
   name: 'Logo',
-  components: {
-    svgLogo,
-    svgLogoInverse,
-  },
   props: {
+    /**
+     * Logo type
+     */
+    logoType: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Logo width
+     */
+    logoWidth: {
+      type: String,
+      default: null,
+    },
     /**
      * Inverse the logo
      */
@@ -34,6 +57,39 @@ export default {
       default: 'div',
     },
   },
+  data() {
+    const logosObject = {
+      header: { path: logos.LOGO_HEADER_PATH, alt: 'Header', widthDefault: '130px' },
+      welcome: { path: logos.LOGO_WELCOME_PATH, alt: 'Welcome', widthDefault: '200px' },
+      signup: { path: logos.LOGO_SIGNUP_PATH, alt: 'Sign Up', widthDefault: '200px' },
+      logout: { path: logos.LOGO_LOGOUT_PATH, alt: 'Logging Out', widthDefault: '200px' },
+      passwordReset: {
+        path: logos.LOGO_PASSWORD_RESET_PATH,
+        alt: 'Reset Your Password',
+        widthDefault: '200px',
+      },
+      maintenance: {
+        path: logos.LOGO_MAINTENACE_RESET_PATH,
+        alt: 'Under Maintenance',
+        widthDefault: '75%',
+      },
+    }
+    return {
+      logo: logosObject[this.logoType],
+      metadata,
+    }
+  },
+  computed: {
+    logoWidthStyle() {
+      let width = ''
+      if (this.logoWidth === null) {
+        width = this.logo.widthDefault
+      } else {
+        width = this.logoWidth
+      }
+      return `width: ${width};`
+    },
+  },
 }
 </script>
 

webapp/components/Registration/RegistrationSlider.vue

@@ -3,7 +3,7 @@
     <base-card>
       <template #imageColumn>
         <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-          <img class="image" alt="Welcome" src="/img/custom/welcome.svg" />
+          <logo logoType="signup" />
         </a>
       </template>
 
@@ -47,6 +47,7 @@ import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
 import RegistrationSlideCreate from './RegistrationSlideCreate'
 import RegistrationSlideEmail from './RegistrationSlideEmail'
 import RegistrationSlideInvite from './RegistrationSlideInvite'
@@ -58,6 +59,7 @@ export default {
   components: {
     ComponentSlider,
     LocaleSwitch,
+    Logo,
     RegistrationSlideCreate,
     RegistrationSlideEmail,
     RegistrationSlideInvite,

webapp/components/_new/generic/BaseCard/BaseCard.story.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import helpers from '~/storybook/helpers'
+import logos from '~/constants/logos.js'
 import BaseCard from './BaseCard.vue'
 
 storiesOf('Generic/BaseCard', module)
@@ -33,7 +34,7 @@ storiesOf('Generic/BaseCard', module)
     template: `
       <base-card style="width: 600px;">
         <template #imageColumn>
-          <img class="image" alt="Example image" src="/img/custom/welcome.svg" />
+          <img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
         </template>
         <h2 class="title">I am a card heading</h2>
         <p>And I am a paragraph.</p>
@@ -46,7 +47,7 @@ storiesOf('Generic/BaseCard', module)
     template: `
       <base-card style="width: 600px;">
         <template #imageColumn>
-          <img class="image" alt="Example image" src="/img/custom/welcome.svg" />
+          <img class="image" alt="Example image" src="${logos.LOGO_WELCOME_PATH}" />
         </template>
         <h2 class="title">I am a card heading</h2>
         <p>And I am a paragraph.</p>

webapp/constants/links.js

@@ -1,3 +1,4 @@
+// this file is duplicated in `backend/src/config/links.js` and `webapp/constants/links.js` and replaced on rebranding
 export default {
   ORGANIZATION: 'https://ocelot.social',
   DONATE: 'https://ocelot-social.herokuapp.com/donations',

webapp/constants/logos.js

@@ -0,0 +1,10 @@
+// this file is duplicated in `backend/src/config/logos.js` and `webapp/constants/logos.js` and replaced on rebranding
+// this are the paths in the webapp
+export default {
+  LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_SIGNUP_PATH: '/img/custom/logo-squared.svg',
+  LOGO_WELCOME_PATH: '/img/custom/logo-squared.svg',
+  LOGO_LOGOUT_PATH: '/img/custom/logo-squared.svg',
+  LOGO_PASSWORD_RESET_PATH: '/img/custom/logo-squared.svg',
+  LOGO_MAINTENACE_RESET_PATH: '/img/custom/logo-squared.svg',
+}

webapp/constants/metadata.js

@@ -1,8 +1,9 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js` and replaced on rebranding
 export default {
   APPLICATION_NAME: 'ocelot.social',
   APPLICATION_SHORT_NAME: 'ocelot',
   APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
+  COOKIE_NAME: 'ocelot-social-token',
   ORGANIZATION_NAME: 'ocelot.social Community',
   ORGANIZATION_JURISDICTION: 'City of Angels',
-  COOKIE_NAME: 'ocelot-social-token',
 }

webapp/layouts/basic.vue

@@ -6,7 +6,7 @@
           <ds-flex-item width="5.5%" />
           <ds-flex-item style="flex-grow: 1" width="20%">
             <a @click="redirectToRoot">
-              <logo />
+              <logo logoType="header" />
             </a>
           </ds-flex-item>
           <ds-flex-item width="20%" style="flex-grow: 0">

webapp/layouts/default.vue

@@ -6,7 +6,7 @@
           <ds-flex class="main-navigation-flex">
             <ds-flex-item :width="{ base: '142px' }">
               <nuxt-link :to="{ name: 'index' }" v-scroll-to="'.main-navigation'">
-                <logo />
+                <logo logoType="header" />
               </nuxt-link>
             </ds-flex-item>
             <ds-flex-item

webapp/maintenance/source/pages/index.vue

@@ -9,11 +9,7 @@
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
             <ds-space>
               <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-                <img
-                  class="image"
-                  alt="Under maintenance"
-                  src="/img/custom/under-maintenance.svg"
-                />
+                <img class="image" alt="Under maintenance" src="/img/custom/logo-squared.svg" />
               </a>
             </ds-space>
           </ds-flex-item>

webapp/pages/logout.vue

@@ -3,7 +3,7 @@
     <ds-flex>
       <ds-flex-item :width="{ base: '100%' }" centered>
         <ds-space style="text-align: center" margin-top="large" margin-bottom="xxx-small" centered>
-          <img style="width: 200px" alt="Logging out" src="/img/custom/logout.svg" />
+          <logo logoType="logout" />
         </ds-space>
         <ds-space style="text-align: center" margin-top="small" margin-bottom="xxx-small" centered>
           <ds-heading tag="h3" soft>Logging out...</ds-heading>
@@ -14,8 +14,13 @@
 </template>
 
 <script>
+import Logo from '~/components/Logo/Logo'
+
 export default {
   layout: 'blank',
+  components: {
+    Logo,
+  },
   async beforeCreate() {
     await this.$store.dispatch('auth/logout')
     this.$router.replace('/login')

webapp/pages/password-reset.vue

@@ -3,7 +3,7 @@
     <base-card>
       <template #imageColumn>
         <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
-          <img class="image" alt="Reset your password" src="/img/custom/password-reset.svg" />
+          <logo logoType="passwordReset" />
         </a>
       </template>
       <nuxt-child />
@@ -18,10 +18,12 @@
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import Logo from '~/components/Logo/Logo'
 
 export default {
   components: {
     LocaleSwitch,
+    Logo,
   },
   layout: 'no-header',
   data() {

webapp/static/img/custom/logo-horizontal.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="828" height="260" viewBox="0 0 828 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+<svg width="100%" height="100%" viewBox="0 0 828 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
     <g transform="matrix(2.95533,0,0,2.95533,-18.4944,-17.8011)">
         <path d="M50.078,80.683C50.078,83.106 55.132,85.274 56.169,85.541C57.205,85.809 56.888,86.99 59.656,86.414C62.423,85.837 65.412,83.181 68.261,79.517C71.11,75.853 69.025,73.224 66.9,70.435C64.775,67.646 60.169,64.412 59.656,58.155C59.252,53.234 63.3,53.047 64.996,52.876C66.693,52.705 69.497,54.85 70.654,54.602C71.76,54.366 76.418,58.834 76.929,57.234C76.642,55.298 77.838,54.264 79.448,54.2C81.057,54.136 81.623,56.773 82.356,58.155C83.259,59.861 83.998,58.66 84.146,57.229C84.538,53.415 83.26,49.493 83.911,46.972C84.277,45.555 85.282,45.386 86.792,43.731C90.77,39.372 90.818,32.915 89.923,29.827C90.954,28.574 92.317,28.571 92.521,21.538C92.726,14.505 87.451,8.531 86.038,7.721C84.624,6.91 80.605,7.633 79.555,8.51C78.506,9.387 66.486,19.391 64.996,21.1C63.507,22.81 62.752,23.616 63.556,27.206C60.728,24.559 56.073,22.692 50.078,23.64C44.083,22.692 39.427,24.559 36.6,27.206C37.403,23.616 36.649,22.81 35.159,21.1C33.669,19.391 21.65,9.387 20.6,8.51C19.551,7.633 15.532,6.91 14.118,7.721C12.704,8.531 7.43,14.505 7.634,21.538C7.838,28.571 9.201,28.574 10.233,29.827C9.337,32.915 9.385,39.372 13.363,43.731C14.874,45.386 15.878,45.555 16.245,46.972C16.896,49.493 15.617,53.415 16.01,57.229C16.157,58.66 16.896,59.861 17.8,58.155C18.532,56.773 19.099,54.136 20.708,54.2C22.317,54.264 23.514,55.298 23.227,57.234C23.737,58.834 28.396,54.366 29.502,54.602C30.659,54.85 33.462,52.705 35.159,52.876C36.856,53.047 40.904,53.234 40.5,58.155C39.987,64.412 35.381,67.646 33.256,70.435C31.13,73.224 29.046,75.853 31.894,79.517C34.743,83.181 37.732,85.837 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C45.023,85.274 50.078,83.106 50.078,80.683C50.078,78.259 50.078,78.259 50.078,80.683Z" style="fill:rgb(230,121,25);"/>
         <path d="M50,86.57C52.004,86.57 56.013,85.541 56.013,85.541C57.049,85.809 56.732,86.99 59.5,86.414C59.5,86.414 60.917,86.187 61.043,87.1C61.17,88.013 60.255,90.034 57.757,91.5C55.258,92.966 52.642,92.872 50,92.901C47.358,92.872 44.742,92.966 42.243,91.5C39.745,90.034 38.83,88.013 38.957,87.1C39.083,86.187 40.5,86.414 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C43.987,85.541 47.996,86.57 50,86.57Z" style="fill:rgb(134,131,131);"/>

webapp/static/img/custom/logo-squared.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="600" height="570" viewBox="0 0 600 570" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1.04809,0,0,1.04809,274.036,-174.508)">
+<svg width="100%" height="100%" viewBox="0 0 600 570" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.09038,0,0,1.09038,282.489,-181.549)">
         <g transform="matrix(2.95533,0,0,2.95533,-122.994,148.699)">
             <path d="M50.078,80.683C50.078,83.106 55.132,85.274 56.169,85.541C57.205,85.809 56.888,86.99 59.656,86.414C62.423,85.837 65.412,83.181 68.261,79.517C71.11,75.853 69.025,73.224 66.9,70.435C64.775,67.646 60.169,64.412 59.656,58.155C59.252,53.234 63.3,53.047 64.996,52.876C66.693,52.705 69.497,54.85 70.654,54.602C71.76,54.366 76.418,58.834 76.929,57.234C76.642,55.298 77.838,54.264 79.448,54.2C81.057,54.136 81.623,56.773 82.356,58.155C83.259,59.861 83.998,58.66 84.146,57.229C84.538,53.415 83.26,49.493 83.911,46.972C84.277,45.555 85.282,45.386 86.792,43.731C90.77,39.372 90.818,32.915 89.923,29.827C90.954,28.574 92.317,28.571 92.521,21.538C92.726,14.505 87.451,8.531 86.038,7.721C84.624,6.91 80.605,7.633 79.555,8.51C78.506,9.387 66.486,19.391 64.996,21.1C63.507,22.81 62.752,23.616 63.556,27.206C60.728,24.559 56.073,22.692 50.078,23.64C44.083,22.692 39.427,24.559 36.6,27.206C37.403,23.616 36.649,22.81 35.159,21.1C33.669,19.391 21.65,9.387 20.6,8.51C19.551,7.633 15.532,6.91 14.118,7.721C12.704,8.531 7.43,14.505 7.634,21.538C7.838,28.571 9.201,28.574 10.233,29.827C9.337,32.915 9.385,39.372 13.363,43.731C14.874,45.386 15.878,45.555 16.245,46.972C16.896,49.493 15.617,53.415 16.01,57.229C16.157,58.66 16.896,59.861 17.8,58.155C18.532,56.773 19.099,54.136 20.708,54.2C22.317,54.264 23.514,55.298 23.227,57.234C23.737,58.834 28.396,54.366 29.502,54.602C30.659,54.85 33.462,52.705 35.159,52.876C36.856,53.047 40.904,53.234 40.5,58.155C39.987,64.412 35.381,67.646 33.256,70.435C31.13,73.224 29.046,75.853 31.894,79.517C34.743,83.181 37.732,85.837 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C45.023,85.274 50.078,83.106 50.078,80.683C50.078,78.259 50.078,78.259 50.078,80.683Z" style="fill:rgb(230,121,25);"/>
             <path d="M50,86.57C52.004,86.57 56.013,85.541 56.013,85.541C57.049,85.809 56.732,86.99 59.5,86.414C59.5,86.414 60.917,86.187 61.043,87.1C61.17,88.013 60.255,90.034 57.757,91.5C55.258,92.966 52.642,92.872 50,92.901C47.358,92.872 44.742,92.966 42.243,91.5C39.745,90.034 38.83,88.013 38.957,87.1C39.083,86.187 40.5,86.414 40.5,86.414C43.268,86.99 42.951,85.809 43.987,85.541C43.987,85.541 47.996,86.57 50,86.57Z" style="fill:rgb(134,131,131);"/>