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;