diff --git a/package.json b/package.json index a2efc774..ee4c3f4e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Containers/Footer/Footer.module.scss b/src/components/Containers/Footer/Footer.module.scss index 5abb6db2..b18aef3c 100644 --- a/src/components/Containers/Footer/Footer.module.scss +++ b/src/components/Containers/Footer/Footer.module.scss @@ -7,6 +7,7 @@ $copyright-color: $--color-beta; font-size: 13px; height: #{$height}px; border-top: 1px solid transparent; + width: 100%; .copyright { color: $copyright-color; diff --git a/src/components/Containers/Header/Header.module.scss b/src/components/Containers/Header/Header.module.scss index aa80a2ea..ef1ab736 100644 --- a/src/components/Containers/Header/Header.module.scss +++ b/src/components/Containers/Header/Header.module.scss @@ -1,29 +1,42 @@ @import '../../../index'; $height: $--header-height; +$height-small: $--header-height-small; $background-color: $--color-alpha-5; $chain-color: $--color-white-1; .header { - height: #{$height}px; + 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; + @media screen and (min-width: #{$--breakpoint-desktop}px) { + height: #{$height}px; + padding: 0 40px; + } + .left { 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; + } } } diff --git a/src/components/Containers/Main/Main.js b/src/components/Containers/Main/Main.js index 12993bf6..c5ef6422 100644 --- a/src/components/Containers/Main/Main.js +++ b/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 ( -
+
{isL1Connected && isL2Connected ? ( diff --git a/src/components/Containers/Main/Main.module.scss b/src/components/Containers/Main/Main.module.scss index fb35a370..a294e006 100644 --- a/src/components/Containers/Main/Main.module.scss +++ b/src/components/Containers/Main/Main.module.scss @@ -1,5 +1,13 @@ +@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-desktop}px) { + height: calc(100vh - #{$--main-offset}px); + } } diff --git a/src/components/Features/Bridge/Bridge.module.scss b/src/components/Features/Bridge/Bridge.module.scss index 26649c54..2921b99e 100644 --- a/src/components/Features/Bridge/Bridge.module.scss +++ b/src/components/Features/Bridge/Bridge.module.scss @@ -7,9 +7,9 @@ $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; } diff --git a/src/components/Features/ToastProvider/ToastProvider.js b/src/components/Features/ToastProvider/ToastProvider.js index a1143562..286e1190 100644 --- a/src/components/Features/ToastProvider/ToastProvider.js +++ b/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,15 @@ export const ToastProvider = () => { const {showAccountMenu} = useBridgeActions(); const [, swapToL1] = useIsL1(); const [, swapToL2] = useIsL2(); + const {breakpoint} = useBreakpoint(Breakpoint); useEffect(() => { - showAlphaDisclaimerToast(); - }, []); + if (breakpoint !== 'MOBILE' && breakpoint !== 'TABLET') { + showAlphaDisclaimerToast(); + } else { + toast.dismiss('alphaDisclaimer'); + } + }, [breakpoint]); useDeepCompareEffect(() => { transfers.forEach(transfer => { @@ -61,7 +74,8 @@ export const ToastProvider = () => { toast.success(ALPHA_DISCLAIMER_MSG, { id: 'alphaDisclaimer', position: 'bottom-left', - icon: '❗' + icon: breakpoint === 'DESKTOP' ? '❗' : null, + className: `disclaimer ${breakpoint}` }); }; @@ -133,7 +147,12 @@ export const ToastProvider = () => { return (
- +
diff --git a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss index aa453495..21805be1 100644 --- a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss +++ b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss @@ -4,10 +4,15 @@ $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; + font-size: 16px; + + @media screen and (max-width: #{$--breakpoint-desktop}px) { + font-size: 14px; + } .container { display: flex; @@ -16,7 +21,7 @@ $left-background-color: $--color-white-2; height: 100%; .left { - width: 30%; + width: 56px; background: $left-background-color; border-radius: 8px 0 0 8px; } diff --git a/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss b/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss index 2029291a..9a77eab1 100644 --- a/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss +++ b/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; diff --git a/src/components/UI/TokenInput/TokenInput.module.scss b/src/components/UI/TokenInput/TokenInput.module.scss index 94bb0ad8..fd1fffd9 100644 --- a/src/components/UI/TokenInput/TokenInput.module.scss +++ b/src/components/UI/TokenInput/TokenInput.module.scss @@ -9,11 +9,15 @@ $error-color: $--color-error; align-items: center; background: $background-color; height: 50px; - margin: 20px 0; + margin: 20px 0 10px 0; padding: 10px; border-radius: 7px; transition: 0.3s ease-in-out; + @media screen and (min-width: #{$--breakpoint-desktop}px) { + margin: 20px 0; + } + &.hasError { margin: 20px 0 10px 0; border-color: $error-color; diff --git a/src/components/UI/WalletButton/WalletButton.js b/src/components/UI/WalletButton/WalletButton.js index a0c4ae6c..b3c6c8ff 100644 --- a/src/components/UI/WalletButton/WalletButton.js +++ b/src/components/UI/WalletButton/WalletButton.js @@ -12,12 +12,12 @@ export const WalletButton = ({account, logoPath, onClick}) => { return (