Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve UI responsiveness #95

Closed
wants to merge 12 commits into from
Closed

feat: improve UI responsiveness #95

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
45cdc66
adjust styling so UI supports up to tablets. add 'use-breeakpoint' de…
Mar 23, 2022
9ebaf0b
Merge branch 'dev' of github.com:starkware-libs/starkgate-frontend in…
Mar 23, 2022
627bc77
adjust walletButtons width; control Main's width via css;
Mar 23, 2022
0d4b619
both alphaDisclaimer & completeTransferToasts have max-width 350px, s…
Mar 23, 2022
34e9744
footer always with same height
Mar 23, 2022
662d4cf
wallet-buttons width fix
Mar 23, 2022
b4f12ac
attend PR comments: change names, tidy code, import breakpoint values…
Mar 23, 2022
0845326
attend PR comments
Mar 23, 2022
b048f55
attend PR comments
Mar 23, 2022
8bf9b62
uncommit draft code
Mar 23, 2022
496b474
attend PR comments
Mar 23, 2022
876c3eb
attend PR comments
Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions src/components/Containers/Footer/Footer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
17 changes: 14 additions & 3 deletions src/components/Containers/Header/Header.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
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;
Expand All @@ -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;
}
}
}

Expand Down
12 changes: 2 additions & 10 deletions src/components/Containers/Main/Main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
10 changes: 10 additions & 0 deletions src/components/Containers/Main/Main.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@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);
}
}
5 changes: 4 additions & 1 deletion src/components/Features/Bridge/Bridge.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
19 changes: 15 additions & 4 deletions src/components/Features/ToastProvider/ToastProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 => {
Expand Down Expand Up @@ -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',
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
icon: '❗',
className: 'disclaimer ' + breakpoint
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
});
};

Expand Down Expand Up @@ -134,6 +144,7 @@ export const ToastProvider = () => {
return (
<Toaster
containerClassName={styles.toastProvider}
gutter={breakpoint === 'desktop' ? 16 : 8}
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
position="top-right"
toastOptions={{
duration: Infinity
Expand Down
19 changes: 18 additions & 1 deletion src/components/Features/ToastProvider/ToastProvider.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,22 @@
@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 {
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
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;
}
}
}
1 change: 1 addition & 0 deletions src/components/Features/Transfer/Transfer.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $background-color: $--color-alpha-1;
$error-msg-color: $--color-error;

.transfer {
position: relative;
transition: 0.3s ease-in-out;

.tabsContainer {
Expand Down
3 changes: 3 additions & 0 deletions src/components/UI/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const Button = ({
height,
icon,
iconAlign = 'left',
buttonClass,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you added an option to send class prop, why buttonClass as single and not just classes as array?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

currently, that's the only class a button gets in the whole project.
also, there's an extended usage of a util function that gets an array of values and returns a string.

colorText,
colorTextHover,
colorBackground,
Expand All @@ -37,6 +38,7 @@ export const Button = ({
<button
className={utils.object.toClasses(
styles.button,
buttonClass,
isDisabled && styles.isDisabled,
isLoading && styles.isLoading
)}
Expand All @@ -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,
Expand Down
11 changes: 10 additions & 1 deletion src/components/UI/Button/Button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import '../../../index';

.button {
display: flex;
justify-content: space-around;
Expand All @@ -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;
Expand All @@ -28,4 +30,11 @@
svg {
margin-right: 10px;
}

&[class~='wallet-btn'] {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please change to scss syntax

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

writing: &.wallet-btn doesn't seem to work.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1.It won't work - CSS modules add id to each class at runtime. You should use the styles object of the CSS file imported to the component. i.e., styles.walletBtn.
2. Why are you adding app-specific class component styles (wallet-btn) to a generic component styles?

width: 170px;
@media screen and (min-width: #{$--breakpoint-desktop}px) {
width: 220px;
}
}
}
6 changes: 6 additions & 0 deletions src/components/UI/NetworkMenu/NetworkMenu.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
padding: 8px 40px 30px;
&:last-child {
padding: 8px 40px 16px;
}
}

.networkContainer {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
4 changes: 2 additions & 2 deletions src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
1 change: 1 addition & 0 deletions src/components/UI/Toast/ToastHeader/ToastHeader.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ $color-title: $--color-black;
.toastHeader {
display: flex;
margin-bottom: 5px;
justify-content: space-between;

.title {
font-style: normal;
Expand Down
10 changes: 8 additions & 2 deletions src/components/UI/TokenInput/TokenInput.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/components/UI/WalletButton/WalletButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}}
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
text={BTN_TXT(utils.wallet.shortenAddress(account))}
onClick={onClick}
/>
Expand Down
6 changes: 6 additions & 0 deletions src/enums/Breakpoints.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const Breakpoints = {
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
mobile: 0,
tablet: 768,
laptop: 960,
desktop: 1280
};
9 changes: 5 additions & 4 deletions src/enums/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
1 change: 1 addition & 0 deletions src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import './styles/variables.module';
@import './styles/breakpoints.module';
@import './styles/colors.module';
@import './styles/fonts.module';

Expand Down
4 changes: 4 additions & 0 deletions src/styles/breakpoints.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
$--breakpoint-mobile: 0;
$--breakpoint-tablet: 768;
$--breakpoint-laptop: 960;
$--breakpoint-desktop: 1280;
5 changes: 4 additions & 1 deletion src/styles/variables.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
$--header-height: 80;
$--footer-height: 50;
$--header-height-small: 50;
$--footer-height: 40;
$--main-offset: $--header-height + $--footer-height + 2;
CarmitKl marked this conversation as resolved.
Show resolved Hide resolved
$--main-offset-small: $--header-height-small + $--footer-height + 2;

:export {
mainOffset: $--main-offset;
mainOffsetSmall: $--main-offset-small;
Comment on lines 7 to +10
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is small? tablet? mobile? please write the appropriate breakpoint.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the '$--header-height' is for width 1280 and above. breakpoint DESKTOP.
and the '$--header-height-small' is for all the rest.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So why not to change $--header-height to $--header-height-desktop and $--header-height-small to $--header-height???

}
Loading