From 200445793ce7c7f1c102bbaf41cc45a34f9e16b7 Mon Sep 17 00:00:00 2001
From: Simon Wanner <simon.wanner@ext.cobrainer.com>
Date: Wed, 22 Mar 2023 12:06:40 +0100
Subject: [PATCH] Button styles, Cards

---
 src/components/BudgetItem/BudgetItem.module.scss |  5 +++--
 src/components/BudgetList/BudgetList.module.scss |  1 -
 src/components/Navigation/Navigation.module.scss |  2 +-
 src/styles/app.module.scss                       |  1 +
 src/styles/globals.css                           | 10 ++++------
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/BudgetItem/BudgetItem.module.scss b/src/components/BudgetItem/BudgetItem.module.scss
index c7f1b07..3b585d0 100644
--- a/src/components/BudgetItem/BudgetItem.module.scss
+++ b/src/components/BudgetItem/BudgetItem.module.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    height: 250px;
-    background: skyblue;
+    padding: 32px;
+    border-radius: 4px;
+    box-shadow: var(--box-shadow-lev-1);
 }
diff --git a/src/components/BudgetList/BudgetList.module.scss b/src/components/BudgetList/BudgetList.module.scss
index d852a4e..db32289 100644
--- a/src/components/BudgetList/BudgetList.module.scss
+++ b/src/components/BudgetList/BudgetList.module.scss
@@ -7,6 +7,5 @@
 .ListItems {
     display: grid;
     gap: 1rem;
-    border: 1px solid green;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }
diff --git a/src/components/Navigation/Navigation.module.scss b/src/components/Navigation/Navigation.module.scss
index e196358..8470a87 100644
--- a/src/components/Navigation/Navigation.module.scss
+++ b/src/components/Navigation/Navigation.module.scss
@@ -3,6 +3,6 @@
   display: flex;
   align-items: center;
   padding: 16px;
-  box-shadow: 0px -8px 24px 0px #555;
+  box-shadow: var(--box-shadow-lev-2);
   justify-content: space-between;
 }
diff --git a/src/styles/app.module.scss b/src/styles/app.module.scss
index 0091387..9bf07c3 100644
--- a/src/styles/app.module.scss
+++ b/src/styles/app.module.scss
@@ -7,4 +7,5 @@
 
   margin-inline: auto;
   width: var(--content-width);
+  padding: 32px 0px;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 765ec28..47b943c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,6 +9,10 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
 
+  --box-shadow-color: #ddd;
+  --box-shadow-lev-1: 0px 2px 8px 0px var(--box-shadow-color);
+  --box-shadow-lev-2: 0px 2px 16px 0px var(--box-shadow-color);
+
   --primary-glow: conic-gradient(
     from 180deg at 50% 50%,
     #16abff33 0deg,
@@ -98,9 +102,3 @@ a {
     /* color-scheme: dark; */
   }
 }
-
-main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}