From 50c2b8577126a35a8a46c7d33363e73d6e4157d3 Mon Sep 17 00:00:00 2001 From: Carmit Kleinik Date: Sun, 20 Mar 2022 14:43:59 +0200 Subject: [PATCH 1/4] install material-ui version 5.5.1, connect it's provider to the project --- package.json | 3 + src/config/theme.config.js | 31 +++ src/providers/ThemeProvider/ThemeProvider.js | 13 + src/providers/index.js | 4 +- yarn.lock | 272 ++++++++++++++++++- 5 files changed, 316 insertions(+), 7 deletions(-) create mode 100644 src/config/theme.config.js create mode 100644 src/providers/ThemeProvider/ThemeProvider.js diff --git a/package.json b/package.json index 5aaab518..41d60e5a 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,11 @@ }, "dependencies": { "@argent/get-starknet": "^1.1.3", + "@emotion/react": "^11.8.2", + "@emotion/styled": "^11.8.1", "@headlessui/react": "^1.4.2", "@metamask/onboarding": "^1.0.1", + "@mui/material": "^5.5.1", "@reduxjs/toolkit": "^1.6.2", "js-logger": "^1.6.1", "react": "^17.0.2", diff --git a/src/config/theme.config.js b/src/config/theme.config.js new file mode 100644 index 00000000..3036c068 --- /dev/null +++ b/src/config/theme.config.js @@ -0,0 +1,31 @@ +import {createTheme} from '@mui/material'; + +export const theme = createTheme({ + breakpoints: { + values: { + xl: 1200, + lg: 1024, + md: 768, + sm: 480, + xs: 0 + } + }, + components: { + MuiButton: { + styleOverrides: { + root: { + textTransform: 'capitalize' + } + } + }, + MuiModal: { + styleOverrides: { + root: { + '& .MuiPaper-root': { + borderRadius: '10px' + } + } + } + } + } +}); diff --git a/src/providers/ThemeProvider/ThemeProvider.js b/src/providers/ThemeProvider/ThemeProvider.js new file mode 100644 index 00000000..aaba6917 --- /dev/null +++ b/src/providers/ThemeProvider/ThemeProvider.js @@ -0,0 +1,13 @@ +import {ThemeProvider as MuiThemeProvider} from '@mui/material/styles'; +import {PropTypes} from 'prop-types'; +import React from 'react'; + +import {theme} from '../../config/theme.config'; + +export const ThemeProvider = props => { + return {props.children}; +}; + +ThemeProvider.propTypes = { + children: PropTypes.any +}; diff --git a/src/providers/index.js b/src/providers/index.js index 9704161d..549f76e7 100644 --- a/src/providers/index.js +++ b/src/providers/index.js @@ -1,5 +1,6 @@ import {BlockHashProvider} from './BlockHashProvider'; import {StoreProvider} from './StoreProvider/StoreProvider'; +import {ThemeProvider} from './ThemeProvider/ThemeProvider'; import {TransfersProvider} from './TransfersProvider'; import {WalletProvider} from './WalletProvider/WalletProvider'; import {WalletsProvider} from './WalletsProvider'; @@ -10,5 +11,6 @@ export const Providers = combineProviders([ WalletProvider, WalletsProvider, BlockHashProvider, - TransfersProvider + TransfersProvider, + ThemeProvider ]); diff --git a/yarn.lock b/yarn.lock index 95538e3f..1ac25409 100644 --- a/yarn.lock +++ b/yarn.lock @@ -356,6 +356,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9" integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ== +"@babel/helper-plugin-utils@^7.16.7": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5" + integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA== + "@babel/helper-remap-async-to-generator@^7.16.0", "@babel/helper-remap-async-to-generator@^7.16.4": version "7.16.4" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.4.tgz#5d7902f61349ff6b963e07f06a389ce139fbfe6e" @@ -700,6 +705,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" +"@babel/plugin-syntax-jsx@^7.12.13": + version "7.16.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665" + integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q== + dependencies: + "@babel/helper-plugin-utils" "^7.16.7" + "@babel/plugin-syntax-jsx@^7.16.0": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.0.tgz#f9624394317365a9a88c82358d3f8471154698f1" @@ -1350,6 +1362,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.7": + version "7.17.8" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2" + integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.16.0", "@babel/template@^7.3.3": version "7.16.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6" @@ -1429,6 +1448,107 @@ resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== +"@emotion/babel-plugin@^11.7.1": + version "11.7.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0" + integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ== + dependencies: + "@babel/helper-module-imports" "^7.12.13" + "@babel/plugin-syntax-jsx" "^7.12.13" + "@babel/runtime" "^7.13.10" + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.5" + "@emotion/serialize" "^1.0.2" + babel-plugin-macros "^2.6.1" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.0.13" + +"@emotion/cache@^11.7.1": + version "11.7.1" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539" + integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.1.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "4.0.13" + +"@emotion/hash@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + +"@emotion/is-prop-valid@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95" + integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ== + dependencies: + "@emotion/memoize" "^0.7.4" + +"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + +"@emotion/react@^11.8.2": + version "11.8.2" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.8.2.tgz#e51f5e6372e22e82780836c9288da19af4b51e70" + integrity sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/cache" "^11.7.1" + "@emotion/serialize" "^1.0.2" + "@emotion/utils" "^1.1.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" + integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2" + integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g== + +"@emotion/styled@^11.8.1": + version "11.8.1" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17" + integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/is-prop-valid" "^1.1.2" + "@emotion/serialize" "^1.0.2" + "@emotion/utils" "^1.1.0" + +"@emotion/unitless@^0.7.5": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" + integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== + +"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf" + integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ== + +"@emotion/weak-memoize@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -1988,6 +2108,85 @@ resolved "https://registry.yarnpkg.com/@metamask/safe-event-emitter/-/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c" integrity sha512-/kSXhY692qiV1MXu6EeOZvg5nECLclxNXcKCxJ3cXQgYuRymRHpdx/t7JXfsK+JLjwA1e1c1/SBrlQYpusC29Q== +"@mui/base@5.0.0-alpha.72": + version "5.0.0-alpha.72" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.72.tgz#551d64402ee5065cf81fd1388a3e7ab8c426fe3e" + integrity sha512-WCAooa9eqbsC68LhyKtDBRumH4hV1eRZ0A3SDKFHSwYG9fCOdsFv/H1dIYRJM0rwD45bMnuDiG3Qmx7YsTiptw== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/is-prop-valid" "^1.1.2" + "@mui/utils" "^5.4.4" + "@popperjs/core" "^2.11.3" + clsx "^1.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + +"@mui/material@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.5.1.tgz#9ca89a8b32afd59c843a5bc0332b0786cf9bf1d0" + integrity sha512-bJSYgymgSZ7btPTNnWFrr2EmGoVQc4A/0WLfP/ESY2dxnhnbFDwt7twiOKmJp3u84YXriEDt5v9EZQLf7A+y0Q== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/base" "5.0.0-alpha.72" + "@mui/system" "^5.5.1" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.4.4" + "@types/react-transition-group" "^4.4.4" + clsx "^1.1.1" + csstype "^3.0.11" + hoist-non-react-statics "^3.3.2" + prop-types "^15.7.2" + react-is "^17.0.2" + react-transition-group "^4.4.2" + +"@mui/private-theming@^5.4.4": + version "5.4.4" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.4.4.tgz#cc2b2d897888ce5d1c319adfa2c50c0063a649ab" + integrity sha512-V/gxttr6736yJoU9q+4xxXsa0K/w9Hn9pg99zsOHt7i/O904w2CX5NHh5WqDXtoUzVcayLF0RB17yr6l79CE+A== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/utils" "^5.4.4" + prop-types "^15.7.2" + +"@mui/styled-engine@^5.4.4": + version "5.4.4" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.4.4.tgz#8991b2e2dd47ae60071e7f042a5fab8e6e092e82" + integrity sha512-AKx3rSgB6dmt5f7iP4K18mLFlE5/9EfJe/5EH9Pyqez8J/CPkTgYhJ/Va6qtlrcunzpui+uG/vfuf04yAZekSg== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/cache" "^11.7.1" + prop-types "^15.7.2" + +"@mui/system@^5.5.1": + version "5.5.1" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.5.1.tgz#1f2b2a8c5542db6176e3b5a8ed12aea602cdeb81" + integrity sha512-2hynI4hN8304hOCT8sc4knJviwUUYJ7XK3mXwQ0nagVGOPnWSOad/nYADm7K0vdlCeUXLIbDbe7oNN3Kaiu2kA== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/private-theming" "^5.4.4" + "@mui/styled-engine" "^5.4.4" + "@mui/types" "^7.1.3" + "@mui/utils" "^5.4.4" + clsx "^1.1.1" + csstype "^3.0.11" + prop-types "^15.7.2" + +"@mui/types@^7.1.3": + version "7.1.3" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a" + integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA== + +"@mui/utils@^5.4.4": + version "5.4.4" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.4.4.tgz#bd7dde4f48f60c02b6debf976bd74f3505b188fe" + integrity sha512-hfYIXEuhc2mXMGN5nUPis8beH6uE/zl3uMWJcyHX0/LN/+QxO9zhYuV6l8AsAaphHFyS/fBv0SW3Nid7jw5hKQ== + dependencies: + "@babel/runtime" "^7.17.2" + "@types/prop-types" "^15.7.4" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.7.2" + react-is "^17.0.2" + "@noble/hashes@^0.5.2": version "0.5.5" resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-0.5.5.tgz#32ee0eecf4aa0933a97cbc5ba5a35715b917c7ab" @@ -2047,6 +2246,11 @@ schema-utils "^2.6.5" source-map "^0.7.3" +"@popperjs/core@^2.11.3": + version "2.11.4" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503" + integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg== + "@portis/web3-provider-engine@1.1.2": version "1.1.2" resolved "https://registry.yarnpkg.com/@portis/web3-provider-engine/-/web3-provider-engine-1.1.2.tgz#97f383156ea6b70fba69ae93a945fdd94159b1ba" @@ -2602,7 +2806,7 @@ resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.2.tgz#4c62fae93eb479660c3bd93f9d24d561597a8281" integrity sha512-ekoj4qOQYp7CvjX8ZDBgN86w3MqQhLE1hczEJbEIjgFEumDy+na/4AJAbLXfgEWFNB2pKadM5rPFtuSGMWK7xA== -"@types/prop-types@*": +"@types/prop-types@*", "@types/prop-types@^15.7.4": version "15.7.4" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== @@ -2612,6 +2816,13 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df" integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ== +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.20": version "7.1.20" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.20.tgz#42f0e61ababb621e12c66c96dda94c58423bd7df" @@ -2622,6 +2833,13 @@ hoist-non-react-statics "^3.3.0" redux "^4.0.0" +"@types/react-transition-group@^4.4.4": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" + integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== + dependencies: + "@types/react" "*" + "@types/react@*": version "17.0.37" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959" @@ -4049,7 +4267,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@2.8.0: +babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -5360,7 +5578,7 @@ clone@2.1.2, clone@^2.0.0, clone@^2.1.1: resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f" integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= -clsx@^1.1.0: +clsx@^1.1.0, clsx@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== @@ -5773,7 +5991,7 @@ convert-source-map@^0.3.3: resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190" integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA= -convert-source-map@^1.4.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0: version "1.8.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA== @@ -6217,6 +6435,11 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" +csstype@^3.0.11: + version "3.0.11" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" + integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== + csstype@^3.0.2: version "3.0.10" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5" @@ -6600,6 +6823,14 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -8178,6 +8409,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" @@ -9005,7 +9241,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -13612,6 +13848,15 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" +prop-types@^15.6.2: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" @@ -13943,7 +14188,7 @@ react-hot-toast@^2.1.1: dependencies: goober "^2.0.35" -react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -14036,6 +14281,16 @@ react-scripts@4.0.3: optionalDependencies: fsevents "^2.1.3" +react-transition-group@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" + integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -15698,6 +15953,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + superstruct@^0.15.3: version "0.15.3" resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.15.3.tgz#07edfc715259ebfe3b4b2e4cb53e8e45b51674a4" From cbff7eb1d46666909d8975e253341114c7165772 Mon Sep 17 00:00:00 2001 From: Carmit Kleinik Date: Mon, 21 Mar 2022 18:45:32 +0200 Subject: [PATCH 2/4] adjustments to better UI support for small-sized screens (tablets, laptops), up to screen-width 600px. --- .../Containers/Footer/Footer.module.scss | 5 ++ .../Containers/Header/Header.module.scss | 13 ++++- src/components/Containers/Main/Main.js | 13 ++++- .../Features/Bridge/Bridge.module.scss | 2 +- .../Features/ToastProvider/ToastProvider.js | 56 +++++++++++++++++-- .../ToastProvider/ToastProvider.module.scss | 5 ++ .../Features/Transfer/Transfer.module.scss | 1 + src/components/UI/Button/Button.js | 2 +- src/components/UI/Button/Button.module.scss | 1 + .../CompleteTransferToL1Toast.js | 2 +- .../CompleteTransferToL1Toast.module.scss | 4 +- .../Toast/ToastHeader/ToastHeader.module.scss | 3 +- .../UI/WalletButton/WalletButton.constants.js | 2 + .../UI/WalletButton/WalletButton.js | 7 ++- src/enums/Breakpoints.js | 18 ++++++ src/enums/index.js | 9 +-- src/styles/variables.module.scss | 6 ++ 17 files changed, 127 insertions(+), 22 deletions(-) create mode 100644 src/enums/Breakpoints.js diff --git a/src/components/Containers/Footer/Footer.module.scss b/src/components/Containers/Footer/Footer.module.scss index 5abb6db2..107d2aba 100644 --- a/src/components/Containers/Footer/Footer.module.scss +++ b/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; +$smallScreenHeight: $--small-height-screens - 1; .footer { font-size: 13px; height: #{$height}px; + @media screen and (max-height: #{$smallScreenHeight}px) { + height: #{$height-small}px; + } border-top: 1px solid transparent; .copyright { diff --git a/src/components/Containers/Header/Header.module.scss b/src/components/Containers/Header/Header.module.scss index aa80a2ea..5546545a 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; +$smallScreenHeight: $--small-height-screens - 1; .header { height: #{$height}px; + @media screen and (max-height: #{$smallScreenHeight}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,6 +22,7 @@ $chain-color: $--color-white-1; display: flex; flex-direction: column; align-items: flex-start; + margin-right: 20px; .logo { transition: 0.3s ease-in-out; @@ -24,6 +30,11 @@ $chain-color: $--color-white-1; svg { width: 220px; + height: 46px; + @media screen and (max-width: 768px), screen and (max-height: #{$smallScreenHeight}px) { + width: 150px; + height: 30px; + } } } diff --git a/src/components/Containers/Main/Main.js b/src/components/Containers/Main/Main.js index 12993bf6..ce46d64c 100644 --- a/src/components/Containers/Main/Main.js +++ b/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,17 +9,23 @@ 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 [width, setWidth] = useState(null); useEffect(() => { - setHeight(document.body.offsetHeight - mainOffset); + Breakpoints.largeHeightScreens(windowSize) + ? setHeight(document.body.offsetHeight - mainOffset) + : setHeight(document.body.offsetHeight - mainOffsetSmall); + Breakpoints.mediumWidthScreens(windowSize) + ? setWidth(document.body.offsetWidth - 378) + : setWidth('100%'); }, [windowSize]); return ( -
+
{isL1Connected && isL2Connected ? ( diff --git a/src/components/Features/Bridge/Bridge.module.scss b/src/components/Features/Bridge/Bridge.module.scss index 26649c54..fd0b566c 100644 --- a/src/components/Features/Bridge/Bridge.module.scss +++ b/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; diff --git a/src/components/Features/ToastProvider/ToastProvider.js b/src/components/Features/ToastProvider/ToastProvider.js index 29c21a11..3848ce0e 100644 --- a/src/components/Features/ToastProvider/ToastProvider.js +++ b/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 styleForXL = { + position: 'bottom-left', + style: { + boxSizing: 'border-box', + maxWidth: '350px', + marginBottom: '0px', + fontSize: '16px' + } +}; +const styleForSmWidth = { + position: 'bottom-center', + style: { + boxSizing: 'border-box', + maxWidth: '540px', + marginBottom: '34px', + fontSize: '14px' + } +}; +const styleForSmHeight = { + 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: '❗'}, + Breakpoints.largeScreens(windowSize) + ? styleForXL + : Breakpoints.smallHeightScreens(windowSize) + ? styleForSmHeight + : styleForSmWidth + ) + ); }; const showConsumedTransferToast = transfer => { @@ -142,6 +179,13 @@ export const ToastProvider = () => { return ( setIsHover(false)} > {iconAlign === 'left' && icon} - {isLoading ? : text} + {isLoading ? : {text}} {iconAlign === 'right' && icon} ); diff --git a/src/components/UI/Button/Button.module.scss b/src/components/UI/Button/Button.module.scss index cf299dfa..a5ca811c 100644 --- a/src/components/UI/Button/Button.module.scss +++ b/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; 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..fb1b2c84 100644 --- a/src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.module.scss +++ b/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; } diff --git a/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss b/src/components/UI/Toast/ToastHeader/ToastHeader.module.scss index 2029291a..9b2a22fb 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; @@ -15,7 +16,7 @@ $color-title: $--color-black; } .close { - margin-left: 40px; + margin-left: 8px; cursor: pointer; } } diff --git a/src/components/UI/WalletButton/WalletButton.constants.js b/src/components/UI/WalletButton/WalletButton.constants.js index 157db522..1be85b1f 100644 --- a/src/components/UI/WalletButton/WalletButton.constants.js +++ b/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; diff --git a/src/components/UI/WalletButton/WalletButton.js b/src/components/UI/WalletButton/WalletButton.js index c70f1138..140c71b4 100644 --- a/src/components/UI/WalletButton/WalletButton.js +++ b/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 (