From a5ee90a95d0e7b8562a2dac8d8b0a8455fd00356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 28 Apr 2025 15:32:23 +0200
Subject: [PATCH] fix(webapp): refine little things (#8382)

* Refine locals of some internal pages headlines

* Fix tool tip text

* Fix 'email' -> 'e-mail'

* Syncronize 'metadata.ts' with webapp

* Refine e-mail notifications

* Adjust notification settings buttons

* Refine third party setting

* Fix post teaser counter icon tooltips translations

* Refine e-mail notifications

* Refine third party setting

* notification spec snapshot

---------

Co-authored-by: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
---
 backend/src/config/metadata.ts                |  3 +-
 webapp/components/PostTeaser/PostTeaser.vue   | 20 ++++-
 webapp/locales/de.json                        | 32 ++++----
 webapp/locales/en.json                        | 34 ++++----
 .../__snapshots__/notifications.spec.js.snap  | 79 ++++++++++---------
 webapp/pages/settings/embeds.vue              | 47 +++++++----
 webapp/pages/settings/notifications.vue       | 32 +++++---
 7 files changed, 147 insertions(+), 100 deletions(-)

diff --git a/backend/src/config/metadata.ts b/backend/src/config/metadata.ts
index 282fcb655..9c87818ae 100644
--- a/backend/src/config/metadata.ts
+++ b/backend/src/config/metadata.ts
@@ -1,9 +1,10 @@
 // this file is duplicated in `backend/src/config/metadata` and `webapp/constants/metadata.js` and replaced on rebranding
 export default {
   APPLICATION_NAME: 'ocelot.social',
-  APPLICATION_SHORT_NAME: 'ocelot',
+  APPLICATION_SHORT_NAME: 'ocelot.social',
   APPLICATION_DESCRIPTION: 'ocelot.social Community Network',
   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
 }
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index ad43a9d31..32a07d5a3 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -72,22 +72,34 @@
         <counter-icon
           icon="heart-o"
           :count="post.shoutedCount"
-          :title="$t('contribution.amount-shouts', { amount: post.shoutedCount })"
+          v-tooltip="{
+            content: $t('contribution.amount-shouts', { amount: post.shoutedCount }),
+            placement: 'bottom-start',
+          }"
         />
         <counter-icon
           icon="comments"
           :count="post.commentsCount"
-          :title="$t('contribution.amount-comments', { amount: post.commentsCount })"
+          v-tooltip="{
+            content: $t('contribution.amount-comments', { amount: post.commentsCount }),
+            placement: 'bottom-start',
+          }"
         />
         <counter-icon
           icon="hand-pointer"
           :count="post.clickedCount"
-          :title="$t('contribution.amount-clicks', { amount: post.clickedCount })"
+          v-tooltip="{
+            content: $t('contribution.amount-clicks', { amount: post.clickedCount }),
+            placement: 'bottom-start',
+          }"
         />
         <counter-icon
           icon="eye"
           :count="post.viewedTeaserCount"
-          :title="$t('contribution.amount-views', { amount: post.viewedTeaserCount })"
+          v-tooltip="{
+            content: $t('contribution.amount-views', { amount: post.viewedTeaserCount }),
+            placement: 'bottom-start',
+          }"
         />
         <client-only>
           <content-menu
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 6b588f746..96a2b323a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -267,10 +267,10 @@
     }
   },
   "contribution": {
-    "amount-clicks": "{amount} clicks",
-    "amount-comments": "{amount} comments",
-    "amount-shouts": "{amount} recommendations",
-    "amount-views": "{amount} views",
+    "amount-clicks": "{amount} Klicks",
+    "amount-comments": "{amount} Kommentare",
+    "amount-shouts": "{amount} Empfehlungen",
+    "amount-views": "{amount} Aurufe",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Themen ausgewählt"
     },
