feat(Profile): implemented new styling/structure

frontend/components/User/Show.vue

@@ -2,7 +2,7 @@
 	<div v-if="isUser">
 		<metadata v-bind:title="`Profile | ${user.username}`" />
 		<main-header />
-		<div class="container">
+		<!--div class="container">
 			<img class="avatar" src="/assets/notes.png" />
 			<h2 class="has-text-centered username">@{{ user.username }}</h2>
 			<h5>A member since {{ user.createdAt }}</h5>
@@ -57,6 +57,51 @@
 					</p>
 				</div>
 			</nav>
+		</div-->
+		<div class="info-section">
+			<div class="picture-name-row">
+				<img
+					class="profile-picture"
+					src="https://avatars3.githubusercontent.com/u/9784561?s=460&v=4"
+				/>
+				<div>
+					<div class="name-role-row">
+						<p class="name">Kristian Vos</p>
+						<span class="role admin">admin</span>
+					</div>
+					<p class="username">@Kris</p>
+				</div>
+			</div>
+			<div class="buttons">
+				<button class="button is-primary">Edit</button>
+				<button class="button is-primary">Settings</button>
+			</div>
+			<div class="bio-row">
+				<i class="material-icons">notes</i>
+				<p>
+					Test Test Test Test Test Test Test Test Test Test Test Test
+					Test Test Test Test
+				</p>
+			</div>
+			<div class="date-location-row">
+				<div class="date">
+					<i class="material-icons">calendar_today</i>
+					<p>February 25, 2011</p>
+				</div>
+				<div class="location">
+					<i class="material-icons">location_on</i>
+					<p>The Netherlands</p>
+				</div>
+			</div>
+		</div>
+		<div class="bottom-section">
+			<div class="buttons">
+				<button class="active">Recent activity</button>
+				<button>Playlists</button>
+			</div>
+			<div class="content">
+				Content here
+			</div>
 		</div>
 		<main-footer />
 	</div>
@@ -127,46 +172,167 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
-.night-mode {
-	.level .title {
-		color: #ccc;
+.info-section {
+	width: 912px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 32px;
+	padding: 24px;
+
+	.picture-name-row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		column-gap: 32px;
+		justify-content: center;
+		margin-bottom: 24px;
 	}
-}
 
-.container {
-	padding: 25px;
-}
+	.profile-picture {
+		width: 100px;
+		height: 100px;
+		border-radius: 100%;
+	}
 
-.avatar {
-	border-radius: 50%;
-	width: 250px;
-	display: block;
-	margin: auto;
-}
+	.name-role-row {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		column-gap: 12px;
+	}
 
-h5 {
-	text-align: center;
-	margin-bottom: 25px;
-	font-size: 17px;
-}
+	.name {
+		font-size: 34px;
+		line-height: 40px;
+		color: $dark-grey-3;
+	}
 
-.role {
-	text-transform: capitalize;
-}
+	.role {
+		padding: 2px 24px;
+		color: $white;
+		text-transform: uppercase;
+		font-size: 12px;
+		line-height: 14px;
+		height: 18px;
+		border-radius: 5px;
+
+		&.admin {
+			background-color: $red;
+		}
+	}
 
-.level {
-	margin-top: 40px;
+	.username {
+		font-size: 24px;
+		line-height: 28px;
+		color: $dark-grey;
+	}
+
+	.buttons {
+		width: 388px;
+		display: flex;
+		flex-direction: row;
+		column-gap: 20px;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 24px;
+
+		.button {
+			flex: 1;
+			font-size: 17px;
+			line-height: 20px;
+		}
+	}
+
+	.bio-row,
+	.date-location-row {
+		i {
+			font-size: 24px;
+			color: $dark-grey-2;
+			margin-right: 12px;
+		}
+
+		p {
+			font-size: 17px;
+			line-height: 20px;
+			color: $dark-grey-2;
+			word-break: break-word;
+		}
+	}
+
+	.bio-row {
+		max-width: 608px;
+		margin-bottom: 24px;
+		margin-left: auto;
+		margin-right: auto;
+		display: flex;
+		width: max-content;
+	}
+
+	.date-location-row {
+		max-width: 608px;
+		margin-left: auto;
+		margin-right: auto;
+		margin-bottom: 24px;
+		display: flex;
+		width: max-content;
+		margin-bottom: 24px;
+		column-gap: 48px;
+	}
+
+	.date,
+	.location {
+		display: flex;
+	}
 }
 
-.admin-functionality {
-	text-align: center;
-	margin: 0 auto;
+.bottom-section {
+	width: 960px;
+	margin-left: auto;
+	margin-right: auto;
+	margin-top: 32px;
+	padding: 24px;
+	display: flex;
+	column-gap: 64px;
+
+	.buttons {
+		height: 100%;
+		width: 251px;
+
+		button {
+			outline: none;
+			border: none;
+			box-shadow: none;
+			color: $musareBlue;
+			font-size: 22px;
+			line-height: 26px;
+			padding: 7px 0 7px 12px;
+			width: 100%;
+			text-align: left;
+			cursor: pointer;
+			border-radius: 5px;
+			background-color: transparent;
+
+			&.active {
+				color: $white;
+				background-color: $musareBlue;
+			}
+		}
+	}
+
+	.content {
+		outline: 1px solid black;
+		width: 597px;
+	}
 }
 
-@media (max-width: 350px) {
-	.username {
-		font-size: 2.9rem;
-		word-wrap: break-all;
+.night-mode {
+	.name,
+	.username,
+	.bio-row i,
+	.bio-row p,
+	.date-location-row i,
+	.date-location-row p {
+		color: $light-grey;
 	}
 }
 </style>