Cleanup SCSS and improve organization of color vars

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

@@ -19,7 +19,6 @@
   }
 
   .balance-container {
-
     display: flex;
     margin: 0;
     justify-content: flex-start;
@@ -33,7 +32,6 @@
       flex-direction: row;
       flex-grow: 3;
     }
-
   }
 
   .balance-display {
@@ -66,17 +64,14 @@
         margin-top: 0.25%;
         font-size: 105%;
       }
-
     }
-
   }
 
   .balance-icon {
     border-radius: 25px;
     width: 45px;
     height: 45px;
-    // TODO: colors
-    border: 1px solid #DEDEDE; 
+    border: 1px solid $alto;
   }
 
   .hero-balance-buttons {
@@ -106,9 +101,6 @@
         min-height: 28px;
         font-size: .7em;
       }
-
     }
-
   }
-
-}
+}

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

@@ -1,7 +0,0 @@
-.identicon {
-  height: 46px;
-  width: 46px;
-  background-size: cover;
-  border-radius: 100%;
-  border: 3px solid gray;
-}

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

@@ -1,7 +1,6 @@
 @import './buttons.scss';
 @import './header.scss';
 @import './footer.scss';
-@import './identicon.scss';
 @import './network.scss';
 @import './modal.scss';
 @import './newui-sections.scss';

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

@@ -2,6 +2,10 @@
   NewUI Container Elements
  */
 
+// Component Colors
+$tx-view-bg: $white;
+$wallet-view-bg: $wild-sand;
+
 // Main container
 .main-container {
   position: absolute;
@@ -13,20 +17,18 @@
   overflow-y: scroll;
 }
 
-
 // tx view
 
 .tx-view {
   flex: 63.5 0 66.5%;
-  background: $white; // TODO: add to resuable colors
+  background: $tx-view-bg;
 }
 
-
 // wallet view
 
 .wallet-view {
   flex: 33.5 0 33.5%;
-  background: $wild-sand,
+  background: $wallet-view-bg,
 }
 
 .account-options-menu {
@@ -35,8 +37,6 @@
   margin: 5% 7%;
 }
 
-
-
 .wallet-view.sidebar {
   flex: 1 0 230px;
   background: rgb(250, 250, 250);
@@ -136,5 +136,4 @@
   @media screen and (max-width: 575px) {
     text-align: center;
   }
-
 }

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

@@ -3,12 +3,7 @@ App Sections
   TODO: Move into separate files.
 */
 
-/*
-debug / dev
-*/
-
 /* initialize */
-
 textarea.twelve-word-phrase {
   padding: 12px;
   width: 300px;
@@ -57,6 +52,7 @@ textarea.twelve-word-phrase {
   opacity: 0.0;
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
+
 .lock.unlocked {
   transform: scale(1);
   opacity: 1;
@@ -67,15 +63,18 @@ textarea.twelve-word-phrase {
   transform: scaleX(1) translateX(0);
   transition: transform 250ms ease-in;
 }
+
 .lock.unlocked .lock-top {
   transform: scaleX(-1) translateX(-12px);
   transition: transform 250ms ease-in;
 }
+
 .lock.unlocked:hover {
   border-radius: 4px;
   background: #e5e5e5;
   border: 1px solid #b1b1b1;
 }
+
 .lock.unlocked:active {
   background: #c3c3c3;
 }
@@ -105,28 +104,35 @@ textarea.twelve-word-phrase {
 .editable-label{
   display: flex;
 }
+
 /* Webkit */
+
 .unlock-screen input::-webkit-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* Firefox 18- */
+
 .unlock-screen input:-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* Firefox 19+ */
+
 .unlock-screen input::-moz-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
+
 /* IE */
+
 .unlock-screen input:-ms-input-placeholder {
   text-align: center;
   font-size: 1.2em;
 }
 
-
 /* accounts */
 
 .accounts-section {
@@ -344,18 +350,6 @@ textarea.twelve-word-phrase {
   color: rgba(247, 134, 28, 1);
 }
 
-.radio-titles-subtext {
-
-}
-
-.selected-exchange {
-
-}
-
-.buy-radio {
-
-}
-
 .eth-warning{
   transition: opacity 400ms ease-in, transform 400ms ease-in;
 }
@@ -380,6 +374,7 @@ textarea.twelve-word-phrase {
   border-radius: 2px;
 
 }
+
 .input-container:hover .buy-inputs{
   box-sizing: inherit;
   border: solid;

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

@@ -23,6 +23,7 @@ time, mark, audio, video {
   font: inherit;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {

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

@@ -2,7 +2,11 @@
   Variables
  */
 
-// Colors
+
+
+/*
+  Colors
+ */
 $white-linen: #FAF6F0; // formerly 'faint orange (textfield shades)'
 $rajah: #F5C26D; // formerly 'light orange (button shades)'
 $buttercup: #F5A623; // formerly 'dark orange (text)'
@@ -13,20 +17,29 @@ $shark: #22232C;
 $wild-sand: #F6F6F6;
 $white: #FFFFFF;
 $dusty-gray: #9B9B9B;
+$alto: #DEDEDE;
 
-// Z Indicies - Planned
+/*
+  Z-Indicies
+ */
+
+// Planned
 $dropdown-z: 30;
 $container-z: 15;
 $header-z: 12;
 
-// Z Indicies - Current
-// app - 11
-// hex/bn as decimal input - 1 - remove?
-// dropdown - 11
-// loading - 10 - higher?
-// mascot - 0 - remove?
+/*
+  Z Indicies - Current
+  app - 11
+  hex/bn as decimal input - 1 - remove?
+  dropdown - 11
+  loading - 10 - higher?
+  mascot - 0 - remove?
+ */
 
-// Responsive Breakpoints
+/*
+  Responsive Breakpoints
+ */
 $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;

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

@@ -1,2 +1 @@
 @import './utilities.scss';
-

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

@@ -299,7 +299,7 @@ hr.horizontal-line {
   Misc
  */
 
-// Move into component-level contextual 'active' state later
+// TODO: move into component-level contextual 'active' state
 .letter-spacey {
   letter-spacing: 0.1em;
 }