From 399222b872adbed95edffebd1b482a8f5bbc8c94 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 21 Aug 2020 13:56:33 +0200
Subject: [PATCH] Shadow-y.

---
 packages/apps/src/Menu/Grouping.tsx          | 4 ++--
 packages/apps/src/Menu/index.tsx             | 7 +++++--
 packages/react-components/src/Tabs/index.tsx | 1 +
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 9ee194d597..ace92cfb81 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -60,7 +60,7 @@ export default React.memo(styled(Grouping)`
 
   .groupMenu {
     border-radius: 0 0 0.25rem 0.25rem;
-    box-shadow: 0 ${SHA_OFF} ${SHA_OFF} -${SHA_OFF} , ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
+    box-shadow: 0 ${SHA_OFF} ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, ${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL}, -${SHA_OFF} 0 ${SHA_OFF} -${SHA_OFF} ${SHA_COL};
     display: none;
     margin: 0;
     overflow: hidden;
@@ -80,7 +80,7 @@ export default React.memo(styled(Grouping)`
   &:hover {
     .groupHdr,
     .groupMenu li {
-      background: rgba(254, 252, 250, 0.95);
+      background: #fefcfa;
     }
 
     .groupHdr {
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index eeffaf7f22..95c64c8a56 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@@ -192,6 +192,8 @@ export default React.memo(styled(Menu)`
   }
 
   &.isLoading.menuBg {
+    box-shadow: 0 5px 5px -5px rgba(34,36,38,0.12);
+
     &:after {
       background: #eee;
     }
@@ -201,7 +203,7 @@ export default React.memo(styled(Menu)`
     }
 
     .menuActive {
-      opacity: 0.66;
+      background: #f5f3f1;
     }
   }
 
@@ -213,9 +215,10 @@ export default React.memo(styled(Menu)`
 
   .menuActive {
     background: #fefcfa;
+    border-bottom: none;
     border-radius: 0.25rem 0.25rem 0 0;
     padding: 1rem 1.5rem;
-    margin: 0 1rem;
+    margin: 0 1rem -1px;
 
     .ui--Icon {
       margin-right: 0.5rem;
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index bfca61a38f..87de1d095c 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -62,6 +62,7 @@ export default React.memo(styled(Tabs)`
   align-items: flex-end;
   background: #fefcfa;
   border-bottom: 1px solid #e6e6e6;
+  box-shadow: 0 5px 5px -5px rgba(34,36,38,0.12);
   display: flex;
   margin: 0 -3rem;
   overflow-x: scroll;