Slightly redesign inputs for new thread page, increase height of editor

src/components/routes/ThreadNew.vue

@@ -1,11 +1,16 @@
 <template>
-	<div class='route_container'>
+	<div class='route_container thread_new'>
 		<div class='h1'>Post new thread</div>
-		<span class='select_button_text'>Post in category:</span>
-		<select-button v-model='selectedCategory' :options='categories'></select-button>
-		<div>
-			<span class='select_button_text'>Name of thread:</span>
-			<fancy-input placeholder='Thread name' v-model='name' style='display: inline-block;'></fancy-input>
+		<div class='thread_meta_info'>
+			<div class='thread_meta_info__text'>Enter the thread title and the category to post it in</div>
+			<select-button v-model='selectedCategory' :options='categories'></select-button>
+			<fancy-input
+				placeholder='Thread title'
+				v-model='name'
+				style='margin-left: 0.5rem; display: inline-block;'
+				large='true'
+				width='15rem'
+			></fancy-input>
 		</div>
 		<div class='editor' :class='{"editor--focus": focusInput}'>
 			<div class='editor__input'>
@@ -129,12 +134,22 @@
 <style lang='scss'>
 	@import '../../assets/scss/variables.scss';
 
-	.select_button_text {
-		font-weight: bold;
+	.thread_new {
 		margin-top: 1rem;
-		display: inline-block;
-		margin-right: 0.5rem;
 	}
+
+	.thread_meta_info {
+		background-color: #fff;
+		@extend .shadow_border;
+		border-radius: 0.25rem;
+		padding: 1rem;
+		margin: 1rem 0;
+
+		@at-root #{&}__text {
+			margin-bottom: 0.5rem;
+		}
+	}
+
 	.submit {
 		margin-top: 1rem;
 	}
@@ -168,11 +183,18 @@
 			.input_editor_core__format_bar {
 				left: 0rem;
 			}
+			textarea {
+				height: 14rem;
+			}
 		}
 
 		@at-root #{&}__preview {
 			border-left: 0.125rem solid $color__gray--darker;
 			width: 50%;
+
+			.input_editor_preview__markdownHTML {
+				height: 14.2rem;
+			}
 		}
 	}
 </style>