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] 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;