From 0f32c8f5387000a1e8dcf544f4cfdf2951e85028 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Thu, 20 Dec 2018 19:56:14 +0300 Subject: [PATCH 01/10] feat: Relates to #128. Add feedback button that links to Fether Github new issue --- .../src/Accounts/AccountsList/AccountsList.js | 4 ++ .../fether-react/src/Feedback/Feedback.js | 18 +++++++++ packages/fether-react/src/Feedback/index.js | 8 ++++ .../src/assets/img/icons/feedback.svg | 38 +++++++++++++++++++ .../assets/sass/components/_footer-nav.scss | 13 +++++++ 5 files changed, 81 insertions(+) create mode 100644 packages/fether-react/src/Feedback/Feedback.js create mode 100644 packages/fether-react/src/Feedback/index.js create mode 100644 packages/fether-react/src/assets/img/icons/feedback.svg diff --git a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js index 994aae5b7..3b7dc7bf7 100644 --- a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js @@ -9,6 +9,7 @@ import { accountsInfo$, withoutLoading } from '@parity/light.js'; import { inject, observer } from 'mobx-react'; import light from '@parity/light.js-react'; +import Feedback from '../../Feedback'; import Health from '../../Health'; @light({ @@ -88,6 +89,9 @@ class AccountsList extends Component {
+
+ +
); diff --git a/packages/fether-react/src/Feedback/Feedback.js b/packages/fether-react/src/Feedback/Feedback.js new file mode 100644 index 000000000..68b0d9d50 --- /dev/null +++ b/packages/fether-react/src/Feedback/Feedback.js @@ -0,0 +1,18 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import React from 'react'; + +import feedback from '../assets/img/icons/feedback.svg'; + +const feedbackUrl = 'https://github.com/paritytech/fether/issues/new'; + +export const Feedback = () => ( +
+ + Feedback + +
+); diff --git a/packages/fether-react/src/Feedback/index.js b/packages/fether-react/src/Feedback/index.js new file mode 100644 index 000000000..005727fb4 --- /dev/null +++ b/packages/fether-react/src/Feedback/index.js @@ -0,0 +1,8 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import { Feedback } from './Feedback'; + +export default Feedback; diff --git a/packages/fether-react/src/assets/img/icons/feedback.svg b/packages/fether-react/src/assets/img/icons/feedback.svg new file mode 100644 index 000000000..3badb2bcc --- /dev/null +++ b/packages/fether-react/src/assets/img/icons/feedback.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index 1f9732086..1b665d79a 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -4,6 +4,19 @@ overflow: hidden; justify-content: space-between; + .footer-feedback { + display: flex; + flex-direction: column; + justify-content: center; + + img { + display: block; + height: (ms(0) * 1.3); + margin-right: 5px; + width: auto; + } + } + .footer-nav_status { padding: 1rem; font-size: ms(-2); From bd01df5f30bec5f97a9364bea13d6841608a5353 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Fri, 21 Dec 2018 15:09:10 +0300 Subject: [PATCH 02/10] review-fix: Convert feedback button into div protruding from bottom --- .../fether-react/src/Feedback/Feedback.js | 11 +++--- .../src/assets/img/icons/feedback.svg | 38 ------------------- .../assets/sass/components/_footer-nav.scss | 27 +++++++++---- 3 files changed, 24 insertions(+), 52 deletions(-) delete mode 100644 packages/fether-react/src/assets/img/icons/feedback.svg diff --git a/packages/fether-react/src/Feedback/Feedback.js b/packages/fether-react/src/Feedback/Feedback.js index 68b0d9d50..1623b28af 100644 --- a/packages/fether-react/src/Feedback/Feedback.js +++ b/packages/fether-react/src/Feedback/Feedback.js @@ -5,14 +5,13 @@ import React from 'react'; -import feedback from '../assets/img/icons/feedback.svg'; - const feedbackUrl = 'https://github.com/paritytech/fether/issues/new'; +const openFeedbackLink = () => { + window.open(feedbackUrl, '_blank'); +}; export const Feedback = () => ( -
- - Feedback - +
openFeedbackLink()}> + Feedback
); diff --git a/packages/fether-react/src/assets/img/icons/feedback.svg b/packages/fether-react/src/assets/img/icons/feedback.svg deleted file mode 100644 index 3badb2bcc..000000000 --- a/packages/fether-react/src/assets/img/icons/feedback.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index 1b665d79a..e8274669a 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -2,18 +2,29 @@ display: flex; height: 3.5rem; overflow: hidden; + flex-direction: row; justify-content: space-between; + align-items: center; // default alignent for flex items .footer-feedback { - display: flex; - flex-direction: column; - justify-content: center; + align-self: flex-end; // override default alignment for individual flex item + margin-right: 10px; + border-radius: 4px; - img { - display: block; - height: (ms(0) * 1.3); - margin-right: 5px; - width: auto; + .feedback { + color: $faint; + background: $grey; + font-size: 0.8em; + font-weight: 500; + border-radius: 5px 5px 0px 0px; + padding: 3px 8px 1px 8px; + box-shadow: 0.125rem 0.250rem 0.3rem 0 rgba($black, 0.3); + transition: box-shadow ease 0.250s; + &:hover { + color: $white; + box-shadow: 0.125rem 0.275rem 0.3rem 0 rgba($black, 0.4); + cursor: pointer; + } } } From 0af1d074e2249bad329fb391e25a8b11793556a3 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Fri, 21 Dec 2018 15:14:18 +0300 Subject: [PATCH 03/10] fix: Move feedback button slightly to left --- .../fether-react/src/assets/sass/components/_footer-nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index e8274669a..8644a33d9 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -8,7 +8,7 @@ .footer-feedback { align-self: flex-end; // override default alignment for individual flex item - margin-right: 10px; + margin-right: 15px; border-radius: 4px; .feedback { From d4080581b022de8b44c6e9af60fe8a491e50f72b Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sun, 23 Dec 2018 18:38:51 +0800 Subject: [PATCH 04/10] review-fix: Move Feedback component into AccountsList --- packages/fether-react/src/Accounts/AccountsList/AccountsList.js | 2 +- .../src/{ => Accounts/AccountsList}/Feedback/Feedback.js | 0 .../src/{ => Accounts/AccountsList}/Feedback/index.js | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename packages/fether-react/src/{ => Accounts/AccountsList}/Feedback/Feedback.js (100%) rename packages/fether-react/src/{ => Accounts/AccountsList}/Feedback/index.js (100%) diff --git a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js index 3b7dc7bf7..bd447dc75 100644 --- a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js @@ -9,8 +9,8 @@ import { accountsInfo$, withoutLoading } from '@parity/light.js'; import { inject, observer } from 'mobx-react'; import light from '@parity/light.js-react'; -import Feedback from '../../Feedback'; import Health from '../../Health'; +import Feedback from './Feedback'; @light({ accountsInfo: () => accountsInfo$().pipe(withoutLoading()) diff --git a/packages/fether-react/src/Feedback/Feedback.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js similarity index 100% rename from packages/fether-react/src/Feedback/Feedback.js rename to packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js diff --git a/packages/fether-react/src/Feedback/index.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/index.js similarity index 100% rename from packages/fether-react/src/Feedback/index.js rename to packages/fether-react/src/Accounts/AccountsList/Feedback/index.js From 0020a5883dc1f83a1637b4b0ad06ffa74c29dadd Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Sun, 23 Dec 2018 18:44:45 +0800 Subject: [PATCH 05/10] review-fix: Switch to more performant way to call function --- .../fether-react/src/Accounts/AccountsList/Feedback/Feedback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js index 1623b28af..f9c36b3e4 100644 --- a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js +++ b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js @@ -11,7 +11,7 @@ const openFeedbackLink = () => { }; export const Feedback = () => ( -
openFeedbackLink()}> +
Feedback
); From 49453b4ad1d3f1bdbfe28fc5cce695793db09868 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Tue, 1 Jan 2019 02:23:31 +1100 Subject: [PATCH 06/10] refactor: Change to link and use default arrow instead of pointer hand --- .../src/Accounts/AccountsList/Feedback/Feedback.js | 13 ++++++------- .../src/assets/sass/components/_footer-nav.scss | 5 +++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js index f9c36b3e4..40b0584b2 100644 --- a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js +++ b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js @@ -5,13 +5,12 @@ import React from 'react'; -const feedbackUrl = 'https://github.com/paritytech/fether/issues/new'; -const openFeedbackLink = () => { - window.open(feedbackUrl, '_blank'); -}; - export const Feedback = () => ( - + ); diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index 8644a33d9..e33486a30 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -17,13 +17,14 @@ font-size: 0.8em; font-weight: 500; border-radius: 5px 5px 0px 0px; - padding: 3px 8px 1px 8px; + padding: 3px 8px 3px 8px; box-shadow: 0.125rem 0.250rem 0.3rem 0 rgba($black, 0.3); transition: box-shadow ease 0.250s; &:hover { color: $white; + background: $grey; box-shadow: 0.125rem 0.275rem 0.3rem 0 rgba($black, 0.4); - cursor: pointer; + cursor: default; } } } From b6b4295030e05979adba9ab371a6fd9ed6e7d7c5 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Tue, 1 Jan 2019 10:39:49 +1100 Subject: [PATCH 07/10] review-fix: Add no bottom margin or padding --- .../fether-react/src/assets/sass/components/_footer-nav.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index e33486a30..7c7c873b1 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -9,6 +9,8 @@ .footer-feedback { align-self: flex-end; // override default alignment for individual flex item margin-right: 15px; + margin-bottom: 0px; + padding: 0px; border-radius: 4px; .feedback { From 8a35fd876566d367aa8b3537b6f2a1f218194888 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Wed, 2 Jan 2019 21:44:52 +1100 Subject: [PATCH 08/10] review-fix: Change feedback button on hover cursor back to default hand --- .../fether-react/src/assets/sass/components/_footer-nav.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index 7c7c873b1..e93155035 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -26,7 +26,6 @@ color: $white; background: $grey; box-shadow: 0.125rem 0.275rem 0.3rem 0 rgba($black, 0.4); - cursor: default; } } } From ac06d7f6facf1a04c61dafb757ac8d639d456032 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Wed, 2 Jan 2019 22:35:49 +1100 Subject: [PATCH 09/10] review-fix: Hack to fix feedback button offset that occurs when account list length is 0 or 1 --- .../fether-react/src/Accounts/AccountsList/AccountsList.js | 5 +++-- .../src/Accounts/AccountsList/Feedback/Feedback.js | 3 ++- .../fether-react/src/assets/sass/components/_footer-nav.scss | 1 - 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js index bd447dc75..470c8269c 100644 --- a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js @@ -37,6 +37,7 @@ class AccountsList extends Component { const { accountsInfo } = this.props; const accountsList = Object.keys(accountsInfo); + const accountsListLength = accountsList && accountsList.length; return (
@@ -51,7 +52,7 @@ class AccountsList extends Component {
- {accountsList.length ? ( + {accountsListLength ? (
    {accountsList.map(address => (
- +
diff --git a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js index 40b0584b2..017dc743c 100644 --- a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js +++ b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js @@ -5,11 +5,12 @@ import React from 'react'; -export const Feedback = () => ( +export const Feedback = ({ accountsListLength }) => ( 1 ? '0px' : '-10px' }} > Feedback diff --git a/packages/fether-react/src/assets/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index e93155035..ddcf808c0 100644 --- a/packages/fether-react/src/assets/sass/components/_footer-nav.scss +++ b/packages/fether-react/src/assets/sass/components/_footer-nav.scss @@ -1,7 +1,6 @@ .footer-nav { display: flex; height: 3.5rem; - overflow: hidden; flex-direction: row; justify-content: space-between; align-items: center; // default alignent for flex items From 051b82ac628982411180a88130edcb8f89d023a8 Mon Sep 17 00:00:00 2001 From: Luke Schoen Date: Wed, 2 Jan 2019 22:40:14 +1100 Subject: [PATCH 10/10] fix: Shift feedback button down slightly more when account list length is over 1 --- .../fether-react/src/Accounts/AccountsList/Feedback/Feedback.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js index 017dc743c..259129b79 100644 --- a/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js +++ b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js @@ -10,7 +10,7 @@ export const Feedback = ({ accountsListLength }) => ( className='feedback' href='https://github.com/paritytech/fether/issues/new' target='_blank' - style={{ marginBottom: accountsListLength > 1 ? '0px' : '-10px' }} + style={{ marginBottom: accountsListLength > 1 ? '-2px' : '-10px' }} > Feedback