From fa35a64d750e87339ab87e5bcaf777e6c764d9a0 Mon Sep 17 00:00:00 2001
From: MateuszMichalowski
 <79852198+MateuszMichalowski@users.noreply.github.com>
Date: Mon, 26 Aug 2024 16:43:16 +0200
Subject: [PATCH] fix(frontend): style fixes (#3360)

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback

* fix(frontend): fixes after feedback and iternal tests

* fix(frontend): User bigger icon in Transaction component
---
 .../ContributionMessagesFormular.vue             |  4 ++--
 .../ContributionMessagesListItem.vue             |  8 +++++++-
 .../Contributions/ContributionForm.vue           |  5 +++--
 .../Contributions/ContributionListItem.vue       |  4 ++--
 frontend/src/components/Message/Message.vue      | 15 +++++++++++----
 frontend/src/components/Transaction.vue          | 16 +++++++++++++---
 frontend/src/layouts/AuthLayout.vue              |  9 +++++++++
 frontend/src/locales/de.json                     |  1 +
 frontend/src/locales/en.json                     |  1 +
 frontend/src/locales/es.json                     |  1 +
 frontend/src/locales/fr.json                     |  1 +
 frontend/src/locales/nl.json                     |  1 +
 frontend/src/locales/tr.json                     |  1 +
 frontend/src/pages/ForgotPassword.vue            |  7 ++++++-
 frontend/src/pages/Settings.vue                  |  5 +++++
 15 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
index e211b748e..85363665f 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -7,9 +7,9 @@
           id="textarea"
           :model-value="form.text"
           :placeholder="$t('form.memo')"
-          rows="3"
+          :rows="3"
           @update:model-value="form.text = $event"
-        ></BFormTextarea>
+        />
         <BRow class="mt-4 mb-4">
           <BCol>
             <BButton type="reset" variant="secondary">{{ $t('form.cancel') }}</BButton>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 5f59d65d1..e1a8a3250 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -33,7 +33,7 @@
       </BRow>
     </div>
     <div v-else>
-      <BRow class="mb-3 bg-f5 p-2 is-moderator">
+      <BRow class="mb-3 p-2 is-moderator">
         <BCol cols="2">
           <avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
         </BCol>
@@ -88,3 +88,9 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.is-moderator {
+  background-color: var(--bs-f5);
+}
+</style>
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 001ec485e..4a44e03b7 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -50,6 +50,7 @@
         />
         <input-amount
           id="contribution-amount"
+          class="mt-3"
           name="amount"
           :label="$t('form.amount')"
           placeholder="20"
@@ -58,7 +59,7 @@
         />
 
         <BRow class="mt-5">
-          <BCol cols="12" lg="6">
+          <BCol>
             <BButton
               block
               type="reset"
@@ -69,7 +70,7 @@
               {{ $t('form.cancel') }}
             </BButton>
           </BCol>
-          <BCol cols="12" lg="6" class="text-end mt-4 mt-lg-0">
+          <BCol class="text-end mt-lg-0">
             <BButton
               block
               type="submit"
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 566cefe4c..c02c45989 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -20,7 +20,7 @@
         <BCol>
           <div v-if="firstName" class="me-3 fw-bold">
             {{ firstName }} {{ lastName }}
-            <variant-icon :icon="icon" variant="white" />
+            <variant-icon :icon="icon" :variant="variant" />
           </div>
           <div class="small">
             {{ $d(new Date(contributionDate), 'short') }}
@@ -32,7 +32,7 @@
           </div>
           <div
             v-if="status === 'IN_PROGRESS' && !allContribution"
-            class="text-205 pointer hover-font-bold"
+            class="text-danger pointer hover-font-bold"
             @click="visible = !visible"
           >
             {{ $t('contribution.alert.answerQuestion') }}
diff --git a/frontend/src/components/Message/Message.vue b/frontend/src/components/Message/Message.vue
index 96faf5b9f..1b112dd76 100644
--- a/frontend/src/components/Message/Message.vue
+++ b/frontend/src/components/Message/Message.vue
@@ -1,16 +1,16 @@
 <template>
   <div>
     <div class="header py-lg-6">
-      <b-container class="w-50">
+      <BContainer class="w-50">
         <div class="header-body text-center mb-7">
           <p class="h1 test-message-headline">{{ headline }}</p>
           <p class="h4 test-message-subtitle">{{ subtitle }}</p>
           <hr />
-          <b-button v-if="showButton" class="test-message-button" :to="buttonLinkTo">
+          <BButton v-if="showButton" class="test-message-button" @click="handleNavigation">
             {{ buttonText }}
-          </b-button>
+          </BButton>
         </div>
-      </b-container>
+      </BContainer>
     </div>
   </div>
 </template>
@@ -32,5 +32,12 @@ export default {
       return this.linkTo ? this.linkTo : null
     },
   },
