From 130cc2b624ca5364389f63d6b71f81b37b5d8b3d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 30 Dec 2022 14:31:04 +0100
Subject: [PATCH] mobile formulare style

---
 .../ContributionMessagesFormular.vue          |  7 ++---
 .../ContributionMessagesList.vue              | 20 +++++---------
 .../ContributionMessagesListItem.vue          | 26 +++++++++----------
 .../ContributionMessages/ParseMessage.vue     |  2 +-
 .../Contributions/ContributionForm.vue        |  4 +--
 .../Contributions/ContributionListItem.vue    |  4 +--
 .../components/GddSend/TransactionForm.vue    |  6 ++---
 .../MobileSidebar/MobileSidebar.vue           |  2 +-
 .../Transactions/TransactionCreation.vue      |  2 +-
 .../Transactions/TransactionReceive.vue       |  2 +-
 .../Transactions/TransactionSend.vue          |  6 ++---
 11 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
index 8667f7a0f..b11be3b14 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="contribution-messages-formular">
+    <small class="pl-2 pt-3">{{ $t('form.reply') }}</small>
     <div>
       <b-form @submit.prevent="onSubmit" @reset="onReset">
         <b-form-textarea
@@ -8,12 +9,12 @@
           :placeholder="$t('form.memo')"
           rows="3"
         ></b-form-textarea>
-        <b-row class="mt-4 mb-6">
+        <b-row class="mt-4 mb-4">
           <b-col>
-            <b-button type="reset" variant="danger">{{ $t('form.cancel') }}</b-button>
+            <b-button type="reset" variant="secondary">{{ $t('form.cancel') }}</b-button>
           </b-col>
           <b-col class="text-right">
-            <b-button type="submit" variant="primary" :disabled="disabled">
+            <b-button type="submit" variant="gradido" :disabled="disabled">
               {{ $t('form.reply') }}
             </b-button>
           </b-col>
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesList.vue b/frontend/src/components/ContributionMessages/ContributionMessagesList.vue
index e9262c073..39a31a89c 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesList.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesList.vue
@@ -1,24 +1,21 @@
 <template>
   <div class="contribution-messages-list">
-    <b-container>
-      <div v-for="message in messages" v-bind:key="message.id">
+    <div>
+      <div v-for="message in messages" v-bind:key="message.id" class="mt-3">
         <contribution-messages-list-item :message="message" />
       </div>
-    </b-container>
-    <b-container>
+    </div>
+    <div>
       <contribution-messages-formular
         v-if="['PENDING', 'IN_PROGRESS'].includes(state)"
         :contributionId="contributionId"
         v-on="$listeners"
         @update-state="updateState"
       />
-    </b-container>
+    </div>
 
-    <div
-      v-b-toggle="'collapse' + String(contributionId)"
-      class="text-center pointer h2 clearboth pt-1"
-    >
-      <b-button variant="outline-primary" block class="mt-4">
+    <div v-b-toggle="'collapse' + String(contributionId)" class="text-center pointer clearboth">
+      <b-button variant="outline-primary" block class="mb-3">
         <b-icon icon="arrow-up-short"></b-icon>
         {{ $t('form.close') }}
       </b-button>
@@ -57,9 +54,6 @@ export default {
 }
 </script>
 <style scoped>
-.temp-message {
-  margin-top: 50px;
-}
 .clearboth {
   clear: both;
 }
diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 80e4c7978..d2ccfd0c0 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="contribution-messages-list-item">
-    <div v-if="isNotModerator" class="is-not-moderator text-right">
-      <b-row>
-        <b-col>
+    <div v-if="isNotModerator" class="text-right pr-4 pr-lg-0">
+      <b-row class="mb-3">
+        <b-col cols="10">
           <div class="font-weight-bold">{{ storeName.username }}</div>
           <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
           <parse-message v-bind="message"></parse-message>
