Unify buttons and fix other styling issues

assets/css/browser-solidity.css

@@ -51,7 +51,6 @@
 }
 
 #righthand-panel {
-    font-size: 13px;
     display: flex;
     flex-direction: column;
 }
@@ -147,7 +146,6 @@
 #righthand-panel #optionViews .pre {
     word-wrap: break-word;
     background-color: rgba(255, 255, 255, 0.5);
-    font-family: monospace;
     border-radius: 3px;
     display: inline-block;
     padding: 0 0.6em;
@@ -158,7 +156,6 @@
 }
 
 #righthand-panel .info {
-    font-family: monospace;
     min-height: 6em;
     padding: 0.25em 0;
     padding-left: 6em;
@@ -189,10 +186,6 @@
     cursor: pointer;
 }
 
-#staticanalysismodules label {
-    display: block;
-}
-
 #header .origin {
     display: block;
     word-wrap: break-word;
@@ -269,7 +262,7 @@
 .sol.warning pre {
     background-color: transparent;
     margin: 0;
-    font-size: 10px;
+    font-size: 12px;
     border: 0 none;
     padding: 0;
     border-radius: 0;

assets/css/styles.css

@@ -62,12 +62,13 @@ blockquote {
 }
 
 code, pre {
-  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
   color: #333;
-  font-size: 12px;
+  font-size: 11px;
 }
 
 pre {
+  font: 14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 12px;
   padding: 8px 15px;
   background: #f8f8f8;
   border-radius: 5px;

assets/css/universal-dapp.css

@@ -219,7 +219,6 @@
 	background-color: #9DC1F5;
 	border-color: #9DC1F5;
 	width: 25%;
-	font-style: italic;
 	outline: none;
 }
 

src/app/staticanalysis/staticAnalysisView.js

@@ -10,7 +10,8 @@ var styles = styleGuide()
 
 var css = csjs`
   .analysis {
-    font-height: 1.5em;
+    display: flex;
+    flex-direction: column;
   }
   .result {
     margin-top: 1%;
@@ -20,11 +21,17 @@ var css = csjs`
     align-items: center;
   }
   .buttonRun extends ${styles.button} {
-    background-color: ${styles.colors.blue};
     margin-right: 1%;
   }
   .analysisModulesContainer extends ${styles.displayBox} {
     margin-bottom: 1%;
+    line-height: 2em;
+    display: flex;
+    flex-direction: column;
+  }
+  .label {
+    display: flex;
+    align-items: center;
   }
 `
 
@@ -56,7 +63,7 @@ staticAnalysisView.prototype.render = function () {
       </div>
       <div class="${css.buttons}">
         <button class=${css.buttonRun} onclick=${function () { self.run() }} >Run</button>
-        <label for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
+        <label class="${css.label}" for="autorunstaticanalysis"><input id="autorunstaticanalysis" type="checkbox" style="vertical-align:bottom" checked="true">Auto run</label>
       </div>
       <div class="${css.result}" "id='staticanalysisresult'></div>
     </div>
@@ -125,7 +132,7 @@ function renderModules (modules) {
     var category = groupedModules[categoryId]
     var entriesDom = category.map((item, i) => {
       return yo`
-        <label>
+        <label class="${css.label}">
           <input id="staticanalysismodule_${categoryId}_${i}"
             type="checkbox"
             name="staticanalysismodule"
