add fonts and reorg assets

assets/stylesheets/browser-solidity.css

@@ -34,24 +34,17 @@ body {
 #files .newFile,
 #files .toggleRHP {
     background-color: #B1EAC5;
+    padding: 0.6em;
     font-weight: bold;
-    color: #4E775D;
+    cursor: pointer;
+    color: black;
 }
 
 #files .toggleRHP {
     float: right;
-    cursor: pointer;
-}
-
-#files .toggleRHP:before {
-    content: ">>";
     width: 2em;
-    padding: 0 0.6em;
     box-sizing: border-box;
 }
-#files .toggleRHP.toggled:before {
-    content: "<<";
-}
 
 #files .file.active {
     font-weight: bold;
@@ -65,7 +58,6 @@ body {
     height: 1.25em;
     width: 1.25em;
     line-height: 1em;
-    border-radius: 1em;
     color: #FF8080;
     display: none;
     margin: 0.4em;
@@ -100,12 +92,12 @@ body {
     right: 0;
     bottom: 0px;
     overflow: auto;
-    border-left: 1px dotted black;
+    border-left: 3px solid #efefef;
     box-sizing: border-box;
 }
 
 #output {
-    border-top: 1px dotted black;
+    border-top: 3px solid #efefef;
     display: block;
 }
 
@@ -133,20 +125,16 @@ body {
 
 #header #gist {
     background-color: #efefef;
+    font-size: 12px;
     padding: 0.25em;
     color: black;
     border:0 none;
-    border-radius: 0.5em;
+    border-radius: 3px;
     width: 8em;
     margin-right: 1em;
     cursor: pointer;
 }
 
-#header #gist img {
-    height: 1.15em;
-    margin-right: 0.5em;
-}
-
 
 #header .origin,
 #header #executionContext {
@@ -163,6 +151,7 @@ body {
 #header #versionSelector {
     border: 0 none;
     font-family: monospace;
+    background-color: transparent;
 }
 
 .col1 {
@@ -211,22 +200,9 @@ body {
 #output .udapp {
     border: 0 none;
     box-shadow: none;
-    border-bottom: 1px dotted;
-}
-
-#output .udapp button,
-#output .udapp input {
-    padding: 0.25em;
-    color: black;
-}
-
-#output .udapp button {
-    border-color: #9E9D9D;
+    border-bottom: 3px solid #efefef;
 }
 
