Topmenu updates as per design (#3658)

* Topmenu updates as per design

* Explicit background to chain images

* Faint background (maybe, someday)

* Faint background for table highlights

* table headers

* Footer background

* Aletr badge (dark, as per suggestion)

* invert counter

* Small adjustments to opacity

* Update packages/apps/src/Content/index.tsx

* Status borders

* empty opacity

* Revert border

* Update packages/react-components/src/Status/index.tsx

packages/apps-config/src/ui/logos/empty.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">.bg{fill: rgba(255, 255, 255, 0.5)}</style>
+<style type="text/css">.bg{fill: rgba(255, 255, 255, 0)}</style>
 <g><circle class="bg" cx="85" cy="85" r="70"/></g>
 </svg>

packages/apps/src/Menu/ChainInfo.tsx

@@ -28,7 +28,7 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>
       <div
-        className={`apps--SideBar-logo-inner${canToggle ? ' isClickable  highlight--hover-color' : ''}`}
+        className={`apps--SideBar-logo-inner${canToggle ? ' isClickable' : ''}`}
         onClick={toggleEndpoints}
       >
         <ChainImg />
@@ -44,7 +44,7 @@ function ChainInfo ({ className }: Props): React.ReactElement<Props> {
         </div>
         {canToggle && (
           <Icon
-            className='dropdown highlight--color'
+            className='dropdown'
             icon={isEndpointsVisible ? 'caret-right' : 'caret-down'}
           />
         )}

packages/apps/src/Menu/Grouping.tsx

@@ -31,10 +31,7 @@ function Grouping ({ className = '', name, routes }: Props): React.ReactElement<
     <li className={className}>
       <div className='groupHdr'>
         <span>{name}</span>
-        <Icon
-          className='highlight--color'
-          icon='caret-down'
-        />
+        <Icon icon='caret-down' />
       </div>
       <ul className='groupMenu highlight--bg-light'>
         {routes.map((route): React.ReactNode => (
@@ -81,6 +78,8 @@ export default React.memo(styled(Grouping)`
   }
 
   &:hover {
+    color: #4e4e4e;
+
     .groupHdr,
     .groupMenu li {
       background: #fff;

packages/apps/src/Menu/Item.tsx

@@ -22,21 +22,18 @@ function Item ({ className = '', isToplevel, route: { Modal, href, icon, name, t
   const count = useCounter();
 
   return (
-    <li className={`${className}${count ? ' withCounter' : ''}${isToplevel ? ' topLevel' : ''} highlight--hover-color`}>
+    <li className={`${className}${count ? ' withCounter' : ''} ${isToplevel ? 'topLevel' : 'highlight--hover-color'}`}>
       <a
         href={Modal ? undefined : (href || `#/${name}`)}
         onClick={Modal ? toggleModal : undefined}
         rel='noopener noreferrer'
         target={href ? '_blank' : undefined}
       >
-        <Icon
-          className='highlight--color'
-          icon={icon}
-        />
+        <Icon icon={icon} />
         {text}
         {!!count && (
           <Badge
-            color='counter'
+            color={isToplevel ? 'counterInvert' : 'counter'}
             info={count}
           />
         )}

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' : ''} highlight--bg-light highlight--border`}>
+    <div className={`${className}${isLoading ? ' isLoading' : ''} highlight--bg`}>
       <div className='menuSection'>
         <ChainInfo />
         {activeRoute && (
@@ -161,14 +161,14 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
 
 export default React.memo(styled(Menu)`
   align-items: center;
-  border-top: 0.5rem solid transparent;
+  color: #f5f3f1;
   display: flex;
   justify-content: space-between;
   padding: 0;
   z-index: 220;
 
   &.isLoading {
-    background: #eee;
+    background: #888 !important;
 
     &:before {
       filter: grayscale(1);
@@ -193,6 +193,7 @@ export default React.memo(styled(Menu)`
     background: #fff;
     border-bottom: none;
     border-radius: 0.25rem 0.25rem 0 0;
+    color: #4e4e4e;
     padding: 1rem 1.5rem;
     margin: 0 1rem -1px;
     z-index: 1;

packages/react-components/src/Badge.tsx

@@ -12,7 +12,7 @@ import Tooltip from './Tooltip';
 
 interface Props {
   className?: string;
-  color: 'blue' | 'counter' | 'gray' | 'green' | 'highlight' | 'normal' | 'purple' | 'red' | 'transparent';
+  color: 'blue' | 'counter' | 'counterInvert' | 'gray' | 'green' | 'highlight' | 'normal' | 'purple' | 'red' | 'transparent';
   hover?: React.ReactNode;
   icon?: IconName;
   info?: React.ReactNode;
@@ -34,7 +34,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
   return (
     <div
       {...extraProps}
-      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''} ${color}Color ${className}`}
+      className={`ui--Badge${hover ? ' isTooltip' : ''}${isSmall ? ' isSmall' : ''}${onClick ? ' isClickable' : ''}${isHighlight ? ' highlight--bg' : ''}${color === 'counterInvert' ? ' highlight--color' : ''} ${color}Color ${className}`}
       onClick={onClick}
     >
       {info || (icon && <Icon icon={icon} />)}
@@ -50,6 +50,7 @@ function Badge ({ className = '', color = 'normal', hover, icon, info, isSmall,
 
 export default React.memo(styled(Badge)`
   border-radius: 16px;
+  box-sizing: border-box;
   color: #eeedec;
   display: inline-block;
   font-size: 12px;
@@ -95,11 +96,16 @@ export default React.memo(styled(Badge)`
     background: steelblue;
   }
 
-  &.counterColor {
+  &.counterColor,
+  &.counterInvertColor {
     margin: 0 0.5rem;
     vertical-align: middle;
   }
 
+  &.counterInvertColor {
+    background: #eeedec;
+  }
+
   &.grayColor {
     background: #eeedec !important;
     color: #aaa9a8;

packages/react-components/src/ChainImg.tsx

@@ -36,6 +36,7 @@ function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement
 }
 
 export default React.memo(styled(ChainImg)`
+  background: white;
   border-radius: 50%;
   box-sizing: border-box;
 `);

packages/react-components/src/Status/index.tsx

@@ -206,8 +206,8 @@ function Status ({ className = '' }: Props): React.ReactElement<Props> | null {
 export default React.memo(styled(Status)`
   display: inline-block;
   position: fixed;
-  right: 0.75rem;
-  top: 0.75rem;
+  right: 0.25rem;
+  top: 0.25rem;
   width: 23rem;
   z-index: 1001;
 
@@ -221,13 +221,12 @@ export default React.memo(styled(Status)`
     > .wrapper > .container {
       align-items: center;
       background: #00688b;
-      border-radius: $small-corner;
+      border-radius: 0.25rem;
       color: white;
       display: flex;
       justify-content: space-between;
       margin-bottom: 0.25rem;
       padding: 0 0.5rem;
-      opacity: 0.95;
       vertical-align: middle;
       position: relative;
 

packages/react-components/src/styles/index.ts

@@ -61,7 +61,7 @@ export default createGlobalStyle<Props>`
   }
 
   .highlight--bg-light:before {
-    opacity: 0.09;
+    opacity: 0.125;
   }
 
   .highlight--border {