@@ -618,7 +618,7 @@
       "tooltip": "Landkarte"
     },
     "notifications": {
-      "tooltip": "Banachrichtigungen"
+      "tooltip": "Benachrichtigungen"
     }
   },
   "index": {
@@ -1082,20 +1082,20 @@
     "name": "Einstellungen",
     "notifications": {
       "chat": "Chat",
-      "chatMessage": "Nachricht erhalten während Abwesenheit",
+      "chatMessage": "Nachricht erhalten während Abwesenheit.",
       "checkAll": "Alle auswählen",
-      "commentOnObservedPost": "Kommentare zu beobachteten Beiträgen",
-      "followingUsers": "Ein Nutzer dem ich folge veröffentlichte einen neuen Beitrag",
+      "commentOnObservedPost": "Kommentare zu beobachteten Beiträgen.",
+      "followingUsers": "Ein Nutzer dem ich folge veröffentlichte einen neuen Beitrag.",
       "group": "Gruppen",
-      "groupMemberJoined": "Ein Mitglied ist deiner Gruppe beigetreten",
-      "groupMemberLeft": "Ein Mitglied hat deine Gruppe verlassen",
-      "groupMemberRemoved": "Du wurdest aus einer Gruppe entfernt",
-      "groupMemberRoleChanged": "Deine Rolle in einer Gruppe wurde geändert",
-      "mention": "Ich wurde erwähnt",
-      "name": "Benachrichtigungen per Email",
+      "groupMemberJoined": "Ein Mitglied ist deiner Gruppe beigetreten.",
+      "groupMemberLeft": "Ein Mitglied hat deine Gruppe verlassen.",
+      "groupMemberRemoved": "Du wurdest aus einer Gruppe entfernt.",
+      "groupMemberRoleChanged": "Deine Rolle in einer Gruppe wurde geändert oder du wurdest eingeladen.",
+      "mention": "Ich wurde erwähnt.",
+      "name": "Benachrichtigungen per E-Mail",
       "post": "Beiträge und Kommentare",
-      "postByFollowedUser": "Beitrag von einem Nutzer, dem ich folge",
-      "postInGroup": "Beitrag in einer Gruppe, die ich beobachte",
+      "postByFollowedUser": "Beitrag von einem Nutzer, dem ich folge.",
+      "postInGroup": "Beitrag in einer Gruppe, die ich beobachte.",
       "send-email-notifications": "Sende E-Mail-Benachrichtigungen",
       "success-update": "Benachrichtigungs-Einstellungen gespeichert!",
       "uncheckAll": "Alle abwählen"
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 24fd16440..760937b06 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -267,10 +267,10 @@
     }
   },
   "contribution": {
-    "amount-clicks": "{amount} clicks",
-    "amount-comments": "{amount} comments",
-    "amount-shouts": "{amount} recommendations",
-    "amount-views": "{amount} views",
+    "amount-clicks": "{amount} Clicks",
+    "amount-comments": "{amount} Comments",
+    "amount-shouts": "{amount} Recommendations",
+    "amount-views": "{amount} Views",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} topics selected"
     },
