Add css and html for profile picture modal

frontend/src/components/routes/SettingsGeneral.vue

@@ -1,5 +1,22 @@
 <template>
 	<div class='route_container'>
+		<modal-window v-model='showProfilePictureModal' width='25rem'>
+			<div class='profile_picture_modal'>
+				<div class='h3'>Add a profile picture</div>
+				<p class='p--condensed'>
+					Drag and drop an image or
+					<label class='button profile_picture_modal__upload_button'>
+						<input type='file'>
+						upload a file
+					</label>
+				</p>
+				<div class='profile_picture_modal__drag_area'>
+					<span class='fa fa-cloud-upload profile_picture_modal__drag_area__icon'></span>
+				</div>
+				<button class='button button--green button--disabled'>Upload picture</button>
+			</div>
+		</modal-window>
+
 		<div class='h1'>General settings</div>
 		<p>
 			<div class='h3'>About me</div>
@@ -20,12 +37,20 @@
 				Save description
 			</loading-button>
 		</p>
+		<p>
+			<div class='h3'>Profile picture</div>
+			<p class='p--condensed'>
+				This will be displayed by your posts on the site
+			</p>
+			<button class='button' @click='showProfilePictureModal = true'>Add profile picture</button>
+		</p>
 	</div>
 </template>
 
 <script>
 	import FancyTextarea from '../FancyTextarea'
 	import LoadingButton from '../LoadingButton'
+	import ModalWindow from '../ModalWindow'
 
 	import AjaxErrorHandler from '../../assets/js/errorHandler'
 	import logger from '../../assets/js/logger'
@@ -34,7 +59,8 @@
 		name: 'settingsGeneral',
 		components: {
 			FancyTextarea,
-			LoadingButton
+			LoadingButton,
+			ModalWindow
 		},
 		data () {
 			return {
@@ -42,7 +68,9 @@
 					value: '',
 					loading: false,
 					error: ''
-				}
+				},
+
+				showProfilePictureModal: false
 			}
 		},
 		computed: {},
@@ -87,6 +115,26 @@
 </script>
 
 <style lang='scss' scoped>
+	@import '../../assets/scss/variables.scss';
+
+	.profile_picture_modal {
+		padding: 1rem;
+
+		@at-root #{&}__upload_button input[type="file"] {
+			display: none;
+		}
+
+		@at-root #{&}__drag_area {
+			padding: 1rem;
+			text-align: center;
+
+			@at-root #{&}__icon {
+				font-size: 6rem;
+				color: $color__gray--darker;
+			}
+		}
+	}
+
 	@media (max-width: 420px) {
 		.h1 {
 			display: none;