diff options
| -rw-r--r-- | app/javascript/flavours/glitch/features/ui/components/column_header.js | 20 |
1 files changed, 11 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_header.js b/app/javascript/flavours/glitch/features/ui/components/column_header.js index af195ea9c..e8bdd8054 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_header.js +++ b/app/javascript/flavours/glitch/features/ui/components/column_header.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; export default class ColumnHeader extends React.PureComponent { @@ -16,19 +17,20 @@ export default class ColumnHeader extends React.PureComponent { } render () { - const { type, active, columnHeaderId } = this.props; + const { icon, type, active, columnHeaderId } = this.props; + let iconElement = ''; - let icon = ''; - - if (this.props.icon) { - icon = <i className={`fa fa-fw fa-${this.props.icon} column-header__icon`} />; + if (icon) { + iconElement = <i className={`fa fa-fw fa-${icon} column-header__icon`} />; } return ( - <div role='heading' tabIndex='0' className={`column-header ${active ? 'active' : ''}`} onClick={this.handleClick} id={columnHeaderId || null}> - {icon} - {type} - </div> + <h1 className={classNames('column-header', { active })} id={columnHeaderId || null}> + <button onClick={this.handleClick}> + {iconElement} + {type} + </button> + </h1> ); } |