From 83f736246a399ef0cdd5b6ef464ba8603b33af11 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sun, 23 Aug 2020 11:16:59 +0200
Subject: [PATCH] Extract background (light) highlight style (#3478)

* Extract background (light) highlight style

* Adjust progress with top
---
 packages/apps/src/Menu/Grouping.tsx           |  2 +-
 packages/apps/src/Menu/index.tsx              | 22 +++----------------
 packages/react-components/src/Progress.tsx    |  2 +-
 packages/react-components/src/Tabs/index.tsx  |  1 +
 packages/react-components/src/styles/index.ts | 17 ++++++++++++++
 5 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/apps/src/Menu/Grouping.tsx b/packages/apps/src/Menu/Grouping.tsx
index 74cea870e3..edc98670d1 100644
--- a/packages/apps/src/Menu/Grouping.tsx
+++ b/packages/apps/src/Menu/Grouping.tsx
@@ -33,7 +33,7 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
         <span>{name}</span>
         <Icon icon='caret-down' />
       </div>
-      <ul className='groupMenu menuBg ui--highlight--before'>
+      <ul className='groupMenu ui--highlight--bg-light ui--highlight--before'>
         {routes.map((route): React.ReactNode => (
           <Item
             key={route.name}
diff --git a/packages/apps/src/Menu/index.tsx b/packages/apps/src/Menu/index.tsx
index c40e1e7166..5e1d58ec29 100644
--- a/packages/apps/src/Menu/index.tsx
+++ b/packages/apps/src/Menu/index.tsx
@@ -124,7 +124,7 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   const isLoading = !apiProps.isApiReady || !apiProps.isApiConnected;
 
   return (
-    <div className={`${className}${isLoading ? ' isLoading' : ''} menuBg ui--highlight--before ui--highlight--border`}>
+    <div className={`${className}${isLoading ? ' isLoading' : ''} ui--highlight--bg-light ui--highlight--border`}>
       <div className='menuSection'>
         <ChainInfo />
         {activeRoute && (
@@ -165,26 +165,9 @@ export default React.memo(styled(Menu)`
   display: flex;
   justify-content: space-between;
   padding: 0;
-  position: relative;
   z-index: 220;
 
-  &.menuBg,
-  .menuBg {
-    background: white;
-
-    &:before {
-      bottom: 0;
-      content: ' ';
-      left: 0;
-      opacity: 0.1;
-      position: absolute;
-      right: 0;
-      top: 0;
-      z-index: -1;
-    }
-  }
-
-  &.isLoading.menuBg {
+  &.isLoading {
     background: #eee;
 
     &:before {
@@ -208,6 +191,7 @@ export default React.memo(styled(Menu)`
     border-radius: 0.25rem 0.25rem 0 0;
     padding: 1rem 1.5rem;
     margin: 0 1rem -1px;
+    z-index: 1;
 
     .ui--Icon {
       margin-right: 0.5rem;
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index 75a664490d..18628626ca 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -126,7 +126,7 @@ export default React.memo(styled(Progress)`
 
   .inner {
     align-items: center;
-    background: rgba(245, 244, 243, 87.5%);
+    background: rgba(255, 255, 255, 0.91);
     border-radius: 100%;
     bottom: 0.375rem;
     display: flex;
diff --git a/packages/react-components/src/Tabs/index.tsx b/packages/react-components/src/Tabs/index.tsx
index 941120ff3a..be00c38f20 100644
--- a/packages/react-components/src/Tabs/index.tsx
+++ b/packages/react-components/src/Tabs/index.tsx
@@ -67,6 +67,7 @@ export default React.memo(styled(Tabs)`
   overflow-x: scroll;
   padding: 1.5rem 3rem 0;
   text-align: left;
+  z-index: 1;
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts
index 8484ae710b..87d872756c 100644
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@@ -39,6 +39,23 @@ export default createGlobalStyle<Props>`
     background: ${getHighlight} !important;
   }
 
+  .ui--highlight--bg-light {
+    background: white;
+    position: relative;
+
+    &:before {
+      background: ${getHighlight};
+      bottom: 0;
+      content: ' ';
+      left: 0;
+      opacity: 0.09;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: -1;
+    }
+  }
+
   .ui--highlight--border {
     border-color: ${getHighlight} !important;
   }