treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Change styling of account note editing buttons 

Co-Authored-By: Mélanie Chauvel (ariasuni) <perso@hack-libre.org>
lolsob-rspec
Thibaut Girka 2020-07-07 19:26:08 +02:00 committed by ThibG
parent 05035d0e16
commit fc05a7fb1f
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/flavours/glitch/features/account/components/account_note.js
View File

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

29
app/javascript/flavours/glitch/styles/components/accounts.scss
View File

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