feat: improve UI responsiveness

package.json

@@ -58,6 +58,7 @@
     "react-scripts": "4.0.3",
     "starknet": "^3.0.0",
     "use-async-memo": "^1.2.3",
+    "use-breakpoint": "^3.0.1",
     "use-deep-compare-effect": "^1.8.1",
     "use-wallet": "^0.13.4",
     "uuid": "^8.3.2",

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

@@ -8,6 +8,11 @@ $copyright-color: $--color-beta;
   height: #{$height}px;
   border-top: 1px solid transparent;
 
+  width: 100%;
+  @media screen and (min-width: #{$--breakpoint-laptop}px) and (max-width: #{$--breakpoint-desktop - 1}px) {
+    width: calc(100% - 378px);
+  }
+
   .copyright {
     color: $copyright-color;
     display: flex;

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;
 
 .header {
-  height: #{$height}px;
+  @media screen and (min-width: #{$--breakpoint-desktop}px) {
+    height: #{$height}px;
+    padding: 0 40px;
+  }
+  height: #{$height-small}px;
+  padding: 0 16px;
   border-bottom: 1px solid transparent;
   justify-content: space-between;
-  padding: 0 40px;
   background: $background-color;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
   transition: 0.3s ease-in-out;
@@ -17,13 +22,20 @@ $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;
+        width: 150px;
+        height: 30px;
+
+        @media screen and (min-width: #{$--breakpoint-desktop}px) {
+          width: 220px;
+          height: 46px;
+        }
       }
     }
 

src/components/Containers/Main/Main.js

@@ -1,24 +1,16 @@
-import React, {useEffect, useState} from 'react';
+import React from 'react';
 
