more BEM-ification

app/src/app/app.scss

@@ -8,6 +8,10 @@
 // Additionally, this file can be also used as an entry point
 // to import other Sass files to be included in the output CSS.
 
+body {
+  user-select: text;
+}
+
 .ellipsis {
   display: block;
   overflow: hidden;
@@ -15,24 +19,22 @@
   white-space: nowrap;
 }
 
-.summary ion-label {
-  color: #333;
-  font-weight: bold;
-}
+.list--summary {
+  ion-label {
+    color: #333;
+    font-weight: bold;
+  }
 
-.summary ion-item {
-  color: #999;
-  font-size: 1.4rem;
-}
-
-body {
-  user-select: text;
+  ion-item {
+    color: #999;
+    font-size: 1.4rem;
+  }
 }
 
 .grid--table {
   margin: 10px 0 20px;
 
-  .grid--table__row {
+  ion-row {
     border-top: 1px solid #ccc;
 
     &:first-child {

app/src/components/latest-blocks/latest-blocks.html

@@ -7,7 +7,7 @@
   <div *ngIf="!loading">
     <ion-grid class="grid--table">
 
-      <ion-row class="grid--table__row">
+      <ion-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>
@@ -16,7 +16,7 @@
         <ion-col text-right><b>Size</b></ion-col>
       </ion-row>
 
-      <ion-row *ngFor="let block of getBlocks()" class="grid--table__row">
+      <ion-row *ngFor="let block of getBlocks()">
         <ion-col>
           <a (click)="goToBlock(block.hash)">{{block.height}}</a>
         </ion-col>
@@ -37,7 +37,7 @@
         </ion-col>
       </ion-row>
 
-      <ion-row *ngIf="showAllBlocksButton" class="grid--table__row">
+      <ion-row *ngIf="showAllBlocksButton">
         <ion-col text-center>
           <button ion-button (click)="goToBlocks()">See all blocks</button>
         </ion-col>

app/src/components/latest-transactions/latest-transactions.html

@@ -6,12 +6,12 @@
   <div *ngIf="!loading">
     <ion-grid class="grid--table">
 
-      <ion-row class="grid--table__row">
+      <ion-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" class="grid--table__row">
+      <ion-row *ngFor="let tx of transactions">
         <ion-col col-9>
           <div class="ellipsis">
             <a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>

app/src/pages/address/address.html

@@ -14,7 +14,7 @@
 
     <h2>Summary</h2>
 
-    <ion-list class="summary">
+    <ion-list class="list--summary">
       <ion-item>
         Total Received
         <span item-end>

app/src/pages/block-detail/block-detail.html

@@ -13,7 +13,7 @@
 
     <h2>Summary</h2>
 
-    <ion-list *ngIf="!loading" class="summary">
+    <ion-list *ngIf="!loading" class="list--summary">
       <ion-item>
         Number of Transactions
         <span item-end>

app/src/pages/transaction/transaction.html

@@ -13,7 +13,7 @@
 
     <h2>Summary</h2>
 
-    <ion-list class="summary">
+    <ion-list class="list--summary">
       <ion-item>
         Size
         <span item-end>