update branding branch

webapp/assets/styles/imports/_branding.scss

@@ -4,7 +4,66 @@
     *
 */
 
-// <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&display=swap" rel="stylesheet">
+/*
+Font: DOSIS
+@import url(https://fonts.googleapis.com/css2?family=Dosis:wght@400;600&display=swap);
+*/
+
+/* vietnamese */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzlnC_W6EQ.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzlmC_W6EQ.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzloC_U.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzlnC_W6EQ.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzlmC_W6EQ.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Dosis';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('~@/assets/fonts/dosis/v34/HhyaU5sn9vOmLzloC_U.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* END Font:DOSIS */
 
 $font-family-heading: 'Dosis', Helvetica, Arial, Lucida, sans-serif;
 $font-family-text: 'Dosis', Helvetica, Arial, Lucida, sans-serif;
@@ -100,7 +159,7 @@ body {
   font-family: $font-family-text !important;
 }
 
-.ds-button, .ds-chip, .ds-copy-field, .ds-list, .ds-select-search, .ds-tag, .ds-text {
+.os-button, .ds-chip, .ds-copy-field, .ds-list, .ds-select-search, .ds-tag, .ds-text {
   font-family: $font-family-text !important;
 }
 .ds-heading {
@@ -115,11 +174,11 @@ a:hover {
   color: $color-primary-light;
 }
 
-.base-button.--circle.post-add-button-top {
+.os-button.post-add-button-top {
   background-color: $color-secondary-active;
   border-color: $color-secondary-active;
 }
-a:hover > .base-button.--circle.post-add-button-top {
+a:hover > .os-button.post-add-button-top {
   background-color: $color-secondary;
   border-color: $color-secondary-dark;
 }
@@ -168,16 +227,6 @@ a:hover.ds-menu-item-link {
   color: $color-text;
 }
 
-.main-navigation .base-button {
-  color: $color-text;
-
-  &:hover {
-    background-color: $color-primary;
-    color: white;
-    border-color: $color-primary;
-  }
-}
-
 .hc-hashtag a {
   color: $color-primary;
 }
@@ -241,77 +290,39 @@ div.tab-navigation li.Tabs__tab {
   border-bottom-color: $color-primary;
 }
 
-/* ds-button with primary color */
-.ds-button-primary {
+/* os-button outline (non-filled, non-danger) */
+.os-button[data-appearance="outline"]:not([data-variant="danger"]) {
   background-color: transparent;
-  color: $color-headings; // Blue text
-  border-color: $color-headings; // Blue border
-
-  &:hover {
-    background-color: transparent;
-    color: $color-brand; // Red text on hover
-    border-color: $color-brand; // Red border on hover
-  }
-
-  &:active, &.active {
-    background-color: transparent;
-    color: $color-headings; // Blue text when active
-    border-color: $color-text; // Black border when active
-  }
-}
-
-/* ds-button with secondary color */
-.ds-button-secondary {
-  background-color: $color-headings; // Blue background
-  color: white;
-  border-color: $color-headings;
-
-  &:hover {
-    background-color: $color-text; // Dark/black background on hover
-    color: white;
-    border-color: $color-text;
-  }
-
-  &:active, &.active {
-    background-color: $color-headings; // Blue background when active
-    color: white;
-    border-color: $color-headings;
-  }
-}
-
-/* base-button default (non-filled) */
-.base-button:not(.--filled):not(.--danger) {
-  background-color: transparent;
-  color: $color-primary; // Blue text
-  border-color: $color-primary; // Blue border
+  color: $color-primary;
+  border-color: $color-primary;
 
   &:enabled:hover {
     background-color: transparent;
-    color: $color-primary-hover; // Red text on hover
-    border-color: $color-primary-hover; // Red border on hover
+    color: $color-primary-hover;
+    border-color: $color-primary-hover;
   }
 
   &:enabled:active {
     background-color: transparent;
-    color: $color-primary; // Blue text when active
-    border-color: $color-primary-active; // Black border when active
+    color: $color-primary;
+    border-color: $color-primary-active;
   }
 }
 
-/* base-button with filled prop */
-.base-button.--filled {
-  background-color: $color-secondary; // Blue background
+/* os-button filled */
+.os-button[data-appearance="filled"]:not([data-variant="danger"]) {
+  background-color: $color-secondary;
   color: white;
   border-color: $color-secondary;
 
   &:enabled:hover {
-    background-color: $color-secondary-dark; // Dark/black background on hover
+    background-color: $color-secondary-dark;
     color: white;
     border-color: $color-secondary-dark;
   }
 
   &:enabled:active {
-    background-color: $color-secondary; // Blue background when active
+    background-color: $color-secondary;
     color: white;
     border-color: $color-secondary;
   }
@@ -392,7 +403,17 @@ div.ds-input-wrap > input:focus-within.ds-input {
   background-color: $color-filter-menu-background !important;
 }
 
-.editor .base-button {
+.main-navigation .os-button[data-appearance] {
+  color: $color-text;
+
+  &:hover {
+    background-color: $color-primary;
+    color: white;
+    border-color: $color-primary;
+  }
+}
+
+.editor .os-button[data-appearance] {
   color: $color-secondary;
   border-color: $color-secondary;
 

webapp/constants/emails.js

@@ -1,8 +1,8 @@
 // this file is duplicated in `backend/src/config/` and `webapp/constants/` and replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
 export default {
-  SUPPORT_EMAIL: 'devops@ocelot.social',
-  MODERATION_EMAIL: 'devops@ocelot.social',
+  SUPPORT_EMAIL: 'support.darmbulanz@it4c.dev',
+  MODERATION_EMAIL: 'moderator.darmbulanz@it4c.dev',
   // ATTENTION: the following links have to be defined even for internal pages with full URLs as example like 'https://staging.ocelot.social/support', because they are used in e-mails!
-  ORGANIZATION_LINK: 'https://ocelot.social',
-  SUPPORT_LINK: 'https://ocelot.social',
+  ORGANIZATION_LINK: 'https://dioscurides.com',
+  SUPPORT_LINK: 'https://dioscurides.com',
 }

webapp/constants/filter.js

@@ -1,2 +1,2 @@
-export const SHOW_CONTENT_FILTER_HEADER_MENU = true
-export const SHOW_CONTENT_FILTER_MASONRY_GRID = false
+export const SHOW_CONTENT_FILTER_HEADER_MENU = false
+export const SHOW_CONTENT_FILTER_MASONRY_GRID = true

webapp/constants/groups.js

@@ -1,5 +1,5 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
 export const NAME_LENGTH_MIN = 3
 export const NAME_LENGTH_MAX = 50
-export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 3 // with removed HTML tags
+export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 10 // with removed HTML tags
 export const SHOW_GROUP_BUTTON_IN_HEADER = true

webapp/constants/headerMenu.js

@@ -1 +1,13 @@
-export default {}
+export default {
+  MENU: [
+    // {
+    //   nameIdent: 'nameIdent',
+    //   path: '/',
+    // },
+    // {
+    //   nameIdent: 'nameIdent',
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+  ],
+}

webapp/constants/links.js

@@ -5,7 +5,7 @@ import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
 const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
   // if defined it's dominating
   externalLink: {
-    url: 'https://ocelot.social',
+    url: 'https://dioscurides.com',
     target: '_blank',
   },
 
@@ -16,13 +16,14 @@ const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const DONATE = defaultPageParamsPages.DONATE.overwrite({
   // if defined it's dominating
   externalLink: {
-    url: 'https://ocelot.social/en/donate/',
+    // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
+    url: 'https://busfaktor.org/en/spenden',
     target: '_blank',
   },
 
@@ -33,12 +34,14 @@ const DONATE = defaultPageParamsPages.DONATE.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
+  // if defined it's dominating
   externalLink: {
-    url: 'https://ocelot.social/en/imprint/',
+    // we use 'ocelot-social.herokuapp.com' at the moment, because redirections of 'ocelot.social' subpages are not working correctly
+    url: 'https://dioscurides.com',
     target: '_blank',
   },
 
@@ -49,7 +52,7 @@ const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwrite({
@@ -62,7 +65,7 @@ const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwri
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
@@ -75,7 +78,7 @@ const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
@@ -88,7 +91,7 @@ const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const FAQ = defaultPageParamsPages.FAQ.overwrite({
@@ -101,7 +104,7 @@ const FAQ = defaultPageParamsPages.FAQ.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
@@ -118,7 +121,7 @@ const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
     hasContainer: true,
     hasBaseCard: true,
     hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
+    // in case internal page content is here 'branding/locales/html/'
   },
 })
 
@@ -143,7 +146,7 @@ export default {
     DATA_PRIVACY,
     FAQ,
     DONATE,
-    SUPPORT,
     IMPRINT,
+    SUPPORT,
   ],
 }

webapp/constants/logos.js

@@ -1,3 +1,24 @@
 // 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 {}
+export default {
+  LOGO_HEADER_PATH: '/img/custom/logo-horizontal.svg',
+  LOGO_HEADER_WIDTH: '130px',
+  LOGO_HEADER_CLICK: {
+    // externalLink: {
+    //   url: 'https://ocelot.social',
+    //   target: '_blank',
+    // },
+    externalLink: null,
+    internalPath: {
+      to: {
+        name: 'index',
+      },
+      scrollTo: '.main-navigation',
+    },
+  },
+  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,15 +1,16 @@
 // 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.social',
-  APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
+  APPLICATION_NAME: 'Nutriminds.net',
+  APPLICATION_SHORT_NAME: 'Nutriminds',
+  APPLICATION_DESCRIPTION: 'Quorum sensing for experts',
   COOKIE_NAME: 'ocelot-social-token',
-  ORGANIZATION_NAME: 'ocelot.social Community',
-  ORGANIZATION_JURISDICTION: 'City of Angels',
-  THEME_COLOR: 'rgb(23, 181, 63)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
-  OG_IMAGE: '/img/custom/logo-squared.png', // Open Graph image for link previews (Telegram, Discord, etc.) – relative URL, override with absolute URL in branding
+  ORGANIZATION_NAME: 'Dioscurides e.V.',
+  ORGANIZATION_JURISDICTION: 'Schweiz',
+  THEME_COLOR: 'rgb(61, 122, 182)', // $color-primary – as the main color in general. e.g. the color in the background of the app that is visible behind the transparent iPhone status bar to name one use case, or the current color of SVGs to name another use case
+  OG_IMAGE: 'https://os.nutriminds.net/img/custom/logo-squared.png', // Open Graph image for link previews (Telegram, Discord, etc.) – relative URL, override with absolute URL in branding
   OG_IMAGE_ALT: 'ocelot.social Logo', // alt text for the Open Graph image
   OG_IMAGE_WIDTH: '1200', // width of the Open Graph image in pixels
   OG_IMAGE_HEIGHT: '1140', // height of the Open Graph image in pixels
   OG_IMAGE_TYPE: 'image/png', // MIME type of the Open Graph image
 }
+