gdd send and send per link pannel style

frontend/src/components/ClipboardCopy.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="clipboard-copy">
-    <b-input-group v-if="canCopyLink" size="lg" class="mb-3" prepend="Link">
+    <div v-if="canCopyLink" size="lg" class="mb-3">
-      <b-form-input :value="link" type="text" readonly></b-form-input>
+      <div class="text-center h2">
-      <b-input-group-append>
+        {{ link }}
-        <b-button size="sm" text="Button" variant="primary" @click="copyLinkWithText">
+      </div>
-          {{ $t('gdd_per_link.copy-link-with-text') }}
+
-        </b-button>
+      <div class="text-center mt-5">
-        <b-button size="sm" text="Button" variant="primary" @click="copyLink">
+        <b-button size="sm" text="Button" variant="gradido" @click="copyLink">
           {{ $t('gdd_per_link.copy-link') }}
         </b-button>
-        <b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
+        <hr />
-          <b-img src="img/svg/qr-code.svg" width="19" class="svg"></b-img>
+        <b-button size="sm" text="Button" variant="gradido" @click="copyLinkWithText">
+          {{ $t('gdd_per_link.copy-link-with-text') }}
         </b-button>
-      </b-input-group-append>
+        <hr />
-    </b-input-group>
+      </div>
+    </div>
     <div v-else>
       <div class="alert-danger p-3">{{ $t('gdd_per_link.not-copied') }}</div>
       <div class="alert-muted h3 p-3">{{ link }}</div>

frontend/src/components/GddSend/TransactionConfirmationLink.vue

@@ -1,5 +1,57 @@
 <template>
