Added styles to profile page.

frontend/app/js/views/Profile/index.jsx

@@ -110,24 +110,26 @@ export default class Profile extends Component {
 				<main id="profile">
 					<h1>{user.username}</h1>
 					<CustomMessages onRef={ref => (this.messages = ref)}/>
-					<p>{ t("profile:aMemberSince") } {user.joinDatePretty}</p>
-					<span>
-						<b>{ t("profile:likedSongs") }:</b>
-						<span>{ user.likes }</span>
-					</span>
-					<span>
-						<b>{ t("profile:dislikedSongs") }</b>
-						<span>{ user.dislikes }</span>
-					</span>
-					<span>
-						<b>{ t("profile:songsRequested") }</b>
-						<span>{ user.songsRequested }</span>
-					</span>
-					<span>
-						<b>{ t("profile:rank") }</b>
-						<span>{ user.rolePretty }</span>
-					</span>
 					<img src={ user.image }/>
+					<p>{ t("profile:aMemberSince") } {user.joinDatePretty}</p>
+					<div className="profile-details-list">
+						<span>
+							<b>{ t("profile:likedSongs") }:</b>
+							<span>{ user.likes }</span>
+						</span>
+						<span>
+							<b>{ t("profile:dislikedSongs") }</b>
+							<span>{ user.dislikes }</span>
+						</span>
+						<span>
+							<b>{ t("profile:songsRequested") }</b>
+							<span>{ user.songsRequested }</span>
+						</span>
+						<span>
+							<b>{ t("profile:rank") }</b>
+							<span>{ user.rolePretty }</span>
+						</span>
+					</div>
 					{ this.promoteDemoteButton() }
 				</main>
 			)

frontend/app/styles/main.scss

@@ -7,6 +7,7 @@
 @import "setPassword";
 @import "settings";
 @import "termsPrivacy";
+@import "profile";
 @import "specific/button";
 @import "specific/form";
 @import url("https://fonts.googleapis.com/css?family=Roboto:100,400,500,700");

frontend/app/styles/profile.scss

@@ -0,0 +1,48 @@
+@import "colors";
+@import "breakpoints";
+
+main#profile {
+	color: $musare_color_primary_gray;
+
+	img {
+		width: 128px;
+		height: 128px;
+		display: block;
+		margin: 0 auto 16px;
+		border-radius: 100%;
+	}
+
+	p {
+		text-align: center;
+
+		font-size: 17px;
+		line-height: 22px;
+		margin-bottom: 16px;
+	}
+
+	.profile-details-list {
+		margin-bottom: 24px;
+
+		> span {
+			display: block;
+			margin-bottom: 16px;
+
+			b, span {
+				display: block;
+				text-align: center;
+			}
+
+			b {
+				font-weight: 600;
+				font-size: 18px;
+				line-height: 24px;
+				margin-bottom: 8px;
+			}
+
+			span {
+				font-size: 16px;
+				line-height: 21px;
+			}
+		}
+	}
+}