appearance: icons fixed

src/styles/button.less

@@ -4,29 +4,35 @@
   height: 18px;
   line-height: 1em;
   border-radius: 2px;
-  font-family: sans-serif;
-  font-size: 14px;
+  font-family: inherit;
+  font-size: 1em;
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
   box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
   color: white;
+  font-weight: 200;
 
   &.primary {
     background: #3c78db;
+    color: white;
   }
 
   &.danger {
     background: #ed2f3b;
+    color: white;
   }
 
   &.success {
     background: #17bf6d;
+    color: white;
   }
 }
 
 .button-group {
+  display: flex;
+
   .button {
     border-radius: 0;
     margin: 0;

src/styles/colors.less

@@ -14,3 +14,8 @@
 
 @red_primary: #ff7034;
 @red_secondary: #ff3344;
+
+@panel_radius: 0;
+
+@color_primary: #4597d0;
+@color_success: #7cd766;

src/styles/main.less

@@ -10,23 +10,36 @@
 @import 'save.less';
 
 body {
-  font-family: 'Raleway', sans-serif;
-  font-size: 14px;
+  font-family: 'Rubik', sans-serif;
+  font-size: 15px;
+  // letter-spacing: 0.4px;
   padding: 0;
 }
 
 .gray {
-  opacity: 0.75;
+  opacity: 0.5;
 }
 
 .big {
-  font-size: 14px;
+  font-size: 1em;
+}
+
+.upper {
+  text-transform: uppercase;
 }
 
 .small {
-  font-size: 12px;
+  font-size: 0.9em;
 }
 
 .white {
   color: white;
 }
+
+.success {
+  color: @color_success;
+}
+
+.primary {
+  color: @color_primary;
+}

src/styles/map.less

@@ -85,18 +85,18 @@
   margin-top: -2px;
   outline: none;
   z-index: 10001;
-  background: @blue_secondary;
+  background: @red_secondary;
 
   &:after {
     content: ' ';
-    box-shadow: 0 0 0 3px @blue_secondary;
-    background: @blue_primary;
+    box-shadow: 0 0 0 3px @red_secondary;
+    background: white;
     border-radius: 8px;
     width: 8px;
     height: 8px;
     position: absolute;
     left: 6px;
-    top: -2px;
+    top: -3px;
   }
 
   &:before {
@@ -104,9 +104,9 @@
     display: block;
     width: 3px;
     height: 20px;
-    background: @blue_secondary;
-    left: 9px;
-    top: -8px;
+    background: @red_secondary;
+    left: 8.5px;
+    top: -9px;
     position: absolute;
   }
 }

src/styles/panel.less

@@ -1,10 +1,14 @@
 .control-bar {
   background: @bar_background;
-  border-radius: 4px;
+  border-radius: @panel_radius;
   display: flex;
   box-shadow: @bar_shadow;
 }
 
+.control-bar-padded {
+  padding: 0 5px;
+}
+
 .control-dist {
   background: #222222;
   padding: 0 10px;
@@ -78,11 +82,11 @@
     }
 
     &:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: @panel_radius 0 0 @panel_radius;
     }
 
     &:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 @panel_radius @panel_radius 0;
     }
 
     &.active {
@@ -92,6 +96,12 @@
       }
     }
 
+    &.disabled {
+      svg {
+        fill: #999999;
+      }
+    }
+
     &.highlighted {
       background: #555555;
     }
@@ -151,13 +161,29 @@
   // width: 500px;
   padding: 12px;
   font-weight: 200;
-  font-size: 14px;
+  font-size: 1em;
   display: flex;
 }
 
 
 .helper__text {
   width: 100%;
+  display: flex;
+  align-items: center;
+
+  svg {
+    fill: white;
+    width: 24px;
+    margin-right: 6px;
+  }
+
+  &.success {
+    color: @color_success;
+
+    svg {
+      fill: @color_success;
+    }
+  }
 }
 
 .helper__buttons {

src/styles/user-button.less

@@ -6,7 +6,7 @@
   }
 }
 .user-bar-guest {
-  width: 168px;
+  // width: 168px;
 }
 
 .user-button {