From 6309acea98a902ad66a437c151ca4d51988ed98b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 20 Aug 2020 21:01:22 +0200
Subject: [PATCH] Use theme color.

---
 packages/apps/src/Menu/Grouping.tsx |  3 +--
 packages/apps/src/Menu/index.tsx    | 20 ++++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index f6e80b84ca..d9fc361b21 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -30,7 +30,7 @@ function Grouping ({ className, name, routes }: Props): React.ReactElement<Props
         <span>{name}</span>
         <Icon icon='caret-down' />
       </div>
-      <ul className='groupMenu'>
+      <ul className='groupMenu menuBg ui--highlight--before'>
         {routes.map((route): React.ReactNode => (
           <Item
             key={route.name}
@@ -56,7 +56,6 @@ export default React.memo(styled(Grouping)`
   }
 
   .groupMenu {
-    background: #565452;
     border-radius: 0 0 0.25rem 0.25rem;
     display: none;
     margin: 0;
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index 8800e834ff..0a40a94987 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@@ -124,11 +124,11 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   const isLoading = !apiProps.isApiReady || !apiProps.isApiConnected;
 
   return (
-    <div className={`${className} ui--highlight--border`}>
+    <div className={`${className} menuBg ui--highlight--before ui--highlight--border`}>
       <div className='menuSection'>
         <ChainInfo />
         {activeRoute && (
-          <div className={`menuActive${isLoading ? ' isLoading' : ''} ui--highlight--border`}>
+          <div className={`menuActive${isLoading ? ' isLoading' : ''}`}>
             <Icon icon={activeRoute.icon} />
             <span>{activeRoute.text}</span>
           </div>
@@ -161,7 +161,6 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
 
 export default React.memo(styled(Menu)`
   align-items: center;
-  background: #565452;
   border-top: 0.5rem solid transparent;
   display: flex;
   justify-content: space-between;
@@ -169,6 +168,20 @@ export default React.memo(styled(Menu)`
   position: relative;
   z-index: 220;
 
+  &.menuBg,
+  .menuBg {
+    &:before {
+      bottom: 0;
+      content: ' ';
+      filter: invert(0.4) brightness(0.7);
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: -1;
+    }
+  }
+
   .menuSection {
     align-items: flex-end;
     align-self: flex-end;
@@ -191,7 +204,6 @@ export default React.memo(styled(Menu)`
   }
 
   .menuItems {
-    background: #565452;
     color: #f5f4f3;
     flex: 1 1;
     list-style: none;