Add general and account settings pages

src/assets/scss/elementStyles.scss

@@ -30,6 +30,11 @@ blockquote {
 	}
 }
 
+b, strong {
+	font-weight: 500;
+	color: #000;
+}
+
 .button {
 	border: 0.125rem solid $color__gray--primary;
 	display: inline-block;
@@ -108,6 +113,9 @@ blockquote {
 	@at-root #{&}--green {
 		@include filled_button($color__green--primary, $color__green--darker);
 	}
+	@at-root #{&}--red {
+		@include filled_button($color__red--primary, $color__red--darker);
+	}
 }
 
 .input {
@@ -122,4 +130,20 @@ blockquote {
 	&:focus {
 		border-color: $color__gray--darkest;
 	}
+}
+
+.h1 {
+	@include text($font--role-default, 3rem);
+}
+.h3 {
+	@include text($font--role-default, 1.5rem);
+	font-weight: 500;
+
+	@at-root #{&}--margin_top {
+		margin-top: 1.5rem;
+	}
+}
+
+.p--condensed {
+	margin-top: 0.25rem;
 }

src/assets/scss/variables.scss

@@ -29,6 +29,9 @@ $color__blue--primary: #0288D1;
 $color__blue--darker: #01579B;
 $color__blue--darkest: #0b3f8e;
 
+$color__red--primary: #E53935;
+$color__red--darker: #B71C1C;
+
 $color__lightblue--primary: #03A9F4;
 
 @keyframes flash {
@@ -88,8 +91,4 @@ $color__lightblue--primary: #03A9F4;
 		#{$pre + user-select}: #{$select};
 	}
 	#{user-select}: #{$select};
-}
-
-.h1 {
-	@include text($font--role-default, 3rem);
 }

src/components/FancyTextarea.vue

@@ -10,7 +10,7 @@
 		<textarea
 			class='input fancy_textarea__textarea'
 			v-bind:value='value'
-			v-bind:style='{width: width || "10rem"}'
+			v-bind:style='{width: width || "20rem"}'
 			v-on:input='updateValue($event.target.value)'
 			@focus='addActive'
 			@blur='removeActive'

src/components/routes/SettingsAccount.vue

@@ -1,13 +1,58 @@
 <template>
 	<div class='route_container'>
 		<div class='h1'>Account settings</div>
+		<p>
+			<div class='h3'>Change your password</div>
+			<p class='p--condensed'>
+				For security, enter your current password
+			</p>
+			<fancy-input
+				placeholder='Current password'
+				v-model='password.old.value'
+				:error='password.old.error'
+				type='password'
+			></fancy-input>
+			<fancy-input
+				placeholder='New password'
+				v-model='password.new.value'
+				:error='password.new.error'
+				type='password'
+			></fancy-input>
+			<button class='button button--green'>Change password</button>
+		</p>
+		<p>
+			<div class='h3 h3--margin_top'>Delete your account</div>
+			<p class='p--condensed'>
+				Once this is done, your account <strong>cannot</strong> be restored <br/>
+				Your current posts however will be retained
+			</p>
+			<button class='button button--red'>Delete my account</button>
+		</p>
 	</div>
 </template>
 
 <script>
+	import FancyInput from '../FancyInput'
+
 	export default {
 		name: 'settingsAccount',
-		components: {},
+		components: {
+			FancyInput
+		},
+		data () {
+			return {
+				password: {
+					old: {
+						value: '',
+						error: ''
+					},
+					new: {
+						value: '',
+						error: ''
+					}
+				}
+			}
+		},
 		computed: {},
 		methods: {}
 	}

src/components/routes/SettingsGeneral.vue

@@ -1,13 +1,38 @@
 <template>
 	<div class='route_container'>
 		<div class='h1'>General settings</div>
+		<p>
+			<div class='h3'>About me</div>
+			<p class='p--condensed'>
+				Write something about yourself to be displayed on your user page
+			</p>
+			<fancy-textarea
+				placeholder='About me'
+				v-model='description.value'
+				:error='description.error'
+				type='password'
+			></fancy-input>
+			<button class='button button--green'>Save</button>
+		</p>
 	</div>
 </template>
 
 <script>
+	import FancyTextarea from '../FancyTextarea'
+
 	export default {
 		name: 'settingsGeneral',
-		components: {},
+		components: {
+			FancyTextarea
+		},
+		data () {
+			return {
+				description: {
+					value: '',
+					error: ''
+				}
+			}
+		},
 		computed: {},
 		methods: {}
 	}