about summary refs log tree commit diff
path: root/app/javascript/mastodon/features/compose/components/text_icon_button.js
diff options
context:
space:
mode:
authorThibG <thib@sitedethib.com>2019-08-03 19:10:50 +0200
committerEugen Rochko <eugen@zeonfederated.com>2019-08-03 19:10:50 +0200
commitc8fd82332749cd58f85dd398d32559a02499c945 (patch)
tree2ed497e73d59b26575765d4dee4de68dd70e179b /app/javascript/mastodon/features/compose/components/text_icon_button.js
parent089c6410208d294e7f1995e000bd796d4625246f (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.js15
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>
     );