ui fixes

embark-ui/src/components/Contracts.js

@@ -1,13 +1,23 @@
 import PropTypes from "prop-types";
 import React from 'react';
-import {Row, Col} from "reactstrap";
+import {Row, Col, Card, CardBody, CardTitle} from "reactstrap";
 import ContractsList from './ContractsList';
 
 const Contracts = ({contracts, title = "Contracts"}) => (
   <Row>
     <Col>
-      <h1>{title}</h1>
-        <ContractsList contracts={contracts}></ContractsList>
+      <Card>
+        <CardBody>
+          <Row>
+            <Col sm="5">
+              <CardTitle className="mb-0">Contracts</CardTitle>
+            </Col>
+          </Row>
+          <div style={{ marginTop: 40 + 'px' }}>
+           <ContractsList contracts={contracts}></ContractsList>
+          </div>
+        </CardBody>
+      </Card>
     </Col>
   </Row>
 );

embark-ui/src/components/ContractsList.js

@@ -5,8 +5,8 @@ import {Link} from 'react-router-dom';
 import {formatContractForDisplay} from '../utils/presentation';
 
 const ContractsList = ({contracts}) => (
-  <Table responsive className="text-nowrap">
-    <thead>
+  <Table hover responsive className="table-outline mb-0 d-none d-sm-table text-nowrap">
+    <thead className="thead-light">
       <tr>
         <th>Name</th>
         <th>Address</th>

embark-ui/src/components/Layout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownItem, DropdownMenu, DropdownToggle, Nav, Container } from 'reactstrap';
+import { DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink, Container } from 'reactstrap';
 import {LIGHT_THEME, DARK_THEME} from '../constants';
 import FontAwesome from 'react-fontawesome';
 
@@ -19,7 +19,7 @@ import {
   AppHeaderDropdown
 } from '@coreui/react';
 
-import logo from '../images/logo.png';
+import logo from '../images/logo-new.svg';
 
 const sidebarNavItems = {items: [
   {name: "Dashboard", url: "/embark", icon: 'fa fa-tachometer'},
@@ -31,7 +31,7 @@ const sidebarNavItems = {items: [
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"}
   ]},
-  {name: "Fiddle", url: "/embark/fiddle", icon: "fa fa-codepen"},
+  {name: "Editor", url: "/embark/fiddle", icon: "fa fa-codepen"},
   {name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
   {name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
     {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"},
@@ -42,7 +42,7 @@ const sidebarNavItems = {items: [
 ]};
 
 const Layout = ({children, logout, credentials, location, toggleTheme, currentTheme}) => (
-  <div className="app">
+  <div className="app animated fadeIn">
     <AppHeader fixed>
       <AppSidebarToggler className="d-lg-none" display="md" mobile />
       <AppNavbarBrand
@@ -50,6 +50,15 @@ const Layout = ({children, logout, credentials, location, toggleTheme, currentTh
         minimized={{ src: logo, width: 30, height: 30, alt: 'Embark Logo' }}
       />
       <AppSidebarToggler className="d-md-down-none" display="lg" />
+      <Nav className="d-md-down-none" navbar>
+        {sidebarNavItems.items.map((item) => {
+          return (
+            <NavItem className="px-3">
+              <NavLink href={item.url}>{item.name}</NavLink>
+            </NavItem>
+          )
+        })}
+      </Nav>
       <Nav className="ml-auto" navbar>
         <AppHeaderDropdown direction="down">
           <DropdownToggle nav>
@@ -74,7 +83,7 @@ const Layout = ({children, logout, credentials, location, toggleTheme, currentTh
         <AppSidebarMinimizer />
       </AppSidebar>
       <main className="main">
-        <Container fluid className="h-100">
+        <Container fluid className="h-100" style={{"margin-top": '24px'}}>
           {children}
         </Container>
       </main>

embark-ui/src/containers/HomeContainer.js

@@ -2,6 +2,12 @@ import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
+import {
+  Card,
+  CardHeader,
+  CardBody
+} from 'reactstrap';
+
 import {
   contracts as contractsAction,
   commands as commandsAction,
@@ -53,25 +59,38 @@ class HomeContainer extends Component {
   render() {
     return (
       <React.Fragment>
-        <h1 className="my-5">Dashboard</h1>
         <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes}) => (
           <Processes processes={processes} />
         )} />
         <DataWrapper shouldRender={this.props.contracts.length > 0} {...this.props} render={({contracts}) => (
-          <div style={{maxHeight: '227px', marginBottom: '1.5rem', overflow: 'auto'}}>
-            <ContractsList contracts={contracts} />
-          </div>
+          <Card>
+            <CardHeader>
+              Deployed Contracts
+            </CardHeader>
+            <CardBody>
+              <div style={{maxHeight: '227px', marginBottom: '1.5rem', overflow: 'auto'}}>
+                <ContractsList contracts={contracts} />
+              </div>
+            </CardBody>
+          </Card>
         )} />
 
         <DataWrapper shouldRender={this.props.processes.length > 0 } {...this.props} render={({processes, postCommand, postCommandSuggestions, processLogs, commandSuggestions}) => (
-          <Console activeProcess={this.state.activeProcess}
-                   postCommand={postCommand}
-                   postCommandSuggestions={postCommandSuggestions}
-                   processes={processes}
-                   processLogs={processLogs}
-                   commandSuggestions={commandSuggestions}
-                   isEmbark={() => this.isEmbark}
-                   updateTab={processName => this.updateTab(processName)} />
+          <Card>
+            <CardHeader>
+              Logs & Console
+            </CardHeader>
+            <CardBody>
+              <Console activeProcess={this.state.activeProcess}
+                       postCommand={postCommand}
+                       postCommandSuggestions={postCommandSuggestions}
+                       processes={processes}
+                       processLogs={processLogs}
+                       commandSuggestions={commandSuggestions}
+                       isEmbark={() => this.isEmbark}
+                       updateTab={processName => this.updateTab(processName)} />
+            </CardBody>
+          </Card>
         )} />
       </React.Fragment>
     );