From 067ed3652bfb20526094bc2813ca098465e742f6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 16 Jan 2023 15:34:29 +0100
Subject: [PATCH] settings header data style

---
 .../src/components/UserSettings/UserCard.vue  | 87 +++++++++++--------
 frontend/src/pages/Settings.vue               |  2 +-
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/UserSettings/UserCard.vue b/frontend/src/components/UserSettings/UserCard.vue
index 0d59411b5..9993f5980 100755
--- a/frontend/src/components/UserSettings/UserCard.vue
+++ b/frontend/src/components/UserSettings/UserCard.vue
@@ -1,41 +1,46 @@
 <template>
   <div class="userdata-card">
-    <b-row>
-      <b-col class="centerPerMargin">
-        <avatar
-          :username="username.username"
-          :initials="username.initials"
-          :color="'#fff'"
-          :size="90"
-        ></avatar>
-      </b-col>
-    </b-row>
-    <b-card class="border-0">
-      <b-container class="justify-content-center mt-md-5">
-        <b-row>
-          <b-col>
-            <div class="text-center font-weight-bold">
-              {{ $n(balance, 'decimal') }}
-            </div>
-            <div class="text-center">{{ $t('GDD') }}</div>
-          </b-col>
-          <b-col>
-            <div class="text-center font-weight-bold">
-              {{ transactionCount }}
-            </div>
-            <div class="text-center">
-              {{ $t('navigation.transactions') }}
-            </div>
-          </b-col>
-          <b-col>
-            <div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
-            <div class="text-center">
-              {{ $t('community.community') }}
-            </div>
-          </b-col>
-        </b-row>
-      </b-container>
-    </b-card>
+    <div class="centerPerMargin">
+      <avatar
+        :username="username.username"
+        :initials="username.initials"
+        :color="'#fff'"
+        :size="90"
+      ></avatar>
+    </div>
+
+    <div class="justify-content-center mt-5 mb-5">
+      <b-row align-v="stretch">
+        <b-col cols="4">
+          <div class="text-center font-weight-bold">
+            {{ $n(balance, 'decimal') }}
+          </div>
+        </b-col>
+        <b-col cols="4">
+          <div class="text-center font-weight-bold">
+            {{ transactionCount }}
+          </div>
+        </b-col>
+        <b-col cols="4">
+          <div class="text-center font-weight-bold">{{ CONFIG.COMMUNITY_NAME }}</div>
+        </b-col>
+      </b-row>
+      <b-row>
+        <b-col cols="4">
+          <div class="text-center">{{ $t('GDD') }}</div>
+        </b-col>
+        <b-col cols="4">
+          <div class="text-center">
+            {{ $t('navigation.transactions') }}
+          </div>
+        </b-col>
+        <b-col cols="4">
+          <div class="text-center">
+            {{ $t('community.community') }}
+          </div>
+        </b-col>
+      </b-row>
+    </div>
   </div>
 </template>
 <script>
@@ -70,4 +75,14 @@ export default {
 .centerPerMargin {
   padding-left: 44%;
 }
+@media screen and (max-width: 850px) {
+  .centerPerMargin {
+    padding-left: 38%;
+  }
+}
+@media screen and (max-width: 450px) {
+  .centerPerMargin {
+    padding-left: 34%;
+  }
+}
 </style>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 3c81ea110..7d927ce4f 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container bg-white appBoxShadow gradido-border-radius p-3 mt--3">
+  <div class="container bg-white appBoxShadow p-3 mt--3">
     <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
     <user-data />
     <hr />