-  <div class="transaction-confirm-link bg-white appBoxShadow gradido-border-radius p-3">
+  <div class="transaction-confirm-link">
+    <div class="bg-white appBoxShadow gradido-border-radius p-3">
+      <div class="h3 mb-4">{{ $t('gdd_per_link.header') }}</div>
+      <b-row class="mt-5">
+        <b-col offset="2">
+          <div class="mt-3 h5">{{ $t('form.memo') }}</div>
+          <div>{{ memo }}</div>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('send_gdd') }}</div>
+          <div>{{ amount | GDD }}</div>
+        </b-col>
+      </b-row>
+
+      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
+        <b-col cols="2" class="text-right">
+          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
+        </b-col>
+        <b-col>{{ $t('advanced-calculation') }}</b-col>
+      </b-row>
+      <b-row class="pr-3" offset="2">
+        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
+        <b-col>{{ balance | GDD }}</b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
+        <b-col class="borderbottom">
+          <strong>{{ (amount * -1) | GDD }}</strong>
+        </b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
+        <b-col>{{ (balance - amount) | GDD }}</b-col>
+      </b-row>
+      <b-row class="mt-5 p-5">
+        <b-col>
+          <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
+        </b-col>
+        <b-col class="text-right">
+          <b-button
+            class="send-button"
+            variant="gradido"
+            :disabled="disabled"
+            @click="$emit('send-transaction')"
+          >
+            {{ $t('form.generate_now') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+
     <b-row class="confirm-box-link">
       <b-col class="text-right mt-4 mb-3">
         <div class="alert-heading text-left h3">{{ $t('gdd_per_link.header') }}</div>

frontend/src/components/GddSend/TransactionConfirmationSend.vue

@@ -1,6 +1,63 @@
 <template>
-  <div class="transaction-confirm-send bg-white appBoxShadow gradido-border-radius p-3">
+  <div class="transaction-confirm-send">
-    <b-row class="confirm-box-send">
+    <div class="bg-white appBoxShadow gradido-border-radius p-3">
+      <div class="h3 mb-4">{{ $t('form.send_check') }}</div>
+      <b-row class="mt-5">
+        <b-col cols="2">
+          <b-avatar :text="avatarText" variant="success" size="4em"></b-avatar>
+        </b-col>
+        <b-col>
+          <div class="h4">
+            {{ email }}
+          </div>
+          <div class="mt-3 h5">{{ $t('form.memo') }}</div>
+          <div>{{ memo }}</div>
+        </b-col>
+        <b-col cols="3">
+          <div class="small">{{ $t('send_gdd') }}</div>
+          <div>{{ amount | GDD }}</div>
+        </b-col>
+      </b-row>
+
+      <b-row class="mt-5 pr-3 text-color-gdd-yellow h3">
+        <b-col cols="2" class="text-right">
+          <b-icon class="text-color-gdd-yellow" icon="droplet-half"></b-icon>
+        </b-col>
+        <b-col>{{ $t('advanced-calculation') }}</b-col>
+      </b-row>
+      <b-row class="pr-3" offset="2">
+        <b-col offset="2">{{ $t('form.current_balance') }}</b-col>
+        <b-col>{{ balance | GDD }}</b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">
+          <strong>{{ $t('form.your_amount') }}</strong>
+        </b-col>
+        <b-col class="borderbottom">
+          <strong>{{ (amount * -1) | GDD }}</strong>
+        </b-col>
+      </b-row>
+      <b-row class="pr-3">
+        <b-col offset="2">{{ $t('form.new_balance') }}</b-col>
+        <b-col>{{ (balance - amount) | GDD }}</b-col>
+      </b-row>
+      <b-row class="mt-5 p-5">
+        <b-col>
+          <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
+        </b-col>
+        <b-col class="text-right">
+          <b-button
+            variant="gradido"
+            :disabled="disabled"
+            @click="$emit('send-transaction'), (disabled = true)"
+          >
+            {{ $t('form.send_now') }}
+          </b-button>
+        </b-col>
+      </b-row>
+    </div>
+
+    <!-- <b-row class="confirm-box-send">
       <b-col>
         <div class="display-4 pb-4">{{ $t('form.send_check') }}</div>
         <b-list-group class="">
@@ -31,9 +88,9 @@
           </b-input-group>
         </b-list-group>
       </b-col>
-    </b-row>
+    </b-row> -->
 
-    <b-container class="bv-example-row mt-5 mb-5">
+    <!-- <b-container class="bv-example-row mt-5 mb-5">
       <div class="alert-heading text-left h3">{{ $t('advanced-calculation') }}</div>
       <b-row class="pr-3">
         <b-col class="text-right">{{ $t('form.current_balance') }}</b-col>
@@ -51,22 +108,7 @@
         <b-col class="text-right">{{ $t('form.new_balance') }}</b-col>
         <b-col class="text-right">{{ (balance - amount) | GDD }}</b-col>
       </b-row>
-    </b-container>
+    </b-container> -->
-
-    <b-row class="mt-4">
-      <b-col>
-        <b-button @click="$emit('on-reset')">{{ $t('back') }}</b-button>
-      </b-col>
-      <b-col class="text-right">
-        <b-button
-          variant="primary"
-          :disabled="disabled"
-          @click="$emit('send-transaction'), (disabled = true)"
-        >
-          {{ $t('form.send_now') }}
-        </b-button>
-      </b-col>
-    </b-row>
   </div>
 </template>
 <script>

frontend/src/components/GddSend/TransactionResultLink.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="bg-white appBoxShadow gradido-border-radius p-4">
-    <b-row>
+    <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
+
+    <clipboard-copy
+      :link="link"
+      :amount="amount"
+      :memo="memo"
+      :validUntil="validUntil"
+    ></clipboard-copy>
+    <div class="text-center">
+      <div><figure-qr-code :link="link" /></div>
+      <div>
+        <b-button variant="secondary" @click="$emit('on-reset')" class="mt-4">
+          {{ $t('form.close') }}
+        </b-button>
+      </div>
+    </div>
+
+    <!-- <b-row>
       <b-col>
         <div class="h3 mb-4">{{ $t('gdd_per_link.created') }}</div>
         <clipboard-copy
@@ -19,7 +36,7 @@
           </b-button>
         </div>
       </b-col>
-    </b-row>
+    </b-row> -->
   </div>
 </template>
 <script>
@@ -40,7 +57,7 @@ export default {
   },
   data() {
     return {
-      showQrcode: false,
+      // showQrcode: false,
     }
   },
   methods: {

frontend/src/components/Template/ContentHeader/CommunityMember.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="text-center">
       <b-badge class="position-absolute mt--2 ml--5 px-3" variant="success">
-        {{ $t('community.community') }}
+        {{ $t('member') }}
       </b-badge>
     </div>
     <div
@@ -11,7 +11,7 @@
       <b-row>
         <b-col cols="8">
           <div class="h4">{{ $t('community.communityMember') }}</div>
-          <div class="small">{{ CONFIG.COMMUNITY_NAME }}</div>
+          <div>{{ CONFIG.COMMUNITY_NAME }}</div>
         </b-col>
         <b-col cols="4" class="border-left border-light p-3">
           <b-icon icon="people"></b-icon>

frontend/src/locales/de.json

@@ -1,10 +1,8 @@
 {
   "100": "100%",
   "1000thanks": "1000 Dank, weil du bei uns bist!",
-  "1234": "1234",
   "125": "125%",
   "85": "85%",
-  "active": "aktiv",
   "advanced-calculation": "Vorausberechnung",
   "member": "Mitglied",
   "auth": {
@@ -21,7 +19,6 @@
   "back": "Zurück",
   "community": {
     "choose-another-community": "Eine andere Gemeinschaft auswählen",
-    "city": "Stadt",
     "community": "Gemeinschaft",
     "communityMember": "Du bist aktives Mitglied",
     "continue-to-registration": "Weiter zur Registrierung",
@@ -217,7 +214,7 @@
     "raise": "Erhöhung",
     "recruited-member": "Eingeladenes Mitglied"
   },
-  "inactive": "inaktiv",
+
   "language": "Sprache",
   "link-load": "den letzten Link nachladen | die letzten {n} Links nachladen |  weitere {n} Links nachladen",
   "login": "Anmelden",

frontend/src/locales/en.json

@@ -1,10 +1,8 @@
 {
   "100": "100%",
   "1000thanks": "1000 thanks for being with us!",
-  "1234": "1234",
   "125": "125%",
   "85": "85%",
-  "active": "active",
   "advanced-calculation": "Advanced calculation",
   "member": "Member",
   "auth": {
@@ -21,7 +19,6 @@
   "back": "Back",
   "community": {
     "choose-another-community": "Choose another community",
-    "city": "City",
     "community": "Community",
     "communityMember": "You are an active member",
     "continue-to-registration": "Continue to registration",
@@ -217,7 +214,6 @@
     "raise": "Increase",
     "recruited-member": "Invited member"
   },
-  "inactive": "inactive",
   "language": "Language",
   "link-load": "Load the last link | Load the last {n} links |  Load more {n} links",
   "login": "Sign in",

frontend/src/mixins/copyLinks.js

@@ -26,11 +26,16 @@ export const copyLinks = {
       navigator.clipboard
         .writeText(
           `${this.link}
-${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${this.amount} Gradido.
+            ${this.$store.state.firstName} ${this.$t('transaction-link.send_you')} ${
+            this.amount
+          } Gradido.
             "${this.memo}"
-${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t('gdd_per_link.validUntilDate', {
+            ${this.$t('gdd_per_link.credit-your-gradido')} ${this.$t(
+            'gdd_per_link.validUntilDate',
+            {
               date: this.$d(new Date(this.validUntil), 'short'),
-          })}
+            },
+          )}
           ${this.$t('gdd_per_link.link-hint')}`,
         )
         .then(() => {