Merge pull request #1215 from blockscout/logo-size

logo size fix

docs/ENVS.md

@@ -98,7 +98,7 @@ The app instance could be customized by passing following variables to NodeJS en
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 20px and width less than 120px | - | - | `https://placekitten.com/240/40` |
+| NEXT_PUBLIC_NETWORK_LOGO | `string` | Network logo; if not provided, placeholder will be shown; *Note* the logo height should be 24px and width less than 120px | - | - | `https://placekitten.com/240/40` |
 | NEXT_PUBLIC_NETWORK_LOGO_DARK | `string` | Network logo for dark color mode; if not provided, **inverted** regular logo will be used instead | - | - | `https://placekitten.com/240/40` |
 | NEXT_PUBLIC_NETWORK_ICON | `string` | Network icon; used as a replacement for regular network logo when nav bar is collapsed; if not provided, placeholder will be shown; *Note* the icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` |
 | NEXT_PUBLIC_NETWORK_ICON_DARK | `string` | Network icon for dark color mode; if not provided, **inverted** regular icon will be used instead | - | - | `https://placekitten.com/60/60` |

icons/networks/logo-placeholder.svg

-<svg viewBox="0 0 114 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.21 0a1 1 0 0 1 1 1v2.167a1 1 0 0 1-1 1H5.687a1 1 0 0 0-1 1V19a1 1 0 0 1-1 1H1.5a1 1 0 0 1-1-1V5.167a1 1 0 0 1 1-1h1.521a1 1 0 0 0 1-1V1a1 1 0 0 1 1-1H7.21Zm8.404 0a1 1 0 0 1 1 1v2.167a1 1 0 0 0 1 1h1.376a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H16.8a1 1 0 0 1-1-1V5.167a1 1 0 0 0-1-1h-1.375a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h2.188Zm-4.246 7.976a1 1 0 0 1 1 1v6.095a1 1 0 0 1-1 1H9.18a1 1 0 0 1-1-1V8.976a1 1 0 0 1 1-1h2.188Zm26.776-2.131h1.035l-.005 9.71h1.821V4.181h-2.851v1.664ZM33.15 4.533h-4.948v11.03h5.223c2.225 0 3.452-1.396 3.452-3.17a2.825 2.825 0 0 0-.529-1.726 2.81 2.81 0 0 0-1.463-1.049v-.052a2.456 2.456 0 0 0 1.494-2.343c0-1.588-1.134-2.69-3.23-2.69Zm1.391 3.005c0 .891-.567 1.477-1.357 1.477h-3.139V6.061h3.139c.79 0 1.357.586 1.357 1.477Zm.498 4.734c0 1.05-.687 1.774-1.632 1.774h-3.362v-3.532h3.362c.945 0 1.632.707 1.632 1.758Zm7.642-.793c0-2.498 1.84-4.342 4.383-4.342s4.398 1.826 4.398 4.342c0 2.516-1.838 4.325-4.398 4.325-2.56 0-4.383-1.827-4.383-4.325Zm3.902 2.688h.982c1.117 0 2.096-1.189 2.096-2.688 0-1.5-.982-2.708-2.096-2.708h-.982c-1.116 0-2.095 1.231-2.095 2.708s.979 2.688 2.095 2.688Zm10.342-7.03c-2.525 0-4.28 1.775-4.28 4.325 0 2.55 1.735 4.342 4.253 4.357 2.071 0 3.681-1.103 3.927-3.223h-1.77a1.75 1.75 0 0 1-1.752 1.602h-.859c-1.1 0-1.993-1.22-1.993-2.722 0-1.501.893-2.707 1.993-2.707h.859c.79 0 1.563.482 1.735 1.568h1.77c-.258-2.149-1.856-3.2-3.883-3.2Zm5.53-2.956h1.803v6.274h1.308l2.44-3.084h2.06l-3.006 3.808 3.144 4.376H68.04l-2.629-3.618h-1.153v3.618h-1.804V4.181Zm10.309 8.918h-1.735c.066 1.792 1.227 2.705 3.62 2.702 2.473 0 3.59-.93 3.59-2.619 0-1.31-.722-2.154-2.285-2.343l-1.926-.246c-.74-.104-1.083-.465-1.083-1 0-.534.361-.947 1.134-.947h1.033c.894 0 1.186.5 1.272 1.206h1.735c-.067-1.878-1.338-2.722-3.436-2.722-2.192 0-3.419.896-3.419 2.55 0 1.257.722 2.222 2.337 2.412l1.909.246c.739.106 1.048.433 1.048.985 0 .551-.378.964-1.186.964h-1.136c-.94 0-1.386-.465-1.472-1.188Zm6.609-1.637c0-2.55 1.752-4.325 4.28-4.325 2.027 0 3.624 1.051 3.882 3.2h-1.77c-.171-1.086-.944-1.568-1.734-1.568h-.86c-1.101 0-1.995 1.206-1.995 2.707 0 1.502.894 2.723 1.996 2.723h.859a1.75 1.75 0 0 0 1.752-1.602h1.77c-.246 2.119-1.856 3.222-3.927 3.222-2.516-.015-4.253-1.807-4.253-4.357Zm13.706-4.325c-2.543 0-4.38 1.844-4.38 4.342 0 2.498 1.818 4.325 4.38 4.325s4.4-1.81 4.4-4.325c0-2.516-1.858-4.342-4.4-4.342Zm.5 7.03h-.976c-1.117 0-2.101-1.211-2.101-2.688s.98-2.708 2.096-2.708h.981c1.117 0 2.099 1.209 2.099 2.708s-.982 2.688-2.099 2.688Zm5.397-1.637V7.38h1.804v4.842c0 1.19.601 1.896 1.391 1.896h.982c.842 0 1.598-.776 1.598-1.896V7.381h1.806v8.184h-1.755v-1.12c-.491.844-1.357 1.361-2.68 1.361-1.978-.002-3.146-1.157-3.146-3.276Zm10.582-3.557v4.677c0 1.223.736 1.913 2.057 1.915h1.963v-1.637h-1.443c-.584 0-.756-.258-.756-.792v-4.17h2.13V7.38h-2.13V5.086h-1.821v2.295h-1.58v1.592h1.58Z" fill="currentColor"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 24">
+  <g fill="currentColor">
+    <path fill-rule="evenodd" d="M7.71 3a1 1 0 0 0-1-1H4.52a1 1 0 0 0-1 1v2.167a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1V21a1 1 0 0 0 1 1h2.188a1 1 0 0 0 1-1V7.167a1 1 0 0 1 1-1H6.71a1 1 0 0 0 1-1zm8.404 0a1 1 0 0 0-1-1h-2.188a1 1 0 0 0-1 1v2.167a1 1 0 0 0 1 1h1.376a1 1 0 0 1 1 1V21a1 1 0 0 0 1 1h2.188a1 1 0 0 0 1-1V7.167a1 1 0 0 0-1-1h-1.376a1 1 0 0 1-1-1zm-4.246 7.976a1 1 0 0 0-1-1H8.68a1 1 0 0 0-1 1v6.095a1 1 0 0 0 1 1h2.188a1 1 0 0 0 1-1z" clip-rule="evenodd"/>
+    <path d="M27.702 6.533h4.948c2.095 0 3.23 1.103 3.23 2.69a2.466 2.466 0 0 1-1.495 2.344v.052a2.81 2.81 0 0 1 1.463 1.049 2.83 2.83 0 0 1 .53 1.725c0 1.774-1.228 3.17-3.453 3.17h-5.223zm4.982 4.482c.79 0 1.357-.585 1.357-1.477 0-.89-.567-1.476-1.357-1.476h-3.139v2.953zm.223 5.032c.945 0 1.632-.724 1.632-1.775s-.687-1.758-1.632-1.758h-3.362v3.533zm5.773-8.202h-1.036V6.181h2.851v11.375h-1.82zm3.501 5.635c0-2.5 1.84-4.343 4.383-4.343s4.398 1.827 4.398 4.342c0 2.516-1.838 4.325-4.398 4.325s-4.383-1.826-4.383-4.325zm3.902 2.687h.982c1.117 0 2.096-1.189 2.096-2.688s-.982-2.707-2.096-2.707h-.982c-1.116 0-2.095 1.23-2.095 2.707s.979 2.688 2.095 2.688zm6.062-2.705c0-2.55 1.755-4.325 4.28-4.325 2.027 0 3.625 1.051 3.882 3.2h-1.769c-.172-1.085-.945-1.568-1.735-1.568h-.859c-1.1 0-1.993 1.206-1.993 2.708s.893 2.722 1.993 2.722h.859a1.75 1.75 0 0 0 1.187-.459 1.76 1.76 0 0 0 .565-1.143h1.77c-.246 2.12-1.856 3.222-3.927 3.222-2.518-.015-4.253-1.807-4.253-4.357zm9.809-7.281h1.804v6.274h1.308l2.44-3.084h2.06L66.56 13.18l3.144 4.377H67.54l-2.629-3.619h-1.153v3.619h-1.804zm8.575 8.918h1.735c.086.724.532 1.189 1.472 1.189h1.136c.808 0 1.186-.414 1.186-.965s-.31-.879-1.048-.985l-1.91-.246c-1.614-.19-2.336-1.154-2.336-2.412 0-1.654 1.227-2.55 3.419-2.55 2.098 0 3.37.844 3.436 2.722h-1.735c-.086-.706-.378-1.206-1.272-1.206H73.58c-.773 0-1.134.414-1.134.948s.344.896 1.083 1l1.926.245c1.563.19 2.285 1.034 2.285 2.344 0 1.688-1.117 2.619-3.59 2.619-2.393.002-3.554-.911-3.62-2.703zm8.344-1.637c0-2.55 1.752-4.325 4.28-4.325 2.027 0 3.624 1.051 3.882 3.2h-1.77c-.171-1.085-.944-1.568-1.735-1.568h-.858c-1.102 0-1.996 1.206-1.996 2.708s.894 2.722 1.996 2.722h.858a1.75 1.75 0 0 0 1.188-.459 1.76 1.76 0 0 0 .565-1.143h1.77c-.246 2.12-1.856 3.222-3.927 3.222-2.516-.015-4.253-1.807-4.253-4.357zm9.325.018c0-2.5 1.838-4.343 4.38-4.343 2.543 0 4.401 1.827 4.401 4.342 0 2.516-1.838 4.325-4.4 4.325s-4.38-1.826-4.38-4.325zm3.9 2.687h.982c1.116 0 2.098-1.189 2.098-2.688s-.982-2.707-2.098-2.707h-.982c-1.117 0-2.096 1.23-2.096 2.707s.984 2.688 2.1 2.688zm6.378-1.637V9.381h1.804v4.842c0 1.189.601 1.895 1.391 1.895h.982c.842 0 1.598-.775 1.598-1.895V9.38h1.806v8.184h-1.755v-1.12c-.491.845-1.357 1.362-2.68 1.362-1.978-.003-3.146-1.157-3.146-3.277zm10.582 1.12v-4.677h-1.58V9.381h1.58V7.087h1.821V9.38h2.13v1.585h-2.13v4.17c0 .534.172.793.756.793h1.443v1.636h-1.963c-1.321-.002-2.057-.691-2.057-1.915z"/>
+  </g>
 </svg>

ui/snippets/navigation/NavigationDesktop.tsx

@@ -60,7 +60,7 @@ const NavigationDesktop = () => {
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
     >
-      { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" pl={ 3 } alignSelf="flex-start"/> }
+      { config.chain.isTestnet && <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" position="absolute" pl={ 3 } top="34px"/> }
       <Box
         as="header"
         display="flex"

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -55,7 +55,7 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
       as="a"
       href={ route({ pathname: '/' }) }
       width={{ base: 'auto', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
-      height={{ base: '20px', lg: isCollapsed === false ? '20px' : '30px', xl: isCollapsed ? '30px' : '20px' }}
+      height={{ base: '24px', lg: isCollapsed === false ? '24px' : '30px', xl: isCollapsed ? '30px' : '24px' }}
       display="inline-flex"
       overflow="hidden"
       onClick={ onClick }

ui/snippets/networkMenu/NetworkMenuButton.tsx

@@ -21,7 +21,6 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
       className={ className }
       variant="unstyled"
       display="inline-flex"
-      alignSelf="stretch"
       alignItems="center"
       ref={ ref }
       h="36px"