Merge pull request #3692 from ethcore/jr-fixed-status

fix status bar to bottom of the screen

js/src/views/Application/Snackbar/snackbar.js

@@ -19,10 +19,17 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { Snackbar as SnackbarMUI } from 'material-ui';
-import { darkBlack } from 'material-ui/styles/colors';
+import { darkBlack, grey800 } from 'material-ui/styles/colors';
 
 import { closeSnackbar } from '../../../redux/providers/snackbarActions';
 
+const bodyStyle = {
+  backgroundColor: darkBlack,
+  borderStyle: 'solid',
+  borderColor: grey800,
+  borderWidth: '1px 1px 0 1px'
+};
+
 class Snackbar extends Component {
   static propTypes = {
     closeSnackbar: PropTypes.func.isRequired,
@@ -40,7 +47,7 @@ class Snackbar extends Component {
         open={ open }
         message={ message }
         autoHideDuration={ cooldown }
-        bodyStyle={ { backgroundColor: darkBlack } }
+        bodyStyle={ bodyStyle }
         onRequestClose={ this.handleClose }
       />
     );

js/src/views/Application/Status/status.css

@@ -15,45 +15,46 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .status {
-  padding: 0.5em;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  padding: .4em .5em;
   font-size: x-small;
   color: #ccc;
-  background-color: rgba(0, 0, 0, 0.2)
-}
-
-.title {
-  margin: 0 0.5em 0 2em;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 .enode {
   word-wrap: break-word;
-  float: right;
 }
 
 .enode > * {
   display: inline-block;
-  margin: 0.25em 0.5em;
-  vertical-align: top;
+  margin: 0 .25em;
+  vertical-align: middle;
 }
-
-.block {
+.enode > :last-child {
+  margin-right: 0;
 }
 
 .netinfo {
   display: flex;
+  flex-grow: 1;
   align-items: center;
-  color: #ddd;  
+  color: #ddd;
 }
 
 .netinfo > * {
-  display: inline-block;
   margin-left: 1em;
 }
 
 .network {
   padding: 0.25em 0.5em;
-  display: inline-block;
-  border-radius: 4px;
+  border-radius: .4em;
   line-height: 1.2;
   text-transform: uppercase;
 }
@@ -65,14 +66,3 @@
 .networktest {
   background: rgb(136, 0, 0);
 }
-
-.peers {
-}
-
-.version {
-  padding: 0.25em 0.5em;
-  float: left;
-}
-
-.syncing {
-}

js/src/views/Application/Status/status.js

@@ -46,7 +46,6 @@ class Status extends Component {
         <div className={ styles.version }>
           { clientVersion }
         </div>
-        { this.renderEnode() }
         <div className={ styles.netinfo }>
           <BlockStatus />
           <div className={ netStyle }>
@@ -56,6 +55,7 @@ class Status extends Component {
             { netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers
           </div>
         </div>
+        { this.renderEnode() }
       </div>
     );
   }
@@ -73,7 +73,7 @@ class Status extends Component {
 
     return (
       <div className={ styles.enode }>
-        <CopyToClipboard data={ enode } />
+        <CopyToClipboard data={ enode } size={ 12 } />
         <div>{ abbreviated }</div>
       </div>
     );