Use new button style

src/App.vue

@@ -39,12 +39,15 @@
 						width='100%'
 					>
 					</fancy-input>
-					<loading-button class='button--green' :loading='signup.loading' @click='createAccount'>
-						Sign up
-					</loading-button>
-					<button class='button' @click='closeAccountModal'>
-						Cancel
-					</button>
+
+					<div style='margin-top: 0.5rem;'>
+						<loading-button class='button--green button--margin' :loading='signup.loading' @click='createAccount'>
+							Sign up
+						</loading-button>
+						<button class='button' @click='closeAccountModal'>
+							Cancel
+						</button>
+					</div>
 				</template>
 				<template slot='Login'>
 					<p style='margin-top: 0;'>
@@ -65,12 +68,16 @@
 						width='100%'
 					>
 					</fancy-input>
-					<loading-button class='button button--green' :loading='login.loading' @click='doLogin'>
-						<span class='fa fa-unlock-alt' style='margin-right:0.25rem'></span> Log in
-					</loading-button>
-					<button class='button' @click='closeAccountModal'>
-						Cancel
-					</button>
+
+					<div style='margin-top: 0.5rem;'>
+						<loading-button class='button button--green button--margin' :loading='login.loading' @click='doLogin'>
+							<span class='fa fa-unlock-alt' style='margin-right:0.25rem'></span> Log in
+						</loading-button>
+						<button class='button' @click='closeAccountModal'>
+							Cancel
+						</button>
+						
+					</div>
 				</template>
 			</tab-view>
 		</modal-window>
@@ -81,21 +88,21 @@
 			<div class='header__group'>
 				<template v-if='$store.state.username'>
 					<notification-button></notification-button>
-					<button @click='$router.push("/admin")' class='button' v-if='$store.state.admin'>
+					<button @click='$router.push("/admin")' class='button button--thick_border_thin_text' v-if='$store.state.admin'>
 						Admin settings
 					</button>
-						<button @click='$router.push("/settings")' class='button' >
+						<button @click='$router.push("/settings")' class='button button--thick_border_thin_text' >
 						Settings
 					</button>
-					<loading-button @click='logout' :loading='loadingLogout'>
+					<loading-button @click='logout' :loading='loadingLogout' class='button--thick_border_thin_text'>
 						Log out
 					</loading-button>
 				</template>
 				<template v-else>
-					<div class='button button--green' @click='showAccountModalTab(0)'>
+					<div class='button button--green button--thick_border_thin_text' @click='showAccountModalTab(0)'>
 						Sign up
 					</div>
-					<div class='button' @click='showAccountModalTab(1)'>
+					<div class='button button--thick_border_thin_text' @click='showAccountModalTab(1)'>
 						Login
 					</div>
 				</template>

src/assets/scss/elementStyles.scss

@@ -39,15 +39,16 @@ b, strong {
 }
 
 .button {
-	border: 0.125rem solid $color__gray--primary;
+	border: 1px solid $color__gray--primary;
 	display: inline-block;
 	border-radius: 0.25rem;
 	text-align: center;
-	@include text($font--role-default, 1rem, 400);
+	@include text($font--role-default, 1rem, bold);
 	padding: 0.5rem;
 	cursor: pointer;
+	letter-spacing: 0.25px;
 	background-color: #fff;
-	color: $color__text--primary;
+	color: lighten($color__text--primary, 30%);
 	transition: background-color 0.2s, border-color 0.2s, filter 0.2s;
 	outline: none;
 
@@ -64,12 +65,20 @@ b, strong {
 	}
 
 	@at-root #{&}--borderless {
-		border: 0;
+		color: $color__text--secondary;
+		border-color: transparent;
+	}
+
+	@at-root #{&}--thick_border_thin_text {
+		border-width: 0.125rem;
+		font-weight: 400;
+	}
+
+	@at-root #{&}--margin {
+		margin-right: 0.5rem;
 	}
 
 	@at-root #{&}--modal {
-		padding: 0.25rem 0.5rem;
-		font-size: 0.8rem;
 		float: right;
 		margin-bottom: 1rem;
 
@@ -119,16 +128,14 @@ b, strong {
 		color: $text;
 		
 		&:hover {
-			background-color: $background;
-			border-color: $border;
-			color: #fff;
-			filter: brightness(0.9);
+			background-color: darken($background, 5%);
+			border-color: rgba($border, 0.6);
+			color: darken(#fff, 5%);
 		}
 		&:active {
-			background-color: $background;
-			border-color: $border;
-			color: #fff;
-			filter: brightness(0.8);
+			background-color: darken($background, 10%);
+			border-color: rgba($border, 0.6);
+			color: darken(#fff, 10%);
 		}
 	}
 	@at-root #{&}--blue {

src/assets/scss/variables.scss

@@ -29,7 +29,7 @@ $color__blue--primary: #1E88E5;
 $color__blue--darker: #1565C0;
 $color__blue--darkest: #0D47A1;
 
-$color__red--primary: #E53935;
+$color__red--primary: #e74860;
 $color__red--darker: #B71C1C;
 
 $color__lightblue--primary: #03A9F4;

src/components/ConfirmModal.vue

@@ -3,8 +3,8 @@
 		<div class='confirm_modal'>
 			<slot></slot>
 			<div class='confirm_modal__buttons'>
-				<button class='button button--modal' @click='setShowModal(false)'>Cancel</button>
-				<button class='button button--modal' :class='buttonColor' @click='confirm'>OK</button>
+				<button class='button button--modal button--borderless' @click='setShowModal(false)'>Cancel</button>
+				<button class='button button--modal' :class='buttonColor' @click='confirm'>{{text || 'OK'}}</button>
 			</div>
 		</div>
 	</modal-window>
@@ -15,7 +15,7 @@
 
 	export default {
 		name: 'ConfirmModal',
-		props: ['value', 'color'],
+		props: ['value', 'color', 'text'],
 		components: {
 			ModalWindow
 		},

src/components/SelectButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class='select_button'>
-		<div class='button' @click='toggleMenu' v-if='options.length'>
+		<div class='button button--thick_border_thin_text' @click='toggleMenu' v-if='options.length'>
 			{{options[selectedIndex].name}}
 			<span class='button__icon fa fa-fw' :class='[hideMenu ? "fa-caret-down" : "fa-caret-up"]'></span>
 		</div>

src/components/SelectOptions.vue

@@ -2,7 +2,7 @@
 	<div class='select_options'>
 		<button
 			v-for='option in options'
-			class='button'
+			class='button button--thick_border_thin_text'
 			:class='{"button--lightblue": option.value === value}'
 			@click='select(option.value)'
 		>