TW-1360: EVM Design. Home page. Refactor

src/app/atoms/ActionsDropdown.tsx

@@ -15,13 +15,10 @@ export const ActionsDropdownPopup: FC<PropsWithChildren<Props>> = ({
   lowering = 1,
   style,
   children
-}) => {
-  //
-  return (
-    <DropdownWrapper opened={opened} design="day" className={`p-2 flex flex-col mt-${lowering}`} style={style}>
-      <div className="py-2.5 px-2 text-font-small-bold text-grey-1">{title()}</div>
+}) => (
+  <DropdownWrapper opened={opened} design="day" className={`p-2 flex flex-col mt-${lowering}`} style={style}>
+    <div className="py-2.5 px-2 text-font-small-bold text-grey-1">{title()}</div>
 
-      {children}
-    </DropdownWrapper>
-  );
-};
+    {children}
+  </DropdownWrapper>
+);

src/app/atoms/CleanButton.tsx

@@ -1,7 +1,5 @@
 import React, { memo, useMemo } from 'react';
 
-import classNames from 'clsx';
-
 import { ReactComponent as CleanIcon } from 'app/icons/base/x_circle_fill.svg';
 import { t } from 'lib/i18n';
 import useTippy from 'lib/ui/useTippy';
@@ -32,7 +30,7 @@ const CleanButton = memo<Props>(({ onClick }) => {
       id={CLEAN_BUTTON_ID}
       ref={buttonRef}
       type="button"
-      className={classNames('absolute right-3 bottom-2', 'flex items-center', 'transition ease-in-out duration-200')}
+      className="absolute right-3 bottom-2 flex items-center ease-in-out duration-200"
       tabIndex={-1}
       onClick={onClick}
     >

src/app/atoms/CustomModal/index.tsx

@@ -30,7 +30,7 @@ const CustomModal = memo<CustomModalProps>(props => {
         beforeClose: ModStyles.overlayClosed
       }}
       className={{
-        base: clsx('bg-white rounded shadow-2xl', 'ease-in-out duration-200', ModStyles.base, className),
+        base: clsx('bg-white rounded shadow-2xl ease-in-out duration-200', ModStyles.base, className),
         afterOpen: ModStyles.opened,
         beforeClose: ModStyles.closed
       }}

src/app/atoms/CustomModal/styles.module.css

@@ -1,3 +1,10 @@
+/*
+  (!) Definition order influences precedence. Keep the order.
+
+  Library applies them at the same time for some states,
+  while precedence has to take place.
+*/
+
 /* Overlay */
 
 .overlayBase {

src/app/atoms/DonationBanner/DonationBanner.tsx

@@ -15,7 +15,7 @@ export const DonationBanner = memo(() => (
     testID={DonationBannerSelectors.ukraineDonationBanner}
   >
     <span className="font-inter font-semibold mr-3 text-sm text-blue-650">
-      <T id={'support'} />
+      <T id="support" />
     </span>
 
     <Ukraine />

src/app/atoms/ImportTabSwitcher.tsx

@@ -1,32 +1,31 @@
-import React from 'react';
+import React, { memo } from 'react';
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 
 import { TID, T } from 'lib/i18n';
 import { Link } from 'lib/woozie';
 
-type ImportTabDescriptor = {
+interface ImportTabDescriptor {
   slug: string;
   i18nKey: TID;
-};
+}
 
-type ImportTabSwitcherProps = {
-  className?: string;
+interface Props {
   tabs: ImportTabDescriptor[];
   activeTabSlug: string;
   urlPrefix: string;
-};
+}
 
-const ImportTabSwitcher: React.FC<ImportTabSwitcherProps> = ({ className, tabs, activeTabSlug, urlPrefix }) => (
-  <div className={classNames('w-full mb-8', className)} style={{ borderBottomWidth: 1, fontSize: 17 }}>
-    <div className={classNames('flex items-center justify-around')}>
+const ImportTabSwitcher = memo<Props>(({ tabs, activeTabSlug, urlPrefix }) => (
+  <div className="w-full mb-8 border-b text-ulg">
+    <div className="flex items-center justify-around">
       {tabs.map(({ slug, i18nKey }) => {
         const active = slug === activeTabSlug;
 
         return (
           <Link key={slug} to={`${urlPrefix}/${slug}`} replace>
             <div
-              className={classNames(
+              className={clsx(
                 'text-center cursor-pointer pb-1 pt-2 px-4 border-b-2',
                 'text-gray-500 truncate',
                 'transition ease-in-out duration-300',
@@ -40,6 +39,6 @@ const ImportTabSwitcher: React.FC<ImportTabSwitcherProps> = ({ className, tabs,
       })}
     </div>
   </div>
-);
+));
 
 export default ImportTabSwitcher;

src/app/atoms/Name.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useMemo } from 'react';
+import React, { FC, HTMLAttributes } from 'react';
 
 import classNames from 'clsx';
 
@@ -8,8 +8,8 @@ interface NameProps extends HTMLAttributes<HTMLDivElement>, TestIDProps {}
 
 const Name: FC<NameProps> = ({ className, style = {}, testID, ...rest }) => (
   <div
-    className={classNames('whitespace-nowrap overflow-x-auto truncate no-scrollbar', className)}
-    style={useMemo(() => ({ maxWidth: '12rem', ...style }), [style])}
+    className={classNames('max-w-48 whitespace-nowrap overflow-x-auto truncate no-scrollbar', className)}
+    style={style}
     {...setTestID(testID)}
     {...rest}
   />

src/app/atoms/NetworksLogos.tsx

@@ -8,14 +8,14 @@ import OptimismIconSrc from 'app/icons/networks/optimism.svg?url';
 import PolygonIconSrc from 'app/icons/networks/polygon.svg?url';
 import TezosIconSrc from 'app/icons/networks/tezos.svg?url';
 
-export const TezosNetworkLogo = memo(() => <NetworkLogoBase src={TezosIconSrc} alt="Tezos" className="bg-white" />);
+export const TezosNetworkLogo = memo(() => <NetworkLogoBase src={TezosIconSrc} alt="Tezos" />);
 
 export const EvmNetworksLogos: FC = () => (
   <div className="flex">
-    <NetworkLogoBase src={OptimismIconSrc} alt="Optimism" className="bg-white" />
-    <NetworkLogoBase src={PolygonIconSrc} alt="Polygon" className="bg-white" style={SHIFTED_LOGO_STYLE} />
-    <NetworkLogoBase src={BinanceSmartChainIconSrc} alt="BSC" className="bg-white" style={SHIFTED_LOGO_STYLE} />
-    <NetworkLogoBase src={EthereumIconSrc} alt="ETH" className="bg-white" style={SHIFTED_LOGO_STYLE} />
+    <NetworkLogoBase src={OptimismIconSrc} alt="Optimism" />
+    <NetworkLogoBase src={PolygonIconSrc} alt="Polygon" className="-ml-3.5" />
+    <NetworkLogoBase src={BinanceSmartChainIconSrc} alt="BSC" className="-ml-3.5" />
+    <NetworkLogoBase src={EthereumIconSrc} alt="ETH" className="-ml-3.5" />
   </div>
 );
 
@@ -32,11 +32,7 @@ const NetworkLogoBase = memo<NetworkLogoBaseProps>(({ src, alt, className, style
     alt={alt}
     width={24}
     height={24}
-    className={clsx('p-0.5 border border-grey-4 rounded-full', className)}
+    className={clsx('p-0.5 border border-grey-4 bg-white rounded-full', className)}
     style={style}
   />
 ));
-
-const SHIFTED_LOGO_STYLE: React.CSSProperties = {
-  marginLeft: '-14px'
-};

src/app/atoms/PageModal/styles.module.css

@@ -1,3 +1,10 @@
+/*
+  (!) Definition order influences precedence. Keep the order.
+
+  Library applies them at the same time for some states,
+  while precedence has to take place.
+*/
+
 .base {
   translate: 0 110%;
 }

src/app/atoms/TotalEquity.tsx

@@ -4,7 +4,7 @@ import BigNumber from 'bignumber.js';
 
 import { useTotalBalance } from 'app/hooks/use-total-balance';
 import { useSelector } from 'app/store';
-import { TEZOS_SYMBOL, TEZ_TOKEN_SLUG } from 'lib/assets';
+import { TEZ_TOKEN_SLUG } from 'lib/assets';
 import { useTezosAssetBalance } from 'lib/balances';
 import { useFiatCurrency, useFiatToUsdRate } from 'lib/fiat-currency';
 import { TEZOS_METADATA } from 'lib/metadata';
@@ -66,7 +66,6 @@ const TotalEquityForTezosOnlyInFiat = memo<{ amountInDollar: string }>(({ amount
 
   return (
     <>
-      {/* <span className="mr-1">≈</span> */}
       <Money smallFractionFont={false} fiat>
         {amountInFiat}
       </Money>
@@ -94,7 +93,7 @@ const TotalEquityForTezosOnlyInGas = memo<{ accountPkh: string; amountInDollar:
       <>
         <Money smallFractionFont={false}>{amountInGas || ZERO}</Money>
         <span style={SYMBOL_STYLE} className="font-semibold">
-          {TEZOS_SYMBOL}
+          TEZ
         </span>
       </>
     );

src/app/layouts/PageLayout/ChangelogOverlay/ChangelogOverlay.tsx

@@ -32,7 +32,7 @@ export const ChangelogOverlay: FC = () => {
 
   return ready && lastShownVersion !== APP_VERSION ? (
     <>
-      <div className={'fixed inset-0 opacity-20 bg-gray-700 z-overlay-promo'}></div>
+      <div className="fixed inset-0 opacity-20 bg-gray-700 z-overlay-promo"></div>
 
       <div className={classNames(LAYOUT_CONTAINER_CLASSNAME, 'fixed z-overlay-promo max-h-full', popupClassName)}>
         <div