Refactor logos, first step

Ocelot-Social-Community · May 18, 2021 · ff6cc30 · ff6cc30
1 parent 453bd7a
commit ff6cc30
Show file tree

Hide file tree

Showing 24 changed files with 103 additions and 343 deletions.
diff --git a/README.md b/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

diff --git a/backend/src/config/links.js b/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',

diff --git a/backend/src/config/logos.js b/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',
+}
diff --git a/backend/src/config/metadata.js b/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',
 }
diff --git a/backend/src/middleware/email/templateBuilder.js b/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,

diff --git a/webapp/components/LoginForm/LoginForm.vue b/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 type="welcome" />
         </a>
       </template>
       <h2 class="title">{{ $t('login.login') }}</h2>
@@ -56,13 +56,15 @@
 </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'
 
 export default {
   components: {
     LocaleSwitch,
+    Logo,
   },
   data() {
     return {
@@ -122,9 +124,9 @@ export default {
     margin-top: $space-large;
     margin-bottom: $space-small;
   }
-  .image {
-    width: 100%;
-  }
+  // .image {
+  //   width: 100%;
+  // }
 }
 
 .password-wrapper {

diff --git a/webapp/components/Logo/Logo.vue b/webapp/components/Logo/Logo.vue
@@ -1,24 +1,35 @@
 <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="logoWidth" />
+    <img v-else class="ds-logo-svg" :alt="metadata.APPLICATION_NAME + ' ' + logo.alt" :src="logo.path" :style="logoWidth" />
   </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
+     */
+    type: {
+      type: String,
+      required: true,
+    },
+    /**
+     * Logo type
+     */
+    width: {
+      type: String,
+      default: null,
+    },
     /**
      * Inverse the logo
      */
@@ -34,6 +45,31 @@ 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.type],
+      metadata,
+    }
+  },
+  computed: {
+    logoWidth() {
+      let width = ''
+      if (this.width === null) {
+        width = this.logo.widthDefault
+      } else {
+        width = this.width
+      }
+      return `width: ${width};`
+    },
+  },
 }
 </script>
 

diff --git a/webapp/components/Registration/RegistrationSlider.vue b/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 type="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,

diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.story.js b/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>

diff --git a/webapp/constants/links.js b/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',

diff --git a/webapp/constants/logos.js b/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',
+}
diff --git a/webapp/constants/metadata.js b/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',
 }
diff --git a/webapp/layouts/basic.vue b/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 type="header" />
             </a>
           </ds-flex-item>
           <ds-flex-item width="20%" style="flex-grow: 0">

diff --git a/webapp/layouts/default.vue b/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 type="header" />
               </nuxt-link>
             </ds-flex-item>
             <ds-flex-item

diff --git a/webapp/maintenance/source/pages/index.vue b/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"
-                />
+                <logo type="maintenance" />
               </a>
             </ds-space>
           </ds-flex-item>
@@ -42,11 +38,13 @@ import emails from '~/constants/emails.js'
 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 {
   layout: 'blank',
   components: {
     LocaleSwitch,
+    Logo,
   },
   data() {
     return { links, metadata, supportEmail: emails.SUPPORT }
@@ -55,8 +53,4 @@ export default {
 </script>
 
 <style lang="scss">
-.image {
-  width: 75%;
-  height: auto;
-}
 </style>
diff --git a/webapp/pages/logout.vue b/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 type="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')

diff --git a/webapp/pages/password-reset.vue b/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 type="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() {

diff --git a/webapp/static/img/custom/Logo-Horizontal-Dark.svg b/webapp/static/img/custom/Logo-Horizontal-Dark.svg
diff --git a/webapp/static/img/custom/Logo-Horizontal.svg b/webapp/static/img/custom/Logo-Horizontal.svg
diff --git a/...p/static/img/custom/under-maintenance.svg → webapp/static/img/custom/logo-squared.svg b/...p/static/img/custom/under-maintenance.svg → webapp/static/img/custom/logo-squared.svg