logo selecting

src/styles/button.less

@@ -11,6 +11,7 @@
   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;
 
   &.primary {
     background: #3c78db;

src/styles/colors.less

@@ -0,0 +1,2 @@
+@blue_primary: #55ddff;
+@blue_secondary: #7137c8;

src/styles/logo.less

@@ -0,0 +1,19 @@
+.logo-preview {
+  position: fixed;
+  right: 0;
+  bottom: 58px;
+
+  width: 400px;
+  height: 100%;
+
+  opacity: 0.5;
+  pointer-events: none;
+  z-index: 2;
+  background: 100% 100% no-repeat;
+
+  &.top {
+    background-position: 100% 0;
+  }
+}
+
+

src/styles/main.less

@@ -1,8 +1,11 @@
+@import 'colors.less';
+
 @import 'map.less';
 @import 'panel.less';
 @import 'router.less';
 @import 'stickers.less';
 @import 'button.less';
+@import 'logo.less';
 
 body {
   font-family: sans-serif;

src/styles/panel.less

@@ -78,7 +78,8 @@
     }
 
     &.highlighted {
-      background: linear-gradient(150deg, #05a4ff, #7137c8);
+      background: linear-gradient(150deg, @blue_primary, @blue_secondary) 50% 50% no-repeat;
+      background-size: 100% 100%;
     }
 
     svg {
@@ -107,7 +108,7 @@
   right: 10px;
   bottom: 12px;
   border-radius: 3px;
-  z-index: 2;
+  z-index: 3;
   color: white;
   box-sizing: border-box;
   padding-bottom: 48px;
@@ -157,8 +158,21 @@
   padding: 8px 20px;
   user-select: none;
   cursor: pointer;
+  position: relative;
 
   &:hover {
     background: rgba(255, 255, 255, 0.1);
   }
+
+  &.active {
+    &::after {
+      content: ' ';
+      width: 16px;
+      height: 4px;
+      left: 0;
+      top: 14px;
+      position: absolute;
+      background: white;
+    }
+  }
 }