From e9ba63d0ec6718f61d6993744714123d5d9b8642 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 21 Nov 2022 17:19:38 +0100
Subject: [PATCH] style shadow, backgrounds

---
 frontend/src/App.vue                          |  5 ++++-
 .../src/assets/scss/gradido-template.scss     |  2 +-
 frontend/src/components/Menu/NavbarNew.vue    | 18 +++++++----------
 frontend/src/components/Menu/SidebarNew.vue   |  8 ++------
 frontend/src/layouts/DashboardLayout.vue      |  2 +-
 .../src/layouts/templates/ContentHeader.vue   | 14 ++++++-------
 frontend/src/layouts/templates/RightSide.vue  | 20 +++++++++----------
 7 files changed, 32 insertions(+), 37 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9e3a79944..a5429c662 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -28,7 +28,6 @@ export default {
 #app {
   font-size: 1rem;
   font-family: 'WorkSans', sans-serif !important;
-  /* justify-content: center; */
 }
 .appContent {
   min-width: 360px;
@@ -36,6 +35,10 @@ export default {
   margin-right: auto;
   margin-left: auto;
 }
+.appBoxShadow {
+  -webkit-box-shadow: 20pt 20pt 50pt 0 #3838384f;
+  box-shadow: 20pt 20pt 50pt 0 #3838384f;
+}
 @media screen and (max-width: 500px) {
   #app {
     font-size: 0.85rem;
diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index f10284285..97d91937f 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -1,6 +1,6 @@
 html,
 body {
-  background-color: #fff;
+  background-color: #f5f5f5;
   height: 100%;
   transition: background-color 0.5s ease, color 0.5s ease;
 }
diff --git a/frontend/src/components/Menu/NavbarNew.vue b/frontend/src/components/Menu/NavbarNew.vue
index 7a8c3bfaa..13aa6d0a1 100644
--- a/frontend/src/components/Menu/NavbarNew.vue
+++ b/frontend/src/components/Menu/NavbarNew.vue
@@ -3,17 +3,12 @@
     <b-navbar toggleable="lg" class="pr-4">
       <b-navbar-brand>
         <b-img
-          class="imgLogo position-absolute ml--3 mt-lg--2 mt-3 p-2 zindex1000"
+          class="imgLogo ml--3 mt-lg--2 mt-3 p-2 mb-3 zindex1000"
           :src="logo"
           width="200"
           alt="..."
         />
-        <b-img
-          class="imgLogoBack mt--3 ml--3"
-          src="/img/template/gradido_background_header.png"
-          width="230"
-          alt="start background image"
-        ></b-img>
+        
       </b-navbar-brand>
       <b-img class="sheet-img position-absolute zindex1000" :src="sheet"></b-img>
 
@@ -77,6 +72,11 @@ export default {
 </script>
 
 <style lang="scss">
+.auth-header {
+  font-family: 'Open Sans', sans-serif !important;
+  height: 150px;
+}
+
 .authNavbar > .nav-link {
   color: #383838 !important;
 }
@@ -93,10 +93,6 @@ button.navbar-toggler > span.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }
 
-.auth-header {
-  font-family: 'Open Sans', sans-serif !important;
-}
-
 .sheet-img {
   top: -11px;
   left: 50%;
diff --git a/frontend/src/components/Menu/SidebarNew.vue b/frontend/src/components/Menu/SidebarNew.vue
index bb2067a87..b3b6e93b8 100644
--- a/frontend/src/components/Menu/SidebarNew.vue
+++ b/frontend/src/components/Menu/SidebarNew.vue
@@ -1,10 +1,6 @@
 <template>
-  <div id="component-sidebar">
-    <div
-      id="side-menu"
-      ref="sideMenu"
-      class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4"
-    >
+  <div id="component-sidebar ">
+    <div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
       <!-- @mouseout="$emit('toogleMobilMenu')" -->
       <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 3deacf356..bf397f00c 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -11,8 +11,8 @@
           <span class="navbar-toggler-icon"></span>
         </b-button>
       </div>
+      <!-- navbar -->
       <b-row>
-        <!-- navbar -->
         <b-col>
           <navbar-new class="main-navbar" :balance="balance"></navbar-new>
         </b-col>
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index bba8e9904..28a67f382 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -4,12 +4,12 @@
       <b-container v-if="path === '/overview'">
         <b-row>
           <b-col cols="5">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <gdd-amount :balance="balance" />
             </div>
           </b-col>
           <b-col cols="7">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <community-member />
             </div>
           </b-col>
@@ -20,12 +20,12 @@
       <b-container v-if="path === '/send'">
         <b-row>
           <b-col cols="6">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <gdd-amount :balance="balance" />
             </div>
           </b-col>
           <b-col cols="6">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <gdt-amount />
             </div>
           </b-col>
@@ -34,12 +34,12 @@
       <b-container v-if="path === '/transactions'">
         <b-row>
           <b-col cols="6">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <gdd-amount :balance="balance" />
             </div>
           </b-col>
           <b-col cols="6">
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <gdt-amount />
             </div>
           </b-col>
@@ -48,7 +48,7 @@
       <b-container v-if="path === '/profile'">
         <b-row>
           <b-col>
-            <div class="p-4 bg-white shadow rounded">
+            <div class="p-4 bg-white appBoxShadow gradido-border-radius">
               <b-row>
                 <b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
                 <b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 8736a928f..525aab2a6 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -3,14 +3,14 @@
     <b-container v-if="path === '/overview'">
       <b-row>
         <b-col>
-          <div class="p-4 bg-white shadow rounded">
+          <div class="p-4">
             <favourites />
           </div>
         </b-col>
       </b-row>
       <b-row class="mt-3 mt-lg-5">
         <b-col>
-          <div class="p-4 bg-white shadow rounded h-100">
+          <div class="p-4 h-100">
             <last-transactions
               :transactions="transactions"
               :transactionCount="transactionCount"
@@ -23,14 +23,14 @@
     <b-container v-if="path === '/storys'">
       <b-row>
         <b-col>
-          <div class="p-4 bg-white shadow rounded">
+          <div class="p-4">
             <favourites />
           </div>
         </b-col>
       </b-row>
       <b-row class="mt-3 mt-lg-5">
         <b-col>
-          <div class="p-4 bg-white shadow rounded h-100">
+          <div class="p-4 h-100">
             <top-storys-by-month />
           </div>
         </b-col>
@@ -40,14 +40,14 @@
     <b-container v-if="path === '/send'">
       <b-row>
         <b-col>
-          <div class="p-4 bg-white shadow rounded">
+          <div class="p-4">
             <favourites />
           </div>
         </b-col>
       </b-row>
       <b-row class="mt-3 mt-lg-5">
         <b-col>
-          <div class="p-4 bg-white shadow rounded h-100">
+          <div class="p-4 h-100">
             <last-transactions />
           </div>
         </b-col>
@@ -56,14 +56,14 @@
     <b-container v-if="path === '/transactions'">
       <b-row>
         <b-col>
-          <div class="p-4 bg-white shadow rounded">
+          <div class="p-4">
             <favourites />
           </div>
         </b-col>
       </b-row>
       <b-row class="mt-3 mt-lg-5">
         <b-col>
-          <div class="p-4 bg-white shadow rounded h-100">
+          <div class="p-4 h-100">
             <last-transactions />
           </div>
         </b-col>
@@ -72,14 +72,14 @@
     <b-container v-if="path === '/profile'">
       <b-row>
         <b-col>
-          <div class="p-4 bg-white rounded">
+          <div class="p-4">
             <favourites />
           </div>
         </b-col>
       </b-row>
       <b-row class="mt-3 mt-lg-5">
         <b-col>
-          <div class="p-4 bg-white shadow rounded h-100">
+          <div class="p-4 h-100">
             <your-overview />
           </div>
         </b-col>