From df0e41c74c988ce303902e15646c63722c12e6be Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 21 Sep 2018 15:29:41 +0200 Subject: [PATCH 01/66] Added build-dev to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 495fb80e..32c7ed74 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ build +build-devel # Dependency directory node_modules From ae943aca54cf867ee73067ec95cec5f1cca9807c Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 21 Sep 2018 15:30:01 +0200 Subject: [PATCH 02/66] Dev server bind to all hosts --- webpack/dev.babel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack/dev.babel.js b/webpack/dev.babel.js index 792835cb..95a02ba6 100644 --- a/webpack/dev.babel.js +++ b/webpack/dev.babel.js @@ -23,6 +23,7 @@ module.exports = { path: BUILD, }, devServer: { + host: '0.0.0.0', contentBase: [ SRC, PUBLIC, @@ -97,7 +98,7 @@ module.exports = { COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()), }), new FlowWebpackPlugin({ - reportingSeverity: 'warning' + reportingSeverity: 'warning', }), new HtmlWebpackPlugin({ chunks: ['index'], From 65d28e2c4ccfe46a4133220df60d5a76ece41c7f Mon Sep 17 00:00:00 2001 From: Vladimir Volek Date: Fri, 21 Sep 2018 16:54:02 +0200 Subject: [PATCH 03/66] Add error message for IE8 and lower --- browserslist | 4 ++-- package.json | 4 ++-- public/unsupported-browsers.css | 8 ++++++++ src/index.html | 6 ++++++ yarn.lock | 7 +++---- 5 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 public/unsupported-browsers.css diff --git a/browserslist b/browserslist index 70900640..dc070217 100644 --- a/browserslist +++ b/browserslist @@ -1,4 +1,4 @@ # Browsers that we support > 5% -IE > 9 # sorry -last 10 versions \ No newline at end of file +IE > 8 +last 5 versions \ No newline at end of file diff --git a/package.json b/package.json index b3ba4764..1f37e8ec 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ "ethereumjs-tx": "^1.3.3", "ethereumjs-units": "^0.2.0", "ethereumjs-util": "^5.1.4", - "git-revision-webpack-plugin": "^3.0.3", "flow-webpack-plugin": "^1.2.0", + "git-revision-webpack-plugin": "^3.0.3", "hdkey": "^0.8.0", "html-webpack-plugin": "^3.2.0", "jest-fetch-mock": "^1.6.5", @@ -56,7 +56,7 @@ "redux-logger": "^3.0.6", "redux-raven-middleware": "^1.2.0", "redux-thunk": "^2.2.0", - "styled-components": "^3.3.3", + "styled-components": "^3.4.9", "styled-media-query": "^2.0.2", "styled-normalize": "^8.0.0", "trezor-connect": "^5.0.32", diff --git a/public/unsupported-browsers.css b/public/unsupported-browsers.css new file mode 100644 index 00000000..6489934f --- /dev/null +++ b/public/unsupported-browsers.css @@ -0,0 +1,8 @@ +body { + padding: 50px; +} + +p { + text-align: center; + font-size: 30px; +} diff --git a/src/index.html b/src/index.html index c62bd67d..39bf0924 100644 --- a/src/index.html +++ b/src/index.html @@ -10,8 +10,14 @@ + +
diff --git a/yarn.lock b/yarn.lock index 24401a58..a603da66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9763,15 +9763,14 @@ style-search@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" -styled-components@^3.3.3: - version "3.3.3" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.3.tgz#09e702055ab11f7a8eab8229b1c0d0b855095686" +styled-components@^3.4.9: + version "3.4.9" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.9.tgz#519abeb351b37be5b7de6a15ff9e4efeb9d772da" dependencies: buffer "^5.0.3" css-to-react-native "^2.0.3" fbjs "^0.8.16" hoist-non-react-statics "^2.5.0" - is-plain-object "^2.0.1" prop-types "^15.5.4" react-is "^16.3.1" stylis "^3.5.0" From 86fbce53a5f1f30bcb20913861c53dbf8502565d Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:44:47 +0200 Subject: [PATCH 04/66] Change style for disabled Textarea --- src/components/Textarea/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 8eecff33..6c4edd45 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -56,8 +56,9 @@ const TextArea = styled.textarea` } &:disabled { - border: 1px solid ${disabledColor}; - cursor: not-allowed; + pointer-events: none; + background: ${colors.GRAY_LIGHT}; + color: ${colors.TEXT_SECONDARY}; &::-webkit-input-placeholder { color: ${disabledColor}; From 162ddebd6cdee5b9dfaaa370befbe2ffa84a2f8a Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:45:40 +0200 Subject: [PATCH 05/66] Fix AdvanceForm composition for a smaller screen width --- .../components/AdvancedForm/index.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index 3a87a335..cd7f924c 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -13,6 +13,11 @@ import ICONS from 'config/icons'; import type { Props } from '../../Container'; +// TODO: Decide on a small screen width for the whole app +// and put it inside config/variables.js +// same variable also in "AccountSend/index.js" +const SmallScreenWidth = '850px'; + const InputRow = styled.div` margin-bottom: 20px; `; @@ -38,12 +43,24 @@ const AdvancedSettingsWrapper = styled.div` const GasInputRow = styled(InputRow)` width: 100%; display: flex; + + @media screen and (max-width: ${SmallScreenWidth}) { + flex-direction: column; + } `; const GasInput = styled(Input)` + min-height: 85px; &:first-child { padding-right: 20px; } + + @media screen and (max-width: ${SmallScreenWidth}) { + &:first-child { + padding-right: 0; + margin-bottom: 2px; + } + } `; const StyledTextarea = styled(Textarea)` @@ -204,7 +221,7 @@ const AdvancedForm = (props: Props) => { )} bottomText={errors.data || warnings.data || infos.data} - disabled={networkSymbol !== currency} + isDisabled={networkSymbol !== currency} value={networkSymbol !== currency ? '' : data} onChange={event => onDataChange(event.target.value)} /> From e1c1c5c9fceb72e10459bb668d8c244f646f9a0e Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:45:56 +0200 Subject: [PATCH 06/66] Minor spacing change --- src/views/Wallet/views/AccountSend/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/index.js b/src/views/Wallet/views/AccountSend/index.js index d7d2ffa3..f648ffd0 100644 --- a/src/views/Wallet/views/AccountSend/index.js +++ b/src/views/Wallet/views/AccountSend/index.js @@ -32,7 +32,7 @@ const StyledH2 = styled(H2)` `; const InputRow = styled.div` - margin-bottom: 20px; + margin-bottom: 10px; `; const SetMaxAmountButton = styled(Button)` From 34a02ee5371c11e3104940640e70bb678079e3f6 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 10:46:33 +0200 Subject: [PATCH 07/66] Add text under "Gas limit" input showing that gas limit is being recalculated --- .../Wallet/views/AccountSend/components/AdvancedForm/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js index cd7f924c..c298d188 100644 --- a/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js +++ b/src/views/Wallet/views/AccountSend/components/AdvancedForm/index.js @@ -106,6 +106,7 @@ const AdvancedForm = (props: Props) => { networkSymbol, currency, recommendedGasPrice, + calculatingGasLimit, errors, warnings, infos, @@ -160,7 +161,7 @@ const AdvancedForm = (props: Props) => { )} - bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit} + bottomText={errors.gasLimit || warnings.gasLimit || infos.gasLimit || (calculatingGasLimit ? 'Calculating...' : '')} value={gasLimit} isDisabled={networkSymbol === currency && data.length > 0} onChange={event => onGasLimitChange(event.target.value)} From 7d4ca8eeedabe286755c6d834231f5c25fec26e2 Mon Sep 17 00:00:00 2001 From: Vasek Mlejnsky Date: Mon, 24 Sep 2018 11:37:51 +0200 Subject: [PATCH 08/66] Change textarea style based on its state prop --- src/components/Textarea/index.js | 42 +++++++++++++++---- .../components/AdvancedForm/index.js | 14 ++++++- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 6c4edd45..2d21bebf 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -15,10 +15,11 @@ const disabledColor = colors.TEXT_PRIMARY; const TextArea = styled.textarea` width: 100%; + min-height: 85px; + margin-bottom: 10px; padding: 6px 12px; box-sizing: border-box; - min-height: 25px; - border: ${props => (props.isError ? `1px solid ${colors.ERROR_PRIMARY}` : `1px solid ${colors.DIVIDER}`)}; + border: 1px solid ${props => (props.borderColor ? props.borderColor : colors.DIVIDER)}; border-radius: 2px; resize: none; outline: none; @@ -87,6 +88,23 @@ const TopLabel = styled.span` color: ${colors.TEXT_SECONDARY}; `; +const BottomText = styled.span` + font-size: ${FONT_SIZE.SMALLER}; + color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)}; +`; + +const getColor = (inputState) => { + let color = ''; + if (inputState === 'success') { + color = colors.SUCCESS_PRIMARY; + } else if (inputState === 'warning') { + color = colors.WARNING_PRIMARY; + } else if (inputState === 'error') { + color = colors.ERROR_PRIMARY; + } + return color; +}; + const Textarea = ({ className, placeholder = '', @@ -96,15 +114,17 @@ const Textarea = ({ onBlur, isDisabled, onChange, - isError, topLabel, + state = '', + bottomText = '', }) => ( - + {topLabel && ( {topLabel} )}