From 482c9480f7318467daf09f53a7512bb1e4a43bcc Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 16 Apr 2025 13:07:16 +0200
Subject: [PATCH] Add old styleguide - would need to be migrated to vue3

---
 maintenance/components/maintenance.vue        |   4 +-
 maintenance/constants/categories.js           |   3 -
 maintenance/constants/chat.js                 | 299 ------------------
 maintenance/constants/comment.js              |   3 -
 maintenance/constants/dateTime.js             |   5 -
 maintenance/constants/donation.js             |   1 -
 maintenance/constants/editor.js               |   2 -
 .../constants/{emails.js => emails.ts}        |   0
 maintenance/constants/filter.js               |   2 -
 maintenance/constants/groups.js               |   5 -
 maintenance/constants/headerMenu.js           |   1 -
 maintenance/constants/headerMenuBranded.js    |  27 --
 maintenance/constants/keycodes.js             |   4 -
 maintenance/constants/links.js                | 149 ---------
 maintenance/constants/logos.js                |  24 --
 maintenance/constants/manifest.js             |  10 -
 .../constants/{metadata.js => metadata.ts}    |   0
 maintenance/constants/modals.js               |  11 -
 maintenance/constants/posts.js                |   3 -
 maintenance/constants/registration.js         |   5 -
 .../constants/terms-and-conditions-version.js |   2 -
 maintenance/nuxt.config.ts                    |   2 +-
 maintenance/package-lock.json                 |  59 ++++
 maintenance/package.json                      |   1 +
 maintenance/plugins/styleguide.ts             |   6 +
 maintenance/tsconfig.json                     |   4 +-
 maintenance/types/styleguide.d.ts             |   1 +
 27 files changed, 72 insertions(+), 561 deletions(-)
 delete mode 100644 maintenance/constants/categories.js
 delete mode 100644 maintenance/constants/chat.js
 delete mode 100644 maintenance/constants/comment.js
 delete mode 100644 maintenance/constants/dateTime.js
 delete mode 100644 maintenance/constants/donation.js
 delete mode 100644 maintenance/constants/editor.js
 rename maintenance/constants/{emails.js => emails.ts} (100%)
 delete mode 100644 maintenance/constants/filter.js
 delete mode 100644 maintenance/constants/groups.js
 delete mode 100644 maintenance/constants/headerMenu.js
 delete mode 100644 maintenance/constants/headerMenuBranded.js
 delete mode 100644 maintenance/constants/keycodes.js
 delete mode 100644 maintenance/constants/links.js
 delete mode 100644 maintenance/constants/logos.js
 delete mode 100644 maintenance/constants/manifest.js
 rename maintenance/constants/{metadata.js => metadata.ts} (100%)
 delete mode 100644 maintenance/constants/modals.js
 delete mode 100644 maintenance/constants/posts.js
 delete mode 100644 maintenance/constants/registration.js
 delete mode 100644 maintenance/constants/terms-and-conditions-version.js
 create mode 100644 maintenance/plugins/styleguide.ts
 create mode 100644 maintenance/types/styleguide.d.ts

diff --git a/maintenance/components/maintenance.vue b/maintenance/components/maintenance.vue
index 18998964c..4588a72d8 100644
--- a/maintenance/components/maintenance.vue
+++ b/maintenance/components/maintenance.vue
@@ -44,9 +44,9 @@
   </template>
 
   <script>
-  import emails from '~/constants/emails.js'
+  import emails from '~/constants/emails'
   // import links from '~/constants/links.js'
-  import metadata from '~/constants/metadata.js'
+  import metadata from '~/constants/metadata'
 //  import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
   // import Logo from '~/components/Logo/Logo'
 