@@ -1082,20 +1082,20 @@
     "name": "Settings",
     "notifications": {
       "chat": "Chat",
-      "chatMessage": "Message received while absent",
+      "chatMessage": "Message received while absent.",
       "checkAll": "Check all",
-      "commentOnObservedPost": "Comments on observed posts",
-      "followingUsers": "User I follow published a new post",
+      "commentOnObservedPost": "Comments on observed posts.",
+      "followingUsers": "User I follow published a new post.",
       "group": "Groups",
-      "groupMemberJoined": "Member joined a group I own",
-      "groupMemberLeft": "Member left a group I own",
-      "groupMemberRemoved": "I was removed from a group",
-      "groupMemberRoleChanged": "My role in a group was changed",
-      "mention": "I was mentioned",
-      "name": "Email Notifications",
+      "groupMemberJoined": "Member joined a group I own.",
+      "groupMemberLeft": "Member left a group I own.",
+      "groupMemberRemoved": "I was removed from a group.",
+      "groupMemberRoleChanged": "Your role in a group changed or you were invited.",
+      "mention": "I was mentioned.",
+      "name": "E-Mail Notifications",
       "post": "Posts and comments",
-      "postByFollowedUser": "Posts by users I follow",
-      "postInGroup": "Post in a group I am a member of",
+      "postByFollowedUser": "Posts by users I follow.",
+      "postInGroup": "Post in a group I am a member of.",
       "send-email-notifications": "Send e-mail notifications",
       "success-update": "Notifications settings saved!",
       "uncheckAll": "Uncheck all"
@@ -1158,7 +1158,7 @@
     "bank": "bank account",
     "code-of-conduct": "Code of Conduct",
     "contact": "Contact",
-    "data-privacy": "Data privacy",
+    "data-privacy": "Data Privacy",
     "donate": "Donate",
     "error-occurred": "An error occurred.",
     "faq": "FAQ",
@@ -1167,7 +1167,7 @@
     "made": "Made with ❤️",
     "register": "Registry number",
     "support": "Support",
-    "termsAndConditions": "Terms and conditions",
+    "termsAndConditions": "Terms and Conditions",
     "thanks": "Thanks!"
   },
   "termsAndConditions": {
diff --git a/webapp/pages/settings/__snapshots__/notifications.spec.js.snap b/webapp/pages/settings/__snapshots__/notifications.spec.js.snap
index 0b70393ee..fd2c2f56c 100644
--- a/webapp/pages/settings/__snapshots__/notifications.spec.js.snap
+++ b/webapp/pages/settings/__snapshots__/notifications.spec.js.snap
@@ -12,11 +12,11 @@ exports[`notifications.vue mount renders 1`] = `
    
   <div
     class="ds-space"
-    style="margin-top: 24px; margin-bottom: 32px;"
+    style="margin-top: 16px; margin-bottom: 16px;"
   >
     <div
       class="ds-space"
-      style="margin-bottom: 16px;"
+      style="margin-bottom: 8px;"
     >
       <h4>
         settings.notifications.post
@@ -66,11 +66,11 @@ exports[`notifications.vue mount renders 1`] = `
   </div>
   <div
     class="ds-space"
-    style="margin-top: 24px; margin-bottom: 32px;"
+    style="margin-top: 16px; margin-bottom: 16px;"
   >
     <div
       class="ds-space"
-      style="margin-bottom: 16px;"
+      style="margin-bottom: 8px;"
     >
       <h4>
         settings.notifications.group
@@ -155,42 +155,47 @@ exports[`notifications.vue mount renders 1`] = `
     </div>
   </div>
    
-  <button
-    class="base-button"
-    type="button"
+  <div
+    class="ds-space"
+    style="margin-top: 24px; margin-bottom: 8px;"
   >
-    <!---->
+    <button
+      class="base-button"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      settings.notifications.checkAll
+    
+    </button>
      
-    <!---->
+    <button
+      class="base-button"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      settings.notifications.uncheckAll
+    
+    </button>
      
-    settings.notifications.checkAll
-  
-  </button>
-   
-  <button
-    class="base-button"
-    type="button"
-  >
-    <!---->
-     
-    <!---->
-     
-    settings.notifications.uncheckAll
-  
-  </button>
-   
-  <button
-    class="save-button base-button --filled"
-    disabled="disabled"
-    type="button"
-  >
-    <!---->
-     
-    <!---->
-     
-    actions.save
-  
-  </button>
+    <button
+      class="save-button base-button --filled"
+      disabled="disabled"
+      type="button"
+    >
+      <!---->
+       
+      <!---->
+       
+      actions.save
+    
+    </button>
+  </div>
    
   <!---->
 </article>
diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue
index 53db65e5e..aee47dfe7 100644
--- a/webapp/pages/settings/embeds.vue
+++ b/webapp/pages/settings/embeds.vue
@@ -17,20 +17,29 @@
       <ds-text>
         {{ $t('settings.embeds.status.change.question') }}
       </ds-text>
-      <base-button @click="submit" :filled="!disabled" :disabled="!disabled">
-        {{ $t('settings.embeds.status.change.deny') }}
-      </base-button>
-      <base-button @click="submit" :filled="disabled" :disabled="disabled">
-        {{ $t('settings.embeds.status.change.allow') }}
-      </base-button>
-
-      <p>{{ $t('settings.embeds.info-description') }}</p>
-      <ul>
-        <li v-for="provider in providers" :key="provider.provider_name">
-          {{ provider.provider_name }},
-          <small>{{ provider.provider_url }}</small>
-        </li>
-      </ul>
+      <ds-space margin-top="small" margin-bottom="base">
+        <base-button @click="submit" :filled="!disabled" :disabled="!disabled">
+          {{ $t('settings.embeds.status.change.deny') }}
+        </base-button>
+        <base-button @click="submit" :filled="disabled" :disabled="disabled">
+          {{ $t('settings.embeds.status.change.allow') }}
+        </base-button>
+      </ds-space>
+      <h3>{{ $t('settings.embeds.info-description') }}</h3>
+      <ds-space margin="small">
+        <ul>
+          <li
+            v-for="provider in providers"
+            :key="provider.provider_name"
+            class="provider-list-item"
+          >
+            <ds-text>
+              {{ provider.provider_name }},
+              <small>{{ provider.provider_url }}</small>
+            </ds-text>
+          </li>
+        </ul>
+      </ds-space>
     </ds-section>
   </base-card>
 </template>
@@ -93,3 +102,13 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+button + button {
+  margin-left: $space-x-small;
+}
+.provider-list-item {
+  margin-top: $space-xx-small;
+  margin-bottom: $space-xx-small;
+}
+</style>
diff --git a/webapp/pages/settings/notifications.vue b/webapp/pages/settings/notifications.vue
index 36e0d9081..8a383dc4f 100644
--- a/webapp/pages/settings/notifications.vue
+++ b/webapp/pages/settings/notifications.vue
@@ -1,8 +1,13 @@
 <template>
   <base-card>
     <h2 class="title">{{ $t('settings.notifications.name') }}</h2>
-    <ds-space margin-top="base" v-for="topic in emailNotificationSettings" :key="topic.type">
-      <ds-space margin-bottom="small">
+    <ds-space
+      margin-top="small"
+      margin-bottom="small"
+      v-for="topic in emailNotificationSettings"
+      :key="topic.type"
+    >
+      <ds-space margin-bottom="x-small">
         <h4>{{ $t(`settings.notifications.${topic.type}`) }}</h4>
       </ds-space>
       <div class="notifcation-settings-section">
@@ -14,15 +19,17 @@
         </ds-space>
       </div>
     </ds-space>
-    <base-button @click="checkAll" :disabled="isCheckAllDisabled">
-      {{ $t('settings.notifications.checkAll') }}
-    </base-button>
-    <base-button @click="uncheckAll" :disabled="isUncheckAllDisabled">
-      {{ $t('settings.notifications.uncheckAll') }}
-    </base-button>
-    <base-button class="save-button" filled @click="submit" :disabled="isSubmitDisabled">
-      {{ $t('actions.save') }}
-    </base-button>
+    <ds-space margin-top="base" margin-bottom="x-small">
+      <base-button @click="checkAll" :disabled="isCheckAllDisabled">
+        {{ $t('settings.notifications.checkAll') }}
+      </base-button>
+      <base-button @click="uncheckAll" :disabled="isUncheckAllDisabled">
+        {{ $t('settings.notifications.uncheckAll') }}
+      </base-button>
+      <base-button class="save-button" filled @click="submit" :disabled="isSubmitDisabled">
+        {{ $t('actions.save') }}
+      </base-button>
+    </ds-space>
   </base-card>
 </template>
 
@@ -138,4 +145,7 @@ export default {
 .label {
   margin-left: $space-xx-small;
 }
+button + button {
+  margin-left: $space-x-small;
+}
 </style>