@@ -137,9 +144,7 @@ function renderModules (modules) {
             `
     })
     return yo`<div class="${css.analysisModulesContainer}">
-                <label>
-                <b>${category[0].categoryDisplayName}</b>
-                </label>
+                <label class="${css.label}"><b>${category[0].categoryDisplayName}</b></label>
                 ${entriesDom}
               </div>`
   })

src/app/tabs/analysis-tab.js

@@ -9,6 +9,8 @@ var css = csjs`
   .analysisTabView {
     padding: 2%;
     padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
   }
   .infoBox extends ${styles.infoTextBox} {
     margin-bottom: 1em;

src/app/tabs/compile-tab.js

@@ -26,30 +26,28 @@ var css = csjs`
   }
   .autocompileContainer {
     width: 90px;
+    display: flex;
+    align-items: center;
   }
+  .autocompile {}
   .autocompileTitle {
     font-weight: bold;
     margin: 1% 0;
   }
-  .autocompile {
-    float: left;
-    align-self: center;
-  }
   .autocompileText {
-    align-self: center;
     margin: 1% 0;
-    font-size: 11px;
+    font-size: 12px;
     overflow: hidden;
     word-break: normal;
     line-height: initial;
-    margin-left: 3%;
   }
   .warnCompilationSlow {
     color:  orange;
+    margin-left: 1%;
   }
   .compileButtons {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     flex-wrap: wrap;
   }
   .name {
@@ -59,13 +57,10 @@ var css = csjs`
     display: flex;
   }
   .compileButton extends ${styles.button} {
-    width: 130px;
-    min-width: 130px;
-    display: flex;
-    align-items: baseline;
-    justify-content: center;
+    width: 120px;
+    min-width: 110px;
     margin-right: 1%;
-    font-size: 13px;
+    font-size: 12px;
   }
   .container extends ${styles.displayBox} {
     margin: 0;
@@ -82,10 +77,8 @@ var css = csjs`
     text-align: center;
   }
   .details extends ${styles.button} {
-    min-width: 70px;
   }
   .publish extends ${styles.button} {
-    min-width: 70px;
     margin-left: 2%;
   }
   .log {

src/app/tabs/run-tab.js

@@ -35,16 +35,16 @@ var css = csjs`
   .col1_1 extends ${styles.titleM} {
     font-size: 12px;
     width: 25%;
-    min-width: 50px;
+    min-width: 75px;
     float: left;
     align-self: center;
   }
   .col2 extends ${styles.inputField}{
-    width: 75%;
-    float: left;
   }
   .select extends ${styles.dropdown} {
     text-align: center;
+    font-weight: normal;
+    min-width: 150px;
   }
   .copyaddress {
     color: #C6CFF7;
@@ -81,20 +81,16 @@ var css = csjs`
     margin-top: 2%;
   }
   .atAddress extends ${styles.button} {
-    background-color: ${styles.colors.green};
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
   .create extends ${styles.button} {
-    background-color: ${styles.colors.lightRed};
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
   .input extends ${styles.inputField} {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    width: 75%;
-    font-size: 10px;
     padding-left: 10px;
   }
   .noInstancesText extends ${styles.displayBox} {

src/app/ui/modaldialog.js

@@ -37,7 +37,7 @@ var css = csjs`
     margin: auto;
     padding: 0;
     line-height: 18px;
-    font-size: 13px;
+    font-size: 12px;
     border: 1px solid #888;
     width: 50%;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
@@ -53,7 +53,7 @@ var css = csjs`
     cursor: pointer;
   }
   @-webkit-keyframes animatetop {
-    from {top: -300px; opacity: 0} 
+    from {top: -300px; opacity: 0}
     to {top: 0; opacity: 1}
   }
   @keyframes animatetop {
@@ -121,7 +121,7 @@ function html () {
     <div class="${css['modalHeader']}">
     <h2></h2>
   </div>
-  <div class="${css['modalBody']}"> - 
+  <div class="${css['modalBody']}"> -
   </div>
   <div class="${css['modalFooter']}">
     <span id="modal-footer-ok" class="modalFooterOk">OK</span><span id="modal-footer-cancel" class="modalFooterCancel">Cancel</span>

src/style-guide.js

@@ -59,7 +59,7 @@ function styleGuide () {
   -------------------------------------------------------------------------- */
   var textBoxes = csjs`
     .display-box {
-      font-size             : 1em;
+      font-size             : 12px;
       padding               : 10px 15px;
       line-height           : 20px;
       background            : ${colors.white};
@@ -120,7 +120,8 @@ function styleGuide () {
       border                : 1px solid ${colors.lightGrey};  // light-grey
       margin                : .3em;
       height                : 25px;
-      font-size             : 10px;
+      width                 : 250px;
+      font-size             : 12px;
       border-radius         : 3px;
       padding               : 0 8px;
       overflow              : hidden;
@@ -132,18 +133,21 @@ function styleGuide () {
   -------------------------------------------------------------------------- */
   var buttons = csjs`
     .button {
+      display                 : flex;
+      align-items             : center;
+      justify-content         : center;
       border-color            : transparent;
       border-radius           : 3px;
       border                  : .3px solid ${colors.lightGrey};
       cursor                  : pointer;
       min-height              : 25px;
       max-height              : 25px;
-      padding                 : 3px;
-      min-width               : 100px;
+      width                   : 70px;
+      min-width               : 70px;
       font-size               : 12px;
-      overflow              : hidden;
-      word-break            : normal;
-      background-color      : #E8E8E8;
+      overflow                : hidden;
+      word-break              : normal;
+      background-color        : #E8E8E8;
     }
 
     .button:hover {
@@ -159,7 +163,7 @@ function styleGuide () {
       cursor                  : pointer;
       border                  : 1px solid ${colors.lightGrey};
       border-radius           : 3px;
-      height                  : 30px;
+      height                  : 25px;
       width                   : 250px;
       text-align              : center;
       overflow                : hidden;

src/universal-dapp.js

@@ -29,16 +29,13 @@ var css = csjs`
     align-items: center;
   }
   .title extends ${styles.dropdown} {
+    width: 400px;
     display: flex;
-    align-items: center;
     justify-content: space-between;
-    height: 32px;
-    font-size: 11px;
-    width: 100%;
+    align-items: center;
     overflow: hidden;
     word-break: break-word;
     line-height: initial;
-    font-weight: bold;
     background-color: ${styles.colors.white};
   }
   .titleText {