Unify dropdown menues = apply strickly from style-guide

assets/css/browser-solidity.css

@@ -200,16 +200,6 @@
     font-weight: bold;
 }
 
-#righthand-panel #versionSelector {
-    text-decoration: none;
-    background-color: #C6CFF7;
-    cursor: pointer;
-    font-size: 12px;
-    color: black;
-    border-radius: 3px;
-    border: 0 none;
-}
-
 .contract.hidesub {
     padding-bottom: 0;
     margin: 0;

src/app/dropdown.js

-var yo = require('yo-yo')
-var csjs = require('csjs-inject')
-
-// -------------- styling ----------------------
-var csjs = require('csjs-inject')
-var styleGuide = require('./style-guide')
-var styles = styleGuide()
-
-module.exports = dropdown
-
-// options = []
-function dropdown (options = []) {
-  var el = yo`
-    <select>
-      ${options.map(opt => yo`<option>${opt}</option>`)}
-    </select>
-  `
-}

src/app/tabs/compile-tab.js

@@ -73,11 +73,7 @@ var css = csjs`
     align-items: center;
   }
   .contractNames extends ${styles.dropdown} {
-    width: 250px;
     margin-right: 5%;
-    height: 32px;
-    font-size: 12px;
-    font-weight: bold;
   }
   .contractButtons {
     display: flex;

src/app/tabs/run-tab.js

@@ -44,8 +44,6 @@ var css = csjs`
     float: left;
   }
   .select extends ${styles.dropdown} {
-    width: 75%;
-    float: left;
     text-align: center;
   }
   .copyaddress {
@@ -58,11 +56,6 @@ var css = csjs`
   .copyaddress:hover {
     opacity: 1;
   }
-  .selectAddress extends ${styles.dropdown} {
-    width: 70%;
-    float: left;
-    text-align: center;
-  }
   .instanceContainer extends ${styles.displayBox}  {
     display: flex;
     flex-direction: column;
@@ -73,11 +66,6 @@ var css = csjs`
     margin-top: 2%;
   }
   .contractNames extends ${styles.dropdown} {
-    height: 32px;
-    font-size: 12px;
-    width: 100%;
-    font-weight: bold;
-    background-color: ${styles.colors.lightGrey}
   }
   .buttons {
     display: flex;
@@ -371,7 +359,7 @@ function settings (appAPI, appEvents) {
       </div>
       <div class="${css.crow}">
         <div class="${css.col1_1}">Account</div>
-        <select name="txorigin" class="${css.selectAddress}" id="txorigin"></select>
+        <select name="txorigin" class="${css.select}" id="txorigin"></select>
         <i title="Copy Address" class="copytxorigin fa fa-clipboard ${css.copyaddress}" onclick=${copyAddress} aria-hidden="true"></i>
       </div>
       <div class="${css.crow}">

src/app/tabs/settings-tab.js

@@ -19,8 +19,6 @@ var css = csjs`
     display: flex;
   }
   .select extends ${styles.dropdown} {
-    float: left;
-    max-width: 90%;
   }
 }
 `

src/style-guide.js

@@ -151,7 +151,8 @@ function styleGuide () {
     }
 
     .dropdown {
-      font-size               : 10px;
+      font-size               : 12px;
+      font-weight             : bold;
       padding                 : 0 8px;
       text-decoration         : none;
       background-color        : ${colors.white};
@@ -159,9 +160,10 @@ function styleGuide () {
       border                  : 1px solid ${colors.lightGrey};
       border-radius           : 3px;
       height                  : 30px;
+      width                   : 250px;
       text-align              : center;
-      overflow              : hidden;
-      word-break            : normal;
+      overflow                : hidden;
+      word-break              : normal;
     }
 
   `