Link to profile from profile settings

src/containers/ProfileSettingsPage/ProfileSettingsPage.css

@@ -12,3 +12,32 @@
     margin: 56px auto;
   }
 }
+
+.headingContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.heading {
+  margin-right: 24px;
+}
+
+.profileLink {
+  @apply --marketplaceButtonStylesSecondary;
+  @apply --marketplaceH5FontStyles;
+
+  display: inline-block;
+  width: auto;
+  min-height: auto;
+  height: 41px;
+
+  float: right;
+  flex-shrink: 0;
+
+  margin: 19px 0 0 auto;
+  padding: 9px 16px 8px 16px;
+
+  @media (--viewportMedium) {
+    margin: 37px 0 0 auto;
+  }
+}

src/containers/ProfileSettingsPage/ProfileSettingsPage.js

@@ -14,6 +14,7 @@ import {
   LayoutWrapperMain,
   LayoutWrapperFooter,
   Footer,
+  NamedLink,
 } from '../../components';
 import { ProfileSettingsForm, TopbarContainer } from '../../containers';
 
@@ -104,9 +105,20 @@ export class ProfileSettingsPageComponent extends Component {
           </LayoutWrapperTopbar>
           <LayoutWrapperMain>
             <div className={css.content}>
-              <h1>
-                <FormattedMessage id="ProfileSettingsPage.title" />
-              </h1>
+              <div className={css.headingContainer}>
+                <h1 className={css.heading}>
+                  <FormattedMessage id="ProfileSettingsPage.title" />
+                </h1>
+                {user.id ? (
+                  <NamedLink
+                    className={css.profileLink}
+                    name="ProfilePage"
+                    params={{ id: user.id.uuid }}
+                  >
+                    <FormattedMessage id="ProfileSettingsPage.viewProfileLink" />
+                  </NamedLink>
+                ) : null}
+              </div>
               {profileSettingsForm}
             </div>
           </LayoutWrapperMain>

src/containers/ProfileSettingsPage/__snapshots__/ProfileSettingsPage.test.js.snap

@@ -28,12 +28,14 @@ exports[`ContactDetailsPage matches snapshot 1`] = `
       rootClassName={null}
     >
       <div>
-        <h1>
-          <FormattedMessage
-            id="ProfileSettingsPage.title"
-            values={Object {}}
-          />
-        </h1>
+        <div>
+          <h1>
+            <FormattedMessage
+              id="ProfileSettingsPage.title"
+              values={Object {}}
+            />
+          </h1>
+        </div>
       </div>
     </LayoutWrapperMain>
     <LayoutWrapperFooter

src/translations/en.json

@@ -413,6 +413,7 @@
   "ProfileSettingsForm.yourName": "Your name",
   "ProfileSettingsForm.yourProfilePicture": "Your profile picture",
   "ProfileSettingsPage.title": "Profile settings",
+  "ProfileSettingsPage.viewProfileLink": "View your profile",
   "ResponsiveImage.noImage": "No image",
   "SaleDetailsPanel.acceptSaleFailed": "Oops, accepting failed. Please try again.",
   "SaleDetailsPanel.bannedUserDisplayName": "Banned user",