+  methods: {
+    handleNavigation() {
+      if (this.buttonLinkTo) {
+        this.$router.push(this.buttonLinkTo)
+      }
+    },
+  },
 }
 </script>
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 87412b848..e30ed63b4 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="gdt-transaction-list">
-    <div class="list-group bg-white app-box-shadow gradido-border-radius p-3 mb-3">
-      <BRow class="align-items-center" @click="visible = !visible">
+    <div
+      class="list-group bg-white app-box-shadow gradido-border-radius p-3 mb-3"
+      @click="visible = !visible"
+    >
+      <BRow class="align-items-center">
         <BCol cols="3" lg="2" md="2">
           <BAvatar
             :icon="getLinesByType.icon"
             variant="light"
-            size="3em"
+            size="4em"
             :class="getLinesByType.iconclasses"
           >
             <variant-icon :icon="getLinesByType.icon" :variant="getLinesByType.iconColor" />
@@ -125,3 +128,10 @@ onMounted(() => {
   })
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.b-avatar-custom > svg) {
+  width: 2.5em;
+  height: 2.5em;
+}
+</style>
diff --git a/frontend/src/layouts/AuthLayout.vue b/frontend/src/layouts/AuthLayout.vue
index f86a9b264..ab6973a0e 100644
--- a/frontend/src/layouts/AuthLayout.vue
+++ b/frontend/src/layouts/AuthLayout.vue
@@ -170,4 +170,13 @@ export default {
 :deep(.b-avatar.text-bg-secondary) {
   background-color: transparent !important;
 }
+
+:deep(.popover-body) {
+  background-color: #383838;
+}
+
+:deep(.popover-arrow::after),
+:deep(.popover-arrow::before) {
+  border-top-color: #383838;
+}
 </style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 2bf551953..f8b26f842 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -159,6 +159,7 @@
     "memo": "Nachricht",
     "message": "Nachricht",
     "new_balance": "Neuer Kontostand nach Bestätigung",
+    "newPasswordRepeat": "Neues Passwort wiederholen",
     "no_gdd_available": "Du hast keine GDD zum versenden.",
     "ok": "Ok",
     "password": "Passwort",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index cb4214e40..d08efd90b 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -159,6 +159,7 @@
     "memo": "Message",
     "message": "Message",
     "new_balance": "Account balance after confirmation",
+    "newPasswordRepeat": "Repeat new password",
     "no_gdd_available": "You do not have GDD to send.",
     "ok": "Ok",
     "password": "Password",
diff --git a/frontend/src/locales/es.json b/frontend/src/locales/es.json
index 7ef3d0226..cc01acb9c 100644
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -131,6 +131,7 @@
     "memo": "Mensaje",
     "message": "Noticia",
     "new_balance": "Saldo de cuenta nuevo depués de confirmación",
+    "newPasswordRepeat": "Repetir contraseña nueva",
     "no_gdd_available": "No dispones de GDD para enviar.",
     "password": "Contraseña",
     "passwordRepeat": "Repetir contraseña",
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index 81827c9c6..408983190 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -137,6 +137,7 @@
     "memo": "Note",
     "message": "Message",
     "new_balance": "Montant du solde après confirmation",
+    "newPasswordRepeat": "Répétez le nouveau mot de passe",
     "no_gdd_available": "Vous n'avez pas de GDD à envoyer.",
     "password": "Mot de passe",
     "passwordRepeat": "Répétez le mot de passe",
diff --git a/frontend/src/locales/nl.json b/frontend/src/locales/nl.json
index 2201f0712..a0b6aefad 100644
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -131,6 +131,7 @@
     "memo": "Memo",
     "message": "Bericht",
     "new_balance": "Nieuw banksaldo na bevestiging",
+    "newPasswordRepeat": "Nieuw wachtwoord herhalen",
     "no_gdd_available": "Je hebt geen GDD om te versturen.",
     "password": "Wachtwoord",
     "passwordRepeat": "Wachtwoord herhalen",
diff --git a/frontend/src/locales/tr.json b/frontend/src/locales/tr.json
index f3860f095..3e3ac0a04 100644
--- a/frontend/src/locales/tr.json
+++ b/frontend/src/locales/tr.json
@@ -124,6 +124,7 @@
     "memo": "Mesaj",
     "message": "Mesaj",
     "new_balance": "Onay sonrası hesap bakiyesi",
+    "newPasswordRepeat": "Yeni şifreyi tekrarla",
     "no_gdd_available": "Göndermek için GDD'niz yok.",
     "password": "Şifre",
     "passwordRepeat": "Şifreyi tekrarla",
diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index 8d467d959..64b920aca 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -6,7 +6,12 @@
       <BRow class="justify-content-center">
         <BCol>
           <BForm role="form" @submit.prevent="onSubmit">
-            <input-email name="email" :label="$t('form.email')" :placeholder="$t('form.email')" />
+            <input-email
+              name="email"
+              :label="$t('form.email')"
+              :placeholder="$t('form.email')"
+              class="mb-4"
+            />
             <BRow>
               <BCol cols="12" lg="6">
                 <BButton
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 4a6a38247..b4b2d458b 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -301,3 +301,8 @@ const humhubStateSwitch = (eventData) => {
   background-color: #ebebeba3 !important;
 }
 </style>
+<style scoped>
+:deep(.form-label) {
+  padding-bottom: 0;
+}
+</style>