From d4d56e5dc8334694184cc683b41d5963d10614b2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Apr 2020 19:44:55 -0500
Subject: [PATCH] Add "Edit profile" button

---
 app/gabsocial/components/button.js            | 17 ++++++++-
 .../features/account/components/header.js     |  2 +
 app/styles/gabsocial/components/buttons.scss  | 37 ++++++++++---------
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/app/gabsocial/components/button.js b/app/gabsocial/components/button.js
index 2e8cf1cc1..00aeeeae9 100644
--- a/app/gabsocial/components/button.js
+++ b/app/gabsocial/components/button.js
@@ -1,18 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import Icon from './icon';
 
 export default class Button extends React.PureComponent {
 
   static propTypes = {
     text: PropTypes.node,
     onClick: PropTypes.func,
+    to: PropTypes.string,
     disabled: PropTypes.bool,
     block: PropTypes.bool,
     secondary: PropTypes.bool,
     size: PropTypes.number,
     className: PropTypes.string,
     style: PropTypes.object,
+    icon: PropTypes.string,
     children: PropTypes.node,
   };
 
@@ -47,7 +51,7 @@ export default class Button extends React.PureComponent {
       'button--block': this.props.block,
     });
 
-    return (
+    const btn = (
       <button
         className={className}
         disabled={this.props.disabled}
@@ -55,9 +59,20 @@ export default class Button extends React.PureComponent {
         ref={this.setRef}
         style={style}
       >
+        {this.props.icon && <Icon id={this.props.icon} />}
         {this.props.text || this.props.children}
       </button>
     );
+
+    if (this.props.to) {
+      return (
+        <Link to={this.props.to}>
+          {btn}
+        </Link>
+      );
+    } else {
+      return btn;
+    }
   }
 
 }
diff --git a/app/gabsocial/features/account/components/header.js b/app/gabsocial/features/account/components/header.js
index 78b880dfa..4cbd371f1 100644
--- a/app/gabsocial/features/account/components/header.js
+++ b/app/gabsocial/features/account/components/header.js
@@ -213,6 +213,8 @@ class Header extends ImmutablePureComponent {
       } else if (account.getIn(['relationship', 'blocking'])) {
         actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
       }
+    } else {
+      actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.edit_profile)} to='/settings/profile' />;
     }
 
     return actionBtn;
diff --git a/app/styles/gabsocial/components/buttons.scss b/app/styles/gabsocial/components/buttons.scss
index 0270c1b70..453241ab3 100644
--- a/app/styles/gabsocial/components/buttons.scss
+++ b/app/styles/gabsocial/components/buttons.scss
@@ -1,23 +1,24 @@
 button,
 a.button {
-	&.standard {
+  &.standard {
 
-		// NOTE - will define the larger standard buttons here and apply class where used.
+    // NOTE - will define the larger standard buttons here and apply class where used.
 
-		&-small {
-			height: 20px;
-			padding: 5px 15px;
-			border: none;
-			border-radius: 4px;
-			@include font-size(11);
-			@include line-height(11);
-			@include font-weight(bold);
-			text-transform: uppercase;
-			color: white;
-			background: $gab-small-cta-primary;
-		}
-	}
+    &-small {
+      height: 20px;
+      padding: 5px 15px;
+      border: none;
+      border-radius: 4px;
+      @include font-size(11);
+      @include line-height(11);
+      @include font-weight(bold);
+      text-transform: uppercase;
+      color: white;
+      background: $gab-small-cta-primary;
+    }
+  }
+
+  i.fa {
+    margin-right: 0.6em;
+  }
 }
-
-
-