Add "Edit profile" button

This commit is contained in:
Alex Gleason 2020-04-21 19:44:55 -05:00
parent e338760fd3
commit d4d56e5dc8
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 37 additions and 19 deletions

View file

@ -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;
}
}
}

View file

@ -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;

View file

@ -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;
}
}