Extract background (light) highlight style (#3478)

* Extract background (light) highlight style

* Adjust progress with top

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}

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;

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;

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;

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