From 93ad3534f66e981ecd43e1bb8a6b9f22faba1fe0 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Thu, 31 Aug 2017 11:20:15 -0400
Subject: [PATCH] BEM-ified the lastest-blocks and latest-transactions
 components

---
 app/src/app/app.scss                          | 22 +++++++++++++++++++
 .../latest-blocks/latest-blocks.html          | 10 +++++----
 .../latest-blocks/latest-blocks.scss          | 21 ------------------
 .../latest-transactions.html                  |  6 ++---
 .../latest-transactions.scss                  | 21 ------------------
 5 files changed, 31 insertions(+), 49 deletions(-)

diff --git a/app/src/app/app.scss b/app/src/app/app.scss
index e254df4..525e8c5 100644
--- a/app/src/app/app.scss
+++ b/app/src/app/app.scss
@@ -29,6 +29,28 @@ body {
   user-select: text;
 }
 
+.grid--table {
+  margin: 10px 0 20px;
+
+  .grid--table__row {
+    border-top: 1px solid #ccc;
+
+    &:first-child {
+      background-color: white;
+      border-top: none;
+    }
+
+    &:nth-child(even) {
+      background-color: #f4f4f4;
+    }
+
+    &:last-child {
+      background-color: white;
+    }
+  }
+}
+
+
 // Shared Sass variables, which can be used to adjust Ionic's
 // default Sass variables, belong in "theme/variables.scss".
 //
diff --git a/app/src/components/latest-blocks/latest-blocks.html b/app/src/components/latest-blocks/latest-blocks.html
index 8268be4..26c6a30 100644
--- a/app/src/components/latest-blocks/latest-blocks.html
+++ b/app/src/components/latest-blocks/latest-blocks.html
@@ -5,9 +5,9 @@
   </div>
 
   <div *ngIf="!loading">
-    <ion-grid>
+    <ion-grid class="grid--table">
 
-      <ion-row>
+      <ion-row class="grid--table__row">
         <ion-col><b>Height</b></ion-col>
         <ion-col *ngIf="showTimeAs === 'age'"><b>Age</b></ion-col>
         <ion-col *ngIf="showTimeAs === 'timestamp'"><b>Timestamp</b></ion-col>
@@ -15,7 +15,8 @@
         <ion-col hideWhen="portrait"><b>Mined By</b></ion-col>
         <ion-col text-right><b>Size</b></ion-col>
       </ion-row>
-      <ion-row *ngFor="let block of getBlocks()">
+
+      <ion-row *ngFor="let block of getBlocks()" class="grid--table__row">
         <ion-col>
           <a (click)="goToBlock(block.hash)">{{block.height}}</a>
         </ion-col>
@@ -35,7 +36,8 @@
           {{ block.size }}
         </ion-col>
       </ion-row>
-      <ion-row *ngIf="showAllBlocksButton">
+
+      <ion-row *ngIf="showAllBlocksButton" class="grid--table__row">
         <ion-col text-center>
           <button ion-button (click)="goToBlocks()">See all blocks</button>
         </ion-col>
diff --git a/app/src/components/latest-blocks/latest-blocks.scss b/app/src/components/latest-blocks/latest-blocks.scss
index 0ae897d..e03ff64 100644
--- a/app/src/components/latest-blocks/latest-blocks.scss
+++ b/app/src/components/latest-blocks/latest-blocks.scss
@@ -1,23 +1,2 @@
 latest-blocks {
-  ion-grid {
-    // border: 2px solid green;
-    margin: 10px 0 20px;
-
-    ion-row {
-      border-top: 1px solid #ccc;
-    }
-
-    ion-row:nth-child(even) {
-      background-color: #f4f4f4;
-    }
-
-    ion-row:first-child {
-      background-color: white;
-      border-top: none;
-    }
-
-    ion-row:last-child {
-      background-color: white;
-    }
-  }
 }
diff --git a/app/src/components/latest-transactions/latest-transactions.html b/app/src/components/latest-transactions/latest-transactions.html
index 55e5084..d1f13ac 100644
--- a/app/src/components/latest-transactions/latest-transactions.html
+++ b/app/src/components/latest-transactions/latest-transactions.html
@@ -4,14 +4,14 @@
   </div>
 
   <div *ngIf="!loading">
-    <ion-grid>
+    <ion-grid class="grid--table">
 
-      <ion-row>
+      <ion-row class="grid--table__row">
         <ion-col><b>Hash</b></ion-col>
         <ion-col text-right><b>Value Out</b></ion-col>
       </ion-row>
 
-      <ion-row *ngFor="let tx of transactions">
+      <ion-row *ngFor="let tx of transactions" class="grid--table__row">
         <ion-col col-9>
           <div class="ellipsis">
             <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
diff --git a/app/src/components/latest-transactions/latest-transactions.scss b/app/src/components/latest-transactions/latest-transactions.scss
index 1b68322..4b8b617 100644
--- a/app/src/components/latest-transactions/latest-transactions.scss
+++ b/app/src/components/latest-transactions/latest-transactions.scss
@@ -1,23 +1,2 @@
 latest-transactions {
-  ion-grid {
-    // border: 2px solid green;
-    margin: 10px 0 20px;
-
-    ion-row {
-      border-top: 1px solid #ccc;
-    }
-
-    ion-row:nth-child(even) {
-      background-color: #f4f4f4;
-    }
-
-    ion-row:first-child {
-      background-color: white;
-      border-top: none;
-    }
-
-    ion-row:last-child {
-      background-color: white;
-    }
-  }
 }