Redesign for a softer look with more curves and less contrast

src/App.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id='app'>
 		<modal-window v-model='showAjaxErrorsModal' style='z-index: 100' width='25rem'>
-			<div style='padding: 0rem 1rem 1rem 1rem;'>
+			<div style='padding: 0rem 1rem 1rem 1rem; border-radius: 0.25rem;'>
 				<p v-for='error in this.$store.state.ajaxErrors'>{{error}}</p>
 				<button class='button button--modal' @click='showAjaxErrorsModal = false'>OK</button>
 			</div>
@@ -77,10 +77,10 @@
 			</div>
 			<div class='header__group'>
 				<template v-if='$store.state.username'>
-					<button @click='$router.push("/settings")' class='button button--blue' >
+					<button @click='$router.push("/settings")' class='button' >
 						Settings
 					</button>
-					<loading-button @click='logout' class='button--blue' :loading='loadingLogout'>
+					<loading-button @click='logout' :loading='loadingLogout'>
 						Log out
 					</loading-button>
 				</template>
@@ -88,7 +88,7 @@
 					<div class='button button--green' @click='showAccountModalTab(0)'>
 						Sign up
 					</div>
-					<div class='button button--blue' @click='showAccountModalTab(1)'>
+					<div class='button' @click='showAccountModalTab(1)'>
 						Login
 					</div>
 				</template>
@@ -348,9 +348,8 @@
 		align-items: center;
 		justify-content: space-between;
 
-		border-bottom: 0.125rem solid $color__blue--darker;
-		background-color: $color__blue--primary;
-		color: #fff;
+		border-bottom: 0.125rem solid $color__gray--primary;
+		background-color: #fff;
 
 		@at-root #{&}__group {
 			display: flex;
@@ -367,31 +366,25 @@
 	}
 
 	.search {
-		background-color: $color__blue--darker;
-		border: 0.125rem solid $color__blue--darkest;
+		border: 0.125rem solid $color__gray--primary;
+		border-radius: 0.25rem;
 
 		@at-root #{&}__field {
 			outline: none;
 			height: 100%;
 			padding: 0 0.5rem;
 			border: 0;
-			background-color: $color__blue--darker;
 
 			@include text;
-			color: #fff;
+			color: $color__text--primary;
 
 			@include placeholder {
 				@include text;
-				color: $color__lightgray--darker;
+				color: $color__lightgray--darkest;
 			}
 		}
 		@at-root #{&}__button {
-			background-color: $color__blue--darker;
-			color: #fff;
-
-			&:hover {
-				background-color: $color__blue--primary;
-			}
+			border-radius: 0;
 		}
 	}
 </style>

src/assets/scss/elementStyles.scss

@@ -1,5 +1,9 @@
 @import './variables.scss';
 
+body {
+	background-color: rgba(245, 245, 245, 0.5);
+}
+
 pre {
 	background-color: $color__gray--primary;
 	padding: 0.5rem;
@@ -38,6 +42,7 @@ b, strong {
 .button {
 	border: 0.125rem solid $color__gray--primary;
 	display: inline-block;
+	border-radius: 0.25rem;
 	text-align: center;
 	@include text($font--role-default, 1rem, 400);
 	padding: 0.5rem;
@@ -105,9 +110,8 @@ b, strong {
 	}
 	@at-root #{&}--blue {
 		@include filled_button(
-			$color__blue--darker,
-			$color__blue--darkest,
-			$color__lightgray--primary
+			$color__blue--primary,
+			$color__blue--darker
 		);
 	}
 	@at-root #{&}--green {

src/assets/scss/variables.scss

@@ -25,9 +25,9 @@ $color__green--primary: rgba(76, 175, 80, 0.86);
 $color__green--darker: #349238;
 $color__green--darkest: #1B5E20;
 
-$color__blue--primary: #0288D1;
-$color__blue--darker: #01579B;
-$color__blue--darkest: #0b3f8e;
+$color__blue--primary: #1E88E5;
+$color__blue--darker: #1565C0;
+$color__blue--darkest: #0D47A1;
 
 $color__red--primary: #E53935;
 $color__red--darker: #B71C1C;
@@ -91,4 +91,11 @@ $color__lightblue--primary: #03A9F4;
 		#{$pre + user-select}: #{$select};
 	}
 	#{user-select}: #{$select};
+}
+
+.shadow_border {
+	box-shadow: 0 0 0.3rem rgba(175, 175, 175, 0.25);
+}
+.shadow_border--hover {
+	box-shadow: 0 0 0.3rem rgba(175, 175, 175, 0.25), 0 0.2rem 0.35rem rgba(175, 175, 175, 0.25);
 }

