diff --git a/web/sidebar/expand-buttons.css b/web/sidebar/expand-buttons.css new file mode 100644 --- /dev/null +++ b/web/sidebar/expand-buttons.css @@ -0,0 +1,13 @@ +.buttonIcon { + color: var(--drawer-expand-button); +} + +.disabledButtonIcon { + color: var(--drawer-expand-button-disabled); +} + +.button { + font-size: var(--xs-font-12); + width: 24px; + height: 24px; +} diff --git a/web/sidebar/expand-buttons.react.js b/web/sidebar/expand-buttons.react.js new file mode 100644 --- /dev/null +++ b/web/sidebar/expand-buttons.react.js @@ -0,0 +1,33 @@ +// @flow + +import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; + +import css from './expand-buttons.css'; +import Button from '../components/button.react.js'; + +type Props = { + +onClick?: () => mixed, + +expanded?: boolean, + +disabled?: boolean, +}; + +function ExpandButton(props: Props): React.Node { + const { onClick, expanded = false, disabled } = props; + const icon = expanded ? faCaretDown : faCaretRight; + + const iconClass = classNames({ + [css.disabledButtonIcon]: disabled, + [css.buttonIcon]: !disabled, + }); + + return ( + + ); +} + +export { ExpandButton }; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -195,4 +195,6 @@ --spoiler-text-color: var(--spoiler-color); --spoiler-background-color: var(--spoiler-color); --purple-link: var(--violet-light-100); + --drawer-expand-button: var(--shades-black-60); + --drawer-expand-button-disabled: var(--shades-black-80); }