mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-24 18:13:42 +01:00
Change styling of account note editing buttons
Co-Authored-By: Mélanie Chauvel (ariasuni) <perso@hack-libre.org>
This commit is contained in:
parent
54e62f8500
commit
0fe5deae89
2 changed files with 27 additions and 8 deletions
|
@ -54,11 +54,11 @@ class Header extends ImmutablePureComponent {
|
|||
if (isEditing) {
|
||||
action_buttons = (
|
||||
<div className='account__header__account-note__buttons'>
|
||||
<button className='text-btn' tabIndex='0' onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
|
||||
<button className='icon-button' tabIndex='0' onClick={this.props.onCancelAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
|
||||
</button>
|
||||
<div className='flex-spacer' />
|
||||
<button className='text-btn' tabIndex='0' onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
|
||||
<button className='icon-button' tabIndex='0' onClick={this.props.onSaveAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
|
||||
</button>
|
||||
</div>
|
||||
|
@ -66,7 +66,7 @@ class Header extends ImmutablePureComponent {
|
|||
} else {
|
||||
action_buttons = (
|
||||
<div className='account__header__account-note__buttons'>
|
||||
<button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
|
||||
<button className='icon-button' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
|
||||
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -742,8 +742,31 @@
|
|||
justify-content: flex-end;
|
||||
flex: 1 0;
|
||||
|
||||
.icon-button {
|
||||
font-size: 14px;
|
||||
padding: 2px 6px;
|
||||
color: $darker-text-color;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
background-color: rgba($darker-text-color, 0.15);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($darker-text-color, 0.3);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: darken($darker-text-color, 13%);
|
||||
background-color: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-spacer {
|
||||
flex: 0 0 15px;
|
||||
flex: 0 0 5px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
@ -754,10 +777,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
button:hover span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
textarea {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
|
Loading…
Reference in a new issue