feat: improve UI responsiveness (WIP)

src/components/Containers/Footer/Footer.module.scss

@@ -1,11 +1,16 @@
 @import '../../../index';
 
 $height: $--footer-height;
+$height-small: $--footer-height-small;
 $copyright-color: $--color-beta;
+$small-screen-height: $--small-height-screens - 1;
 
 .footer {
   font-size: 13px;
   height: #{$height}px;
+  @media screen and (max-height: #{$small-screen-height}px) {
+    height: #{$height-small}px;
+  }
   border-top: 1px solid transparent;
 
   .copyright {

src/components/Containers/Header/Header.module.scss

@@ -1,14 +1,19 @@
 @import '../../../index';
 
 $height: $--header-height;
+$height-small: $--header-height-small;
 $background-color: $--color-alpha-5;
 $chain-color: $--color-white-1;
+$small-screen-height: $--small-height-screens - 1;
 
 .header {
   height: #{$height}px;
+  @media screen and (max-height: #{$small-screen-height}px) {
+    height: #{$height-small}px;
+  }
   border-bottom: 1px solid transparent;
   justify-content: space-between;
-  padding: 0 40px;
+  padding: 0 20px;
   background: $background-color;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
   transition: 0.3s ease-in-out;
@@ -17,13 +22,19 @@ $chain-color: $--color-white-1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin-right: 20px;
 
     .logo {
       transition: 0.3s ease-in-out;
       cursor: pointer;
 
       svg {
         width: 220px;
+        height: 46px;
+        @media screen and (max-width: 768px), screen and (max-height: #{$small-screen-height}px) {
+          width: 150px;
+          height: 30px;
+        }
       }
     }
 

src/components/Containers/Main/Main.js

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
+import {Breakpoints} from '../../../enums';
 import {useVars, useWindowSize} from '../../../hooks';
 import {TokensProvider} from '../../../providers/TokensProvider';
 import {useL1Wallet, useL2Wallet} from '../../../providers/WalletsProvider';
@@ -8,13 +9,15 @@ import styles from './Main.module.scss';
 
 export const Main = () => {
   const windowSize = useWindowSize();
-  const {mainOffset} = useVars();
+  const {mainOffset, mainOffsetSmall} = useVars();
   const {isConnected: isL1Connected} = useL1Wallet();
   const {isConnected: isL2Connected} = useL2Wallet();
   const [height, setHeight] = useState(null);
 
   useEffect(() => {
-    setHeight(document.body.offsetHeight - mainOffset);
+    Breakpoints.largeHeightScreens(windowSize)
+      ? setHeight(document.body.offsetHeight - mainOffset)
+      : setHeight(document.body.offsetHeight - mainOffsetSmall);
   }, [windowSize]);
 
   return (

src/components/Containers/Main/Main.module.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  width: calc(100% - 378px);
+  @media screen and (min-width: 1350px), (max-width: 960px) {
+    width: 100%;
+  }
 }

src/components/Features/Bridge/Bridge.module.scss

@@ -8,7 +8,7 @@ $background-color: $--color-alpha;
   background: $background-color;
   border-radius: 20px;
   padding: 20px;
-  width: 500px;
+  width: 520px;
   max-height: 650px;
   margin: auto;
   transition: 0.3s ease-in-out;

src/components/Features/ToastProvider/ToastProvider.js

@@ -5,13 +5,14 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import {
   ActionType,
+  Breakpoints,
   isConsumed,
   isOnChain,
   isPending,
   isRejected,
   NetworkType
 } from '../../../enums';
-import {useCompleteTransferToL1, usePrevious} from '../../../hooks';
+import {useCompleteTransferToL1, usePrevious, useWindowSize} from '../../../hooks';
 import {useTransfers} from '../../../providers/TransfersProvider';
 import {getFullTime} from '../../../utils';
 import {useBridgeActions} from '../../Features/Bridge/Bridge.hooks';
@@ -20,7 +21,36 @@ import {ToastBody, TransferToast, CompleteTransferToL1Toast} from '../../UI';
 import styles from './ToastProvider.module.scss';
 import {ALPHA_DISCLAIMER_MSG} from './ToastProvider.strings';
 
+const styleBottomLeft = {
+  position: 'bottom-left',
+  style: {
+    boxSizing: 'border-box',
+    maxWidth: '350px',
+    marginBottom: '0px',
+    fontSize: '16px'
+  }
+};
+const styleBottomCenter = {
+  position: 'bottom-center',
+  style: {
+    boxSizing: 'border-box',
+    maxWidth: '540px',
+    marginBottom: '34px',
+    fontSize: '14px'
+  }
+};
+const styleBottomRight = {
+  position: 'bottom-right',
+  style: {
+    boxSizing: 'border-box',
+    maxWidth: '357px',
+    marginBottom: '34px',
+    fontSize: '14px'
+  }
+};
+
 export const ToastProvider = () => {
+  const windowSize = useWindowSize();
   const {transfers} = useTransfers();
   const prevTransfers = usePrevious(transfers);
   const toastsMap = useRef({});
@@ -32,7 +62,7 @@ export const ToastProvider = () => {
 
   useEffect(() => {
     showAlphaDisclaimerToast();
-  }, []);
+  }, [windowSize]);
 
   useDeepCompareEffect(() => {
     transfers.forEach(transfer => {
@@ -67,10 +97,17 @@ export const ToastProvider = () => {
   };
 
   const showAlphaDisclaimerToast = () => {
-    toast.success(ALPHA_DISCLAIMER_MSG, {
-      position: 'bottom-left',
-      icon: '❗'
-    });
+    toast.success(
+      ALPHA_DISCLAIMER_MSG,
+      Object.assign(
+        {id: 'alpha', icon: '❗', className: 'alpha-notification'},
+        Breakpoints.largeScreens(windowSize)
+          ? styleBottomLeft
+          : Breakpoints.smallHeightScreens(windowSize)
+          ? styleBottomRight
+          : styleBottomCenter
+      )
+    );
   };
 
   const showConsumedTransferToast = transfer => {
@@ -142,6 +179,13 @@ export const ToastProvider = () => {
   return (
     <Toaster
       containerClassName={styles.toastProvider}
+      containerStyle={{
+        left: 20,
+        right: 20,
+        top: Breakpoints.smallHeightScreens(windowSize) ? 8 : 20,
+        bottom: Breakpoints.smallHeightScreens(windowSize) ? 0 : 20,
+        transition: 'all 0.3s ease-in-out 0s'
+      }}
       position="top-right"
       toastOptions={{
         duration: Infinity

src/components/Features/ToastProvider/ToastProvider.module.scss

@@ -1,5 +1,10 @@
 @import '../../../index';
 
+$small-screen-height: $--small-height-screens - 1;
+
 .toastProvider {
   margin-top: #{$--header-height}px;
+  @media screen and (max-height: #{$small-screen-height}px) {
+    margin-top: #{$--header-height-small}px;
+  }
 }

src/components/Features/Transfer/Transfer.module.scss

@@ -4,6 +4,7 @@ $background-color: $--color-alpha-1;
 $error-msg-color: $--color-error;
 
 .transfer {
+  position: relative;
   transition: 0.3s ease-in-out;
 
   .tabsContainer {

src/components/UI/Button/Button.js

@@ -46,7 +46,7 @@ export const Button = ({
       onMouseLeave={() => setIsHover(false)}
     >
       {iconAlign === 'left' && icon}
-      {isLoading ? <Loading size={LoadingSize.SMALL} /> : text}
+      {isLoading ? <Loading size={LoadingSize.SMALL} /> : <span>{text}</span>}
       {iconAlign === 'right' && icon}
     </button>
   );

src/components/UI/Button/Button.module.scss

@@ -14,6 +14,7 @@
   padding: 20px 15px;
   cursor: pointer;
   transition: 0.3s ease-in-out;
+  line-height: 1.2;
 
   &.isDisabled {
     pointer-events: none;

src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js

@@ -41,7 +41,7 @@ export const CompleteTransferToL1Toast = ({
       <div className={styles.CompleteTransferToL1Toast}>
         <div className={styles.container}>
           <div className={styles.left}>
-            <L1Logo style={{opacity: 0.5}} />
+            <L1Logo style={{opacity: 0.5, margin: '0 8px', width: 40}} />
           </div>
           <div className={styles.right}>
             <ToastHeader title={TITLE_TXT} withClose={true} onClose={onClose} />

src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss

@@ -4,7 +4,7 @@ $background-color: $--color-white;
 $left-background-color: $--color-white-2;
 
 .CompleteTransferToL1Toast {
-  width: 400px;
+  width: 357px;
   background: $background-color;
   box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
   border-radius: 8px;
@@ -16,7 +16,7 @@ $left-background-color: $--color-white-2;
     height: 100%;
 
     .left {
-      width: 30%;
+      width: 56px;
       background: $left-background-color;
       border-radius: 8px 0 0 8px;
     }

src/components/UI/Toast/ToastHeader/ToastHeader.module.scss

@@ -5,6 +5,7 @@ $color-title: $--color-black;
 .toastHeader {
   display: flex;
   margin-bottom: 5px;
+  justify-content: space-between;
 
   .title {
     font-style: normal;
@@ -15,7 +16,7 @@ $color-title: $--color-black;
   }
 
   .close {
-    margin-left: 40px;
+    margin-left: 8px;
     cursor: pointer;
   }
 }

src/components/UI/WalletButton/WalletButton.constants.js

@@ -1 +1,3 @@
 export const WALLET_LOGO_SIZE = 30;
+export const WALLET_BTN_WIDTH = 230;
+export const WALLET_BTN_WIDTH_S = 172;

src/components/UI/WalletButton/WalletButton.js

@@ -1,14 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useColors} from '../../../hooks';
+import {Breakpoints} from '../../../enums';
+import {useColors, useWindowSize} from '../../../hooks';
 import {shortenAddress} from '../../../utils';
 import {Button, DynamicIcon} from '../index';
-import {WALLET_LOGO_SIZE} from './WalletButton.constants';
+import {WALLET_LOGO_SIZE, WALLET_BTN_WIDTH, WALLET_BTN_WIDTH_S} from './WalletButton.constants';
 import {BTN_TXT} from './WalletButton.strings';
 
 export const WalletButton = ({account, logoPath, onClick}) => {
   const {colorBeta, colorWhite} = useColors();
+  const windowSize = useWindowSize();
 
   return (
     <Button
@@ -19,6 +21,7 @@ export const WalletButton = ({account, logoPath, onClick}) => {
       icon={<DynamicIcon path={logoPath} size={WALLET_LOGO_SIZE} />}
       style={{borderWidth: '2px'}}
       text={BTN_TXT(shortenAddress(account))}
+      width={Breakpoints.smallScreens(windowSize) ? WALLET_BTN_WIDTH_S : WALLET_BTN_WIDTH}
       onClick={onClick}
     />
   );

src/enums/Breakpoints.js

@@ -0,0 +1,16 @@
+export const Breakpoints = {
+  /** Alpha disclaimer toast
+   *  For XL screens (width & height) aligned to bottom-left.
+   *  For small-widths screens aligned to bottom-center.
+   *  For small-heights screens aligned to bottom-right.
+   */
+  largeScreens: windowSize => windowSize.width >= 1200 && windowSize.height >= 1024,
+  smallHeightScreens: windowSize => windowSize.height < 1024,
+  largeHeightScreens: windowSize => windowSize.height >= 1024,
+  largeWidthScreens: windowSize => windowSize.width >= 1300,
+
+  /** header & footer heights are also effected by that screen-height breakpoint.
+   *  WalletButtons has small width for small screens:
+   */
+  smallScreens: windowSize => windowSize.height < 1024 || windowSize.width < 768
+};

src/enums/index.js

@@ -1,8 +1,9 @@
+export * from './ActionType';
+export * from './Breakpoints';
 export * from './ChainType';
 export * from './MenuType';
-export * from './ActionType';
 export * from './NetworkType';
-export * from './WalletType';
-export * from './WalletStatus';
-export * from './TransactionStatus';
 export * from './TransactionHashPrefix';
+export * from './TransactionStatus';
+export * from './WalletStatus';
+export * from './WalletType';

src/styles/variables.module.scss

@@ -1,7 +1,13 @@
 $--header-height: 80;
+$--header-height-small: 50;
 $--footer-height: 50;
+$--footer-height-small: 30;
 $--main-offset: $--header-height + $--footer-height + 2;
+$--main-offset-small: $--header-height-small + $--footer-height-small + 2;
+
+$--small-height-screens: 1024;
 
 :export {
   mainOffset: $--main-offset;
+  mainOffsetSmall: $--main-offset-small;
 }