treehouse
/
mastodon
22
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>
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2020-07-07 19:26:08 +02:00 committed by ThibG
parent 54e62f8500
commit 0fe5deae89
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) { if (isEditing) {
action_buttons = ( action_buttons = (
<div className='account__header__account-note__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' /> <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
</button> </button>
<div className='flex-spacer' /> <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' /> <Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
</button> </button>
</div> </div>
@ -66,7 +66,7 @@ class Header extends ImmutablePureComponent {
} else { } else {
action_buttons = ( action_buttons = (
<div className='account__header__account-note__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' /> <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
</button> </button>
</div> </div>

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

@ -742,8 +742,31 @@
justify-content: flex-end; justify-content: flex-end;
flex: 1 0; 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-spacer {
flex: 0 0 15px; flex: 0 0 5px;
background: transparent; background: transparent;
} }
} }
@ -754,10 +777,6 @@
text-transform: uppercase; text-transform: uppercase;
} }
button:hover span {
text-decoration: underline;
}
textarea { textarea {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;