diff options
author | ThibG <thib@sitedethib.com> | 2019-08-03 19:10:50 +0200 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2019-08-03 19:10:50 +0200 |
commit | c8fd82332749cd58f85dd398d32559a02499c945 (patch) | |
tree | 2ed497e73d59b26575765d4dee4de68dd70e179b /app/javascript/mastodon/features/compose/components/text_icon_button.js | |
parent | 089c6410208d294e7f1995e000bd796d4625246f (diff) |
Change icon button styles to make hover/focus states more obvious (#11474)
* Change icon buttons styles to make hover/focused states more obvious * Fix CW button size inconsistency * Fix icon button background color consistency
Diffstat (limited to 'app/javascript/mastodon/features/compose/components/text_icon_button.js')
-rw-r--r-- | app/javascript/mastodon/features/compose/components/text_icon_button.js | 15 |
1 files changed, 14 insertions, 1 deletions
diff --git a/app/javascript/mastodon/features/compose/components/text_icon_button.js b/app/javascript/mastodon/features/compose/components/text_icon_button.js index 9c8ffab1f..f0b133538 100644 --- a/app/javascript/mastodon/features/compose/components/text_icon_button.js +++ b/app/javascript/mastodon/features/compose/components/text_icon_button.js @@ -1,6 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; +const iconStyle = { + height: null, + lineHeight: '27px', + width: `${18 * 1.28571429}px`, +}; + export default class TextIconButton extends React.PureComponent { static propTypes = { @@ -20,7 +26,14 @@ export default class TextIconButton extends React.PureComponent { const { label, title, active, ariaControls } = this.props; return ( - <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}> + <button + title={title} + aria-label={title} + className={`text-icon-button ${active ? 'active' : ''}`} + aria-expanded={active} + onClick={this.handleClick} + aria-controls={ariaControls} style={iconStyle} + > {label} </button> ); |