Add Settings page link to the user profile card when a user is viewin…

…g their own profile page.

src/client/js/components/ProfileCard.js

@@ -2,21 +2,22 @@ import React from "react";
 import {Link} from "react-router-dom";
 import Banner from "./Banner.js";
 import Avatar from "./Avatar.js";
+import InlineSvg from "react-inlinesvg";
 
 /*
 	Presentational component to render a users' profile card.
 
 	Requires a `user` object prop that represents the given user.
 */
 const ProfileCard = (props) => {
-	const {user} = props;
+	const {user, withSettings} = props;
 
 	if (!user) {
 		return null;
 	}
 
 	return (
-		<div className={`${props.className && `${props.className} ` || ""}profile-card`}>
+		<div className={`${props.className && `${props.className} ` || ""}profile-card${withSettings ? " profile-card--settings" : ""}`}>
 		{/* If the `className` prop is supplied then add the classNames to this component. */}
 			<Banner user={user} />
 			<div className="profile-card__info">
@@ -27,6 +28,18 @@ const ProfileCard = (props) => {
 						<p className="profile-card__name">@{user.name}</p>
 					</Link>
 				</div>
+				{
+					withSettings &&
+					<div className="profile-card__settings-link">
+						<Link to="/settings">
+							<InlineSvg
+								className="svg profile-card__settings-icon"
+								src="/images/icons/cog.svg"
+								cacheGetRequests
+							/>
+						</Link>
+					</div>
+				}
 			</div>
 			{props.children}
 		</div>

src/client/js/components/ProfileUser.js

@@ -77,8 +77,9 @@ const ProfileUser = (props) => {
 
 	return (
 		<ProfileCard
-			user={user}
 			className="content__panel card"
+			user={user}
+			withSettings={loggedUser.user && user._id === loggedUser.user._id}
 		>
 			{followButton}
 		</ProfileCard>

src/client/scss/components/_ProfileCard.scss

@@ -44,4 +44,41 @@
 		margin: 10px;
 		margin-top: 0;
 	}
+	&--settings & {
+		&__settings {
+			display: block;
+		}
+		&__names {
+			margin-right: 0px !important;
+		}
+	}
+	&__settings {
+		display: none;
+
+		&-link:hover &-icon svg {
+			transform: rotateZ(180deg);
+		}
+		&-link {
+			width: 50px;
+			height: 50px;
+			margin: 0 auto;
+
+			a {
+				display: block;
+				padding: 14px;
+			}
+		}
+		&-icon {
+			width: 100%;
+			height: 100%;
+
+			svg {
+				fill: $text-grey;
+				transition: transform .2s ease;
+			}
+			path {
+				fill: inherit;
+			}
+		}
+	}
 }