Improve the UI with FontAwesome icons

customize.dist/src/cryptpad.less

@@ -187,7 +187,6 @@ p, pre, td, a, table, tr {
     margin-bottom: 2 * 6px;
     white-space: nowrap;
 }
-
 /* Tables */
 
 table {
@@ -248,10 +247,8 @@ tbody {
 
 /* Bottom Bar */
 
-.bottom-bar {
+.top-bar, .bottom-bar {
     position:fixed;
-    bottom:0px;
-    right:0px;
     height:4%;
     height: 2.5em;
 
@@ -270,7 +267,8 @@ tbody {
 
         font-size: 20px;
         display:block;
-        float:left;
+        float:right;
+        margin-left: 10px;
         padding-top:3px;
         color: @fore;
     }
@@ -279,6 +277,14 @@ tbody {
         position: relative;
     }
 }
+.bottom-bar {
+    bottom: 0px;
+    right: 0px;
+}
+.top-bar {
+    top: 0px;
+    right: 0px;
+}
 
 .bottom-bar-left {
     display:block;

customize.dist/src/toolbar.less

@@ -30,7 +30,7 @@
         padding: 0 10px;
         height: 1.5em;
         line-height: 25px;
-        height: 22px;
+        height: 100%;
         &.cryptpad-back {
             padding: 0;
             font-weight: bold;
@@ -42,11 +42,16 @@
     button {
         height: 100%;
         background-color: inherit;
+        background-image: linear-gradient(to bottom,#fff,#e4e4e4);
         border: 1px solid #A6A6A6;
-        border-radius: 5px;
+        border-bottom-color: #979797;
+        border-radius: 3px;
         margin-right: 5px;
         padding-right: 5px;
         padding-left: 5px;
+        &:hover {
+            background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
+        }
     }
     .rightside-button {
         float: right;
@@ -91,4 +96,23 @@
 .cryptpad-toolbar-username {
     font-style: italic;
 }
+.lag {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 15px !important;
+    width: 15px !important;
+    border-radius: 50%;
+    border: 1px solid @cp-outline;
+}
+.lag-green {
+    background-color: @cp-green;
+}
+.lag-red {
+    background-color: @cp-red;
+}
+.lag-orange {
+    background-color: @cp-orange;
+}
 

customize.dist/src/variables.less

@@ -8,6 +8,7 @@
 @cp-red: #FF0073; // remove red
 @cp-outline: #444;
 
+@cp-orange: #FE9A2E;
 // alertify things
 
 @box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);