feat: Relates to #128. Add feedback button that links to Fether Github new issue

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 (
       <div className='accounts-list'>
@@ -50,7 +52,7 @@ class AccountsList extends Component {
 
         <div className='window_content'>
           <div className='box -scroller'>
-            {accountsList.length ? (
+            {accountsListLength ? (
               <ul className='list'>
                 {accountsList.map(address => (
                   <li
@@ -88,6 +90,9 @@ class AccountsList extends Component {
           <div className='footer-nav_status'>
             <Health />
           </div>
+          <div className='footer-feedback'>
+            <Feedback accountsListLength={accountsListLength} />
+          </div>
         </nav>
       </div>
     );

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 }) => (
+  <a
+    className='feedback'
+    href='https://github.com/paritytech/fether/issues/new'
+    target='_blank'
+    style={{ marginBottom: accountsListLength > 1 ? '-2px' : '-10px' }}
+  >
+    Feedback
+  </a>
+);

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;

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;