@@ -14,15 +14,15 @@
       <!-- <span class="ml-2 mr-2">{{ storeName.username }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span> -->
     </div>
-    <div v-else class="is-moderator text-left">
-      <b-row>
+    <div v-else>
+      <b-row class="mb-3 bg-f5 p-2">
         <b-col cols="2">
           <avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
         </b-col>
-        <b-col cols="auto">
+        <b-col cols="10">
           <div class="font-weight-bold">
             {{ moderationName.username }}
-            <small class="ml-2 text-success">{{ $t('community.moderator') }}</small>
+            <span class="ml-2 text-success small">{{ $t('community.moderator') }}</span>
           </div>
 
           <div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
@@ -70,17 +70,17 @@ export default {
 </script>
 <style>
 .is-not-moderator {
-  float: right;
+  /* float: right; */
   /* background-color: rgb(261, 204, 221); */
-  width: 75%;
+  /* width: 75%;
   margin-top: 20px;
   margin-bottom: 20px;
-  clear: both;
+  clear: both; */
 }
 .is-moderator {
-  clear: both;
+  /* clear: both; */
   /* background-color: rgb(255, 255, 128); */
-  width: 75%;
-  margin-top: 20px;
+  /* width: 75%;
+  margin-top: 20px; */
 }
 </style>
diff --git a/frontend/src/components/ContributionMessages/ParseMessage.vue b/frontend/src/components/ContributionMessages/ParseMessage.vue
index cc62e57d5..20aecf842 100644
--- a/frontend/src/components/ContributionMessages/ParseMessage.vue
+++ b/frontend/src/components/ContributionMessages/ParseMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-2">
+  <div class="mt-1">
     <span v-for="({ type, text }, index) in parsedMessage" :key="index">
       <b-link v-if="type === 'link'" :href="text" target="_blank">{{ text }}</b-link>
       <span v-else-if="type === 'date'">
diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue
index 3f6468d4c..6d9d9b166 100644
--- a/frontend/src/components/Contributions/ContributionForm.vue
+++ b/frontend/src/components/Contributions/ContributionForm.vue
@@ -109,14 +109,14 @@
           <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
         </b-col>
       </validation-provider> -->
-      <b-row class="mt-3">
+      <b-row class="mt-5">
         <b-col>
           <b-button type="reset" variant="secondary" @click="reset" data-test="button-cancel">
             {{ $t('form.cancel') }}
           </b-button>
         </b-col>
         <b-col class="text-right">
-          <b-button type="submit" variant="primary" :disabled="disabled" data-test="button-submit">
+          <b-button type="submit" variant="gradido" :disabled="disabled" data-test="button-submit">
             {{ form.id ? $t('form.change') : $t('contribution.submit') }}
           </b-button>
         </b-col>
diff --git a/frontend/src/components/Contributions/ContributionListItem.vue b/frontend/src/components/Contributions/ContributionListItem.vue
index 765bd1db8..930d4ddf8 100644
--- a/frontend/src/components/Contributions/ContributionListItem.vue
+++ b/frontend/src/components/Contributions/ContributionListItem.vue
@@ -164,7 +164,7 @@
         </div>
       </div> -->
       <b-collapse :id="collapsId" class="mt-2" v-model="visible">
-        <b-card>
+         
           <contribution-messages-list
             :messages="messages_get"
             :state="state"
@@ -172,7 +172,7 @@
             @get-list-contribution-messages="getListContributionMessages"
             @update-state="updateState"
           />
-        </b-card>
+      
       </b-collapse>
     </div>
   </div>
diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 7a79c8dc1..7eb218e8e 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -1,7 +1,7 @@
 <template>
   <b-row class="transaction-form">
-    <b-col xl="12" md="12">
-      <b-card class="appBoxShadow gradido-border-radius">
+    <b-col cols="12">
+      <b-card class="appBoxShadow gradido-border-radius" body-class="p-2">
         <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
           <b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
             <b-form-radio-group v-model="radioSelected" class="container">
@@ -94,7 +94,7 @@
                 </b-button>
               </b-col>
               <b-col class="text-right">
-                <b-button type="submit" variant="primary">
+                <b-button type="submit" variant="gradido">
                   {{ $t('form.check_now') }}
                 </b-button>
               </b-col>
diff --git a/frontend/src/components/MobileSidebar/MobileSidebar.vue b/frontend/src/components/MobileSidebar/MobileSidebar.vue
index 582da839b..4fa1da1ab 100644
--- a/frontend/src/components/MobileSidebar/MobileSidebar.vue
+++ b/frontend/src/components/MobileSidebar/MobileSidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-sidebar id="sidebar-mobile" bg-variant="white" :backdrop="true">
+    <b-sidebar id="sidebar-mobile" bg-variant="f5" :backdrop="true">
       <div class="px-3 py-2">
         <sidebar @admin="$emit('admin')" @logout="$emit('logout')" />
       </div>
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index 79b19b2bd..31bf563f1 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -18,7 +18,7 @@
       </b-col>
     </b-row>
     <b-collapse class="pb-4 pt-5" v-model="visible">
-      <div class="word-break mb-4 text-center">
+      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 0f05214b2..060e3b66b 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -43,7 +43,7 @@
       </b-col>
     </b-row>
     <b-collapse class="pb-4 pt-5" v-model="visible">
-      <div class="word-break mb-4 text-center">
+      <div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
         {{ memo }}
       </div>
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index 7870eed8b..2b471e3a1 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -41,10 +41,10 @@
         <collapse-icon class="text-right" :visible="visible" />
       </b-col>
     </b-row>
-    <b-collapse class="pb-4 pt-5" v-model="visible">
-      <div class="word-break mb-4 text-center">
+    <b-collapse class="pb-4 pt-2" v-model="visible">
+      <div class="word-break mb-5 mt-lg-3 offset-3 offset-lg-2">
         <div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
-        {{ memo }}
+        <div class="">{{ memo }}</div>
       </div>
       <decay-information :typeId="typeId" :decay="decay" :amount="amount" :memo="memo" />
     </b-collapse>