src/components/ModalWindow.vue

@@ -49,6 +49,7 @@
 		margin-top: -3rem;
 		opacity: 0;
 		border: 0.125rem solid $color__gray--darkest;
+		border-radius: 0.25rem;
 		pointer-events: none;
 
 		transition: margin-top 0.3s, opacity 0.3s;

src/components/TabView.vue

@@ -46,6 +46,8 @@
 	@import '../assets/scss/variables.scss';
 
 	.tab_view {
+		border-radius: 0.25rem;
+
 		@at-root #{&}__tabs {
 			display: flex;
 

src/components/ThreadDisplay.vue

@@ -98,37 +98,17 @@
 
 	.thread_display {
 		display: flex;
-		padding: 0.5rem;
+		padding: 0.75rem;
 		margin-bottom: 1rem;
-		transition: background-color 0.2s;
+		background-color: #fff;
+		border-radius: 0.25rem;
+		transition: background-color 0.2s, box-shadow 0.2s;
 		position: relative;
-
-		&:after {
-			content: '';
-			position: absolute;
-			width: calc(100% + 0.25rem);
-			bottom: -0.5rem;
-			left: -0.25rem;
-			border-bottom: thin solid $color--lightgray__primary;
-		}
+		@extend .shadow_border;
 
 		&:hover {
-			background-color: $color--lightgray__primary;
-		}
-		&:active {
-			background-color: $color--lightgray__darker;
-		}
-
-		.thread_display__border {
-			position: absolute;
-			left: -0.25rem;
-			width: 0.25rem;
-			height: 100%;
-			top: 0;
-			opacity: 0.35;
-			transition: 0.2s opacity;
+			@extend .shadow_border--hover;
 		}
-		&:hover .thread_display__border { opacity: 1; }
 
 		@at-root #{&}__icon {
 			margin-right: 0.5rem;

src/components/routes/Index.vue

@@ -6,7 +6,7 @@
 				v-model='selectedFilterOption'
 				class='thread_sorting__filter'
 			></select-options>
-			<button class='button' v-if='this.$store.state.username' @click='$router.push("/thread/new")'>Post new thread</button>
+			<button class='button button--blue' v-if='this.$store.state.username' @click='$router.push("/thread/new")'>Post new thread</button>
 		</div>
 		<div class='threads_main'>
 			<div class='threads_main__side_bar'>
@@ -23,7 +23,12 @@
 						class='threads_main__side_bar__menu_item__border'
 						:style='{"background-color": category.color}'
 					></span>
-					{{category.name}}
+					<span
+						class='threads_main__side_bar__menu_item__text'
+						:style='{
+							"color": category.value === selectedCategory ? category.color : undefined
+						}'
+					>{{category.name}}</span>
 				</div>
 			</div>
 			<scroll-load
@@ -221,9 +226,13 @@
 	}
 
 	.threads_main__side_bar {
-		width: 10rem;
-		border-right: thin solid $color__gray--primary;
-		margin-top: 0.5rem;
+		width: 12rem;
+		@extend .shadow_border;
+		background: #fff;
+		margin-top: 0.15rem;
+		margin-right: 1rem;
+		border-radius: 0.25rem;
+		padding: 0.5rem 0 0.5rem 1rem;
 
 		@at-root #{&}__title {
 			cursor: default;
@@ -239,34 +248,33 @@
 
 			#{&}__border {
 				display: inline-block;
-				width: 0.2rem;
-				z-index: 1;
-				height: 100%;
-				position: absolute;
-				left: -0.75rem;
-				opacity: 0;
-				top: 0.1rem;
+				height: 0.75rem;
+				width: 0.75rem;
+				border-radius: 0.25rem;
+				opacity: 0.5;
 				background-color: $color__gray--darkest;
-
+				position: relative;
+				top: 0.05rem;
 				transition: all 0.2s;
 			}
 
 			&:hover #{&}__border {
-				left: -0.5rem;
 				opacity: 1;
 			}
-
 			&:active #{&}__border {
 				filter: brightness(0.8);
 			}
 
+			#{&}__text {
+				filter: saturate(0.75), brightness(0.75);
+			}
+			
+
 			#{&}--selected {
 				font-weight: 500;
 
 				.threads_main__side_bar__menu_item__border {
 					opacity: 1;
-					left: -0.5rem;
-
 					&:active {
 						filter: brightness(1);
 					}