From 9825cf88763461a4501cc2991c719db218507d5f Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 22 Feb 2023 13:41:20 +0100
Subject: [PATCH 1/8] commnity navbar style refactor

---
 .../Template/ContentHeader/NavCommunity.vue   | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index ca96ce914..11c4d2c35 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="nav-community container">
-    <b-row class="nav-row">
-      <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn to="contribute" active-class="btn-active" block variant="link">
-          <b-icon icon="pencil" class="mr-2" />
+    <b-row class="mx-xl-6 mx-lg-5" align-v="stretch">
+      <b-col class="px-0">
+        <b-btn to="contribute" active-class="btn-active" block variant="link" class="rounded-right">
+          <b-icon icon="pencil" class="mr-2 d-none d-md-inline" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn to="contributions" active-class="btn-active" block variant="link">
-          <b-icon icon="person" class="mr-2" />
+      <b-col class="px-0">
+        <b-btn to="contributions" active-class="btn-active" block variant="link" class="rounded-0">
+          <b-icon icon="person" class="mr-2 d-none d-md-inline" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
-      <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn to="community" active-class="btn-active" block variant="link">
-          <b-icon icon="people" class="mr-2" />
+      <b-col class="px-0">
+        <b-btn to="community" active-class="btn-active" block variant="link" class="rounded-left">
+          <b-icon icon="people" class="mr-2 d-none d-md-inline" />
           {{ $t('community.community') }}
         </b-btn>
       </b-col>
@@ -28,11 +28,12 @@ export default {
 }
 </script>
 <style scoped>
