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,22 @@ +.wrapper { + width: 24px; + justify-content: center; + display: flex; +} + +.button { + color: var(--drawer-expand-button); +} + +.disabledButton { + color: var(--drawer-expand-button-disabled); +} + +.sizeContainer { + font-size: 12px; + width: 24px; + height: 24px; + justify-content: center; + align-items: center; + display: flex; +} 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,38 @@ +// @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 Button from '../components/button.react'; +import css from './expand-buttons.css'; + +type Props = { + +onClick: () => void, + +expanded: boolean, +}; + +function ExpandButton(props: Props): React.Node { + const icon = props.expanded ? faCaretDown : faCaretRight; + + return ( +
+ +
+ ); +} + +function ExpandButtonDisabled(): React.Node { + return ( +
+ +
+ ); +} + +export { ExpandButton, ExpandButtonDisabled }; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -194,4 +194,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); }