diff --git a/maintenance/constants/categories.js b/maintenance/constants/categories.js
deleted file mode 100644
index 64ceb9021..000000000
--- a/maintenance/constants/categories.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// this file is duplicated in `backend/src/constants/metadata.js` and `webapp/constants/metadata.js`
-export const CATEGORIES_MIN = 1
-export const CATEGORIES_MAX = 3
diff --git a/maintenance/constants/chat.js b/maintenance/constants/chat.js
deleted file mode 100644
index c278dfd62..000000000
--- a/maintenance/constants/chat.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import tokens from './../assets/_new/styles/tokens.scss'
-// import branding from './../assets/styles/imports/_branding.scss'
-
-const styleData = tokens
-
-const STYLE = {
-  light: {
-    general: {
-      color: styleData.textColorBase,
-      colorButtonClear: '#1976d2',
-      colorButton: '#fff',
-      backgroundColorButton: '#1976d2',
-      backgroundInput: '#fff',
-      colorPlaceholder: styleData.textColorSoft,
-      colorCaret: '#1976d2',
-      colorSpinner: styleData.colorPrimary,
-      borderStyle: '1px solid #e1e4e8',
-      backgroundScrollIcon: '#fff',
-    },
-
-    container: {
-      border: 'none',
-      borderRadius: styleData.borderRadiusBase,
-      boxShadow: styleData.boxShadowBase,
-    },
-
-    header: {
-      background: styleData.backgroundColorSoft,
-      colorRoomName: styleData.textColorBase,
-      colorRoomInfo: styleData.textColorSoft,
-    },
-
-    footer: {
-      background: styleData.backgroundColorSoft,
-      borderStyleInput: '1px solid #e1e4e8',
-      borderInputSelected: '#1976d2',
-      backgroundReply: styleData.backgroundColorSoft,
-      backgroundTagActive: styleData.backgroundColorSoft,
-      backgroundTag: styleData.backgroundColorBase,
-    },
-
-    content: {
-      background: styleData.backgroundColorBase,
-    },
-
-    sidemenu: {
-      background: '#fff',
-      backgroundHover: '#f6f6f6',
-      backgroundActive: styleData.colorPrimaryLight,
-      colorActive: '#1976d2',
-      borderColorSearch: '#e1e5e8',
-    },
-
-    dropdown: {
-      background: '#fff',
-      backgroundHover: '#f6f6f6',
-    },
-
-    message: {
-      background: styleData.chatMessageBgOthers,
-      backgroundMe: styleData.chatMessageBgMe,
-      color: styleData.chatMessageColor,
-      colorStarted: '#9ca6af',
-      backgroundDeleted: '#dadfe2',
-      backgroundSelected: '#c2dcf2',
-      colorDeleted: '#757e85',
-      colorUsername: '#9ca6af',
-      colorTimestamp: styleData.chatMessageTimestamp,
-      backgroundDate: '#e5effa',
-      colorDate: '#505a62',
-      backgroundSystem: '#e5effa',
-      colorSystem: '#505a62',
-      backgroundMedia: 'rgba(0, 0, 0, 0.15)',
-      backgroundReply: 'rgba(0, 0, 0, 0.08)',
-      colorReplyUsername: '#0a0a0a',
-      colorReply: '#6e6e6e',
-      colorTag: '#0d579c',
-      backgroundImage: '#ddd',
-      colorNewMessages: styleData.chatNewMessageColor,
-      backgroundScrollCounter: styleData.chatRoomBackgroundCounterBadge,
-      colorScrollCounter: styleData.chatRoomColorCounterBadge,
-      backgroundReaction: '#eee',
-      borderStyleReaction: '1px solid #eee',
-      backgroundReactionHover: '#fff',
-      borderStyleReactionHover: '1px solid #ddd',
-      colorReactionCounter: '#0a0a0a',
-      backgroundReactionMe: '#cfecf5',
-      borderStyleReactionMe: '1px solid #3b98b8',
-      backgroundReactionHoverMe: '#cfecf5',
-      borderStyleReactionHoverMe: '1px solid #3b98b8',
-      colorReactionCounterMe: '#0b59b3',
-      backgroundAudioRecord: '#eb4034',
-      backgroundAudioLine: 'rgba(0, 0, 0, 0.15)',
-      backgroundAudioProgress: '#455247',
-      backgroundAudioProgressSelector: '#455247',
-      colorFileExtension: '#757e85',
-    },
-
-    markdown: {
-      background: 'rgba(239, 239, 239, 0.7)',
-      border: 'rgba(212, 212, 212, 0.9)',
-      color: '#e01e5a',
-      colorMulti: '#0a0a0a',
-    },
-
-    room: {
-      colorUsername: '#0a0a0a',
-      colorMessage: '#67717a',
-      colorTimestamp: '#a2aeb8',
-      colorStateOnline: '#4caf50',
-      colorStateOffline: '#9ca6af',
-      backgroundCounterBadge: styleData.chatRoomBackgroundCounterBadge,
-      colorCounterBadge: styleData.chatRoomColorCounterBadge,
-    },
-
-    emoji: {
-      background: '#fff',
-    },
-
-    icons: {
-      search: '#9ca6af',
-      add: styleData.colorPrimary,
-      toggle: styleData.colorNeutral30,
-      menu: styleData.colorNeutral30,
-      close: '#9ca6af',
-      closeImage: '#fff',
-      file: styleData.colorPrimary,
-      paperclip: styleData.colorPrimary,
-      closeOutline: '#000',
-      closePreview: '#fff',
-      send: styleData.colorPrimary,
-      sendDisabled: '#9ca6af',
-      emoji: styleData.colorPrimary,
-      emojiReaction: 'rgba(0, 0, 0, 0.3)',
-      document: styleData.colorPrimary,
-      pencil: '#9e9e9e',
-      checkmark: styleData.chatMessageCheckmark,
-      checkmarkSeen: styleData.chatMessageCheckmarkSeen,
-      eye: '#fff',
-      dropdownMessage: '#fff',
-      dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
-      dropdownRoom: '#9e9e9e',
-      dropdownScroll: '#0a0a0a',
-      microphone: styleData.colorPrimary,
-      audioPlay: '#455247',
-      audioPause: '#455247',
-      audioCancel: '#eb4034',
-      audioConfirm: '#1ba65b',
-    },
-  },
-  dark: {
-    general: {
-      color: '#fff',
-      colorButtonClear: '#fff',
-      colorButton: '#fff',
-      backgroundColorButton: '#1976d2',
-      backgroundInput: '#202223',
-      colorPlaceholder: '#596269',
-      colorCaret: '#fff',
-      colorSpinner: '#fff',
-      borderStyle: 'none',
-      backgroundScrollIcon: '#fff',
-    },
-
-    container: {
-      border: 'none',
-      borderRadius: '4px',
-      boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
-    },
-
-    header: {
-      background: '#181a1b',
-      colorRoomName: '#fff',
-      colorRoomInfo: '#9ca6af',
-    },
-
-    footer: {
-      background: '#131415',
-      borderStyleInput: 'none',
-      borderInputSelected: '#1976d2',
-      backgroundReply: '#1b1c1c',
-      backgroundTagActive: '#1b1c1c',
-      backgroundTag: '#131415',
-    },
-
-    content: {
-      background: '#131415',
-    },
-
-    sidemenu: {
-      background: '#181a1b',
-      backgroundHover: '#202224',
-      backgroundActive: '#151617',
-      colorActive: '#fff',
-      borderColorSearch: '#181a1b',
-    },
-
-    dropdown: {
-      background: '#2a2c33',
-      backgroundHover: '#26282e',
-    },
-
-    message: {
-      background: '#22242a',
-      backgroundMe: '#1f7e80',
-      color: '#fff',
-      colorStarted: '#9ca6af',
-      backgroundDeleted: '#1b1c21',
-      backgroundSelected: '#c2dcf2',
-      colorDeleted: '#a2a5a8',
-      colorUsername: '#b3bac9',
-      colorTimestamp: '#ebedf2',
-      backgroundDate: 'rgba(0, 0, 0, 0.3)',
-      colorDate: '#bec5cc',
-      backgroundSystem: 'rgba(0, 0, 0, 0.3)',
-      colorSystem: '#bec5cc',
-      backgroundMedia: 'rgba(0, 0, 0, 0.18)',
-      backgroundReply: 'rgba(0, 0, 0, 0.18)',
-      colorReplyUsername: '#fff',
-      colorReply: '#d6d6d6',
-      colorTag: '#f0c60a',
-      backgroundImage: '#ddd',
-      colorNewMessages: '#fff',
-      backgroundScrollCounter: '#1976d2',
-      colorScrollCounter: '#fff',
-      backgroundReaction: 'none',
-      borderStyleReaction: 'none',
-      backgroundReactionHover: '#202223',
-      borderStyleReactionHover: 'none',
-      colorReactionCounter: '#fff',
-      backgroundReactionMe: '#4e9ad1',
-      borderStyleReactionMe: 'none',
-      backgroundReactionHoverMe: '#4e9ad1',
-      borderStyleReactionHoverMe: 'none',
-      colorReactionCounterMe: '#fff',
-      backgroundAudioRecord: '#eb4034',
-      backgroundAudioLine: 'rgba(255, 255, 255, 0.15)',
-      backgroundAudioProgress: '#b7d4d3',
-      backgroundAudioProgressSelector: '#b7d4d3',
-      colorFileExtension: '#a2a5a8',
-    },
-
-    markdown: {
-      background: 'rgba(239, 239, 239, 0.7)',
-      border: 'rgba(212, 212, 212, 0.9)',
-      color: '#e01e5a',
-      colorMulti: '#0a0a0a',
-    },
-
-    room: {
-      colorUsername: '#fff',
-      colorMessage: '#6c7278',
-      colorTimestamp: '#6c7278',
-      colorStateOnline: '#4caf50',
-      colorStateOffline: '#596269',
-      backgroundCounterBadge: '#1976d2',
-      colorCounterBadge: '#fff',
-    },
-
-    emoji: {
-      background: '#343740',
-    },
-
-    icons: {
-      search: '#596269',
-      add: '#fff',
-      toggle: '#fff',
-      menu: '#fff',
-      close: '#9ca6af',
-      closeImage: '#fff',
-      file: '#1976d2',
-      paperclip: '#fff',
-      closeOutline: '#fff',
-      closePreview: '#fff',
-      send: '#fff',
-      sendDisabled: '#646a70',
-      emoji: '#fff',
-      emojiReaction: '#fff',
-      document: '#1976d2',
-      pencil: '#ebedf2',
-      checkmark: '#ebedf2',
-      checkmarkSeen: '#f0d90a',
-      eye: '#fff',
-      dropdownMessage: '#fff',
-      dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
-      dropdownRoom: '#fff',
-      dropdownScroll: '#0a0a0a',
-      microphone: '#fff',
-      audioPlay: '#b7d4d3',
-      audioPause: '#b7d4d3',
-      audioCancel: '#eb4034',
-      audioConfirm: '#1ba65b',
-    },
-  },
-}
-
-export default {
-  STYLE,
-}
diff --git a/maintenance/constants/comment.js b/maintenance/constants/comment.js
deleted file mode 100644
index d0a240b49..000000000
--- a/maintenance/constants/comment.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const COMMENT_MIN_LENGTH = 1
-export const COMMENT_MAX_UNTRUNCATED_LENGTH = 1200
-export const COMMENT_TRUNCATE_TO_LENGTH = 180
diff --git a/maintenance/constants/dateTime.js b/maintenance/constants/dateTime.js
deleted file mode 100644
index 25294c172..000000000
--- a/maintenance/constants/dateTime.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
-export default {
-  RELATIVE_DATETIME: true,
-  ABSOLUT_DATETIME_FORMAT: 'P',
-}
diff --git a/maintenance/constants/donation.js b/maintenance/constants/donation.js
deleted file mode 100644
index 3e36ae9a8..000000000
--- a/maintenance/constants/donation.js
+++ /dev/null
@@ -1 +0,0 @@
-export const PROGRESS_BAR_COLOR_TYPE = 'gradient' // 'uni' is the other option
diff --git a/maintenance/constants/editor.js b/maintenance/constants/editor.js
deleted file mode 100644
index ac4e53641..000000000
--- a/maintenance/constants/editor.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const HASHTAG = 'hashtag'
-export const MENTION = 'mention'
diff --git a/maintenance/constants/emails.js b/maintenance/constants/emails.ts
similarity index 100%
rename from maintenance/constants/emails.js
rename to maintenance/constants/emails.ts
diff --git a/maintenance/constants/filter.js b/maintenance/constants/filter.js
deleted file mode 100644
index 00332053b..000000000
--- a/maintenance/constants/filter.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const SHOW_CONTENT_FILTER_HEADER_MENU = false
-export const SHOW_CONTENT_FILTER_MASONRY_GRID = true
diff --git a/maintenance/constants/groups.js b/maintenance/constants/groups.js
deleted file mode 100644
index 029f492e0..000000000
--- a/maintenance/constants/groups.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// 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 SHOW_GROUP_BUTTON_IN_HEADER = true
diff --git a/maintenance/constants/headerMenu.js b/maintenance/constants/headerMenu.js
deleted file mode 100644
index b1c6ea436..000000000
--- a/maintenance/constants/headerMenu.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {}
diff --git a/maintenance/constants/headerMenuBranded.js b/maintenance/constants/headerMenuBranded.js
deleted file mode 100644
index 2acba99ed..000000000
--- a/maintenance/constants/headerMenuBranded.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { merge } from 'lodash'
-import headerMenu from '~/constants/headerMenu.js'
-
-const defaultHeaderMenu = {
-  CUSTOM_BUTTON: {
-    // iconPath: '/img/custom/X',
-    // iconWidth: '28px',
-    // iconAltText: 'X',
-    // toolTipIdent: 'nameIdent',
-    // path: '/',
-    // url: 'https://ocelot.social/en/donate',
-    // target: '_blank',
-  },
-  MENU: [
-    // {
-    //   nameIdent: 'nameIdent',
-    //   path: '/',
-    // },
-    // {
-    //   nameIdent: 'nameIdent',
-    //   url: 'https://ocelot.social',
-    //   target: '_blank',
-    // },
-  ],
-}
-
-export default merge(defaultHeaderMenu, headerMenu)
diff --git a/maintenance/constants/keycodes.js b/maintenance/constants/keycodes.js
deleted file mode 100644
index b34eb8dbe..000000000
--- a/maintenance/constants/keycodes.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export const ARROW_UP = 38
-export const ARROW_DOWN = 40
-export const RETURN = 13
-export const SPACE = 32
diff --git a/maintenance/constants/links.js b/maintenance/constants/links.js
deleted file mode 100644
index a252b98cd..000000000
--- a/maintenance/constants/links.js
+++ /dev/null
@@ -1,149 +0,0 @@
-// this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/constants/
-
-import { defaultPageParamsPages } from '~/components/utils/InternalPages.js'
-
-const ORGANIZATION = defaultPageParamsPages.ORGANIZATION.overwrite({
-  // if defined it's dominating
-  externalLink: {
-    url: 'https://ocelot.social',
-    target: '_blank',
-  },
-
-  internalPage: {
-    // footerIdent: 'site.made', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.made', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.made', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const DONATE = defaultPageParamsPages.DONATE.overwrite({
-  // if defined it's dominating
-  externalLink: {
-    url: 'https://busfaktor.org/en/spenden',
-    target: '_blank',
-  },
-
-  internalPage: {
-    // footerIdent: 'site.donate', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.donate', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.donate', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const IMPRINT = defaultPageParamsPages.IMPRINT.overwrite({
-  externalLink: {
-    url: 'http://ocelot.social/en/impressum',
-    target: '_blank',
-  },
-
-  internalPage: {
-    // footerIdent: 'site.imprint', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.imprint', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.imprint', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const TERMS_AND_CONDITIONS = defaultPageParamsPages.TERMS_AND_CONDITIONS.overwrite({
-  // externalLink: null, // if defined it's dominating
-
-  internalPage: {
-    // footerIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.termsAndConditions', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.termsAndConditions', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const CODE_OF_CONDUCT = defaultPageParamsPages.CODE_OF_CONDUCT.overwrite({
-  // externalLink: null, // if defined it's dominating
-
-  internalPage: {
-    // footerIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.code-of-conduct', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.code-of-conduct', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const DATA_PRIVACY = defaultPageParamsPages.DATA_PRIVACY.overwrite({
-  // externalLink: null, // if defined it's dominating
-
-  internalPage: {
-    // footerIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.data-privacy', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.data-privacy', // localized string identifier, on null it's hidden, if undefined default is used
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const FAQ = defaultPageParamsPages.FAQ.overwrite({
-  // externalLink: null, // if defined it's dominating
-
-  internalPage: {
-    // footerIdent: 'site.faq', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.faq', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.faq', // on null default is used, on empty string it's hidden
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-const SUPPORT = defaultPageParamsPages.SUPPORT.overwrite({
-  // if defined it's dominating
-  externalLink: {
-    url: 'https://ocelot.social',
-    target: '_blank',
-  },
-
-  internalPage: {
-    // footerIdent: 'site.support', // localized string identifier, if undefined default is used
-    // headTitleIdent: 'site.support', // localized string identifier, if undefined default is used
-    // headlineIdent: 'site.support', // on null default is used, on empty string it's hidden
-    hasContainer: true,
-    hasBaseCard: true,
-    hasLoginInHeader: true,
-    // in case internal page content is here 'webapp/locales/html/'
-  },
-})
-
-export default {
-  LANDING_PAGE: '/login', // examples: '/login', '/registration', '/organization', or external 'https://ocelot.social'
-
-  // you can find and store templates for 👇🏼 at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/
-
-  ORGANIZATION,
-  DONATE,
-  IMPRINT,
-  TERMS_AND_CONDITIONS,
-  CODE_OF_CONDUCT,
-  DATA_PRIVACY,
-  FAQ,
-  SUPPORT,
-
-  FOOTER_LINK_LIST: [
-    ORGANIZATION,
-    TERMS_AND_CONDITIONS,
-    CODE_OF_CONDUCT,
-    DATA_PRIVACY,
-    FAQ,
-    DONATE,
-    SUPPORT,
-    IMPRINT,
-  ],
-}
diff --git a/maintenance/constants/logos.js b/maintenance/constants/logos.js
deleted file mode 100644
index 714e78a2c..000000000
--- a/maintenance/constants/logos.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// 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_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',
-}
diff --git a/maintenance/constants/manifest.js b/maintenance/constants/manifest.js
deleted file mode 100644
index 653f9f6fc..000000000
--- a/maintenance/constants/manifest.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import metadata from './metadata.js'
-const { APPLICATION_NAME, APPLICATION_SHORT_NAME, APPLICATION_DESCRIPTION, THEME_COLOR } = metadata
-
-export default {
-  name: APPLICATION_NAME,
-  short_name: APPLICATION_SHORT_NAME,
-  description: APPLICATION_DESCRIPTION,
-  theme_color: THEME_COLOR,
-  lang: 'en',
-}
diff --git a/maintenance/constants/metadata.js b/maintenance/constants/metadata.ts
similarity index 100%
rename from maintenance/constants/metadata.js
rename to maintenance/constants/metadata.ts
diff --git a/maintenance/constants/modals.js b/maintenance/constants/modals.js
deleted file mode 100644
index 6011b8b88..000000000
--- a/maintenance/constants/modals.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// this list equals to enums in GraphQL schema file "backend/src/schema/types/type/FILED.gql"
-export const valuesReasonCategoryOptions = [
-  'discrimination_etc',
-  'pornographic_content_links',
-  'glorific_trivia_of_cruel_inhuman_acts',
-  'doxing',
-  'intentional_intimidation_stalking_persecution',
-  'advert_products_services_commercial',
-  'criminal_behavior_violation_german_law',
-  'other',
-]
diff --git a/maintenance/constants/posts.js b/maintenance/constants/posts.js
deleted file mode 100644
index 93f387c88..000000000
--- a/maintenance/constants/posts.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export const first = 12
-export const offset = 0
-export const POST_ADD_BUTTON_POSITION_TOP = true
diff --git a/maintenance/constants/registration.js b/maintenance/constants/registration.js
deleted file mode 100644
index 9e63e478e..000000000
--- a/maintenance/constants/registration.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
-export default {
-  NONCE_LENGTH: 5,
-  INVITE_CODE_LENGTH: 6,
-}
diff --git a/maintenance/constants/terms-and-conditions-version.js b/maintenance/constants/terms-and-conditions-version.js
deleted file mode 100644
index 754341b11..000000000
--- a/maintenance/constants/terms-and-conditions-version.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// please change also version in file "cypress/constants/terms-and-conditions-version.js"
-export const VERSION = '0.0.4'
diff --git a/maintenance/nuxt.config.ts b/maintenance/nuxt.config.ts
index aa32bb4f3..300a88f6a 100644
--- a/maintenance/nuxt.config.ts
+++ b/maintenance/nuxt.config.ts
@@ -21,4 +21,4 @@ export default defineNuxtConfig({
       }
     },
   },
-})
\ No newline at end of file
+})
diff --git a/maintenance/package-lock.json b/maintenance/package-lock.json
index c01699843..110485836 100644
--- a/maintenance/package-lock.json
+++ b/maintenance/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@human-connection/styleguide": "^0.5.22",
         "@nuxt/eslint": "^1.3.0",
         "@nuxt/fonts": "^0.11.1",
         "@nuxt/icon": "^1.12.0",
@@ -1372,6 +1373,48 @@
         "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/@human-connection/styleguide": {
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@human-connection/styleguide/-/styleguide-0.5.22.tgz",
+      "integrity": "sha512-zYDhWWoDIEcUhAJPSrb2azBPxBfcr6igVtTx1Bz/FNMW2bIWfZIRv9U4LaJ9RG/GgjKNcVE+OPdB8zCcwqyQyA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^2.6.10"
+      }
+    },
+    "node_modules/@human-connection/styleguide/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
+      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "dependencies": {
+        "@babel/parser": "^7.23.5",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      },
+      "optionalDependencies": {
+        "prettier": "^1.18.2 || ^2.0.0"
+      }
+    },
+    "node_modules/@human-connection/styleguide/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@human-connection/styleguide/node_modules/vue": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
+      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
+      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.16",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -10609,6 +10652,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
diff --git a/maintenance/package.json b/maintenance/package.json
index e9018cf35..281942233 100644
--- a/maintenance/package.json
+++ b/maintenance/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@human-connection/styleguide": "^0.5.22",
     "@nuxt/eslint": "^1.3.0",
     "@nuxt/fonts": "^0.11.1",
     "@nuxt/icon": "^1.12.0",
diff --git a/maintenance/plugins/styleguide.ts b/maintenance/plugins/styleguide.ts
new file mode 100644
index 000000000..3d85fc7ae
--- /dev/null
+++ b/maintenance/plugins/styleguide.ts
@@ -0,0 +1,6 @@
+import Styleguide from '@human-connection/styleguide'
+import '@human-connection/styleguide/dist/system.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.use(Styleguide)
+})
diff --git a/maintenance/tsconfig.json b/maintenance/tsconfig.json
index 30dd73ded..432674fe5 100644
--- a/maintenance/tsconfig.json
+++ b/maintenance/tsconfig.json
@@ -6,6 +6,6 @@
       "~": [
         "./*"
       ],
-    }
-  }
+    },
+  },
 }
diff --git a/maintenance/types/styleguide.d.ts b/maintenance/types/styleguide.d.ts
new file mode 100644
index 000000000..04ecd365b
--- /dev/null
+++ b/maintenance/types/styleguide.d.ts
@@ -0,0 +1 @@
+declare module '@human-connection/styleguide';