header space saving & interaction tweaks (#1549)

* header space saving & interaction tweaks

* remove network name reveal interaction on small viewports
* increase header button sizes for all viewports for better tap targets
* tweak flex layout
* remove caret from version badge on smaller viewports

* fix NFT tooltip icon placement

* spacing tweak

* caret css cleanup

* remove reconnecting message

* squeeze more space out of network, test label

* more space from unsupported network indicator

src/components/@shared/NetworkName/index.module.css

@@ -22,7 +22,9 @@
   width: 0;
 }
 
-.minimal:hover .name {
-  width: auto;
-  opacity: 1;
+@media screen and (min-width: 42rem) {
+  .minimal:hover .name {
+    width: auto;
+    opacity: 1;
+  }
 }

src/components/Asset/AssetContent/MetaMain/index.module.css

@@ -1,11 +1,18 @@
 .meta {
-  margin-left: calc(var(--spacer) * -1);
-  margin-right: calc(var(--spacer) * -1);
+  margin-left: calc(var(--spacer) * -0.75);
+  margin-right: calc(var(--spacer) * -0.75);
   margin-bottom: calc(var(--spacer) / 1.5);
   color: var(--color-secondary);
   font-size: var(--font-size-small);
 }
 
+@media (min-width: 40rem) {
+  .meta {
+    margin-left: calc(var(--spacer) * -1);
+    margin-right: calc(var(--spacer) * -1);
+  }
+}
+
 .asset {
   display: flex;
   justify-content: flex-start;

src/components/Header/Menu.module.css

@@ -1,9 +1,8 @@
 .menu {
   width: 100%;
-  padding: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 2) calc(var(--spacer) / 3);
   display: flex;
   align-items: center;
-  justify-content: space-between;
   flex-wrap: wrap;
 }
 
@@ -21,7 +20,6 @@
 .badge {
   cursor: pointer;
   margin-top: -0.25rem;
-  position: relative;
   padding: calc(var(--spacer) / 5) calc(var(--spacer) / 4);
 }
 
@@ -39,6 +37,7 @@
 .actions {
   order: 2;
   display: flex;
+  margin-left: auto;
 }
 
 .title {
@@ -47,7 +46,7 @@
 
 @media screen and (min-width: 42rem) {
   .menu {
-    justify-content: start;
+    padding: calc(var(--spacer) / 2);
   }
 
   .navigation {
@@ -138,18 +137,26 @@
   text-transform: none;
 }
 
-.tooltip[aria-expanded='true'] svg {
+.caret,
+svg.caret {
+  display: none;
+  width: var(--font-size-small);
+  height: var(--font-size-small);
+  fill: var(--border-color);
+  transition: transform 0.2s ease-out;
+  vertical-align: middle;
+  margin-left: calc(var(--spacer) / 4);
+}
+
+[aria-expanded='true'] .caret {
   transform: rotate(180deg);
 }
 
-.caret,
-svg.caret {
-  width: var(--font-size-mini);
-  height: var(--font-size-mini);
+.badge .caret {
   fill: var(--brand-white);
   opacity: 0.7;
-  transition: transform 0.2s ease-out;
-  vertical-align: middle;
+  width: var(--font-size-mini);
+  height: var(--font-size-mini);
   margin-left: calc(var(--spacer) / 12);
 }
 
@@ -158,6 +165,10 @@ svg.caret {
   svg.caret {
     display: inline-block;
   }
+
+  .navigation {
+    margin-left: calc(var(--spacer) / 2);
+  }
 }
 
 .versions {

src/components/Header/Menu.tsx

@@ -46,7 +46,7 @@ export default function Menu(): ReactElement {
       </Link>
 
       <Tooltip
-        className={styles.tooltip}
+        className={styles.badgeWrap}
         content={
           <div className={styles.versions}>
             <a className={styles.link} href={appConfig.v3MarketUri}>
@@ -69,6 +69,7 @@ export default function Menu(): ReactElement {
           }
         />
       </Tooltip>
+
       <ul className={styles.navigation}>
         {siteContent?.menu.map((item: MenuItem) => (
           <li key={item.name}>

src/components/Header/SearchBar.module.css

@@ -28,7 +28,7 @@
 .input {
   font-size: 16px; /* prevent zoom in on input focus on mobile devices  */
   background-color: transparent;
-  height: 36px;
+  height: 41px;
   margin: 0;
   outline: 0;
   padding-right: var(--spacer);

src/components/Header/UserPreferences/Networks/NetworkItem.module.css

@@ -1,6 +1,6 @@
 .radioWrap {
   composes: radioWrap from '@shared/FormInput/InputRadio.module.css';
-  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
   border-bottom: 1px solid var(--border-color);
 }
 

src/components/Header/UserPreferences/index.module.css

@@ -1,5 +1,5 @@
 .preferences {
-  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
   cursor: pointer;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
@@ -13,25 +13,8 @@
   vertical-align: middle;
 }
 
-.preferences[aria-expanded='true'] svg {
-  transform: rotate(180deg);
-}
-
-.caret,
-svg.caret {
-  width: var(--font-size-small);
-  height: var(--font-size-small);
-  fill: var(--border-color);
-  margin-left: calc(var(--spacer) / 4);
-  transition: transform 0.2s ease-out;
-  display: none;
-}
-
-@media screen and (min-width: 42rem) {
-  .caret,
-  svg.caret {
-    display: inline-block;
-  }
+.caret {
+  composes: caret from '../Menu.module.css';
 }
 
 .icon {

src/components/Header/Wallet/Account.module.css

@@ -5,7 +5,7 @@
   text-transform: uppercase;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
   white-space: nowrap;
   background: var(--background-content);
   margin: 0;
@@ -38,6 +38,7 @@
 @media screen and (min-width: 42rem) {
   .button.initial span {
     display: inline;
+    margin-left: 0.2rem;
   }
 }
 
@@ -59,34 +60,12 @@
   }
 }
 
-.button svg {
-  width: 1em;
-  height: 1em;
-  fill: var(--border-color);
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: calc(var(--spacer) / 3);
-  transition: transform 0.2s ease-out;
-}
-
-[aria-expanded='true'] .button svg {
-  transform: rotate(180deg);
-}
-
 .status {
   margin-left: calc(var(--spacer) / 4);
   position: relative;
   top: 1px;
 }
 
-.caret,
-svg.caret {
-  display: none;
-}
-
-@media screen and (min-width: 42rem) {
-  .caret,
-  svg.caret {
-    display: inline-block;
-  }
+.caret {
+  composes: caret from '../Menu.module.css';
 }

src/components/Header/Wallet/Account.tsx

@@ -21,7 +21,7 @@ const Account = React.forwardRef((props, ref: any) => {
   return !accountId && web3Modal?.cachedProvider ? (
     // Improve user experience for cached provider when connecting takes some time
     <button className={styles.button} onClick={(e) => e.preventDefault()}>
-      <Loader message="Reconnecting..." />
+      <Loader />
     </button>
   ) : accountId ? (
     <button
@@ -44,7 +44,7 @@ const Account = React.forwardRef((props, ref: any) => {
       // the Tippy to show in this state.
       ref={ref}
     >
-      Connect&nbsp;<span>Wallet</span>
+      Connect <span>Wallet</span>
     </button>
   )
 })

src/components/Header/Wallet/Network.module.css

@@ -3,23 +3,30 @@
   border-right: none;
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
-  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 3);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 8);
   white-space: nowrap;
   margin-right: -3px;
   display: inline-flex;
   align-items: center;
 }
 
+@media screen and (min-width: 42rem) {
+  .network {
+    padding: calc(var(--spacer) / 4);
+  }
+}
+
 .name {
   font-size: var(--font-size-small);
 }
 
 .badge {
-  margin-left: calc(var(--spacer) / 8);
+  margin-left: -0.25rem;
   background-color: var(--border-color);
   color: var(--font-color-text);
+  font-size: calc(var(--font-size-mini) * 0.8);
 }
 
 .warning {
-  margin-right: calc(var(--spacer) / 4);
+  margin-right: calc(var(--spacer) / 14);
 }

src/components/Header/index.module.css

@@ -1,2 +0,0 @@
-.header {
-}

src/components/Header/index.tsx

@@ -1,10 +1,9 @@
 import React, { ReactElement } from 'react'
 import Menu from './Menu'
-import styles from './index.module.css'
 
 export default function Header(): ReactElement {
   return (
-    <header className={styles.header}>
+    <header>
       <Menu />
     </header>
   )