Use white background and modular design

src/components/routes/User.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class='route_container'>
+	<div class='route_container user_route'>
 		<div class='user_header'>
 			<div
 				class='user_header__icon'
@@ -10,9 +10,9 @@
 			<div class='user_header__info'>
 				<span class='user_header__username'>{{username}}</span>
 				<span class='user_header__date' v-if='user'>Account created {{user.createdAt | formatDate('date') }}</span>
+				<div class='user_description' v-if='user && user.description.length' v-html='user.description'></div>
 			</div>
 		</div>
-		<div class='user_description' v-if='user && user.description.length' v-html='user.description'></div>
 		<div class='user__view_holder'>
 			<div class='user__links'>
 				<div
@@ -79,10 +79,17 @@
 <style lang='scss' scoped>
 	@import '../../assets/scss/variables.scss';
 
+	.user_route {
+		width: 70%;
+	}
+
 	.user_header {
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		margin-bottom: 1.5rem;
+		background-color: #fff;
+		padding: 1rem;
+		border-radius: 0.25rem;
 
 		@at-root #{&}__icon {
 			height: 4rem;
@@ -98,7 +105,7 @@
 			display: flex;
 			flex-direction: column;
 			margin-left: 1rem;
-			height: 4rem;
+			width: calc(100% - 6rem);
 		}
 		@at-root #{&}__username {
 			margin-top: -0.25rem;
@@ -111,16 +118,14 @@
 		}
 	}
 	.user_description {
-		width: 75%;
 		white-space: pre-line;
-		margin: -1rem 0 1.5rem 5rem;
+		margin-top: 0.5rem;
 	}
 	.user__view_holder {
 		display: flex;
-		width: calc(75% + 5rem);
 	}
 	.user__links {
-		width: 10rem;
+		width: 8rem;
 		display: table;
 
 		@at-root #{&}__menu_item {
@@ -149,5 +154,6 @@
 	}
 	.user__view {
 		flex-grow: 1;
+		width: 0;
 	}
 </style>

src/components/routes/UserPosts.vue

@@ -87,6 +87,10 @@
 	@import '../../assets/scss/variables.scss';
 
 	.user_posts {
+		background: #fff;
+		border-radius: 0.25rem;
+		padding: 1rem;
+		
 		@at-root #{&}__title {
 			font-size: 1.5rem;
 			margin-bottom: 1rem;