Lint and cleanup all scss

damster7 · Aug 14, 2017 · 2eadf72 · 2eadf72
1 parent b8aa529
commit 2eadf72
Show file tree

Hide file tree

Showing 21 changed files with 331 additions and 248 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -34,8 +34,6 @@
       {
         "ignore": [
           "after-comment",
-          "all-nested",
-          "blockless-group"
         ]
       }
     ],

diff --git a/ui/app/components/dropdowns/network-dropdown.js b/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 {

diff --git a/ui/app/css/itcss/base/index.scss b/ui/app/css/itcss/base/index.scss
@@ -0,0 +1 @@
+// Base
diff --git a/ui/app/css/itcss/components/buttons.scss b/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,23 +57,23 @@ 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;
   text-align: center;
   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;

diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
@@ -1,34 +1,32 @@
 .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;
   }
 }
 
 .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;
 }
@@ -51,4 +49,4 @@ h2.page-subtitle {
   @media screen and (min-width: 576px) {
     margin-bottom: 1.8em;
   }
-}
+}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/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) {

diff --git a/ui/app/css/itcss/components/index.scss b/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';
diff --git a/ui/app/css/itcss/components/modal.scss b/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;
       }
     }
 

diff --git a/ui/app/css/itcss/components/network.scss b/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 {

diff --git a/ui/app/css/itcss/components/newui-sections.scss b/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%;
@@ -162,4 +163,4 @@ $wallet-view-bg: $wild-sand;
   align-items: center;
   justify-content: flex-start;
   margin: 5% 7%;
-}
+}