From 45cdc66fabfd6cb07549ef9d08ba882057a8aaf5 Mon Sep 17 00:00:00 2001 From: Carmit Kleinik Date: Wed, 23 Mar 2022 12:49:13 +0200 Subject: [PATCH 01/11] adjust styling so UI supports up to tablets. add 'use-breeakpoint' dependency. --- package.json | 1 + .../Containers/Footer/Footer.module.scss | 11 ++++++++++- .../Containers/Header/Header.module.scss | 17 ++++++++++++++--- src/components/Containers/Main/Main.js | 14 +++++++++----- .../Containers/Main/Main.module.scss | 6 ++++++ .../Features/Bridge/Bridge.module.scss | 5 ++++- .../Features/ToastProvider/ToastProvider.js | 19 +++++++++++++++---- .../ToastProvider/ToastProvider.module.scss | 18 +++++++++++++++++- .../Features/Transfer/Transfer.module.scss | 1 + src/components/UI/Button/Button.module.scss | 2 +- .../UI/NetworkMenu/NetworkMenu.module.scss | 6 ++++++ .../CompleteTransferToL1Toast.js | 2 +- .../CompleteTransferToL1Toast.module.scss | 2 +- .../Toast/ToastHeader/ToastHeader.module.scss | 1 + .../UI/TokenInput/TokenInput.module.scss | 10 ++++++++-- .../UI/WalletButton/WalletButton.js | 2 +- src/enums/Breakpoints.js | 6 ++++++ src/enums/index.js | 9 +++++---- src/index.scss | 1 + src/styles/breakpoints.module.scss | 4 ++++ src/styles/variables.module.scss | 6 +++++- yarn.lock | 5 +++++ 22 files changed, 122 insertions(+), 26 deletions(-) create mode 100644 src/enums/Breakpoints.js create mode 100644 src/styles/breakpoints.module.scss 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..ff199ed5 100644 --- a/src/components/Containers/Footer/Footer.module.scss +++ b/src/components/Containers/Footer/Footer.module.scss @@ -1,13 +1,22 @@ @import '../../../index'; $height: $--footer-height; +$height-small: $--footer-height-small; $copyright-color: $--color-beta; .footer { + @media screen and (min-width: #{$--breakpoint-desktop}px) { + height: #{$height}px; + } font-size: 13px; - height: #{$height}px; + height: #{$height-small}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; diff --git a/src/components/Containers/Header/Header.module.scss b/src/components/Containers/Header/Header.module.scss index aa80a2ea..000e37dd 100644 --- a/src/components/Containers/Header/Header.module.scss +++ b/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,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; + 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..a5ccda97 100644 --- a/src/components/Containers/Main/Main.js +++ b/src/components/Containers/Main/Main.js @@ -1,21 +1,25 @@ import React, {useEffect, useState} from 'react'; +import {useBreakpoint} from 'use-breakpoint'; -import {useVars, useWindowSize} from '../../../hooks'; +import {Breakpoints} from '../../../enums'; +import {useVars} 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 {mainOffset, mainOffsetSmall} = useVars(); const {isConnected: isL1Connected} = useL1Wallet(); const {isConnected: isL2Connected} = useL2Wallet(); const [height, setHeight] = useState(null); + const {breakpoint} = useBreakpoint(Breakpoints); useEffect(() => { - setHeight(document.body.offsetHeight - mainOffset); - }, [windowSize]); + let offset = 0; + offset = breakpoint === 'desktop' ? mainOffset : mainOffsetSmall; + setHeight(document.body.offsetHeight - offset); + }, [breakpoint]); return (
diff --git a/src/components/Containers/Main/Main.module.scss b/src/components/Containers/Main/Main.module.scss index fb35a370..1f9d9ff8 100644 --- a/src/components/Containers/Main/Main.module.scss +++ b/src/components/Containers/Main/Main.module.scss @@ -1,5 +1,11 @@ +@import '../../../index'; + .main { display: flex; flex-direction: column; overflow-y: auto; + width: 100%; + @media screen and (min-width: #{$--breakpoint-laptop}px) and (max-width: #{$--breakpoint-desktop - 1}px) { + width: calc(100% - 378px); + } } diff --git a/src/components/Features/Bridge/Bridge.module.scss b/src/components/Features/Bridge/Bridge.module.scss index 26649c54..787a3edb 100644 --- a/src/components/Features/Bridge/Bridge.module.scss +++ b/src/components/Features/Bridge/Bridge.module.scss @@ -7,9 +7,12 @@ $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; + } } diff --git a/src/components/Features/ToastProvider/ToastProvider.js b/src/components/Features/ToastProvider/ToastProvider.js index a1143562..945be845 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, + Breakpoints, + 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(Breakpoints); 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 === 'desktop' ? 'bottom-left' : 'bottom-right', + icon: '❗', + className: 'disclaimer ' + breakpoint }); }; @@ -134,6 +144,7 @@ export const ToastProvider = () => { return ( div > div { + font-size: 16px; + &[class~='disclaimer'] { + @media screen and (max-width: #{$--breakpoint-laptop}px) { + max-width: 100%; + margin-bottom: 12px; + } + } + @media screen and (max-width: #{$--breakpoint-desktop}px) { + font-size: 14px; + } + } } diff --git a/src/components/Features/Transfer/Transfer.module.scss b/src/components/Features/Transfer/Transfer.module.scss index dc8ca23d..c9d4ae88 100644 --- a/src/components/Features/Transfer/Transfer.module.scss +++ b/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 { diff --git a/src/components/UI/Button/Button.module.scss b/src/components/UI/Button/Button.module.scss index cf299dfa..3542d5b7 100644 --- a/src/components/UI/Button/Button.module.scss +++ b/src/components/UI/Button/Button.module.scss @@ -6,7 +6,6 @@ text-transform: capitalize; font-weight: bold; font-size: 14px; - line-height: 24px; border: 1px solid; box-sizing: border-box; border-radius: 7px; @@ -14,6 +13,7 @@ padding: 20px 15px; cursor: pointer; transition: 0.3s ease-in-out; + line-height: 1.2; &.isDisabled { pointer-events: none; diff --git a/src/components/UI/NetworkMenu/NetworkMenu.module.scss b/src/components/UI/NetworkMenu/NetworkMenu.module.scss index 6dd9369c..5a4128a7 100644 --- a/src/components/UI/NetworkMenu/NetworkMenu.module.scss +++ b/src/components/UI/NetworkMenu/NetworkMenu.module.scss @@ -10,6 +10,12 @@ $box-shadow-color: rgba(0, 0, 0, 0.1); height: 100%; 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; diff --git a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js index f2a0d0c9..674fe95e 100644 --- a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js +++ b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js @@ -41,7 +41,7 @@ export const CompleteTransferToL1Toast = ({
- +
diff --git a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss index aa453495..5eb65733 100644 --- a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss +++ b/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss @@ -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; } 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..8363ba30 100644 --- a/src/components/UI/TokenInput/TokenInput.module.scss +++ b/src/components/UI/TokenInput/TokenInput.module.scss @@ -9,13 +9,19 @@ $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; + @media screen and (min-width: #{$--breakpoint-desktop}px) { + margin: 20px 0 10px 0; + } + margin: 8px 0; border-color: $error-color; border-style: solid; border-width: 1px; diff --git a/src/components/UI/WalletButton/WalletButton.js b/src/components/UI/WalletButton/WalletButton.js index a0c4ae6c..a9ff3454 100644 --- a/src/components/UI/WalletButton/WalletButton.js +++ b/src/components/UI/WalletButton/WalletButton.js @@ -17,7 +17,7 @@ export const WalletButton = ({account, logoPath, onClick}) => { colorText={colorWhite} height={40} icon={} - style={{borderWidth: '2px'}} + style={{borderWidth: '2px', padding: '4px 10px 4px 6px'}} text={BTN_TXT(utils.wallet.shortenAddress(account))} onClick={onClick} /> diff --git a/src/enums/Breakpoints.js b/src/enums/Breakpoints.js new file mode 100644 index 00000000..75658a66 --- /dev/null +++ b/src/enums/Breakpoints.js @@ -0,0 +1,6 @@ +export const Breakpoints = { + mobile: 0, + tablet: 768, + laptop: 960, + desktop: 1280 +}; diff --git a/src/enums/index.js b/src/enums/index.js index 8eeff227..36435eb2 100644 --- a/src/enums/index.js +++ b/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'; diff --git a/src/index.scss b/src/index.scss index b388a3c9..5756095d 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,4 +1,5 @@ @import './styles/variables.module'; +@import './styles/breakpoints.module'; @import './styles/colors.module'; @import './styles/fonts.module'; diff --git a/src/styles/breakpoints.module.scss b/src/styles/breakpoints.module.scss new file mode 100644 index 00000000..c00b0fc5 --- /dev/null +++ b/src/styles/breakpoints.module.scss @@ -0,0 +1,4 @@ +$--breakpoint-mobile: 0; +$--breakpoint-tablet: 768; +$--breakpoint-laptop: 960; +$--breakpoint-desktop: 1280; diff --git a/src/styles/variables.module.scss b/src/styles/variables.module.scss index e6b74f8e..4f8c33ab 100644 --- a/src/styles/variables.module.scss +++ b/src/styles/variables.module.scss @@ -1,7 +1,11 @@ $--header-height: 80; -$--footer-height: 50; +$--header-height-small: 50; +$--footer-height: 40; +$--footer-height-small: 30; $--main-offset: $--header-height + $--footer-height + 2; +$--main-offset-small: $--header-height-small + $--footer-height-small + 2; :export { mainOffset: $--main-offset; + mainOffsetSmall: $--main-offset-small; } diff --git a/yarn.lock b/yarn.lock index 95538e3f..eccf4324 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16522,6 +16522,11 @@ use-async-memo@^1.2.3: resolved "https://registry.yarnpkg.com/use-async-memo/-/use-async-memo-1.2.3.tgz#fe49d7ae1cd850199cf9e4a8ee483e31ed85659f" integrity sha512-AjZ1Wy1vfOSlaxohqoLIpauV+jwph/p0N72PBzxeEcjrZ4Mf/4o1Vav4bLaAPYuHLJZo+4M/4TIcAk7XC6H98g== +use-breakpoint@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/use-breakpoint/-/use-breakpoint-3.0.1.tgz#9534ca7a93e067781b45f9ab05e88675bb5962bd" + integrity sha512-gQ3zg55Aa/AAicxJSsKBSs5B4pcQv8PNMaJXS+P7TzvWJ6QLY7Napa2erkA6gZDmFFdkjWsztyOax5a5nuoLGQ== + use-deep-compare-effect@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6" From 627bc77350614d039becb6cfe4af532964875400 Mon Sep 17 00:00:00 2001 From: Carmit Kleinik Date: Wed, 23 Mar 2022 13:24:28 +0200 Subject: [PATCH 02/11] adjust walletButtons width; control Main's width via css; --- src/components/Containers/Main/Main.js | 16 ++-------------- src/components/Containers/Main/Main.module.scss | 4 ++++ src/components/UI/Button/Button.js | 3 +++ src/components/UI/Button/Button.module.scss | 9 +++++++++ src/components/UI/WalletButton/WalletButton.js | 1 + 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/components/Containers/Main/Main.js b/src/components/Containers/Main/Main.js index a5ccda97..c5ef6422 100644 --- a/src/components/Containers/Main/Main.js +++ b/src/components/Containers/Main/Main.js @@ -1,28 +1,16 @@ -import React, {useEffect, useState} from 'react'; -import {useBreakpoint} from 'use-breakpoint'; +import React from 'react'; -import {Breakpoints} from '../../../enums'; -import {useVars} 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 {mainOffset, mainOffsetSmall} = useVars(); const {isConnected: isL1Connected} = useL1Wallet(); const {isConnected: isL2Connected} = useL2Wallet(); - const [height, setHeight] = useState(null); - const {breakpoint} = useBreakpoint(Breakpoints); - - useEffect(() => { - let offset = 0; - offset = breakpoint === 'desktop' ? mainOffset : mainOffsetSmall; - setHeight(document.body.offsetHeight - offset); - }, [breakpoint]); return ( -
+
{isL1Connected && isL2Connected ? ( diff --git a/src/components/Containers/Main/Main.module.scss b/src/components/Containers/Main/Main.module.scss index 1f9d9ff8..49d064b3 100644 --- a/src/components/Containers/Main/Main.module.scss +++ b/src/components/Containers/Main/Main.module.scss @@ -5,7 +5,11 @@ 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); + } } diff --git a/src/components/UI/Button/Button.js b/src/components/UI/Button/Button.js index 5ad3479a..7ae4731e 100644 --- a/src/components/UI/Button/Button.js +++ b/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 = ({