-#output .udapp .atAddress { background-color: #B1EAC5; }
-#output .udapp .contractProperty .call { background-color: #FF8B8B; }
-#output .udapp .contractProperty.constant .call { background-color: #9DC1F5; }
 
 .row {
     overflow: auto;

assets/stylesheets/universal-dapp.css

@@ -26,7 +26,7 @@
 	padding: 0.6em;
 	box-sizing: border-box;
 	border: 1px solid rgba( 0,0,0,0.3 );
-	border-radius: 0.5em;
+	border-radius: 3px;
 }
 
 .udapp-setup textarea {
@@ -37,6 +37,7 @@
 
 .udapp-setup button {
 	background-color: #556DF3;
+	border-button: #556DF3;
 	color: white;
 	cursor: pointer;
 }
@@ -118,10 +119,9 @@
 
 .udapp .instance {
 	padding: 0.4em;
-	background-color: #ECD7D7;
+	background-color: rgba(236, 215, 215, 0.43);
 	margin-bottom: 1em;
 	position: relative;
-	border: 1px solid #999;
 }
 
 .udapp .instance:last-child {
@@ -165,18 +165,20 @@
 	width: 33%;
 	display: block;
 	float: left;
+	padding: 0.25em;
 }
 
 .udapp .atAddress {
-	background-color: #62B762;
+	background-color: #B1EAC5;
+	border-color: #B1EAC5;
 	margin-right: 1em;
-	border-radius: 0.5em;
+	border-radius: 3px;
 }
 
 .udapp input { border-left: 0 none;}
 .udapp button {
 	background-color: #666;
-	color: white;
+	color: #4C4B4B;
 	cursor: pointer;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -197,11 +199,13 @@
 }
 
 .udapp .contractProperty .call {
-	background-color: #D42828;
+	background-color: #FF8B8B;
+	border-color: #FF8B8B;
 }
 
 .udapp .contractProperty.constant .call {
-	background-color: #556DF3;
+	background-color: #9DC1F5;
+	border-color: #9DC1F5;
 	width: 25%;
 }
 

index.html

@@ -28,23 +28,24 @@ THE SOFTWARE.
 -->
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
 <title>Solidity realtime compiler and runtime</title>
-<link rel="stylesheet" href="stylesheets/styles.css">
-<link rel="stylesheet" href="stylesheets/pygment_trac.css">
-<link rel="stylesheet" href="stylesheets/universal-dapp.css">
-<link rel="stylesheet" href="stylesheets/browser-solidity.css">
+<link rel="stylesheet" href="assets/css/styles.css">
+<link rel="stylesheet" href="assets/css/pygment_trac.css">
+<link rel="stylesheet" href="assets/css/universal-dapp.css">
+<link rel="stylesheet" href="assets/css/browser-solidity.css">
+<link rel="stylesheet" href="assets/css/font-awesome.min.css">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <style type="text/css">
 
 </style>
 <script src="bin/list.js"></script>
-<script src="libs/jquery-2.1.3.min.js"></script>
-<script src="libs/ace.js"></script>
-<script src="libs/mode-solidity.js"></script>
+<script src="assets/js/jquery-2.1.3.min.js"></script>
+<script src="assets/js/ace.js"></script>
+<script src="assets/js/mode-solidity.js"></script>
 <script src="bin/soljson-latest.js"></script>
-<script src="libs/ethereumjs-vm.js"></script>
-<script src="libs/universal-dapp.js"></script>
-<script src="libs/web3.min.js"></script>
-<script src="ballot.sol.js"></script>
+<script src="assets/js/ethereumjs-vm.js"></script>
+<script src="assets/js/universal-dapp.js"></script>
+<script src="assets/js/web3.min.js"></script>
+<script src="assets/js/ballot.sol.js"></script>
 
 
 </head>
@@ -53,8 +54,8 @@ THE SOFTWARE.
 
     <div id="editor">
         <div id="files">
-            <span class="newFile" title="New File">+</span>
-            <span class="toggleRHP" title="Toggle right hand panel"></span>
+            <span class="newFile" title="New File"><i class="fa fa-file-text-o"></i></span>
+            <span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-columns"></i></span>
         </div>
         <div id="input"></div>
         <div id="dragbar"></div>
@@ -62,12 +63,12 @@ THE SOFTWARE.
 
     <div id="righthand-panel">
         <div id="header">
-            <img id="solIcon" title="Solidity realtime compiler and runtime" src="stylesheets/sol.gif">
+            <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif">
             <div class="info">
                 <div class="version">Solidity version: <span id="version">(loading)</span> change to: <select id="versionSelector"></select></div>
             </div>
             <div id="optimizeBox">
-                <button id="gist" title="Publish all files as public gist on github.com"><img src="stylesheets/github.png" alt="">Publish gist</button>
+                <button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button>
                 <label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
                 <label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
                 <code class="origin">tx.origin: <span id="txorigin"/></code>
@@ -264,7 +265,7 @@ THE SOFTWARE.
 
     function fileTabTemplate(key) {
         var name = fileNameFromKey(key);
-        return $('<span class="file"><span class="name">'+name+'</span><span class="remove">x</span></span>');
+        return $('<span class="file"><span class="name">'+name+'</span><span class="remove"><i class="fa fa-close"></i></span></span>');
     }
 
     function fileKey( name ) {
@@ -484,7 +485,7 @@ THE SOFTWARE.
         var renderError = function(message) {
             var type = errortype(message);
             var $pre = $("<pre />").text(message);
-            var $error = $('<div class="sol ' + type + '"><div class="close">x</div></div>').prepend($pre);
+            var $error = $('<div class="sol ' + type + '"><div class="close"><i class="fa fa-close"></i></div></div>').prepend($pre);
             $('#output').append( $error );
             var err = message.match(/^:([0-9]*):([0-9]*)/);
             if (err && err.length) {