-import {useVars, useWindowSize} from '../../../hooks';
 import {TokensProvider} from '../../../providers/TokensProvider';
 import {useL1Wallet, useL2Wallet} from '../../../providers/WalletsProvider';
 import {Bridge, Login} from '../../Features';
 import styles from './Main.module.scss';
 
 export const Main = () => {
-  const windowSize = useWindowSize();
-  const {mainOffset} = useVars();
   const {isConnected: isL1Connected} = useL1Wallet();
   const {isConnected: isL2Connected} = useL2Wallet();
-  const [height, setHeight] = useState(null);
-
-  useEffect(() => {
-    setHeight(document.body.offsetHeight - mainOffset);
-  }, [windowSize]);
 
   return (
-    <main className={styles.main} style={{height}}>
+    <main className={styles.main}>
       {isL1Connected && isL2Connected ? (
         <TokensProvider>
           <Bridge />

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

@@ -1,5 +1,17 @@
+@import '../../../index';
+
 .main {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  width: 100%;
+  height: calc(100vh - #{$--main-offset-small}px);
+
+  @media screen and (min-width: #{$--breakpoint-laptop}px) and (max-width: #{$--breakpoint-desktop - 1}px) {
+    width: calc(100% - 378px);
+  }
+
+  @media screen and (min-width: #{$--breakpoint-desktop}px) {
+    height: calc(100vh - #{$--main-offset}px);
+  }
 }

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

@@ -7,9 +7,13 @@ $background-color: $--color-alpha;
   flex-direction: column;
   background: $background-color;
   border-radius: 20px;
-  padding: 20px;
   width: 500px;
   max-height: 650px;
   margin: auto;
   transition: 0.3s ease-in-out;
+  padding: 20px;
+
+  @media screen and (min-width: #{$--breakpoint-tablet}px) and (max-width: #{$--breakpoint-desktop}px) {
+    padding: 8px;
+  }
 }

src/components/Features/ToastProvider/ToastProvider.js

@@ -1,9 +1,17 @@
 import PropTypes from 'prop-types';
 import React, {useEffect, useRef} from 'react';
 import {toast, Toaster} from 'react-hot-toast';
+import {useBreakpoint} from 'use-breakpoint';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
-import {ActionType, isConsumed, isOnChain, isRejected, NetworkType} from '../../../enums';
+import {
+  ActionType,
+  Breakpoint,
+  isConsumed,
+  isOnChain,
+  isRejected,
+  NetworkType
+} from '../../../enums';
 import {useCompleteTransferToL1, usePrevious} from '../../../hooks';
 import {useTransfers} from '../../../providers/TransfersProvider';
 import utils from '../../../utils';
@@ -22,10 +30,11 @@ export const ToastProvider = () => {
   const {showAccountMenu} = useBridgeActions();
   const [, swapToL1] = useIsL1();
   const [, swapToL2] = useIsL2();
+  const {breakpoint} = useBreakpoint(Breakpoint);
 
   useEffect(() => {
     showAlphaDisclaimerToast();
-  }, []);
+  }, [breakpoint]);
 
   useDeepCompareEffect(() => {
     transfers.forEach(transfer => {
@@ -60,8 +69,9 @@ export const ToastProvider = () => {
   const showAlphaDisclaimerToast = () => {
     toast.success(ALPHA_DISCLAIMER_MSG, {
       id: 'alphaDisclaimer',
-      position: 'bottom-left',
-      icon: '❗'
+      position: breakpoint[breakpoint] === 'DESKTOP' ? 'bottom-left' : 'bottom-right',
+      icon: '❗',
+      className: 'disclaimer ' + breakpoint
     });
   };
 
@@ -134,6 +144,7 @@ export const ToastProvider = () => {
   return (
     <Toaster
       containerClassName={styles.toastProvider}
+      gutter={breakpoint === 'desktop' ? 16 : 8}
       position="top-right"
       toastOptions={{
         duration: Infinity

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

@@ -1,5 +1,25 @@
 @import '../../../index';
 
 .toastProvider {
-  margin-top: #{$--header-height}px;
+  margin-top: #{$--header-height-small}px;
+
+  @media screen and (min-width: #{$--breakpoint-desktop}px) {
+    margin-top: #{$--header-height}px;
+  }
+
+  & > div > div {
+    font-size: 16px;
+    &[class~='disclaimer'] {
+      max-width: 330px;
+
+      @media screen and (max-width: #{$--breakpoint-laptop}px) {
+        max-width: 100%;
+        margin-bottom: 22px;
+      }
+    }
+
+    @media screen and (max-width: #{$--breakpoint-desktop}px) {
+      font-size: 14px;
+    }
+  }
 }

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

@@ -12,6 +12,7 @@ export const Button = ({
   height,
   icon,
   iconAlign = 'left',
+  buttonClass,
   colorText,
   colorTextHover,
   colorBackground,
@@ -37,6 +38,7 @@ export const Button = ({
     <button
       className={utils.object.toClasses(
         styles.button,
+        buttonClass,
         isDisabled && styles.isDisabled,
         isLoading && styles.isLoading
       )}
@@ -56,6 +58,7 @@ Button.propTypes = {
   text: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  buttonClass: PropTypes.string,
   colorText: PropTypes.string,
   colorTextHover: PropTypes.string,
   colorBackground: PropTypes.string,

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

@@ -1,3 +1,5 @@
+@import '../../../index';
+
 .button {
   display: flex;
   justify-content: space-around;
@@ -6,14 +8,14 @@
   text-transform: capitalize;
   font-weight: bold;
   font-size: 14px;
-  line-height: 24px;
   border: 1px solid;
   box-sizing: border-box;
   border-radius: 7px;
   margin: 10px 0;
   padding: 20px 15px;
   cursor: pointer;
   transition: 0.3s ease-in-out;
+  line-height: 1.2;
 
   &.isDisabled {
     pointer-events: none;
@@ -28,4 +30,12 @@
   svg {
     margin-right: 10px;
   }
+
+  &[class~='wallet-btn'] {
+    width: 170px;
+
+    @media screen and (min-width: #{$--breakpoint-desktop}px) {
+      width: 220px;
+    }
+  }
 }

src/components/UI/NetworkMenu/NetworkMenu.module.scss

@@ -11,6 +11,13 @@ $box-shadow-color: rgba(0, 0, 0, 0.1);
   margin-top: 10px;
   padding: 30px 40px;
 
+  @media screen and (min-width: #{$--breakpoint-tablet}px) and (max-width: #{$--breakpoint-desktop}px) {
+    padding: 8px 40px 30px;
+    &:last-child {
+      padding: 8px 40px 16px;
+    }
+  }
+
   .networkContainer {
     display: flex;
     justify-content: space-between;

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: 350px;
   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;

src/components/UI/TokenInput/TokenInput.module.scss

@@ -9,15 +9,23 @@ $error-color: $--color-error;
   align-items: center;
   background: $background-color;
   height: 50px;
-  margin: 20px 0;
   padding: 10px;
   border-radius: 7px;
   transition: 0.3s ease-in-out;
+  margin: 8px 0;
+
+  @media screen and (min-width: #{$--breakpoint-desktop}px) {
+    margin: 20px 0;
+  }
 
   &.hasError {
-    margin: 20px 0 10px 0;
+    margin: 8px 0;
     border-color: $error-color;
     border-style: solid;
     border-width: 1px;
+
+    @media screen and (min-width: #{$--breakpoint-desktop}px) {
+      margin: 20px 0 10px 0;
+    }
   }
 }

src/components/UI/WalletButton/WalletButton.js

@@ -12,12 +12,13 @@ export const WalletButton = ({account, logoPath, onClick}) => {
 
   return (
     <Button
+      buttonClass="wallet-btn"
       colorBackground="transparent"
       colorBorder={colorBeta}
       colorText={colorWhite}
       height={40}
       icon={<DynamicIcon path={logoPath} size={WALLET_LOGO_SIZE} />}
-      style={{borderWidth: '2px'}}
+      style={{borderWidth: '2px', padding: '4px 10px 4px 6px'}}
       text={BTN_TXT(utils.wallet.shortenAddress(account))}
       onClick={onClick}
     />

src/enums/Breakpoint.js

@@ -0,0 +1,8 @@
+import breakpoints from '../styles/breakpoints.module.scss';
+
+export const Breakpoint = {
+  MOBILE: breakpoints['$breakpointMobile'],
+  TABLET: breakpoints['$breakpointTablet'],
+  LAPTOP: breakpoints['$breakpointLaptop'],
+  DESKTOP: breakpoints['$breakpointDesktop']
+};

src/enums/index.js

@@ -1,8 +1,9 @@
+export * from './ActionType';
+export * from './Breakpoint';
 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/index.scss

@@ -1,4 +1,5 @@
 @import './styles/variables.module';
+@import './styles/breakpoints.module';
 @import './styles/colors.module';
 @import './styles/fonts.module';