Many small ui changes

src/App.vue

@@ -88,27 +88,27 @@
 			<div class='header__group'>
 				<template v-if='$store.state.username'>
 					<notification-button></notification-button>
-					<button @click='$router.push("/admin")' class='button button--thick_border_thin_text' v-if='$store.state.admin'>
+					<button @click='$router.push("/admin")' class='button button--thin_text' v-if='$store.state.admin'>
 						Admin settings
 					</button>
-						<button @click='$router.push("/settings")' class='button button--thick_border_thin_text' >
+						<button @click='$router.push("/settings")' class='button button--thin_text' >
 						Settings
 					</button>
-					<loading-button @click='logout' :loading='loadingLogout' class='button--thick_border_thin_text'>
+					<loading-button @click='logout' :loading='loadingLogout' class='button--thin_text'>
 						Log out
 					</loading-button>
 				</template>
 				<template v-else>
-					<div class='button button--green button--thick_border_thin_text' @click='showAccountModalTab(0)'>
+					<div class='button button--green button--thin_text' @click='showAccountModalTab(0)'>
 						Sign up
 					</div>
-					<div class='button button--thick_border_thin_text' @click='showAccountModalTab(1)'>
+					<div class='button button--thin_text' @click='showAccountModalTab(1)'>
 						Login
 					</div>
 				</template>
 				<div class='search' tabindex='0'>
 					<input class='search__field' placeholder='Search this forum'>
-					<button class='button button--borderless search__button'><span class='fa fa-search'></span></button>
+					<button class='search__button'><span class='fa fa-search'></span></button>
 				</div>
 			</div>
 		</header>
@@ -385,6 +385,7 @@
 
 		@at-root #{&}__group {
 			display: flex;
+			align-items: center;
 			> * { margin: 0 0.5rem; }
 			> *:first-child { margin-left: 0; }
 			> *:last-child { margin-right: 0; }
@@ -398,8 +399,9 @@
 	}
 
 	.search {
-		border: 0.125rem solid $color__gray--primary;
+		border: 1px solid $color__gray--darker;
 		border-radius: 0.25rem;
+		overflow: hidden;
 
 		@at-root #{&}__field {
 			outline: none;
@@ -416,7 +418,9 @@
 			}
 		}
 		@at-root #{&}__button {
-			border-radius: 0;
+			@extend .button;
+			border: 0;
+			border-radius: 0 0.125rem 0.125rem 0;
 		}
 	}
 </style>

src/assets/scss/elementStyles.scss

@@ -69,8 +69,7 @@ b, strong {
 		border-color: transparent;
 	}
 
-	@at-root #{&}--thick_border_thin_text {
-		border-width: 0.125rem;
+	@at-root #{&}--thin_text {
 		font-weight: 400;
 	}
 
@@ -153,7 +152,7 @@ b, strong {
 }
 
 .input {
-	border: 0.125rem solid $color__gray--primary;
+	border: 1px solid $color__gray--primary;
 	border-radius: 0.25rem;
 	@include text;
 	padding: 0.25rem;

src/components/AdminForumInfo.vue

@@ -32,8 +32,8 @@
 			this.axios
 				.get('/api/v1/settings')
 				.then(res => {
-					this.name = res.data.forumName
-					this.description = res.data.forumDescription
+					this.name = res.data.forumName || ''
+					this.description = res.data.forumDescription || ''
 				})
 				.catch(AjaxErrorHandler(this.$store))
 		}

src/components/InputEditor.vue

@@ -32,7 +32,7 @@
 		
 		
 		<div class='input_editor__submit_bar'>
-			<button class='button' @click='submit'>Submit</button>
+			<button class='button button--thin_text' @click='submit'>Submit</button>
 		</div>
 	</div>
 </template>
@@ -191,6 +191,7 @@
 				font-size: 0.8rem;
 				height: 1.5rem;
 				padding: 0 0.25rem;
+				border-radius: 3px;
 				border-color: $color__gray--darkest;
 			}
 		}

src/components/SelectButton.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class='select_button'>
-		<div class='button button--thick_border_thin_text' @click='toggleMenu' v-if='options.length'>
+		<div class='button button--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>
@@ -76,7 +76,7 @@
 			overflow: hidden;
 			background-color: #fff;
 			width: 15rem;
-			border: 0.125rem solid #EEEEEE;
+			border: 1px solid $color__gray--darker;
 			margin-top: 0.125rem;
 			max-height: 20rem;
 			box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.35);
@@ -101,7 +101,7 @@
 				background-color: $color__lightgray--primary;
 			}
 			&:active {
-				background-color: $color__lightgray--darker;
+				background-color: darken($color__lightgray--primary, 2%);
 			}
 
 			@at-root #{&}--disabled {

src/components/SelectOptions.vue

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

src/components/TabView.vue

@@ -99,6 +99,18 @@
 				margin: 0 0.25rem;
 				padding: 0.5rem;
 				margin-top: 0.25rem;
+
+				&::after {
+					content: '';
+					position: absolute;
+					background-color: #fff;
+					width: 100%;
+					bottom: -2px;
+					left: 0;
+					height: 2px;
+					opacity: 0;
+					transition: all 0.2s;
+				}
 			}
 
 			@at-root #{&}--transparent {
@@ -152,13 +164,7 @@
 				border: thin solid $color__gray--darker;
 				
 				&::after {
-					content: '';
-					position: absolute;
-					background-color: #fff;
-					width: 100%;
-					bottom: -1px;
-					left: 0;
-					height: 1px;
+					opacity: 1;
 				}
 			}
 

src/components/routes/Thread.vue

@@ -9,6 +9,7 @@
 
 		<div class='thread_side_bar'>
 			<loading-button
+				class='button--thin_text'
 				:class='{ "button--disabled" : !$store.state.thread.selectedPosts.length }'
 				:loading='false || $store.state.thread.removePostsButtonLoading'
 				:dark='true'
@@ -26,13 +27,13 @@
 				@lock_thread='setThreadLockedState'
 				@remove_posts='setThreadSelectState'
 			>
-				<button class='button'>
+				<button class='button button--thin_text'>
 					<span class='fa fa-cogs' style='margin-right: 0.25rem;'></span>
 					Manage thread
 				</button>
 			</menu-button>
 			<button
-				class='button'
+				class='button button--thin_text'
 				@click='replyThread'
 				v-if='$store.state.username && !$store.state.thread.locked'
 			>

src/components/routes/ThreadNew.vue

@@ -168,11 +168,12 @@
 		display: flex;
 		background-color: #fff;
 		border-radius: 0.25rem;
-		border: 0.125rem solid $color__gray--darker;
-		transition: color 0.2s;
+		box-shadow: 0 0 0.3rem rgba(175, 175, 175, 0.5);
+
+		transition: all 0.2s;
 
 		@at-root #{&}--focus {
-			border-color: $color__gray--darkest;
+			box-shadow: 0 0 0.3rem rgba(175, 175, 175, 1);
 		}
 
 		@at-root #{&}__format_bar {
@@ -199,7 +200,7 @@
 		}
 
 		@at-root #{&}__preview {
-			border-left: 0.125rem solid $color__gray--darker;
+			border-left: 1px solid $color__gray--darker;
 			width: 50%;
 
 			.input_editor_preview__markdownHTML {