Lint and cleanup all scss

.stylelintrc

@@ -34,8 +34,6 @@
       {
         "ignore": [
           "after-comment",
-          "all-nested",
-          "blockless-group"
         ]
       }
     ],

ui/app/components/dropdowns/network-dropdown.js

@@ -3,8 +3,8 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
-const Dropdown = require('../dropdown').Dropdown
-const DropdownMenuItem = require('../dropdown').DropdownMenuItem
+const Dropdown = require('./components/dropdown').Dropdown
+const DropdownMenuItem = require('./components/dropdown').DropdownMenuItem
 
 function mapStateToProps (state) {
   return {

ui/app/css/itcss/base/index.scss

@@ -0,0 +1 @@
+// Base

ui/app/css/itcss/components/buttons.scss

@@ -3,11 +3,11 @@
  */
 
 .btn-green {
-  background-color: #02C9B1; // TODO: reusable color in colors.css
+  background-color: #02c9b1; // TODO: reusable color in colors.css
 }
 
 button.btn-clear {
-  background: white;
+  background: $white;
   border: 1px solid;
 }
 
@@ -46,9 +46,9 @@ button.btn-clear {
 
 button.primary {
   padding: 8px 12px;
-  background: #F7861C;
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-  color: white;
+  background: #f7861c;
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: $white;
   font-size: 1.1em;
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
@@ -57,8 +57,8 @@ button.primary {
 .btn-light {
   padding: 8px 12px;
   // background: #FFFFFF; // $bg-white
-  box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36);
-  color: #585D67; // TODO: make reusable light button color
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: #585d67; // TODO: make reusable light button color
   font-size: 1.1em;
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
@@ -66,14 +66,14 @@ button.primary {
   line-height: 20px;
   border-radius: 2px;
   border: 1px solid #979797; // #TODO: make reusable light border color
-  opacity: 0.5;
+  opacity: .5;
 }
 
 // TODO: cleanup: not used anywhere
 button.btn-thin {
   border: 1px solid;
-  border-color: #4D4D4D;
-  color: #4D4D4D;
+  border-color: #4d4d4d;
+  color: #4d4d4d;
   background: rgb(255, 174, 41);
   border-radius: 4px;
   min-width: 200px;

ui/app/css/itcss/components/header.scss

@@ -1,20 +1,18 @@
 .app-header {
   align-items: center;
   visibility: visible;
-  background: rgb(239, 239, 239);
-  padding-top: 1.5vh;
+  background: $gallery;
+  padding: 6px 8px;
   height: 12vh;
   max-height: 60px;
   position: relative;
   z-index: 12;
-  padding: 6px 8px;
-  // background: #EFEFEF; // $gallery
 
   @media screen and (max-width: 575px) {
     position: fixed;
     height: 34px;
     width: 100%;
-    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08);
     z-index: 30;
   }
 }
@@ -22,13 +20,13 @@
 .app-header h1 {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #22232C; // $shark
+  color: #22232c; // $shark
 }
 
 h2.page-subtitle {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #AEAEAE;
+  color: #aeaeae;
   font-size: 1em;
   margin: 12px;
 }

ui/app/css/itcss/components/hero-balance.scss

@@ -5,7 +5,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin: 0.3em 0.9em 0em 0.9em;
+    margin: .3em .9em 0;
     height: 80vh;
     max-height: 225px;
   }
@@ -15,7 +15,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin: 2.8em 0.9em 0.8em 0.9em;
+    margin: 2.8em .9em .8em;
   }
 
   .balance-container {
@@ -47,7 +47,7 @@
       .fiat-amount {
         font-size: 115%;
         margin-top: 8.5%;
-        color: #A0A0A0;
+        color: #a0a0a0;
       }
     }
 
@@ -61,7 +61,7 @@
       }
 
       .fiat-amount {
-        margin-top: 0.25%;
+        margin-top: .25%;
         font-size: 105%;
       }
     }
@@ -75,6 +75,7 @@
   }
 
   .hero-balance-buttons {
+
     @media screen and (max-width: $break-small) {
       width: 100%;
       height: 100px; // needed a round number to set the heights of the buttons inside
@@ -86,7 +87,7 @@
 
     button.btn-clear {
       font-size: 75%;
-      background: white;
+      background: $white;
       border: 1px solid;
 
       @media screen and (max-width: $break-small) {

ui/app/css/itcss/components/index.scss

@@ -1,13 +1,21 @@
 @import './buttons.scss';
+
 @import './header.scss';
+
 @import './footer.scss';
+
 @import './network.scss';
+
 @import './modal.scss';
+
 @import './newui-sections.scss';
 
 // Balances
 @import './hero-balance.scss';
+
 @import './wallet-balance.scss';
 
+// Tx List and Sections
 @import './transaction-list.scss';
+
 @import './sections.scss';

ui/app/css/itcss/components/modal.scss

@@ -37,7 +37,7 @@
     margin: 10px;
     text-align: center;
     border-radius: 6px;
-    border: 1px solid black;
+    border: 1px solid $black;
     padding: 0% 7%;
     justify-content: space-around;
 
@@ -71,7 +71,7 @@
 
   .modal-content-options {
     flex-direction: row;
-    margin: 20px 0px
+    margin: 20px 0;
   }
 
   div.modal-content-option {
@@ -81,8 +81,8 @@
     height: 18vw;
     text-align: center;
     border-radius: 6px;
-    border: 1px solid black;
-    margin: 0px .5vw;
+    border: 1px solid $black;
+    margin: 0 .5vw;
     justify-content: space-around;
 
     div.modal-content-option-title {
@@ -99,25 +99,25 @@
 
     div.modal-content-option-subtitle {
       font-size: 16px;
-      padding: 0px 10px;
+      padding: 0 10px;
       height: 25%;
 
       @media screen and (max-width: 679px) {
         font-size: 10px;
-        padding: 0px 10px;
+        padding: 0 10px;
         margin-bottom: 5px;
         line-height: 15px;
       }
 
       @media screen and (min-width: 680px) {
         font-size: 14px;
-        padding: 0px 4px;
+        padding: 0 4px;
         margin-bottom: 2px;
       }
 
       @media screen and (min-width: 1281px) {
         font-size: 20px;
-        padding: 0px 0px;
+        padding: 0;
       }
     }
 

ui/app/css/itcss/components/network.scss

@@ -1,7 +1,7 @@
 .network-indicator {
   display: flex;
   align-items: center;
-  font-size: 0.6em;
+  font-size: .6em;
 }
 
 .network-name {

ui/app/css/itcss/components/newui-sections.scss

@@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand;
 .main-container {
   position: absolute;
   z-index: 18;
-  font-family: DIN OT;
+  font-family: "DIN OT";
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -61,14 +61,14 @@ $wallet-view-bg: $wild-sand;
   z-index: 26;
   position: fixed;
   top: 35px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   opacity: 1;
   visibility: visible;
   will-change: transform;
   overflow-y: auto;
-  box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px;
+  box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px;
   width: 85%;
   height: 100%;
 }
@@ -77,12 +77,12 @@ $wallet-view-bg: $wild-sand;
   z-index: 25;
   position: fixed;
   top: 35px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   opacity: 1;
   visibility: visible;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(0, 0, 0, .3);
 }
 
 // main-container media queries
@@ -100,7 +100,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 85%;
     height: 90vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -109,7 +109,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 80%;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -118,7 +118,7 @@ $wallet-view-bg: $wild-sand;
     margin-top: 35px;
     width: 65%;
     height: 82vh;
-    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
   }
 }
 
@@ -140,13 +140,14 @@ $wallet-view-bg: $wild-sand;
     width: 93px;
     height: 50px;
     font-size: .7em;
-    background: white;
+    background: $white;
     border: 1px solid;
   }
 }
 
 // wallet view
 .account-name {
+
   @media screen and (max-width: 575px) {
     font-size: 102%;
     margin-left: 3%;

ui/app/css/itcss/components/sections.scss

@@ -1,3 +1,7 @@
+// Old scss, do not lint - clean up later
+/* stylelint-disable */
+
+
 /*
 App Sections
   TODO: Move into separate files.
@@ -9,14 +13,14 @@ textarea.twelve-word-phrase {
   width: 300px;
   height: 140px;
   font-size: 16px;
-  background: white;
+  background: $white;
   resize: none;
 }
 
 .initialize-screen hr {
   width: 60px;
   margin: 12px;
-  border-color: #F7861C;
+  border-color: #f7861c;
   border-style: solid;
 }
 
@@ -35,11 +39,11 @@ textarea.twelve-word-phrase {
 
 /* unlock */
 .error {
-  color: #E20202;
+  color: #e20202;
 }
 
 .warning {
-  color: #FFAE00;
+  color: #ffae00;
 }
 
 .lock {
@@ -49,7 +53,7 @@ textarea.twelve-word-phrase {
 
 .lock.locked {
   transform: scale(1.5);
-  opacity: 0.0;
+  opacity: 0;
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
 
@@ -101,6 +105,7 @@ textarea.twelve-word-phrase {
   height: 30px;
   padding-left: 5px;
 }
+
 .editable-label {
   display: flex;
 }
@@ -140,7 +145,7 @@ textarea.twelve-word-phrase {
 }
 
 .accounts-section .horizontal-line {
-  margin: 0px 18px;
+  margin: 0 18px;
 }
 
 .accounts-list-option {
@@ -157,7 +162,7 @@ textarea.twelve-word-phrase {
 }
 
 .unconftx-link .fa-arrow-right {
-  margin: 0px -8px 0px 8px;
+  margin: 0 -8px 0px 8px;
 }
 
 /* identity panel */
@@ -184,7 +189,7 @@ textarea.twelve-word-phrase {
 .identity-panel i {
   margin-top: 32px;
   margin-right: 6px;
-  color: #B9B9B9;
+  color: #b9b9b9;
 }
 
 .identity-panel .arrow-right {
@@ -195,34 +200,33 @@ textarea.twelve-word-phrase {
 }
 
 .identity-copy.flex-column {
-  flex: 0.25 0 auto;
+  flex: .25 0 auto;
   justify-content: center;
 }
 
 /* accounts screen */
 
 .identity-section {
-
 }
 
 .identity-section .identity-panel {
-  background: #E9E9E9;
-  border-bottom: 1px solid #B1B1B1;
+  background: #e9e9e9;
+  border-bottom: 1px solid #b1b1b1;
   cursor: pointer;
 }
 
 .identity-section .identity-panel.selected {
-  background: white;
-  color: #F3C83E;
+  background: $white;
+  color: #f3c83e;
 }
 
 .identity-section .identity-panel.selected .identicon {
-  border-color: orange;
+  border-color: $orange;
 }
 
 .identity-section .accounts-list-option:hover,
 .identity-section .accounts-list-option.selected {
-  background:white;
+  background: $white;
 }
 
 /* account detail screen */
@@ -239,14 +243,13 @@ textarea.twelve-word-phrase {
 }
 
 .name-label {
-
 }
 
 .unapproved-tx-icon {
   height: 16px;
   width: 16px;
   background: rgb(47, 174, 244);
-  border-color: #AEAEAE;
+  border-color: $silver-chalice;
   border-radius: 13px;
 }
 
@@ -262,7 +265,7 @@ textarea.twelve-word-phrase {
   margin-bottom: 2px;
   font-size: 11px;
   text-rendering: geometricPrecision;
-  color: #F7861C;
+  color: #f7861c;
 }
 
 .name-label:hover .edit-text {
@@ -276,8 +279,8 @@ textarea.twelve-word-phrase {
   margin: 12px;
   margin-bottom: 24px;
   border-radius: 4px;
-  border: 2px solid #F3C83E;
-  background: #FAF6F0;
+  border: 2px solid #f3c83e;
+  background: #faf6f0;
 }
 
 /* Send Screen */
@@ -294,18 +297,18 @@ textarea.twelve-word-phrase {
 /* Ether Balance Widget */
 
 .ether-balance-amount {
-  color: #F7861C;
+  color: #f7861c;
 }
 
 .ether-balance-label {
-  color: #ABA9AA;
+  color: #aba9aa;
 }
 
 /* Info screen */
 .info-gray {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;
-  color: #AEAEAE;
+  color: $silver-chalice;
 }
 
 .icon-size {
@@ -325,7 +328,6 @@ textarea.twelve-word-phrase {
   align-items: center;
 }
 
-
 .custom-radio-selected {
   width: 17px;
   height: 17px;
@@ -334,7 +336,7 @@ textarea.twelve-word-phrase {
   border-radius: 15px;
   border-width: 5px;
   background: rgba(247, 134, 28, 1);
-  border-color: #F7F7F7;
+  border-color: #f7f7f7;
 }
 
 .custom-radio-inactive {
@@ -343,7 +345,7 @@ textarea.twelve-word-phrase {
   border: solid;
   border-width: 1px;
   border-radius: 24px;
-  border-color: #AEAEAE;
+  border-color: $silver-chalice;
 }
 
 .radio-titles {
@@ -370,34 +372,32 @@ textarea.twelve-word-phrase {
   box-sizing: border-box;
   border: solid;
   border-color: transparent;
-  border-width: 0.5px;
+  border-width: .5px;
   border-radius: 2px;
-
 }
 
 .input-container:hover .buy-inputs {
   box-sizing: inherit;
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
 .buy-inputs:focus {
   border: solid;
-  border-color: #F7861C;
-  border-width: 0.5px;
+  border-color: #f7861c;
+  border-width: .5px;
   border-radius: 2px;
 }
 
 .activeForm {
-  background: #F7F7F7;
+  background: #f7f7f7;
   border: none;
   border-radius: 8px 8px 0px 0px;
   width: 50%;
   text-align: center;
   padding-bottom: 4px;
-
 }
 
 .inactiveForm {
@@ -416,12 +416,12 @@ textarea.twelve-word-phrase {
   width: 118px;
   height: 42px;
   padding: 1px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
 .marketinfo {
   font-family: 'Montserrat light';
-  color: #AEAEAE;
+  color: $silver-chalice;
   font-size: 15px;
   line-height: 17px;
 }
@@ -449,12 +449,12 @@ textarea.twelve-word-phrase {
 }
 
 .inactive {
-    color: #AEAEAE;
+  color: $silver-chalice;
 }
 
 .inactive button {
-    background: #AEAEAE;
-    color: white;
+  background: $silver-chalice;
+  color: $white;
 }
 
 .ellip-address {
@@ -473,15 +473,17 @@ textarea.twelve-word-phrase {
 
 .qr-message {
   font-size: 12px;
-  color: #F7861C;
+  color: #f7861c;
 }
 
 div.message-container > div:first-child {
   margin-top: 18px;
   font-size: 15px;
-  color: #4D4D4D;
+  color: #4d4d4d;
 }
 
 .pop-hover:hover {
   transform: scale(1.1);
 }
+
+/* stylelint-enable */

ui/app/css/itcss/components/transaction-list.scss

@@ -1,5 +1,6 @@
 .tx-list-container {
   height: 87.5%;
+
   @media screen and (min-width: $break-large) {
     overflow-y: scroll;
   }
@@ -7,8 +8,8 @@
 
 @media screen and (max-width: $break-small) {
   .tx-list-header-wrapper {
-    margin-top: 0.2em;
-    margin-bottom: 0.6em;
+    margin-top: .2em;
+    margin-bottom: .6em;
     // TODO: Resolve Layout Conflicst in Wallet View
     //  - This fixes txlist "transactions" title dispay
     // margin-top: 0.2em;
@@ -30,7 +31,7 @@
 
   .tx-list-header {
     font-size: 16px;
-    margin: 1.8em 1.3em 1.8em 1.3em;
+    margin: 1.8em 1.3em;
   }
 }
 
@@ -40,11 +41,11 @@
   flex: 0 0 1px;
 
   @media screen and (max-width: $break-small) {
-    margin: 0.1em 0em 0.1em 0em;
+    margin: .1em 0;
   }
 
   @media screen and (min-width: $break-large) {
-    margin: 0.1em 1.3em 0.1em 1.3em;
+    margin: .1em 1.3em;
   }
 }
 
@@ -54,23 +55,22 @@
   justify-content: flex-start;
 
   @media screen and (max-width: $break-small) {
-    margin: 0em 1.3em 0.95em 1.3em;
+    margin: 0 1.3em .95em;
   }
 
   @media screen and (min-width: $break-large) {
-    margin: 0em 1.3em 0em 1.3em;
+    margin: 0 1.3em;
   }
 }
 
 .tx-list-date-wrapper {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: auto;
+  flex: 1 1 auto;
 
   @media screen and (max-width: $break-small) {
     margin-top: 6px;
     margin-bottom: 20px;
   }
+
   @media screen and (min-width: $break-large) {
     margin-top: 6px;
   }

ui/app/css/itcss/components/wallet-balance.scss

@@ -1,10 +1,9 @@
 $wallet-balance-bg: $gallery;
 $wallet-balance-breakpoint: 890px;
-$wallet-balance-breakpoint-range:
-  "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
+$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})";
 
 .wallet-balance-wrapper {
-  flex: 0 0 80px
+  flex: 0 0 80px;
 }
 
 .wallet-balance {
@@ -37,7 +36,7 @@ $wallet-balance-breakpoint-range:
     }
 
     .fiat-amount {
-      margin-top: 0.25%;
+      margin-top: .25%;
       font-size: 105%;
     }
 

ui/app/css/itcss/generic/index.scss

@@ -8,12 +8,13 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   font-family: 'Montserrat Regular', Arial;
-  color: #4D4D4D;
+  color: #4d4d4d;
   font-weight: 300;
   line-height: 1.4em;
-  background: #F7F7F7;
+  background: #f7f7f7;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -26,17 +27,19 @@ html {
 
 .app-root {
   overflow: hidden;
-  position: relative
+  position: relative;
 }
 
 .app-primary {
   display: flex;
 }
 
-input:focus, textarea:focus {
+input:focus,
+textarea:focus {
   outline: none;
 }
 
+/* stylelint-disable */
 #app-content {
   overflow-x: hidden;
   min-width: 357px;
@@ -44,6 +47,7 @@ input:focus, textarea:focus {
   display: flex;
   flex-direction: column;
 }
+/* stylelint-enable */
 
 a {
   text-decoration: none;
@@ -54,8 +58,8 @@ a:hover{
   color: #df6b0e;
 }
 
-input.large-input, textarea.large-input {
-  /*margin-bottom: 24px;*/
+input.large-input,
+textarea.large-input {
   padding: 8px;
 }
 

ui/app/css/itcss/generic/reset.scss

@@ -3,46 +3,137 @@
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
+  /* stylelint-disable */
   font: inherit;
+  /* stylelint-enable */
   vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
+
+/* stylelint-disable */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
-ol, ul {
+
+ol,
+ul {
   list-style: none;
 }
-blockquote, q {
+
+blockquote,
+q {
   quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
@@ -51,3 +142,5 @@ table {
 button {
   border-style: none;
 }
+
+/* stylelint-enable */

ui/app/css/itcss/objects/index.scss

@@ -0,0 +1 @@
+// Objects

ui/app/css/itcss/settings/index.scss

@@ -1,2 +1,3 @@
 @import './variables.scss';
+
 @import './typography.scss';

ui/app/css/itcss/settings/typography.scss

@@ -1,11 +1,12 @@
-@import url(https://fonts.googleapis.com/css?family=Roboto:300,500);
-@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,500');
+
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
 
 @font-face {
   font-family: 'Montserrat Regular';
   src: url('/fonts/Montserrat/Montserrat-Regular.woff') format('woff');
   src: url('/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
   font-size: 'small';
 }
@@ -14,7 +15,7 @@
   font-family: 'Montserrat Bold';
   src: url('/fonts/Montserrat/Montserrat-Bold.woff') format('woff');
   src: url('/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }
 
@@ -22,7 +23,7 @@
   font-family: 'Montserrat Light';
   src: url('/fonts/Montserrat/Montserrat-Light.woff') format('woff');
   src: url('/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }
 
@@ -30,13 +31,13 @@
   font-family: 'Montserrat UltraLight';
   src: url('/fonts/Montserrat/Montserrat-UltraLight.woff') format('woff');
   src: url('/fonts/Montserrat/Montserrat-UltraLight.ttf') format('truetype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'DIN OT';
   src: url('/fonts/DIN_OT/DINOT-2.otf') format('opentype');
-  font-weight: normal;
+  font-weight: 400;
   font-style: normal;
 }

ui/app/css/itcss/settings/variables.scss

@@ -2,23 +2,28 @@
   Variables
  */
 
-
+// Base Colors
+$white: #fff;
+$black: #000;
+$orange: #ffa500;
+$red: #f00;
 
 /*
   Colors
  */
-$white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
-$rajah: #F5C26D; // formerly 'light orange (button shades)'
-$buttercup: #F5A623; // formerly 'dark orange (text)'
-$tundora: #4A4A4A; // formerly 'borders/font/any gray'
-$gallery: #EFEFEF;
-$alabaster: #F7F7F7;
-$shark: #22232C;
-$wild-sand: #F6F6F6;
-$white: #FFFFFF;
-$dusty-gray: #9B9B9B;
-$alto: #DEDEDE;
-$alabaster: #FAFAFA;
+$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
+$rajah: #f5c26d; // formerly 'light orange (button shades)'
+$buttercup: #f5a623; // formerly 'dark orange (text)'
+$tundora: #4a4a4a; // formerly 'borders/font/any gray'
+$gallery: #efefef;
+$alabaster: #f7f7f7;
+$shark: #22232c;
+$wild-sand: #f6f6f6;
+$white: #fff;
+$dusty-gray: #9b9b9b;
+$alto: #dedede;
+$alabaster: #fafafa;
+$silver-chalice: #aeaeae;
 
 /*
   Z-Indicies

ui/app/css/itcss/tools/utilities.scss

@@ -5,11 +5,11 @@
 /* color */
 
 .color-orange {
-  color: #F7861C; // TODO: move to settings/variables
+  color: #f7861c; // TODO: move to settings/variables
 }
 
 .color-forest {
-  color: #0A5448; // TODO: move to settings/variables
+  color: #0a5448; // TODO: move to settings/variables
 }
 
 /* lib */
@@ -23,20 +23,12 @@
   width: 100%;
 }
 
-.full-height {
-  height: 100%;
-}
-
 .full-flex-height {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
 }
 
-.full-width {
-  width: 100%;
-}
-
 .full-height {
   height: 100%;
 }
@@ -141,16 +133,19 @@
 .pointer {
   cursor: pointer;
 }
+
 .cursor-pointer {
   cursor: pointer;
   transform-origin: center center;
   transition: transform 50ms ease-in-out;
 }
+
 .cursor-pointer:hover {
   transform: scale(1.1);
 }
+
 .cursor-pointer:active {
-  transform: scale(0.95);
+  transform: scale(.95);
 }
 
 .cursor-disabled {
@@ -170,7 +165,7 @@
 }
 
 .bold {
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .text-transform-uppercase {
@@ -195,12 +190,12 @@ hr.horizontal-line {
 }
 
 .hover-white:hover {
-  background: white;
+  background: $white;
 }
 
 .red-dot {
-  background: #E91550;
-  color: white;
+  background: #e91550;
+  color: $white;
   border-radius: 10px;
 }
 
@@ -215,14 +210,14 @@ hr.horizontal-line {
 }
 
 .golden-square {
-  background: #EBB33F;
+  background: #ebb33f;
 }
 
 .pending-dot {
-  background: red;
+  background: $red;
   left: 14px;
   top: 14px;
-  color: white;
+  color: $white;
   border-radius: 10px;
   height: 20px;
   min-width: 20px;
@@ -237,9 +232,9 @@ hr.horizontal-line {
 .keyring-label {
   z-index: 1;
   font-size: 11px;
-  background: rgba(255,0,0,0.8);
+  background: rgba(255, 0, 0, .8);
   bottom: -47px;
-  color: white;
+  color: $white;
   border-radius: 10px;
   height: 20px;
   min-width: 20px;
@@ -270,8 +265,9 @@ hr.horizontal-line {
   background: rgb(0, 163, 68);
   border-radius: 20px;
 }
+
 .testnet-icon {
-  background: #2465E1;
+  background: #2465e1;
 }
 
 .drop-menu-item {
@@ -292,7 +288,7 @@ hr.horizontal-line {
 .critical-error {
   text-align: center;
   margin-top: 20px;
-  color: red;
+  color: $red;
 }
 
 /*
@@ -301,7 +297,7 @@ hr.horizontal-line {
 
 // TODO: move into component-level contextual 'active' state
 .letter-spacey {
-  letter-spacing: 0.1em;
+  letter-spacing: .1em;
 }
 
 .active {
@@ -310,7 +306,7 @@ hr.horizontal-line {
 
 .check {
   margin-left: 7px;
-  color: #F7861C;
+  color: #f7861c;
   flex: 1 0 auto;
   display: flex;
   justify-content: flex-end;

ui/app/css/itcss/trumps/index.scss

@@ -2,7 +2,6 @@
   Trumps
  */
 
-
 // Transitions
 
 /* universal */
@@ -15,7 +14,7 @@
 .app-primary.from-right .main-enter-active,
 .app-primary.from-left .main-enter-active {
   overflow-x: hidden;
-  transform: translateX(0px);
+  transform: translateX(0);
   transition: transform 300ms ease-in;
 }
 
@@ -24,6 +23,7 @@
   transform: translateX(360px);
   transition: transform 300ms ease-in;
 }
+
 .app-primary.from-right .main-leave-active {
   transform: translateX(-360px);
   transition: transform 300ms ease-in;
@@ -35,12 +35,15 @@
 }
 
 /* loader transitions */
-.loader-enter, .loader-leave-active {
-  opacity: 0.0;
+.loader-enter,
+.loader-leave-active {
+  opacity: 0;
   transition: opacity 150 ease-in;
 }
-.loader-enter-active, .loader-leave {
-  opacity: 1.0;
+
+.loader-enter-active,
+.loader-leave {
+  opacity: 1;
   transition: opacity 150 ease-in;
 }
 
@@ -48,6 +51,7 @@
 .app-primary.from-right .main-enter:not(.main-enter-active) {
   transform: translateX(360px);
 }
+
 .app-primary.from-left .main-enter:not(.main-enter-active) {
   transform: translateX(-360px);
 }
@@ -56,43 +60,13 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
   font-size: 18px;
 }
 
-/*
-  Hacky breakpoint fix for account + tab sections
-    Resolves issue from @frankiebee in
-    https://github.com/MetaMask/metamask-extension/pull/1835
-  Please remove this when integrating new designs
- */
-
-// This is commented out, because it's not needed in NewUI.
-// We will have a new css architecture w/ different breakpoints.
-
-// @media screen and (min-width: 575px) and (max-width: 800px) {
-//   .account-data-subsection {
-//     flex: 0 0 auto !important; // reset flex
-//     margin-left: 10px !important; // create additional horizontal space
-//     margin-right: 10px !important;
-//     width: 40%;
-//   }
-
-//   .tabSection {
-//     flex: 0 0 auto !important;
-//     margin-left: 10px !important;
-//     margin-right: 10px !important;
-//     min-width: 285px;
-//     width: 49%;
-//   }
-
-//   .name-label {
-//     width: 80%;
-//   }
-// }
-
-
-
 // This text is contained inside a div.
 // ID needed to override user agent stylesheet.
 // See components/modal.scss
+
+/* stylelint-disable */
 #modal-content-footer-text {
   font-family: 'DIN OT';
   font-size: 16px;
 }
+/* stylelint-enable */