diff options
author | Thibaut Girka <thib@sitedethib.com> | 2020-07-07 19:26:08 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2020-07-09 12:19:43 +0200 |
commit | 0fe5deae89f140d2721e5c914b4ad06fea426623 (patch) | |
tree | 028e260c86a5b44397552453616b86ceaad703f4 /app/javascript | |
parent | 54e62f8500e69fb0172d565d062354bc6c19b012 (diff) |
Change styling of account note editing buttons
Co-Authored-By: Mélanie Chauvel (ariasuni) <perso@hack-libre.org>
Diffstat (limited to 'app/javascript')
-rw-r--r-- | app/javascript/flavours/glitch/features/account/components/account_note.js | 6 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/accounts.scss | 29 |
2 files changed, 27 insertions, 8 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js index 8a99bfcb8..6e5ed7703 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.js +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -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> diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index c1e3ae835..0fc2a11ff 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -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; |