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

@@ -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
 }

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

webapp/locales/de.json

@@ -267,10 +267,10 @@
     }
   },
   "contribution": {
-    "amount-clicks": "{amount} clicks",
+    "amount-clicks": "{amount} Klicks",
-    "amount-comments": "{amount} comments",
+    "amount-comments": "{amount} Kommentare",
-    "amount-shouts": "{amount} recommendations",
+    "amount-shouts": "{amount} Empfehlungen",
-    "amount-views": "{amount} views",
+    "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",
+      "commentOnObservedPost": "Kommentare zu beobachteten Beiträgen.",
-      "followingUsers": "Ein Nutzer dem ich folge veröffentlichte einen neuen Beitrag",
+      "followingUsers": "Ein Nutzer dem ich folge veröffentlichte einen neuen Beitrag.",
       "group": "Gruppen",
-      "groupMemberJoined": "Ein Mitglied ist deiner Gruppe beigetreten",
+      "groupMemberJoined": "Ein Mitglied ist deiner Gruppe beigetreten.",
-      "groupMemberLeft": "Ein Mitglied hat deine Gruppe verlassen",
+      "groupMemberLeft": "Ein Mitglied hat deine Gruppe verlassen.",
-      "groupMemberRemoved": "Du wurdest aus einer Gruppe entfernt",
+      "groupMemberRemoved": "Du wurdest aus einer Gruppe entfernt.",
-      "groupMemberRoleChanged": "Deine Rolle in einer Gruppe wurde geändert",
+      "groupMemberRoleChanged": "Deine Rolle in einer Gruppe wurde geändert oder du wurdest eingeladen.",
-      "mention": "Ich wurde erwähnt",
+      "mention": "Ich wurde erwähnt.",
-      "name": "Benachrichtigungen per Email",
+      "name": "Benachrichtigungen per E-Mail",
       "post": "Beiträge und Kommentare",
-      "postByFollowedUser": "Beitrag von einem Nutzer, dem ich folge",
+      "postByFollowedUser": "Beitrag von einem Nutzer, dem ich folge.",
-      "postInGroup": "Beitrag in einer Gruppe, die ich beobachte",
+      "postInGroup": "Beitrag in einer Gruppe, die ich beobachte.",
       "send-email-notifications": "Sende E-Mail-Benachrichtigungen",
       "success-update": "Benachrichtigungs-Einstellungen gespeichert!",
       "uncheckAll": "Alle abwählen"

webapp/locales/en.json

@@ -267,10 +267,10 @@
     }
   },
   "contribution": {
-    "amount-clicks": "{amount} clicks",
+    "amount-clicks": "{amount} Clicks",
-    "amount-comments": "{amount} comments",
+    "amount-comments": "{amount} Comments",
-    "amount-shouts": "{amount} recommendations",
+    "amount-shouts": "{amount} Recommendations",
-    "amount-views": "{amount} views",
+    "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",
+      "commentOnObservedPost": "Comments on observed posts.",
-      "followingUsers": "User I follow published a new post",
+      "followingUsers": "User I follow published a new post.",
       "group": "Groups",
-      "groupMemberJoined": "Member joined a group I own",
+      "groupMemberJoined": "Member joined a group I own.",
-      "groupMemberLeft": "Member left a group I own",
+      "groupMemberLeft": "Member left a group I own.",
-      "groupMemberRemoved": "I was removed from a group",
+      "groupMemberRemoved": "I was removed from a group.",
-      "groupMemberRoleChanged": "My role in a group was changed",
+      "groupMemberRoleChanged": "Your role in a group changed or you were invited.",
-      "mention": "I was mentioned",
+      "mention": "I was mentioned.",
-      "name": "Email Notifications",
+      "name": "E-Mail Notifications",
       "post": "Posts and comments",
-      "postByFollowedUser": "Posts by users I follow",
+      "postByFollowedUser": "Posts by users I follow.",
-      "postInGroup": "Post in a group I am a member of",
+      "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": {

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,6 +155,10 @@ exports[`notifications.vue mount renders 1`] = `
     </div>
   </div>
    
+  <div
+    class="ds-space"
+    style="margin-top: 24px; margin-bottom: 8px;"
+  >
     <button
       class="base-button"
       type="button"
@@ -191,6 +195,7 @@ exports[`notifications.vue mount renders 1`] = `
       actions.save
     
     </button>
+  </div>
    
   <!---->
 </article>

webapp/pages/settings/embeds.vue

@@ -17,20 +17,29 @@
       <ds-text>
         {{ $t('settings.embeds.status.change.question') }}
       </ds-text>
+      <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>
-      <p>{{ $t('settings.embeds.info-description') }}</p>
+      <h3>{{ $t('settings.embeds.info-description') }}</h3>
+      <ds-space margin="small">
         <ul>
-        <li v-for="provider in providers" :key="provider.provider_name">
+          <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>

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
-      <ds-space margin-bottom="small">
+      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,6 +19,7 @@
         </ds-space>
       </div>
     </ds-space>
+    <ds-space margin-top="base" margin-bottom="x-small">
       <base-button @click="checkAll" :disabled="isCheckAllDisabled">
         {{ $t('settings.notifications.checkAll') }}
       </base-button>
@@ -23,6 +29,7 @@
       <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>