diff --git a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js index 994aae5b7..470c8269c 100644 --- a/packages/fether-react/src/Accounts/AccountsList/AccountsList.js +++ b/packages/fether-react/src/Accounts/AccountsList/AccountsList.js @@ -10,6 +10,7 @@ import { inject, observer } from 'mobx-react'; import light from '@parity/light.js-react'; import Health from '../../Health'; +import Feedback from './Feedback'; @light({ accountsInfo: () => accountsInfo$().pipe(withoutLoading()) @@ -36,6 +37,7 @@ class AccountsList extends Component { const { accountsInfo } = this.props; const accountsList = Object.keys(accountsInfo); + const accountsListLength = accountsList && accountsList.length; return (
@@ -50,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 new file mode 100644 index 000000000..259129b79 --- /dev/null +++ b/packages/fether-react/src/Accounts/AccountsList/Feedback/Feedback.js @@ -0,0 +1,17 @@ +// Copyright 2015-2018 Parity Technologies (UK) Ltd. +// This file is part of Parity. +// +// SPDX-License-Identifier: BSD-3-Clause + +import React from 'react'; + +export const Feedback = ({ accountsListLength }) => ( + 1 ? '-2px' : '-10px' }} + > + Feedback + +); diff --git a/packages/fether-react/src/Accounts/AccountsList/Feedback/index.js b/packages/fether-react/src/Accounts/AccountsList/Feedback/index.js new file mode 100644 index 000000000..005727fb4 --- /dev/null +++ b/packages/fether-react/src/Accounts/AccountsList/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/sass/components/_footer-nav.scss b/packages/fether-react/src/assets/sass/components/_footer-nav.scss index 1f9732086..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,8 +1,33 @@ .footer-nav { display: flex; height: 3.5rem; - overflow: hidden; + flex-direction: row; justify-content: space-between; + align-items: center; // default alignent for flex items + + .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 { + color: $faint; + background: $grey; + font-size: 0.8em; + font-weight: 500; + border-radius: 5px 5px 0px 0px; + 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); + } + } + } .footer-nav_status { padding: 1rem;