closing buttons new layout

Step/wwwroot/assets/styles/base/buttons.less

@@ -51,3 +51,10 @@ button.under{
 button.under:active{
   background-image: linear-gradient(to bottom, @button-machine-color-to, @button-machine-color-from);
 }
+
+button.square{
+  // width: @button-height;
+  // height: @button-height;
+  border-radius: 2px !important;
+  // background-color: #4b4b4b;
+}

Step/wwwroot/assets/styles/base/colors.less

@@ -20,6 +20,7 @@
 @color-squash : #f5a623;
 @color-scarlet:#d0021b;
 @color-duck-egg-blue: #e5f1f9;
+@color-greyish-brown: #4b4b4b;
 
 @color-body-background: #657178;
 

Step/wwwroot/assets/styles/base/header.less

@@ -59,6 +59,10 @@
         background-color: @color-darkish-blue;
         color: white;
     }
+    button.gray{
+      background-color: @color-greyish-brown;
+      color:white;
+    }
     button.profile {
         width: @header-button-size;
         background-image: url(/assets/profile.png);

Step/wwwroot/assets/styles/style.css

@@ -263,6 +263,9 @@ button.under {
 button.under:active {
   background-image: linear-gradient(to bottom, #404040, #657178);
 }
+button.square {
+  border-radius: 2px !important;
+}
 @font-face {
   font-family: 'Work Sans';
   font-style: normal;
@@ -349,6 +352,10 @@ button.under:active {
   background-color: #002680;
   color: white;
 }
+#app > header button.gray {
+  background-color: #4b4b4b;
+  color: white;
+}
 #app > header button.profile {
   width: 44px;
   background-image: url(/assets/profile.png);

Step/wwwroot/src/modules/base-components/user-info.vue

@@ -9,14 +9,14 @@
     </div>
   </button>
   <button class="profile" @click="sendMessage('show-user-info')"></button>
-  <div class="window-buttons">
-    <button class="dark-blue" @click="sendMessage('hide')"><i class="fa fa-window-minimize"></i></button>
-    <button class="dark-blue close" @click="sendMessage('close')">&times;</button>
-  </div>
   <time>
     <i class="fa fa-clock-o"></i>
     <span>{{hours}}:{{minutes}}</span>
   </time>
+  <div class="window-buttons">
+    <button class="gray square close" @click="sendMessage('hide')">-</button>
+    <button class="gray square close" @click="sendMessage('close')">&times;</button>
+  </div>
 </div>
 </template>
 <script src="./user-info.ts" lang="ts"></script>