conflict in blocks and accounts

embark-ui/src/components/Accounts.js

@@ -8,15 +8,16 @@ import CardTitleIdenticon from './CardTitleIdenticon';
 const Accounts = ({accounts}) => (
   <Row>
     <Col>
-      <h1>Accounts</h1>
-      {accounts.map(account => (
-        <Card key={account.address}>
+      <Card>
         <CardHeader>
+          <h1>Accounts</h1>
+        </CardHeader>
+        <CardBody>
+          {accounts.map(account => (
+            <div className="explorer-row" key={account.address}>
               <CardTitleIdenticon id={account.address}>Account&nbsp;
                 <Link to={`/embark/explorer/accounts/${account.address}`}>{account.address}</Link>
               </CardTitleIdenticon>
-          </CardHeader>
-          <CardBody>
               <Row>
                 <Col>
                   <strong>Balance</strong>
@@ -31,9 +32,10 @@ const Accounts = ({accounts}) => (
                   <div>{account.index}</div>
                 </Col>
               </Row>
+            </div>
+          ))}
         </CardBody>
       </Card>
-      ))}
     </Col>
   </Row>
 );

embark-ui/src/components/Blocks.js

@@ -37,7 +37,7 @@ const Blocks = ({blocks, showLoadMore, loadMore}) => (
               </Row>
             </div>
           ))}
-          {showLoadMore && <LoadMore loadMore={() => loadMore()} />}
+          {showLoadMore && <LoadMore loadMore={() => loadMore()}/>}
         </CardBody>
       </Card>
     </Col>

embark-ui/src/components/Explorer.css

@@ -1,11 +1,11 @@
-.explorer-row {
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #c8ced3;
+.explorer-row + .explorer-row {
+  margin-top: 5px;
+  padding-top: 20px;
+  border-top: 1px solid #c8ced3;
 }
 
 .dark-theme .explorer-row {
-  border-bottom-color: #23282c;
+  border-top-color: #23282c;
 }
 
 .explorer-row .text-truncate {