style shadow, backgrounds

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;

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

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

frontend/src/components/Menu/SidebarNew.vue

@@ -1,10 +1,6 @@
 <template>
-  <div id="component-sidebar">
+  <div id="component-sidebar ">
-    <div
+    <div id="side-menu" ref="sideMenu" class="pl-lg-1 gradido-border-radius appBoxShadow pt-2 mt-4">
-      id="side-menu"
-      ref="sideMenu"
-      class="pl-lg-1 gradido-border-radius shadow-default pt-2 mt-4"
-    >
       <!-- @mouseout="$emit('toogleMobilMenu')" -->
       <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">

frontend/src/layouts/DashboardLayout.vue

@@ -11,8 +11,8 @@
           <span class="navbar-toggler-icon"></span>
         </b-button>
       </div>
-      <b-row>
       <!-- navbar -->
+      <b-row>
         <b-col>
           <navbar-new class="main-navbar" :balance="balance"></navbar-new>
         </b-col>

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>

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>