feat: updated nav buttons look

client/js/components/modal-create-user.vue

@@ -1,8 +1,11 @@
 <template lang="pug">
-  .modal(v-bind:class='{ "is-active": isShown }')
-    .modal-background
+  transition(:duration="400")
+    .modal(v-show='isShown', v-cloak)
+      transition(name='modal-background')
+        .modal-background(v-show='isShown')
       .modal-container
-      .modal-content
+        transition(name='modal-content')
+          .modal-content(v-show='isShown')
             header.is-blue
               span Create / Authorize User
               p.modal-notify(v-bind:class='{ "is-active": loading }'): i

client/scss/components/nav.scss

@@ -68,6 +68,11 @@
 		flex-grow: 1;
 		justify-content: flex-end;
 	}
+
+  .nav-item {
+    align-items: stretch;
+    padding: 0 0 0 10px;
+  }
 }
 
 .nav-item {
@@ -123,40 +128,25 @@
 	// BUTTONS
 
 	.button {
-		border: 1px solid mc($primary, '900');
-		background-color: mc($primary, '800');
+		border: none;
+		background-color: mc($primary, '600');
 		transition: all .4s ease;
 		color: #FFF;
 		border-radius: 0;
-
-		&:first-child {
-			border-top-left-radius: 4px;
-			border-bottom-left-radius: 4px;
-		}
-
-		&:last-child {
-			border-top-right-radius: 4px;
-			border-bottom-right-radius: 4px;
-		}
+    height: auto;
 
 		&.is-outlined {
-			background-color: mc($primary, '600');
-			border-color: mc($primary, '800');
+			background-color: mc($primary, '500');
 			color: mc($primary, '100');
 		}
 
 		&:hover {
-			border-color: mc($primary, '900');
-			background-color: mc($primary, '900');
+			background-color: mc($primary, '700');
 			color: #FFF;
 		}
 
 	}
 
-	.button + .button {
-		margin-left: 1px;
-	}
-
 	// INPUTS
 
 	.control {