Page MenuHomePhorge
Files F32562950

D3188.1767347903.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D3188.1767347903.diff
View Options

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 (
+ <button className={itemClasses} onClick={onClick}>
+ <div className={css.topBarMenuActionIcon}>
+ <FontAwesomeIcon icon={icon} className={css.promptIcon} />
+ </div>
+ <div>{text}</div>
+ </button>
+ );
+}
+
+const MemoizedThreadMenuItem: React.ComponentType<ThreadMenuItemProps> = 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
@@ -16,3 +16,36 @@
border-radius: 4px;
padding: 4px 0;
}
+
+button.topBarMenuAction {
+ z-index: 1;
+ background-color: transparent;
+ padding: 12px 16px;
+ color: var(--thread-menu-color);
+ background-color: var(--thread-menu-bg);
+ font-size: var(--m-font-16);
+ line-height: 1.5;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+}
+
+button.topBarMenuAction:hover {
+ color: var(--thread-menu-color-hover);
+}
+
+div.topBarMenuActionIcon {
+ font-size: var(--l-font-18);
+ 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);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 9:58 AM (12 h, 52 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5879026
Default Alt Text
D3188.1767347903.diff (2 KB)

Event Timeline