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

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>

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>

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"

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') }}

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>

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>

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>

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",

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",

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",

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",

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",

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",

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

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>