diff --git a/web/chat/thread-menu-item.react.js b/web/chat/thread-menu-item.react.js new file mode 100644 --- /dev/null +++ b/web/chat/thread-menu-item.react.js @@ -0,0 +1,37 @@ +// @flow + +import type { IconDefinition } from '@fortawesome/fontawesome-common-types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; + +import css from './thread-menu.css'; + +type ThreadMenuItemProps = { + +onClick?: () => mixed, + +icon: IconDefinition, + +text: string, + +dangerous?: boolean, +}; + +function ThreadMenuItem(props: ThreadMenuItemProps): React.Node { + const { onClick, icon, text, dangerous } = props; + + const itemClasses = classNames(css.topBarMenuAction, { + [css.topBarMenuActionDangerous]: dangerous, + }); + return ( + + ); +} + +const MemoizedThreadMenuItem: React.ComponentType = React.memo( + ThreadMenuItem, +); + +export default MemoizedThreadMenuItem; diff --git a/web/chat/thread-menu.css b/web/chat/thread-menu.css --- a/web/chat/thread-menu.css +++ b/web/chat/thread-menu.css @@ -20,3 +20,34 @@ div.disabled { display: none; } + +button.topBarMenuAction { + z-index: 1; + background-color: transparent; + padding: 15px; + color: var(--thread-menu-color); + background-color: var(--thread-menu-bg); + font-size: var(--m-font-16); + border: none; + cursor: pointer; + display: flex; + align-items: center; +} + +button.topBarMenuAction:hover { + color: var(--thread-menu-color-hover); +} + +div.topBarMenuActionIcon { + display: flex; + justify-content: center; + margin-right: 8px; + width: 20px; +} + +button.topBarMenuActionDangerous { + color: var(--thread-menu-color-dangerous); +} +button.topBarMenuActionDangerous:hover { + color: var(--thread-menu-color-dangerous-hover); +} diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -102,4 +102,9 @@ --thread-ancestor-color-light: var(--shades-white-70); --thread-ancestor-color-dark: var(--shades-black-100); --thread-menu-bg: var(--shades-black-90); + --thread-menu-separator-color: var(--shades-black-80); + --thread-menu-color: var(--shades-black-60); + --thread-menu-color-hover: var(--shades-white-100); + --thread-menu-color-dangerous: var(--error-primary); + --thread-menu-color-dangerous-hover: var(--error-light-50); }