-.nav-row {
+.btn {
   background-color: rgb(209, 209, 209);
-  border-radius: 26px;
+  color: black;
+  padding-right: 0px;
+  padding-left: 0px;
 }
-
 .btn-active {
   background-color: rgb(23 141 129);
   color: white;

From 1a1eec9b249a8b530ab0b546d1d6dd483ce3b987 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 23 Feb 2023 13:57:53 +0100
Subject: [PATCH 2/8] style sav sub menu in community

---
 .../scss/custom/gradido-custom/_color.scss    |  4 ++
 .../src/assets/scss/gradido-template.scss     |  3 ++
 .../Template/ContentHeader/NavCommunity.vue   | 39 +++++++++----------
 3 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/src/assets/scss/custom/gradido-custom/_color.scss b/frontend/src/assets/scss/custom/gradido-custom/_color.scss
index 67de86479..361f717af 100644
--- a/frontend/src/assets/scss/custom/gradido-custom/_color.scss
+++ b/frontend/src/assets/scss/custom/gradido-custom/_color.scss
@@ -17,6 +17,7 @@ $gradido-248: rgb(248 248 248) !default;
 $gradido-140: rgb(140 66 5) !default;
 $gradido-205: rgb(205 86 86) !default;
 $gradido-197: rgb(197 141 56) !default;
+$gradido-209: rgb(209 209 209) !default;
 $gradido-4: rgb(4 112 6) !default;
 $black: #000 !default;
 $grays: () !default;
@@ -36,6 +37,7 @@ $grays: map.merge(
     "140": $gradido-140,
     "205": $gradido-205,
     "197": $gradido-197,
+    "209": $gradido-209,
     "4": $gradido-4
   ),
   $grays
@@ -75,6 +77,7 @@ $colors: map.merge(
     "140": $gradido-140,
     "205": $gradido-205,
     "197": $gradido-197,
+    "209": $gradido-209,
     "4": $gradido-4
   ),
   $colors
@@ -118,6 +121,7 @@ $theme-colors: map.merge(
     "140":          $gradido-140,
     "205":          $gradido-205,
     "197":          $gradido-197,
+    "209":          $gradido-209,
     "4":            $gradido-4
   ),
   $theme-colors
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 9edb72a4f..7d4086ef9 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -121,6 +121,9 @@ a:hover,
   border-top-right-radius: 17px !important;
   border-bottom-right-radius: 17px !important;
 }
+.rounded-26 {
+  border-radius: 26px;
+}
 
 .alert {
   border-radius: 26px;
diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 11c4d2c35..6ddda0ce0 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -1,25 +1,19 @@
 <template>
-  <div class="nav-community container">
-    <b-row class="mx-xl-6 mx-lg-5" align-v="stretch">
-      <b-col class="px-0">
-        <b-btn to="contribute" active-class="btn-active" block variant="link" class="rounded-right">
-          <b-icon icon="pencil" class="mr-2 d-none d-md-inline" />
-          {{ $t('community.submitContribution') }}
-        </b-btn>
-      </b-col>
-      <b-col class="px-0">
-        <b-btn to="contributions" active-class="btn-active" block variant="link" class="rounded-0">
-          <b-icon icon="person" class="mr-2 d-none d-md-inline" />
-          {{ $t('community.myContributions') }}
-        </b-btn>
-      </b-col>
-      <b-col class="px-0">
-        <b-btn to="community" active-class="btn-active" block variant="link" class="rounded-left">
-          <b-icon icon="people" class="mr-2 d-none d-md-inline" />
-          {{ $t('community.community') }}
-        </b-btn>
-      </b-col>
-    </b-row>
+  <div class="nav-community">
+    <div class="bg-209 rounded-26 d-flex bd-highlight mx-xl-6 mx-lg-5 shadow">
+      <b-btn to="contribute" active-class="btn-active appBoxShadow" block variant="link">
+        <b-icon icon="pencil" class="mr-1 mr-md-2" />
+        {{ $t('community.submitContribution') }}
+      </b-btn>
+      <b-btn to="contributions" active-class="btn-active appBoxShadow" block variant="link">
+        <b-icon icon="person" class="mr-1 mr-md-2" />
+        {{ $t('community.myContributions') }}
+      </b-btn>
+      <b-btn to="community" active-class="btn-active appBoxShadow" block variant="link">
+        <b-icon icon="people" class="mr-1 mr-md-2" />
+        {{ $t('community.community') }}
+      </b-btn>
+    </div>
   </div>
 </template>
 <script>
@@ -34,6 +28,9 @@ export default {
   padding-right: 0px;
   padding-left: 0px;
 }
+.btn-block + .btn-block {
+  margin-top: 0rem;
+}
 .btn-active {
   background-color: rgb(23 141 129);
   color: white;

From d70d19fa1fe4bfc560b900000ff63e896f07fef8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 23 Feb 2023 14:02:25 +0100
Subject: [PATCH 3/8] fix stylelint

---
 frontend/src/assets/scss/gradido-template.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 7d4086ef9..d5ba9f560 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -121,6 +121,7 @@ a:hover,
   border-top-right-radius: 17px !important;
   border-bottom-right-radius: 17px !important;
 }
+
 .rounded-26 {
   border-radius: 26px;
 }

From fa3dd714decfb1d8e8742bb4794b7c1fdf891766 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 23 Feb 2023 18:45:29 +0100
Subject: [PATCH 4/8] add svg icons

---
 frontend/public/img/svg/community.svg         | 103 +++++++
 frontend/public/img/svg/my_profil.svg         |  94 ++++++
 frontend/public/img/svg/write.svg             | 287 ++++++++++++++++++
 .../Template/ContentHeader/NavCommunity.vue   |  20 +-
 frontend/src/pages/Login.vue                  |   2 +-
 5 files changed, 499 insertions(+), 7 deletions(-)
 create mode 100644 frontend/public/img/svg/community.svg
 create mode 100644 frontend/public/img/svg/my_profil.svg
 create mode 100644 frontend/public/img/svg/write.svg

diff --git a/frontend/public/img/svg/community.svg b/frontend/public/img/svg/community.svg
new file mode 100644
index 000000000..8f1cdbd61
--- /dev/null
+++ b/frontend/public/img/svg/community.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#72778F;}
+	.st2{font-family:'FontAwesome5Free-Solid';}
+	.st3{font-size:54.1523px;}
+	.st4{display:inline;enable-background:new    ;}
+	.st5{fill:#72778F;}
+	.st6{font-size:56.8896px;}
+	.st7{font-size:51.2px;}
+	.st8{display:inline;}
+	.st9{enable-background:new    ;}
+	.st10{clip-path:url(#SVGID_00000044144592529643807670000007729734690606357893_);}
+</style>
+<g id="Transaktionen" class="st0">
+	<text transform="matrix(1 0 0 1 5.4236 52.4902)" class="st1 st2 st3"></text>
+</g>
+<g id="mein_x5F_profil" class="st0">
+	<g class="st4">
+		<path class="st5" d="M56.7,51.31v4.64c0,2.96-2.4,5.35-5.35,5.35H12.11c-2.95,0-5.35-2.4-5.35-5.35v-4.64
+			c0-8.27,6.71-14.98,14.98-14.98h1.86c2.49,1.14,5.23,1.78,8.13,1.78s5.65-0.65,8.13-1.78h1.86C49.99,36.33,56.7,43.04,56.7,51.31z
+			 M17.46,18.49c0-7.88,6.39-14.27,14.27-14.27S46,10.61,46,18.49s-6.39,14.27-14.27,14.27S17.46,26.37,17.46,18.49z"/>
+	</g>
+</g>
+<g id="Top_Stories" class="st0">
+	<text transform="matrix(1 0 0 1 0 54.8652)" class="st1 st2 st6"></text>
+</g>
+<g id="Senden" class="st0">
+	<text transform="matrix(1 0 0 1 4.882812e-04 50.6426)" class="st1 st2 st7"></text>
+</g>
+<g id="Home" class="st0">
+	<g id="Haus" transform="translate(-319.046 -300.603)" class="st8">
+		<path id="Pfad_9173" class="st5" d="M356.12,358.2v-15.2h-10.16v14.91c-0.37,0.12-0.75,0.21-1.13,0.26c-4.54,0-9.07,0.04-13.61,0
+			c-2.24-0.02-3.13-0.92-3.14-3.14c-0.03-5.84-0.03-11.69,0.03-17.53c0.02-0.72,0.32-1.41,0.83-1.92
+			c7.28-6.08,14.61-12.1,22.02-18.21c0.51,0.38,1.01,0.71,1.47,1.09c6.69,5.5,13.35,11.03,20.07,16.5c1.01,0.7,1.58,1.88,1.52,3.1
+			c-0.09,5.5-0.03,11-0.04,16.5c0,2.79-0.78,3.6-3.5,3.61C365.8,358.21,361.14,358.2,356.12,358.2z"/>
+		<path id="Pfad_9174" class="st5" d="M351,313.85c-8.82,7.36-17.46,14.59-26.15,21.76c-0.76,0.64-2.31,1.49-2.69,1.2
+			c-1.26-1.03-2.31-2.29-3.09-3.72c-0.19-0.32,0.7-1.5,1.32-2.02c8.63-7.25,17.29-14.48,25.97-21.67c0.47-0.4,0.94-0.8,1.43-1.18
+			c1.88-1.68,4.73-1.64,6.58,0.08c3.02,2.47,6,4.99,9.43,7.85c0-2.56,0.05-4.71-0.02-6.85c-0.05-1.55,0.49-2.29,2.14-2.21
+			c1.92,0.1,3.84,0.1,5.76,0c1.68-0.09,2.33,0.51,2.3,2.24c-0.08,4.54-0.1,9.08,0.03,13.61c0.08,1.03,0.54,2,1.28,2.73
+			c2.16,2.01,4.48,3.84,6.79,5.7c0.87,0.45,1.21,1.52,0.76,2.39c-0.11,0.21-0.26,0.4-0.44,0.55c-2.7,3.45-2.67,3.48-5.96,0.73
+			l-23.43-19.55C352.41,314.97,351.76,314.47,351,313.85z"/>
+	</g>
+</g>
+<g id="Community">
+	<g class="st9">
+		<path class="st5" d="M9.7,42.88H3.11c-1.77,0-3.2-1.43-3.2-3.2v-3.2c0-3.53,2.87-6.4,6.4-6.4h6.4c1.76,0,3.35,0.71,4.51,1.86
+			C13.19,34.15,10.33,38.14,9.7,42.88z M3.11,20.48c0-3.53,2.87-6.4,6.4-6.4s6.4,2.87,6.4,6.4s-2.87,6.4-6.4,6.4
+			S3.11,24.01,3.11,20.48z M51.11,44.8v2.88c0,2.65-2.15,4.8-4.8,4.8h-28.8c-2.65,0-4.8-2.15-4.8-4.8V44.8
+			c0-6.36,5.16-11.52,11.52-11.52h0.83c2.09,1,4.39,1.6,6.85,1.6c2.46,0,4.77-0.6,6.85-1.6h0.83C45.95,33.28,51.11,38.44,51.11,44.8
+			z M20.71,18.88c0-6.19,5.01-11.2,11.2-11.2c6.19,0,11.2,5.01,11.2,11.2s-5.01,11.2-11.2,11.2C25.72,30.08,20.71,25.07,20.71,18.88
+			z M63.91,36.48v3.2c0,1.77-1.43,3.2-3.2,3.2h-6.6c-0.62-4.74-3.48-8.73-7.51-10.94c1.16-1.15,2.75-1.86,4.51-1.86h6.4
+			C61.04,30.08,63.91,32.95,63.91,36.48z M47.91,20.48c0-3.53,2.87-6.4,6.4-6.4c3.53,0,6.4,2.87,6.4,6.4s-2.87,6.4-6.4,6.4
+			C50.78,26.88,47.91,24.01,47.91,20.48z"/>
+	</g>
+</g>
+<g id="Adressen" class="st0">
+	<g class="st8">
+		<defs>
+			<rect id="SVGID_1_" x="3.98" y="4.04" width="55.34" height="55.46"/>
+		</defs>
+		<clipPath id="SVGID_00000137852128488145803360000002351992332542316180_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g id="Gruppe_4997" style="clip-path:url(#SVGID_00000137852128488145803360000002351992332542316180_);">
+			<path id="Pfad_9157" class="st5" d="M21.8,59.5V4.04h34.22c1.64-0.18,3.12,1,3.3,2.65c0.02,0.21,0.02,0.43,0,0.64
+				c0,16.29,0,32.58,0,48.88c0.17,1.65-1.02,3.12-2.67,3.29c-0.21,0.02-0.42,0.02-0.63,0H21.8 M25.72,31.78
+				c0.03,8.19,6.69,14.8,14.88,14.77c8.19-0.03,14.8-6.69,14.77-14.88c-0.03-8.16-6.65-14.77-14.82-14.77
+				C32.35,16.91,25.71,23.57,25.72,31.78C25.72,31.78,25.72,31.78,25.72,31.78"/>
+			<path id="Pfad_9158" class="st5" d="M9.92,54.54c0.69,0,1.33,0,1.97,0c2.19,0,3.96-1.77,3.96-3.96c0-2.18-1.77-3.95-3.96-3.96
+				c-0.63,0-1.27,0-1.99,0v-3.97c0.69,0,1.31,0,1.95,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96
+				c-0.62,0-1.23,0-1.95,0v-4.95h1.8c2.19,0.11,4.05-1.57,4.16-3.76c0.11-2.19-1.57-4.05-3.76-4.16c-0.14-0.01-0.27-0.01-0.41,0
+				H9.89V17.9c0.69,0,1.32,0,1.96,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96c0,0,0,0,0,0c-0.62,0-1.23,0-1.99,0
+				c0-1.27,0.07-2.55,0.21-3.81c0.28-1.24,1.38-2.12,2.65-2.11c2.32-0.02,4.65-0.02,7.03-0.02v55.39c0,0-0.05,0.06-0.08,0.06
+				c-2.35,0-4.69,0.05-7.04,0c-1.47-0.09-2.63-1.27-2.71-2.73C9.88,56.05,9.92,55.36,9.92,54.54"/>
+			<path id="Pfad_9159" class="st5" d="M8.9,15.93c-0.95,0-1.89,0-2.84,0c-1.09,0-1.98-0.89-1.98-1.98c0-1.09,0.89-1.98,1.98-1.98
+				c1.89,0,3.79,0,5.68,0c1.09-0.06,2.03,0.77,2.1,1.86c0.06,1.09-0.77,2.03-1.86,2.1c-0.08,0-0.16,0-0.23,0
+				C10.79,15.92,9.85,15.92,8.9,15.93"/>
+			<path id="Pfad_9160" class="st5" d="M8.95,23.85c0.93,0,1.85,0,2.77,0c1.09-0.07,2.04,0.75,2.11,1.85
+				c0.07,1.09-0.75,2.04-1.84,2.11c-0.08,0.01-0.15,0.01-0.23,0c-1.89,0-3.79,0-5.68,0c-1.09,0.06-2.03-0.78-2.08-1.88
+				s0.78-2.03,1.88-2.08c0.08,0,0.16,0,0.23,0C7.05,23.85,7.99,23.85,8.95,23.85"/>
+			<path id="Pfad_9161" class="st5" d="M8.95,36.72c0.95,0,1.89,0,2.84,0c1.09-0.05,2.02,0.79,2.07,1.88
+				c0.05,1.09-0.79,2.02-1.88,2.07c-0.05,0-0.11,0-0.16,0c-1.93,0.01-3.87,0.01-5.8,0c-1.09,0.04-2.01-0.82-2.04-1.91
+				s0.82-2.01,1.91-2.04c0.05,0,0.11,0,0.16,0C7.02,36.72,7.98,36.72,8.95,36.72"/>
+			<path id="Pfad_9162" class="st5" d="M8.92,52.57c-0.95,0-1.89,0-2.84,0c-1.09,0.11-2.06-0.69-2.16-1.78s0.69-2.06,1.78-2.16
+				c0.12-0.01,0.25-0.01,0.37,0c1.91,0,3.83,0,5.74,0c1.09-0.05,2.02,0.79,2.07,1.88c0.05,1.09-0.79,2.02-1.88,2.07
+				c-0.05,0-0.11,0-0.16,0c-0.97,0-1.93,0-2.9,0"/>
+			<path id="Pfad_9163" class="st5" d="M44.92,30.89c2.24-2.47,2.04-6.29-0.43-8.53c-0.03-0.03-0.06-0.06-0.1-0.09
+				c-2.51-2.13-6.27-1.82-8.39,0.69c-1.96,2.31-1.87,5.73,0.2,7.93c-1.91,0.43-3.56,1.62-4.58,3.3c-0.87,1.73-1.2,3.69-0.95,5.61
+				c-3.79-4.48-3.98-10.98-0.47-15.69c4.37-5.58,12.43-6.57,18.02-2.2s6.57,12.43,2.2,18.02l0,0c0-0.86,0.03-1.61,0-2.36
+				c-0.03-2.76-1.72-5.23-4.28-6.27C45.75,31.15,45.34,31.01,44.92,30.89"/>
+			<path id="Pfad_9164" class="st5" d="M40.6,32.87c1.29-0.08,2.59-0.07,3.88,0.03c2.27,0.38,3.94,2.33,3.97,4.62
+				c0.04,1.34,0.02,2.68,0,4.02c-0.02,0.23-0.14,0.45-0.32,0.6c-4.5,3.32-10.63,3.32-15.13,0.02c-0.15-0.11-0.35-0.31-0.35-0.46
+				c-0.07-1.63-0.03-3.25,0.11-4.87c0.36-2.34,2.38-4.07,4.75-4.05c1.04-0.02,2.06,0,3.09,0C40.6,32.8,40.6,32.84,40.6,32.87"/>
+			<path id="Pfad_9165" class="st5" d="M40.57,22.86c2.19,0.01,3.95,1.78,3.95,3.97c-0.01,2.19-1.78,3.95-3.97,3.95
+				c-2.18-0.01-3.95-1.78-3.95-3.96C36.6,24.63,38.38,22.86,40.57,22.86L40.57,22.86"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/frontend/public/img/svg/my_profil.svg b/frontend/public/img/svg/my_profil.svg
new file mode 100644
index 000000000..ef41c2ef4
--- /dev/null
+++ b/frontend/public/img/svg/my_profil.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;fill:#72778F;}
+	.st2{font-family:'FontAwesome5Free-Solid';}
+	.st3{font-size:54.1523px;}
+	.st4{enable-background:new    ;}
+	.st5{fill:#72778F;}
+	.st6{font-size:56.8896px;}
+	.st7{font-size:51.2px;}
+	.st8{display:inline;}
+	.st9{font-size:51.1997px;}
+	.st10{clip-path:url(#SVGID_00000129207379519052237770000007964736051681552055_);}
+</style>
+<g id="Transaktionen" class="st0">
+	<text transform="matrix(1 0 0 1 5.4236 52.4902)" class="st1 st2 st3"></text>
+</g>
+<g id="mein_x5F_profil">
+	<g class="st4">
+		<path class="st5" d="M56.7,51.31v4.64c0,2.96-2.4,5.35-5.35,5.35H12.11c-2.95,0-5.35-2.4-5.35-5.35v-4.64
+			c0-8.27,6.71-14.98,14.98-14.98h1.86c2.49,1.14,5.23,1.78,8.13,1.78s5.65-0.65,8.13-1.78h1.86C49.99,36.33,56.7,43.04,56.7,51.31z
+			 M17.46,18.49c0-7.88,6.39-14.27,14.27-14.27S46,10.61,46,18.49s-6.39,14.27-14.27,14.27S17.46,26.37,17.46,18.49z"/>
+	</g>
+</g>
+<g id="Top_Stories" class="st0">
+	<text transform="matrix(1 0 0 1 0 54.8652)" class="st1 st2 st6"></text>
+</g>
+<g id="Senden" class="st0">
+	<text transform="matrix(1 0 0 1 4.882812e-04 50.6426)" class="st1 st2 st7"></text>
+</g>
+<g id="Home" class="st0">
+	<g id="Haus" transform="translate(-319.046 -300.603)" class="st8">
+		<path id="Pfad_9173" class="st5" d="M356.12,358.2v-15.2h-10.16v14.91c-0.37,0.12-0.75,0.21-1.13,0.26c-4.54,0-9.07,0.04-13.61,0
+			c-2.24-0.02-3.13-0.92-3.14-3.14c-0.03-5.84-0.03-11.69,0.03-17.53c0.02-0.72,0.32-1.41,0.83-1.92
+			c7.28-6.08,14.61-12.1,22.02-18.21c0.51,0.38,1.01,0.71,1.47,1.09c6.69,5.5,13.35,11.03,20.07,16.5c1.01,0.7,1.58,1.88,1.52,3.1
+			c-0.09,5.5-0.03,11-0.04,16.5c0,2.79-0.78,3.6-3.5,3.61C365.8,358.21,361.14,358.2,356.12,358.2z"/>
+		<path id="Pfad_9174" class="st5" d="M351,313.85c-8.82,7.36-17.46,14.59-26.15,21.76c-0.76,0.64-2.31,1.49-2.69,1.2
+			c-1.26-1.03-2.31-2.29-3.09-3.72c-0.19-0.32,0.7-1.5,1.32-2.02c8.63-7.25,17.29-14.48,25.97-21.67c0.47-0.4,0.94-0.8,1.43-1.18
+			c1.88-1.68,4.73-1.64,6.58,0.08c3.02,2.47,6,4.99,9.43,7.85c0-2.56,0.05-4.71-0.02-6.85c-0.05-1.55,0.49-2.29,2.14-2.21
+			c1.92,0.1,3.84,0.1,5.76,0c1.68-0.09,2.33,0.51,2.3,2.24c-0.08,4.54-0.1,9.08,0.03,13.61c0.08,1.03,0.54,2,1.28,2.73
+			c2.16,2.01,4.48,3.84,6.79,5.7c0.87,0.45,1.21,1.52,0.76,2.39c-0.11,0.21-0.26,0.4-0.44,0.55c-2.7,3.45-2.67,3.48-5.96,0.73
+			l-23.43-19.55C352.41,314.97,351.76,314.47,351,313.85z"/>
+	</g>
+</g>
+<g id="Community" class="st0">
+	<text transform="matrix(1 0 0 1 -0.0903 49.2777)" class="st1 st2 st9"></text>
+</g>
+<g id="Adressen" class="st0">
+	<g class="st8">
+		<defs>
+			<rect id="SVGID_1_" x="3.98" y="4.04" width="55.34" height="55.46"/>
+		</defs>
+		<clipPath id="SVGID_00000025415889365352747170000010559577976254934956_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		<g id="Gruppe_4997" style="clip-path:url(#SVGID_00000025415889365352747170000010559577976254934956_);">
+			<path id="Pfad_9157" class="st5" d="M21.8,59.5V4.04h34.22c1.64-0.18,3.12,1,3.3,2.65c0.02,0.21,0.02,0.43,0,0.64
+				c0,16.29,0,32.58,0,48.88c0.17,1.65-1.02,3.12-2.67,3.29c-0.21,0.02-0.42,0.02-0.63,0H21.8 M25.72,31.78
+				c0.03,8.19,6.69,14.8,14.88,14.77c8.19-0.03,14.8-6.69,14.77-14.88c-0.03-8.16-6.65-14.77-14.82-14.77
+				C32.35,16.91,25.71,23.57,25.72,31.78C25.72,31.78,25.72,31.78,25.72,31.78"/>
+			<path id="Pfad_9158" class="st5" d="M9.92,54.54c0.69,0,1.33,0,1.97,0c2.19,0,3.96-1.77,3.96-3.96c0-2.18-1.77-3.95-3.96-3.96
+				c-0.63,0-1.27,0-1.99,0v-3.97c0.69,0,1.31,0,1.95,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96
+				c-0.62,0-1.23,0-1.95,0v-4.95h1.8c2.19,0.11,4.05-1.57,4.16-3.76c0.11-2.19-1.57-4.05-3.76-4.16c-0.14-0.01-0.27-0.01-0.41,0
+				H9.89V17.9c0.69,0,1.32,0,1.96,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96c0,0,0,0,0,0c-0.62,0-1.23,0-1.99,0
+				c0-1.27,0.07-2.55,0.21-3.81c0.28-1.24,1.38-2.12,2.65-2.11c2.32-0.02,4.65-0.02,7.03-0.02v55.39c0,0-0.05,0.06-0.08,0.06
+				c-2.35,0-4.69,0.05-7.04,0c-1.47-0.09-2.63-1.27-2.71-2.73C9.88,56.05,9.92,55.36,9.92,54.54"/>
+			<path id="Pfad_9159" class="st5" d="M8.9,15.93c-0.95,0-1.89,0-2.84,0c-1.09,0-1.98-0.89-1.98-1.98c0-1.09,0.89-1.98,1.98-1.98
+				c1.89,0,3.79,0,5.68,0c1.09-0.06,2.03,0.77,2.1,1.86c0.06,1.09-0.77,2.03-1.86,2.1c-0.08,0-0.16,0-0.23,0
+				C10.79,15.92,9.85,15.92,8.9,15.93"/>
+			<path id="Pfad_9160" class="st5" d="M8.95,23.85c0.93,0,1.85,0,2.77,0c1.09-0.07,2.04,0.75,2.11,1.85
+				c0.07,1.09-0.75,2.04-1.84,2.11c-0.08,0.01-0.15,0.01-0.23,0c-1.89,0-3.79,0-5.68,0c-1.09,0.06-2.03-0.78-2.08-1.88
+				s0.78-2.03,1.88-2.08c0.08,0,0.16,0,0.23,0C7.05,23.85,7.99,23.85,8.95,23.85"/>
+			<path id="Pfad_9161" class="st5" d="M8.95,36.72c0.95,0,1.89,0,2.84,0c1.09-0.05,2.02,0.79,2.07,1.88
+				c0.05,1.09-0.79,2.02-1.88,2.07c-0.05,0-0.11,0-0.16,0c-1.93,0.01-3.87,0.01-5.8,0c-1.09,0.04-2.01-0.82-2.04-1.91
+				s0.82-2.01,1.91-2.04c0.05,0,0.11,0,0.16,0C7.02,36.72,7.98,36.72,8.95,36.72"/>
+			<path id="Pfad_9162" class="st5" d="M8.92,52.57c-0.95,0-1.89,0-2.84,0c-1.09,0.11-2.06-0.69-2.16-1.78s0.69-2.06,1.78-2.16
+				c0.12-0.01,0.25-0.01,0.37,0c1.91,0,3.83,0,5.74,0c1.09-0.05,2.02,0.79,2.07,1.88c0.05,1.09-0.79,2.02-1.88,2.07
+				c-0.05,0-0.11,0-0.16,0c-0.97,0-1.93,0-2.9,0"/>
+			<path id="Pfad_9163" class="st5" d="M44.92,30.89c2.24-2.47,2.04-6.29-0.43-8.53c-0.03-0.03-0.06-0.06-0.1-0.09
+				c-2.51-2.13-6.27-1.82-8.39,0.69c-1.96,2.31-1.87,5.73,0.2,7.93c-1.91,0.43-3.56,1.62-4.58,3.3c-0.87,1.73-1.2,3.69-0.95,5.61
+				c-3.79-4.48-3.98-10.98-0.47-15.69c4.37-5.58,12.43-6.57,18.02-2.2s6.57,12.43,2.2,18.02l0,0c0-0.86,0.03-1.61,0-2.36
+				c-0.03-2.76-1.72-5.23-4.28-6.27C45.75,31.15,45.34,31.01,44.92,30.89"/>
+			<path id="Pfad_9164" class="st5" d="M40.6,32.87c1.29-0.08,2.59-0.07,3.88,0.03c2.27,0.38,3.94,2.33,3.97,4.62
+				c0.04,1.34,0.02,2.68,0,4.02c-0.02,0.23-0.14,0.45-0.32,0.6c-4.5,3.32-10.63,3.32-15.13,0.02c-0.15-0.11-0.35-0.31-0.35-0.46
+				c-0.07-1.63-0.03-3.25,0.11-4.87c0.36-2.34,2.38-4.07,4.75-4.05c1.04-0.02,2.06,0,3.09,0C40.6,32.8,40.6,32.84,40.6,32.87"/>
+			<path id="Pfad_9165" class="st5" d="M40.57,22.86c2.19,0.01,3.95,1.78,3.95,3.97c-0.01,2.19-1.78,3.95-3.97,3.95
+				c-2.18-0.01-3.95-1.78-3.95-3.96C36.6,24.63,38.38,22.86,40.57,22.86L40.57,22.86"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/frontend/public/img/svg/write.svg b/frontend/public/img/svg/write.svg
new file mode 100644
index 000000000..45638e32e
--- /dev/null
+++ b/frontend/public/img/svg/write.svg
@@ -0,0 +1,287 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;}
+	.st1{display:inline;enable-background:new    ;}
+	.st2{fill:#72778F;}
+	.st3{fill:#A2A6BB;}
+	.st4{display:inline;opacity:0.6;}
+	.st5{enable-background:new    ;}
+	.st6{clip-path:url(#SVGID_00000095319084122216941990000003876059359341478307_);}
+	.st7{fill:#F5F5F5;}
+	.st8{fill:#CD5656;}
+	.st9{display:inline;}
+	.st10{fill:#047006;}
+	.st11{fill:#FFFFFF;}
+	.st12{fill:#C2C2C2;}
+	.st13{clip-path:url(#SVGID_00000067941181806368316720000002317936364391484863_);}
+	.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#C58D38;}
+	.st15{clip-path:url(#SVGID_00000063591109121623545610000007980139569245760180_);}
+</style>
+<g id="Transaktionen" class="st0">
+	<g class="st1">
+		<path class="st2" d="M6.74,16.53L31.37,5.35c0.34-0.16,0.73-0.24,1.13-0.24c0.4,0,0.78,0.09,1.12,0.24l24.63,11.18
+			c1.75,0.79,1.75,3.44,0,4.23L33.62,31.94c-0.72,0.33-1.53,0.33-2.25,0L6.74,20.76C4.99,19.97,4.99,17.32,6.74,16.53z M58.26,34.33
+			L33.62,45.5c-0.72,0.33-1.53,0.33-2.25,0L6.74,34.33c-1.75-0.79-1.75-3.44,0-4.23l6.14-2.78l17.09,7.75
+			c0.8,0.36,1.65,0.55,2.52,0.55c0.87,0,1.72-0.18,2.52-0.55l17.09-7.75l6.14,2.78C60.01,30.89,60.01,33.54,58.26,34.33z
+			 M58.26,47.85L33.62,59.01c-0.72,0.33-1.53,0.33-2.25,0L6.74,47.85c-1.75-0.79-1.75-3.44,0-4.23l6.12-2.77l17.12,7.76
+			c0.8,0.36,1.65,0.55,2.52,0.55c0.87,0,1.72-0.18,2.52-0.55l17.12-7.76l6.12,2.77C60.01,44.41,60.01,47.05,58.26,47.85z"/>
+	</g>
+</g>
+<g id="Top_Stories" class="st0">
+	<g class="st1">
+		<path class="st2" d="M64,14.86v34.67c0,2.95-2.39,5.33-5.33,5.33H6.22C2.79,54.87,0,52.08,0,48.64V18.42
+			c0-1.47,1.19-2.67,2.67-2.67h4.44v-0.89c0-1.47,1.19-2.67,2.67-2.67h51.56C62.81,12.2,64,13.39,64,14.86z M7.11,48.64V21.09H5.33
+			v27.56c0,0.49,0.4,0.89,0.89,0.89C6.71,49.53,7.11,49.13,7.11,48.64z M56.89,25.09v-4.44c0-0.74-0.6-1.33-1.33-1.33h-40
+			c-0.74,0-1.33,0.6-1.33,1.33v4.44c0,0.74,0.6,1.33,1.33,1.33h40C56.29,26.42,56.89,25.82,56.89,25.09z M33.78,35.75v-0.89
+			c0-0.74-0.6-1.33-1.33-1.33H15.56c-0.74,0-1.33,0.6-1.33,1.33v0.89c0,0.74,0.6,1.33,1.33,1.33h16.89
+			C33.18,37.09,33.78,36.49,33.78,35.75z M33.78,46.42v-0.89c0-0.74-0.6-1.33-1.33-1.33H15.56c-0.74,0-1.33,0.6-1.33,1.33v0.89
+			c0,0.74,0.6,1.33,1.33,1.33h16.89C33.18,47.75,33.78,47.16,33.78,46.42z M56.89,35.75v-0.89c0-0.74-0.6-1.33-1.33-1.33H38.67
+			c-0.74,0-1.33,0.6-1.33,1.33v0.89c0,0.74,0.6,1.33,1.33,1.33h16.89C56.29,37.09,56.89,36.49,56.89,35.75z M56.89,46.42v-0.89
+			c0-0.74-0.6-1.33-1.33-1.33H38.67c-0.74,0-1.33,0.6-1.33,1.33v0.89c0,0.74,0.6,1.33,1.33,1.33h16.89
+			C56.29,47.75,56.89,47.16,56.89,46.42z"/>
+	</g>
+</g>
+<g id="share" class="st0">
+	<g class="st1">
+		<path class="st3" d="M63.85,56.87c0,3.77-3.05,6.82-6.82,6.82H6.98c-3.77,0-6.82-3.06-6.82-6.82V6.82C0.15,3.06,3.21,0,6.98,0
+			h50.05c3.77,0,6.82,3.06,6.82,6.82V56.87z M38,39.62l-9.66-5.79c0.16-0.64,0.25-1.3,0.25-1.98c0-0.68-0.09-1.34-0.25-1.97
+			l9.66-5.8c1.42,1.3,3.3,2.09,5.37,2.09c4.4,0,7.96-3.56,7.96-7.96s-3.57-7.96-7.96-7.96s-7.96,3.56-7.96,7.96
+			c0,0.68,0.09,1.34,0.25,1.98L26,25.97c-1.42-1.3-3.3-2.09-5.37-2.09c-4.4,0-7.96,3.56-7.96,7.96s3.57,7.96,7.96,7.96
+			c2.07,0,3.96-0.79,5.37-2.08l9.66,5.79c-0.16,0.63-0.25,1.29-0.25,1.98c0,4.4,3.57,7.96,7.96,7.96s7.96-3.56,7.96-7.96
+			s-3.57-7.96-7.96-7.96C41.3,37.53,39.42,38.33,38,39.62z"/>
+	</g>
+</g>
+<g id="settings" class="st0">
+	<g id="Settings" transform="translate(1)" class="st4">
+		<g class="st5">
+			<path class="st2" d="M53,20.34c-1.17,0.82-2.79,0.54-3.61-0.63c-4.31-6.14-11.36-9.87-18.86-9.98
+				c-6.09-0.09-11.77,2.17-15.95,6.36c-4.01,4.01-6.17,9.34-6.08,15.02l-0.02,2.56c-0.04,1.4-1.19,2.52-2.59,2.52
+				c-0.03,0-0.05,0-0.08,0c-1.43-0.04-2.56-1.24-2.51-2.67l0.01-2.32C3.2,24.09,5.9,17.43,10.9,12.41
+				c5.19-5.19,12.16-7.97,19.7-7.88c9.16,0.14,17.77,4.69,23.03,12.19C54.45,17.89,54.17,19.51,53,20.34z M19.29,23.79
+				c-2.03,2.49-3.08,5.52-3.02,8.75c0.07,4.39-0.29,8.8-1.07,13.1c-0.09,0.49-0.84,2.47-3.01,2.09c-1.41-0.26-2.34-1.6-2.09-3.01
+				c0.72-3.97,1.05-8.04,0.98-12.1c-0.07-4.4,1.42-8.7,4.19-12.1c0.91-1.11,2.53-1.28,3.65-0.38
+				C20.02,21.04,20.19,22.67,19.29,23.79z M42.2,33.37c0.08,5.5-0.32,11.03-1.22,16.43c-0.08,0.5-0.82,2.49-2.98,2.14
+				c-1.41-0.24-2.37-1.57-2.13-2.98c0.84-5.1,1.23-10.32,1.15-15.51c-0.05-3.25-2.84-5.94-6.22-5.99c-3.73-0.01-5.93,2.85-5.88,5.65
+				c0.09,5.56-0.44,11.12-1.55,16.53c-0.29,1.4-1.65,2.3-3.06,2.01c-1.4-0.29-2.3-1.66-2.01-3.06c1.04-5.04,1.52-10.22,1.44-15.4
+				c-0.09-5.83,4.53-10.93,11.14-10.92C37.02,22.36,42.11,27.34,42.2,33.37z M50.85,33.04c0.01,0.53,0.02,0.92,0.02,1.45
+				c0,3.89-0.22,7.72-0.65,11.49c-0.12,1-1.07,2.49-2.87,2.28c-1.42-0.16-2.44-1.45-2.28-2.87c0.46-4.05,0.67-8.18,0.6-12.28
+				c-0.12-7.89-6.85-14.41-15-14.54c-1.24-0.01-2.48,0.11-3.67,0.4c-1.39,0.32-2.79-0.53-3.12-1.93s0.53-2.79,1.93-3.12
+				c1.61-0.38,3.28-0.58,4.95-0.54C41.66,13.57,50.68,22.38,50.85,33.04z M33.55,33.7c0.17,10.7-1.72,19.08-3.18,24.25
+				c-0.32,1.15-1.36,1.89-2.49,1.89c-2.27,0-2.79-2.24-2.5-3.29c2.11-7.52,3.12-15.05,2.99-22.85c0-1.43,1.16-2.59,2.59-2.59
+				C32.39,31.1,33.55,32.27,33.55,33.7z M58.6,34.34c-0.01,1.42-1.17,2.57-2.59,2.57h-0.02c-1.43-0.01-2.58-1.18-2.57-2.62
+				c0.02-2.61,0-4.34-0.51-6.65c-0.31-1.4,0.58-2.78,1.97-3.09c1.41-0.32,2.78,0.58,3.09,1.97C58.64,29.57,58.62,31.94,58.6,34.34z"
+				/>
+		</g>
+	</g>
+</g>
+<g id="Senden" class="st0">
+	<g class="st1">
+		<path class="st2" d="M64,12.24v38.4c0,1.77-1.43,3.2-3.2,3.2H3.2c-1.77,0-3.2-1.43-3.2-3.2v-38.4c0-1.77,1.43-3.2,3.2-3.2h57.6
+			C62.57,9.04,64,10.47,64,12.24z M21.87,34.12c0-2-1.3-3.78-3.16-4.34l-4.5-1.35c-0.52-0.15-0.88-0.68-0.88-1.27
+			c0-0.73,0.53-1.32,1.18-1.32h2.81c0.46,0,0.9,0.13,1.28,0.37c0.32,0.2,0.74,0.19,1.01-0.07l1.18-1.12
+			c0.35-0.34,0.33-0.92-0.06-1.21c-0.91-0.68-2.01-1.08-3.14-1.13v-1.63c0-0.44-0.36-0.8-0.8-0.8h-1.6c-0.44,0-0.8,0.36-0.8,0.8
+			v1.61c-2.36,0.06-4.27,2.06-4.27,4.51c0,2,1.3,3.78,3.16,4.34l4.5,1.35c0.52,0.15,0.88,0.68,0.88,1.27c0,0.73-0.53,1.32-1.18,1.32
+			h-2.81c-0.46,0-0.9-0.13-1.28-0.37c-0.32-0.2-0.74-0.19-1.01,0.07l-1.18,1.12c-0.35,0.34-0.33,0.92,0.06,1.21
+			c0.91,0.68,2.01,1.08,3.14,1.14v1.63c0,0.44,0.36,0.8,0.8,0.8h1.6c0.44,0,0.8-0.36,0.8-0.8v-1.61
+			C19.96,38.57,21.87,36.58,21.87,34.12z M57.6,25.84c0-0.44-0.36-0.8-0.8-0.8H29.6c-0.44,0-0.8,0.36-0.8,0.8v1.6
+			c0,0.44,0.36,0.8,0.8,0.8h27.2c0.44,0,0.8-0.36,0.8-0.8V25.84z M41.6,35.44c0-0.44-0.36-0.8-0.8-0.8H29.6
+			c-0.44,0-0.8,0.36-0.8,0.8v1.6c0,0.44,0.36,0.8,0.8,0.8h11.2c0.44,0,0.8-0.36,0.8-0.8V35.44z M57.6,35.44c0-0.44-0.36-0.8-0.8-0.8
+			h-8c-0.44,0-0.8,0.36-0.8,0.8v1.6c0,0.44,0.36,0.8,0.8,0.8h8c0.44,0,0.8-0.36,0.8-0.8V35.44z"/>
+	</g>
+</g>
+<g id="Schreiben">
+	<g id="schreiben_icon" transform="translate(0 0)">
+		<g>
+			<defs>
+				<rect id="SVGID_1_" x="0.42" width="63.16" height="64"/>
+			</defs>
+			<clipPath id="SVGID_00000104686239521587677620000005551387290565555606_">
+				<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+			</clipPath>
+			
+				<g id="Gruppe_4994" transform="translate(0 0)" style="clip-path:url(#SVGID_00000104686239521587677620000005551387290565555606_);">
+				<path id="Pfad_9152" class="st7" d="M62.97,12.37c-0.99,5.81-2.55,11.52-4.67,17.02c-0.15,0.36-0.44,0.66-0.79,0.83
+					c-4.29,1.79-8.6,3.55-12.9,5.32c-0.19,0.08-0.37,0.17-0.56,0.26l0.03,0.1H55.5c-1.04,1.72-2,3.34-3,4.93
+					c-0.19,0.28-0.46,0.51-0.78,0.64c-3.73,1.54-7.47,3.05-11.21,4.57l-4.36,1.77v0.14H46.4c-4.89,4.43-11.09,7.15-17.66,7.76
+					c-4.8,0.44-9.65,0.09-14.34-1.03c-0.39-0.12-0.82,0-1.07,0.32c-2.61,2.68-5.22,5.34-7.85,8c-1.06,1.22-2.91,1.36-4.13,0.3
+					c-0.35-0.3-0.62-0.68-0.79-1.11c-0.04-0.07-0.09-0.14-0.13-0.2v-2.01c0.44-0.62,0.92-1.21,1.42-1.78
+					c9.79-9.98,19.6-19.95,29.41-29.91c0.38-0.38,0.77-0.75,1.12-1.16c0.55-0.62,0.66-1.52,0.26-2.25
+					c-0.36-0.73-1.17-1.13-1.97-0.98c-0.51,0.14-0.97,0.41-1.35,0.79C22.63,31.45,15.95,38.22,9.28,45
+					c-0.15,0.16-0.32,0.3-0.53,0.51c-0.03-0.16-0.04-0.23-0.06-0.31c-0.44-3.19-0.52-6.42-0.25-9.64c0.43-5.66,2.37-11.1,5.62-15.75
+					c3.72-5.09,8.63-9.19,14.3-11.94c8.28-4,17.17-6.58,26.3-7.63c2.65-0.57,5.42-0.33,7.93,0.69C64.22,2.22,63.45,8.98,62.97,12.37
+					"/>
+			</g>
+		</g>
+	</g>
+</g>
+<g id="mein_x5F_profil" class="st0">
+	<g class="st1">
+		<path class="st2" d="M56.7,51.31v4.64c0,2.96-2.4,5.35-5.35,5.35H12.11c-2.95,0-5.35-2.4-5.35-5.35v-4.64
+			c0-8.27,6.71-14.98,14.98-14.98h1.86c2.49,1.14,5.23,1.78,8.13,1.78s5.65-0.65,8.13-1.78h1.86C49.99,36.33,56.7,43.04,56.7,51.31z
+			 M17.46,18.49c0-7.88,6.39-14.27,14.27-14.27S46,10.61,46,18.49s-6.39,14.27-14.27,14.27S17.46,26.37,17.46,18.49z"/>
+	</g>
+</g>
+<g id="logout" class="st0">
+	<g class="st1">
+		<path class="st8" d="M22.86,56.38H12.19C5.46,56.38,0,50.92,0,44.19V19.81C0,13.08,5.46,7.62,12.19,7.62h10.67
+			c0.84,0,1.52,0.69,1.52,1.52v5.08c0,0.84-0.69,1.52-1.52,1.52H12.19c-2.25,0-4.06,1.82-4.06,4.06v24.38
+			c0,2.25,1.82,4.06,4.06,4.06h10.67c0.84,0,1.52,0.69,1.52,1.52v5.08C24.38,55.69,23.7,56.38,22.86,56.38z M41.78,55.49
+			c-1.9,1.9-5.21,0.57-5.21-2.16V41.14H19.3c-1.69,0-3.05-1.36-3.05-3.05V25.9c0-1.69,1.36-3.05,3.05-3.05h17.27V10.66
+			c0-2.72,3.29-4.06,5.21-2.16l21.33,21.33c1.18,1.19,1.18,3.12,0,4.32L41.78,55.49z"/>
+	</g>
+</g>
+<g id="info" class="st0">
+	<g id="Infobutton" transform="translate(0 -0.001)" class="st9">
+		<circle id="Ellipse_4" class="st10" cx="32" cy="32" r="32"/>
+		<rect id="Rechteck_49" x="28" y="28" class="st11" width="8" height="24"/>
+		<circle id="Ellipse_5" class="st11" cx="32" cy="20" r="4"/>
+	</g>
+</g>
+<g id="inactive" class="st0">
+	<g id="Gruppe_4989_00000054225602090163449300000007297713312140317098_" transform="translate(-772 -261.959)" class="st9">
+		<g id="Ellipse_17_00000142858137041837963310000001425871925284973490_" transform="translate(772 261.959)">
+			<circle class="st11" cx="32" cy="32" r="31.17"/>
+			<path class="st12" d="M32,64C14.35,64,0,49.64,0,32S14.35,0,32,0c17.65,0,32,14.35,32,32S49.65,64,32,64z M32,1.43
+				C15.14,1.43,1.43,15.14,1.43,32c0,16.85,13.71,30.57,30.57,30.57S62.57,48.85,62.57,32C62.57,15.14,48.85,1.43,32,1.43z"/>
+		</g>
+	</g>
+</g>
+<g id="vergaenglichkeit" class="st0">
+	<g class="st9">
+		<defs>
+			<rect id="SVGID_00000070085415845568073820000001771536674054423175_" x="8" width="48" height="64"/>
+		</defs>
+		<clipPath id="SVGID_00000085938528792957493290000002016998437306479290_">
+			<use xlink:href="#SVGID_00000070085415845568073820000001771536674054423175_"  style="overflow:visible;"/>
+		</clipPath>
+		<g id="Gruppe_4987" style="clip-path:url(#SVGID_00000085938528792957493290000002016998437306479290_);">
+			<path id="Pfad_9145" class="st14" d="M30.49,7.29c-2.57,2.79-5.01,5.68-7.32,8.67c-3,3.84-5.62,7.95-7.84,12.28
+				C13.36,31.86,12.22,35.88,12,40c0,0,10,6,20,2.01c6.38-2.4,13.27-3.09,20-2.01c0-4.8-3.19-8.63-8.73-14.8l-0.12-0.13
+				C38.04,19.83,33.77,13.83,30.49,7.29L30.49,7.29z M28.84,3.2C30.76,1.18,32,0,32,0c0.42,1.41,0.92,2.79,1.48,4.15
+				c3.15,6.83,7.48,13.06,12.79,18.4C51.51,28.39,56,33.38,56,40c0,6.36-2.53,12.47-7.03,16.97c-1.11,1.11-2.33,2.11-3.64,2.98
+				c-6.66,4.45-15.11,5.29-22.52,2.22c-1.45-0.6-2.84-1.34-4.15-2.22c-5.29-3.54-8.96-9.03-10.21-15.27C8.15,43.14,8,41.57,8,40
+				C8,26.67,22.32,10.07,28.84,3.2"/>
+			<path id="Pfad_9146" class="st14" d="M18.21,31.1c2.18-4.55,5-8.76,8.37-12.52l2.83,2.83c-3.07,3.45-5.63,7.31-7.63,11.47
+				L18.21,31.1z"/>
+		</g>
+	</g>
+</g>
+<g id="favorit" class="st0">
+	<g class="st1">
+		<path class="st2" d="M8.08,6c0-3.31,2.69-6,6-6h36c3.31,0,6,2.69,6,6v58l-24-14l-24,14V6z"/>
+	</g>
+</g>
+<g id="Home" class="st0">
+	<g id="Haus" transform="translate(-319.046 -300.603)" class="st9">
+		<path id="Pfad_9173" class="st2" d="M356.12,358.2v-15.2h-10.16v14.91c-0.37,0.12-0.75,0.21-1.13,0.26c-4.54,0-9.07,0.04-13.61,0
+			c-2.24-0.02-3.13-0.92-3.14-3.14c-0.03-5.84-0.03-11.69,0.03-17.53c0.02-0.72,0.32-1.41,0.83-1.92
+			c7.28-6.08,14.61-12.1,22.02-18.21c0.51,0.38,1.01,0.71,1.47,1.09c6.69,5.5,13.35,11.03,20.07,16.5c1.01,0.7,1.58,1.88,1.52,3.1
+			c-0.09,5.5-0.03,11-0.04,16.5c0,2.79-0.78,3.6-3.5,3.61C365.8,358.21,361.14,358.2,356.12,358.2z"/>
+		<path id="Pfad_9174" class="st2" d="M351,313.85c-8.82,7.36-17.46,14.59-26.15,21.76c-0.76,0.64-2.31,1.49-2.69,1.2
+			c-1.26-1.03-2.31-2.29-3.09-3.72c-0.19-0.32,0.7-1.5,1.32-2.02c8.63-7.25,17.29-14.48,25.97-21.67c0.47-0.4,0.94-0.8,1.43-1.18
+			c1.88-1.68,4.73-1.64,6.58,0.08c3.02,2.47,6,4.99,9.43,7.85c0-2.56,0.05-4.71-0.02-6.85c-0.05-1.55,0.49-2.29,2.14-2.21
+			c1.92,0.1,3.84,0.1,5.76,0c1.68-0.09,2.33,0.51,2.3,2.24c-0.08,4.54-0.1,9.08,0.03,13.61c0.08,1.03,0.54,2,1.28,2.73
+			c2.16,2.01,4.48,3.84,6.79,5.7c0.87,0.45,1.21,1.52,0.76,2.39c-0.11,0.21-0.26,0.4-0.44,0.55c-2.7,3.45-2.67,3.48-5.96,0.73
+			l-23.43-19.55C352.41,314.97,351.76,314.47,351,313.85z"/>
+	</g>
+</g>
+<g id="drop_down" class="st0">
+	<g id="arrow" transform="translate(17.958 0.75) rotate(90)" class="st9">
+		<g>
+			
+				<ellipse id="Ellipse_75_00000110457846241914254590000001499777333948890023_" transform="matrix(2.535182e-06 1 -1 2.535182e-06 17.2081 -45.2926)" class="st7" cx="31.25" cy="-14.04" rx="28.43" ry="29.06"/>
+			<path class="st2" d="M62.75-14.04c0,17.05-14.13,30.91-31.5,30.91C13.88,16.87-0.25,3-0.25-14.04c0-17.04,14.13-30.91,31.5-30.91
+				C48.62-44.95,62.75-31.09,62.75-14.04z M4.63-14.04c0,14.31,11.94,25.96,26.62,25.96c14.68,0,26.62-11.64,26.62-25.96
+				C57.87-28.35,45.93-40,31.25-40C16.57-40,4.63-28.35,4.63-14.04z"/>
+		</g>
+		<polygon class="st2" points="39.8,-13.64 27.39,-1.23 23.65,-4.97 32.32,-13.64 23.65,-22.31 27.39,-26.05 		"/>
+	</g>
+</g>
+<g id="Community" class="st0">
+	<g class="st1">
+		<path class="st2" d="M9.7,42.88H3.11c-1.77,0-3.2-1.43-3.2-3.2v-3.2c0-3.53,2.87-6.4,6.4-6.4h6.4c1.76,0,3.35,0.71,4.51,1.86
+			C13.19,34.15,10.33,38.14,9.7,42.88z M3.11,20.48c0-3.53,2.87-6.4,6.4-6.4s6.4,2.87,6.4,6.4s-2.87,6.4-6.4,6.4
+			S3.11,24.01,3.11,20.48z M51.11,44.8v2.88c0,2.65-2.15,4.8-4.8,4.8h-28.8c-2.65,0-4.8-2.15-4.8-4.8V44.8
+			c0-6.36,5.16-11.52,11.52-11.52h0.83c2.09,1,4.39,1.6,6.85,1.6c2.46,0,4.77-0.6,6.85-1.6h0.83C45.95,33.28,51.11,38.44,51.11,44.8
+			z M20.71,18.88c0-6.19,5.01-11.2,11.2-11.2c6.19,0,11.2,5.01,11.2,11.2s-5.01,11.2-11.2,11.2C25.72,30.08,20.71,25.07,20.71,18.88
+			z M63.91,36.48v3.2c0,1.77-1.43,3.2-3.2,3.2h-6.6c-0.62-4.74-3.48-8.73-7.51-10.94c1.16-1.15,2.75-1.86,4.51-1.86h6.4
+			C61.04,30.08,63.91,32.95,63.91,36.48z M47.91,20.48c0-3.53,2.87-6.4,6.4-6.4c3.53,0,6.4,2.87,6.4,6.4s-2.87,6.4-6.4,6.4
+			C50.78,26.88,47.91,24.01,47.91,20.48z"/>
+	</g>
+</g>
+<g id="coin_x5F_icon" class="st0">
+	<g class="st1">
+		<path class="st10" d="M46.41,30.2c0,4.98-9.68,9.01-21.62,9.01S3.17,35.18,3.17,30.2s9.68-9.01,21.62-9.01S46.41,25.22,46.41,30.2
+			z M24.79,42.81c8.46,0,16.97-1.98,21.62-5.81v5.81c0,3.98-9.68,7.21-21.62,7.21S3.17,46.79,3.17,42.81V37
+			C7.82,40.83,16.34,42.81,24.79,42.81z M24.79,53.62c8.47,0,16.97-1.53,21.62-4.81v4.81c0,3.98-9.68,7.21-21.62,7.21
+			S3.17,57.6,3.17,53.62v-4.81C7.82,52.09,16.32,53.62,24.79,53.62z M17.59,10.38c0-3.98,9.68-7.21,21.62-7.21
+			s21.62,3.23,21.62,7.21s-9.68,7.21-21.62,7.21S17.59,14.35,17.59,10.38z M42.73,21.09c7.23-0.36,14.1-1.88,18.1-4.71v4.81
+			c0,2.74-4.58,5.12-11.34,6.34C48.5,24.86,46.06,22.7,42.73,21.09z M50.02,31.08c4.36-0.78,8.2-2.04,10.81-3.89V32
+			c0,2.67-4.36,4.99-10.81,6.24V31.08z"/>
+	</g>
+</g>
+<g id="clock" class="st0">
+	<g class="st1">
+		<path class="st2" d="M64,32c0,17.68-14.32,32-32,32C14.32,64,0,49.68,0,32S14.32,0,32,0C49.68,0,64,14.32,64,32z M44.39,39.1
+			c0-0.65-0.3-1.23-0.78-1.61L36.13,32V13.42c0-1.14-0.92-2.06-2.06-2.06h-4.13c-1.14,0-2.06,0.93-2.06,2.06v20.07
+			c0,1.63,0.75,3.08,1.94,4.03l8.64,6.41c0.35,0.28,0.8,0.45,1.29,0.45c0.65,0,1.23-0.3,1.61-0.78l2.58-3.23
+			C44.22,40.03,44.39,39.58,44.39,39.1z"/>
+	</g>
+</g>
+<g id="Adressen" class="st0">
+	<g class="st9">
+		<defs>
+			<rect id="SVGID_00000098937621113595409810000007709929726849059466_" x="3.98" y="4.04" width="55.34" height="55.46"/>
+		</defs>
+		<clipPath id="SVGID_00000011012408749757469700000003862327475291214757_">
+			<use xlink:href="#SVGID_00000098937621113595409810000007709929726849059466_"  style="overflow:visible;"/>
+		</clipPath>
+		<g id="Gruppe_4997" style="clip-path:url(#SVGID_00000011012408749757469700000003862327475291214757_);">
+			<path id="Pfad_9157" class="st2" d="M21.8,59.5V4.04h34.22c1.64-0.18,3.12,1,3.3,2.65c0.02,0.21,0.02,0.43,0,0.64
+				c0,16.29,0,32.58,0,48.88c0.17,1.65-1.02,3.12-2.67,3.29c-0.21,0.02-0.42,0.02-0.63,0H21.8 M25.72,31.78
+				c0.03,8.19,6.69,14.8,14.88,14.77c8.19-0.03,14.8-6.69,14.77-14.88c-0.03-8.16-6.65-14.77-14.82-14.77
+				C32.35,16.91,25.71,23.57,25.72,31.78C25.72,31.78,25.72,31.78,25.72,31.78"/>
+			<path id="Pfad_9158" class="st2" d="M9.92,54.54c0.69,0,1.33,0,1.97,0c2.19,0,3.96-1.77,3.96-3.96c0-2.18-1.77-3.95-3.96-3.96
+				c-0.63,0-1.27,0-1.99,0v-3.97c0.69,0,1.31,0,1.95,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96
+				c-0.62,0-1.23,0-1.95,0v-4.95h1.8c2.19,0.11,4.05-1.57,4.16-3.76c0.11-2.19-1.57-4.05-3.76-4.16c-0.14-0.01-0.27-0.01-0.41,0
+				H9.89V17.9c0.69,0,1.32,0,1.96,0c2.19,0,3.96-1.77,3.96-3.96c0-2.19-1.77-3.96-3.96-3.96c0,0,0,0,0,0c-0.62,0-1.23,0-1.99,0
+				c0-1.27,0.07-2.55,0.21-3.81c0.28-1.24,1.38-2.12,2.65-2.11c2.32-0.02,4.65-0.02,7.03-0.02v55.39c0,0-0.05,0.06-0.08,0.06
+				c-2.35,0-4.69,0.05-7.04,0c-1.47-0.09-2.63-1.27-2.71-2.73C9.88,56.05,9.92,55.36,9.92,54.54"/>
+			<path id="Pfad_9159" class="st2" d="M8.9,15.93c-0.95,0-1.89,0-2.84,0c-1.09,0-1.98-0.89-1.98-1.98c0-1.09,0.89-1.98,1.98-1.98
+				c1.89,0,3.79,0,5.68,0c1.09-0.06,2.03,0.77,2.1,1.86c0.06,1.09-0.77,2.03-1.86,2.1c-0.08,0-0.16,0-0.23,0
+				C10.79,15.92,9.85,15.92,8.9,15.93"/>
+			<path id="Pfad_9160" class="st2" d="M8.95,23.85c0.93,0,1.85,0,2.77,0c1.09-0.07,2.04,0.75,2.11,1.85
+				c0.07,1.09-0.75,2.04-1.84,2.11c-0.08,0.01-0.15,0.01-0.23,0c-1.89,0-3.79,0-5.68,0c-1.09,0.06-2.03-0.78-2.08-1.88
+				s0.78-2.03,1.88-2.08c0.08,0,0.16,0,0.23,0C7.05,23.85,7.99,23.85,8.95,23.85"/>
+			<path id="Pfad_9161" class="st2" d="M8.95,36.72c0.95,0,1.89,0,2.84,0c1.09-0.05,2.02,0.79,2.07,1.88
+				c0.05,1.09-0.79,2.02-1.88,2.07c-0.05,0-0.11,0-0.16,0c-1.93,0.01-3.87,0.01-5.8,0c-1.09,0.04-2.01-0.82-2.04-1.91
+				s0.82-2.01,1.91-2.04c0.05,0,0.11,0,0.16,0C7.02,36.72,7.98,36.72,8.95,36.72"/>
+			<path id="Pfad_9162" class="st2" d="M8.92,52.57c-0.95,0-1.89,0-2.84,0c-1.09,0.11-2.06-0.69-2.16-1.78s0.69-2.06,1.78-2.16
+				c0.12-0.01,0.25-0.01,0.37,0c1.91,0,3.83,0,5.74,0c1.09-0.05,2.02,0.79,2.07,1.88c0.05,1.09-0.79,2.02-1.88,2.07
+				c-0.05,0-0.11,0-0.16,0c-0.97,0-1.93,0-2.9,0"/>
+			<path id="Pfad_9163" class="st2" d="M44.92,30.89c2.24-2.47,2.04-6.29-0.43-8.53c-0.03-0.03-0.06-0.06-0.1-0.09
+				c-2.51-2.13-6.27-1.82-8.39,0.69c-1.96,2.31-1.87,5.73,0.2,7.93c-1.91,0.43-3.56,1.62-4.58,3.3c-0.87,1.73-1.2,3.69-0.95,5.61
+				c-3.79-4.48-3.98-10.98-0.47-15.69c4.37-5.58,12.43-6.57,18.02-2.2s6.57,12.43,2.2,18.02l0,0c0-0.86,0.03-1.61,0-2.36
+				c-0.03-2.76-1.72-5.23-4.28-6.27C45.75,31.15,45.34,31.01,44.92,30.89"/>
+			<path id="Pfad_9164" class="st2" d="M40.6,32.87c1.29-0.08,2.59-0.07,3.88,0.03c2.27,0.38,3.94,2.33,3.97,4.62
+				c0.04,1.34,0.02,2.68,0,4.02c-0.02,0.23-0.14,0.45-0.32,0.6c-4.5,3.32-10.63,3.32-15.13,0.02c-0.15-0.11-0.35-0.31-0.35-0.46
+				c-0.07-1.63-0.03-3.25,0.11-4.87c0.36-2.34,2.38-4.07,4.75-4.05c1.04-0.02,2.06,0,3.09,0C40.6,32.8,40.6,32.84,40.6,32.87"/>
+			<path id="Pfad_9165" class="st2" d="M40.57,22.86c2.19,0.01,3.95,1.78,3.95,3.97c-0.01,2.19-1.78,3.95-3.97,3.95
+				c-2.18-0.01-3.95-1.78-3.95-3.96C36.6,24.63,38.38,22.86,40.57,22.86L40.57,22.86"/>
+		</g>
+	</g>
+</g>
+<g id="active" class="st0">
+	<g id="Gruppe_4989" transform="translate(-772 -261.959)" class="st9">
+		<circle id="Ellipse_17" class="st10" cx="804" cy="293.96" r="32"/>
+		<path class="st7" d="M823.94,280.44c-1.25-1.24-3.28-1.24-4.52,0.01l-20.72,20.83l-7.99-9.07c-1.17-1.33-3.19-1.46-4.52-0.29
+			c-1.33,1.17-1.46,3.19-0.29,4.52l10.25,11.64c0.01,0.01,0.02,0.01,0.03,0.02c0.04,0.05,0.05,0.1,0.1,0.15
+			c0.62,0.62,1.44,0.93,2.26,0.93c0.26,0,0.51-0.09,0.76-0.15c0.13-0.03,0.26-0.03,0.38-0.07c0.16-0.06,0.3-0.18,0.46-0.27
+			c0.18-0.1,0.37-0.18,0.53-0.32c0.02-0.02,0.03-0.05,0.06-0.07c0.02-0.02,0.06-0.03,0.08-0.05l23.15-23.27
+			C825.2,283.71,825.2,281.68,823.94,280.44z"/>
+	</g>
+</g>
+</svg>
diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
index 6ddda0ce0..9748eb187 100644
--- a/frontend/src/components/Template/ContentHeader/NavCommunity.vue
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="nav-community">
     <div class="bg-209 rounded-26 d-flex bd-highlight mx-xl-6 mx-lg-5 shadow">
-      <b-btn to="contribute" active-class="btn-active appBoxShadow" block variant="link">
-        <b-icon icon="pencil" class="mr-1 mr-md-2" />
+      <b-btn to="contribute" active-class="btn-active svg-icon-active" block variant="link">
+        <b-img src="/img/svg/write.svg" height="20" class="svg-icon" />
         {{ $t('community.submitContribution') }}
       </b-btn>
-      <b-btn to="contributions" active-class="btn-active appBoxShadow" block variant="link">
-        <b-icon icon="person" class="mr-1 mr-md-2" />
+      <b-btn to="contributions" active-class="btn-active svg-icon-active" block variant="link">
+        <b-img src="/img/svg/my_profil.svg" height="20" class="svg-icon" />
         {{ $t('community.myContributions') }}
       </b-btn>
-      <b-btn to="community" active-class="btn-active appBoxShadow" block variant="link">
-        <b-icon icon="people" class="mr-1 mr-md-2" />
+      <b-btn to="community" active-class="btn-active svg-icon-active" block variant="link">
+        <b-img src="/img/svg/community.svg" height="20" class="svg-icon" />
         {{ $t('community.community') }}
       </b-btn>
     </div>
@@ -31,8 +31,16 @@ export default {
 .btn-block + .btn-block {
   margin-top: 0rem;
 }
+
+.svg-icon {
+  filter: brightness(0) invert(0);
+}
 .btn-active {
   background-color: rgb(23 141 129);
   color: white;
+  font-weight: bold;
+}
+.btn-active .svg-icon {
+  filter: brightness(0) invert(1);
 }
 </style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 2a3c05dc7..e59f019d4 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -30,7 +30,7 @@
             </b-col>
           </b-row>
           <b-row>
-            <b-col cols="12" lg="4">
+            <b-col cols="12" lg="6">
               <b-button type="submit" variant="gradido" block>{{ $t('login') }}</b-button>
             </b-col>
           </b-row>

From f62765c7b05d76081c4373241caed2aa064e369d Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Mar 2023 10:08:32 +0100
Subject: [PATCH 5/8] added specific style of .btn-gradido in register, login,
 forgot password

---
 frontend/src/pages/ForgotPassword.vue | 18 +++++++++++++++---
 frontend/src/pages/Login.vue          | 10 ++++++++++
 frontend/src/pages/Register.vue       | 13 ++++++++++++-
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index 773b78278..fcc6ce05b 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -13,11 +13,13 @@
                 :label="$t('form.email')"
                 :placeholder="$t('form.email')"
               ></input-email>
-              <div class="text-center">
-                <b-button type="submit" variant="gradido">
+              <b-row>
+                <b-col cols="12" lg="6">
+                <b-button type="submit" variant="gradido" block>
                   {{ $t('settings.password.send_now') }}
                 </b-button>
-              </div>
+              </b-col>
+            </b-row>
             </b-form>
           </validation-observer>
         </b-col>
@@ -88,3 +90,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+.btn-gradido {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.btn-gradido-disable {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+</style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index e59f019d4..c177049ef 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -127,3 +127,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+.btn-gradido {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.btn-gradido-disable {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+</style>
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index c2877e897..8029a4bc6 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -81,12 +81,13 @@
             </b-col>
           </b-row>
           <b-row>
-            <b-col cols="12" lg="5">
+            <b-col cols="12" lg="6">
               <b-button
                 block
                 type="submit"
                 :disabled="disabled"
                 :variant="disabled ? 'gradido-disable' : 'gradido'"
+                class="default-class"
               >
                 {{ $t('signup') }}
               </b-button>
@@ -174,3 +175,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+.btn-gradido {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.btn-gradido-disable {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+</style>

From a9bd9c1d1d1a4b65bfd4fd9d13edf955ac37ca76 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <fridolin@tutanota.com>
Date: Fri, 3 Mar 2023 10:32:24 +0100
Subject: [PATCH 6/8] Update frontend/src/pages/Register.vue

Co-authored-by: Hannes Heine <heine.hannes@gmail.com>
---
 frontend/src/pages/Register.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 8029a4bc6..5f53b8ac1 100755
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -87,7 +87,6 @@
                 type="submit"
                 :disabled="disabled"
                 :variant="disabled ? 'gradido-disable' : 'gradido'"
-                class="default-class"
               >
                 {{ $t('signup') }}
               </b-button>

From d8cabca2b4e20d0831794bd99b77fca426f7cf49 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Mar 2023 10:40:10 +0100
Subject: [PATCH 7/8] forgot password submit add disabled

---
 frontend/src/pages/ForgotPassword.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ForgotPassword.vue b/frontend/src/pages/ForgotPassword.vue
index fcc6ce05b..80d07b9ff 100644
--- a/frontend/src/pages/ForgotPassword.vue
+++ b/frontend/src/pages/ForgotPassword.vue
@@ -5,7 +5,7 @@
       <div class="pb-5">{{ $t('site.forgotPassword.heading') }}</div>
       <b-row class="justify-content-center">
         <b-col>
-          <validation-observer ref="observer" v-slot="{ handleSubmit }">
+          <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
             <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
               <input-email
                 v-model="form.email"
@@ -15,7 +15,7 @@
               ></input-email>
               <b-row>
                 <b-col cols="12" lg="6">
-                <b-button type="submit" variant="gradido" block>
+                <b-button type="submit" :variant="valid ? 'gradido' : 'gradido-disable'" block :disabled="!valid">
                   {{ $t('settings.password.send_now') }}
                 </b-button>
               </b-col>

From 11161441eef9a44d15d059c9320f9e9cce8c4bfe Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 3 Mar 2023 10:57:54 +0100
Subject: [PATCH 8/8] add submit disable logic over validation

---
 frontend/src/pages/Login.vue         | 11 ++++++--
 frontend/src/pages/ResetPassword.vue | 38 +++++++++++++++++++---------
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index c177049ef..c02ee0e45 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -2,7 +2,7 @@
   <div class="login-form">
     <b-container v-if="enterData">
       <div class="pb-5" align="center">{{ $t('gdd_per_link.isFree') }}</div>
-      <validation-observer ref="observer" v-slot="{ handleSubmit }">
+      <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
         <b-form @submit.stop.prevent="handleSubmit(onSubmit)">
           <b-row>
             <b-col sm="12" md="12" lg="6">
@@ -31,7 +31,14 @@
           </b-row>
           <b-row>
             <b-col cols="12" lg="6">
-              <b-button type="submit" variant="gradido" block>{{ $t('login') }}</b-button>
+              <b-button
+                type="submit"
+                :variant="valid ? 'gradido' : 'gradido-disable'"
+                block
+                :disabled="!valid"
+              >
+                {{ $t('login') }}
+              </b-button>
             </b-col>
           </b-row>
         </b-form>
diff --git a/frontend/src/pages/ResetPassword.vue b/frontend/src/pages/ResetPassword.vue
index 5c791ac61..6fa76d994 100644
--- a/frontend/src/pages/ResetPassword.vue
+++ b/frontend/src/pages/ResetPassword.vue
@@ -1,20 +1,24 @@
 <template>
   <div v-if="enterData" class="resetpwd-form">
     <div class="pb-5">{{ $t('site.resetPassword.heading') }}</div>
-    <validation-observer ref="observer" v-slot="{ handleSubmit }">
+    <validation-observer ref="observer" v-slot="{ handleSubmit, valid }">
       <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
         <input-password-confirmation v-model="form" />
-        <div class="text-center">
-          <b-button
-            type="submit"
-            variant="gradido"
-            class="mt-4"
-            data-test="submit-new-password-btn"
-          >
-            <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-            {{ $t(displaySetup.button) }}
-          </b-button>
-        </div>
+        <b-row>
+          <b-col cols="12" lg="6">
+            <b-button
+              block
+              type="submit"
+              :variant="valid ? 'gradido' : 'gradido-disable'"
+              class="mt-4"
+              data-test="submit-new-password-btn"
+              :disabled="!valid"
+            >
+              <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+              {{ $t(displaySetup.button) }}
+            </b-button>
+          </b-col>
+        </b-row>
       </b-form>
     </validation-observer>
   </div>
@@ -149,3 +153,13 @@ export default {
   },
 }
 </script>
+<style scoped>
+.btn-gradido {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+.btn-gradido-disable {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+</style>