diff --git a/web/chat/chat-thread-list-item-menu.react.js b/web/chat/chat-thread-list-item-menu.react.js index ac325b87c..22fad99a9 100644 --- a/web/chat/chat-thread-list-item-menu.react.js +++ b/web/chat/chat-thread-list-item-menu.react.js @@ -1,97 +1,99 @@ // @flow +import classNames from 'classnames'; import * as React from 'react'; import { setThreadUnreadStatusActionTypes, setThreadUnreadStatus, } from 'lib/actions/activity-actions'; import type { SetThreadUnreadStatusPayload, SetThreadUnreadStatusRequest, } from 'lib/types/activity-types'; import type { ThreadInfo } from 'lib/types/thread-types'; import { useServerCall, useDispatchActionPromise, } from 'lib/utils/action-utils'; -import Button from '../components/button.react'; import SWMansionIcon from '../SWMansionIcon.react'; import css from './chat-thread-list.css'; type Props = { +threadInfo: ThreadInfo, +mostRecentNonLocalMessage: ?string, +renderStyle?: 'chat' | 'thread', }; function ChatThreadListItemMenu(props: Props): React.Node { const { renderStyle = 'chat' } = props; const [menuVisible, setMenuVisible] = React.useState(false); const toggleMenu = React.useCallback(() => { setMenuVisible(!menuVisible); }, [menuVisible]); const hideMenu = React.useCallback(() => { setMenuVisible(false); }, []); const { threadInfo, mostRecentNonLocalMessage } = props; const dispatchActionPromise = useDispatchActionPromise(); const boundSetThreadUnreadStatus: ( request: SetThreadUnreadStatusRequest, ) => Promise = useServerCall( setThreadUnreadStatus, ); const toggleUnreadStatus = React.useCallback(() => { const { unread } = threadInfo.currentUser; const request = { threadID: threadInfo.id, unread: !unread, latestMessage: mostRecentNonLocalMessage, }; dispatchActionPromise( setThreadUnreadStatusActionTypes, boundSetThreadUnreadStatus(request), undefined, { threadID: threadInfo.id, unread: !unread, }, ); hideMenu(); }, [ threadInfo, mostRecentNonLocalMessage, dispatchActionPromise, hideMenu, boundSetThreadUnreadStatus, ]); const toggleUnreadStatusButtonText = `Mark as ${ threadInfo.currentUser.unread ? 'read' : 'unread' }`; const menuIconSize = renderStyle === 'chat' ? 24 : 16; - - let btn; - if (menuVisible) { - btn = ( - - ); - } - return (
-
{btn}
+
+
    +
  • + +
  • +
+
); } export default ChatThreadListItemMenu; diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css index 31a38caa9..293719439 100644 --- a/web/chat/chat-thread-list.css +++ b/web/chat/chat-thread-list.css @@ -1,296 +1,304 @@ div.thread { display: flex; flex-direction: row; align-items: flex-start; padding-top: 4px; padding-bottom: 4px; padding-right: 10px; } div.threadListSideBar { display: flex; flex-direction: row; align-items: flex-start; padding-bottom: 4px; padding-left: 16px; padding-right: 10px; position: relative; } div.threadListSideBar > svg { position: absolute; top: -13px; left: 30px; } div.thread:first-child { padding-top: 6px; } div.activeThread, div.thread:hover { background: var(--selected-thread-bg); } div.thread div.title { flex: 1; font-size: var(--m-font-16); font-weight: var(--semi-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--thread-color-read); line-height: var(--line-height-text); } a.threadButton { flex: 1; cursor: pointer; overflow: hidden; padding-left: 8px; } .threadButtonSidebar { flex: 1; cursor: pointer; overflow: hidden; padding-left: 8px; } p.breadCrumbs { display: flex; font-size: var(--xs-font-12); font-weight: var(--normal); color: var(--breadcrumb-color); } p.breadCrumbs.unread { color: var(--breadcrumb-color-unread); } span.breadCrumb { display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; } div.colorContainer { display: flex; } div.spacer, div.colorSplotch { height: 40px; width: 40px; border-radius: 1.68px; } div.lastActivity { font-size: var(--xxs-font-10); color: var(--fg); line-height: 1.5; font-weight: var(--semi-bold); white-space: nowrap; } div.lastMessage { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } div.threadRow > .lastMessage { color: var(--thread-last-message-color-read); font-size: var(--s-font-14); } div.thread.activeThread a { color: red; } div.unread { color: var(--fg); font-weight: var(--semi-bold); } div.lastMessage.black { color: var(--fg); } div.dark { color: var(--thread-color-read); } .light { color: var(--thread-from-color-read); } div.dotContainer { display: flex; align-items: center; justify-content: center; width: 16px; } div.unreadDot { height: 4px; width: 4px; background: var(--fg); border-radius: 15px; align-self: center; } div.italic { font-style: italic; } div.sidebarTitle { flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--thread-color-read); align-self: flex-start; } div.sidebarLastActivity { white-space: nowrap; font-size: var(--xxs-font-10); line-height: var(--line-height-text); font-weight: var(--semi-bold); } svg.sidebarIcon { color: var(--thread-color-read); padding: 0 6px; font-size: 20px; } div.sidebar .menu > button svg { font-size: 16px; color: var(--thread-color-read); } div.sidebar .menu { opacity: 0; } div.sidebar:hover .menu { display: flex; align-self: flex-end; opacity: 1; } .menu { position: relative; display: flex; - padding: 5px; justify-content: flex-end; } .menu > button { background-color: transparent; color: var(--thread-color-read); border: none; cursor: pointer; display: flex; align-items: center; } .menu > button:focus { outline: none; } .menuContent { display: none; position: absolute; top: calc(100% + 1px); right: 0; z-index: 1; width: max-content; overflow: hidden; background-color: #eeeeee; border-radius: 5px; box-shadow: 1px 1px 5px 2px #00000022; } -button.menuContent { +.menuContentVisible { + display: block; +} +.menuContent ul { + list-style: none; +} +.menuContent li:not(:last-child) { + border-bottom: 1px solid #dddddd; +} +.menuContent button { border: none; cursor: pointer; padding: 10px; font-size: 16px; } .menuContent button:hover { background-color: #dddddd; } ul.list { margin: 5px 3px 10px 0px; overflow: auto; } div.search { display: flex; background-color: #dddddd; border-radius: 5px; padding: 3px 5px; align-items: center; } svg.searchVector { fill: #aaaaaa; height: 22px; width: 22px; padding: 0 3px; margin-left: 8px; } div.search > input { color: black; padding: 0; border: none; background-color: #dddddd; font-weight: 600; font-size: 15px; flex-grow: 1; margin-left: 3px; } div.search > input:focus { outline: none; } svg.clearQuery { font-size: 15px; padding-bottom: 1px; padding-right: 2px; color: #aaaaaa; } svg.clearQuery:hover { font-size: 15px; padding-bottom: 1px; padding-right: 2px; color: white; } div.spacer { height: 6px; } div.emptyItem { padding: 10px; font-size: 16px; text-align: center; white-space: pre-wrap; color: var(--fg); } div.threadListContainer { display: flex; flex-direction: column; } div.searchContainer { background-color: var(--text-input-bg); display: flex; align-items: center; margin: 1rem; } input.searchInput { background-color: var(--text-input-bg); font-size: var(--s-font-14); padding: 1rem; flex: 1; border: none; color: var(--text-input-color); outline: none; } input.searchInput::placeholder { color: var(--text-input-placeholder); } button.clearSearch { color: var(--text-input-color); transition: ease-in-out 0.15s; border: none; padding: 0 1rem; font-size: var(--m-font-16); background: none; } button.clearSearchDisabled { opacity: 0; } diff --git a/web/components/button.css b/web/components/button.css index f7feb1e20..5501187b2 100644 --- a/web/components/button.css +++ b/web/components/button.css @@ -1,47 +1,34 @@ .btn { display: flex; align-items: center; justify-content: center; background: var(--settings-btn-bg); border-color: transparent; font-size: var(--m-font-16); padding: 12px 24px; border-radius: 4px; cursor: pointer; } .primary { background: var(--btn-bg-primary); color: var(--fg); } .secondary { background: var(--shades-black-90); color: var(--fg); border: 1px solid var(--btn-secondary-border); } .danger { background: var(--btn-bg-danger); color: var(--fg); } .round { width: 30px; height: 30px; border-radius: 50%; padding: 0; } - -.unread { - background: var(--unread-btn-bg); - color: var(--fg); - position: absolute; - z-index: 1; - font-size: var(--xs-font-12); - font-weight: var(--semi-bold); - top: 0; - right: 25px; - width: max-content; - padding: 10px; -} diff --git a/web/components/button.react.js b/web/components/button.react.js index 271d7ee52..265553c9a 100644 --- a/web/components/button.react.js +++ b/web/components/button.react.js @@ -1,40 +1,40 @@ // @flow import classnames from 'classnames'; import * as React from 'react'; import css from './button.css'; type Props = { +onClick: (event: SyntheticEvent) => void, +children: React.Node, - +variant?: 'primary' | 'secondary' | 'danger' | 'round' | 'toggle_read', + +variant?: 'primary' | 'secondary' | 'danger' | 'round', +type?: string, +disabled?: boolean, +className?: string, }; function Button(props: Props): React.Node { const { onClick, children, variant = 'primary', type, disabled = false, className = '', } = props; const btnCls = classnames(css.btn, css[variant]); return ( ); } export default Button; diff --git a/web/theme.css b/web/theme.css index 324362656..1f808d44c 100644 --- a/web/theme.css +++ b/web/theme.css @@ -1,105 +1,104 @@ :root { - /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below - + /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below + The reason we never use color values defined here directly in CSS is 1. It makes changing themes from light / dark / user generated impossible. 2. Gives the programmer context into the color being used. 3. If our color system changes it's much easier to change color values in one place. Add a color value to the theme below, and then use it in your CSS. naming convention: - bg: background. - fg: foreground. - color: text-color */ --shades-white-100: #ffffff; --shades-white-90: #f5f5f5; --shades-white-80: #ebebeb; --shades-white-70: #e0e0e0; --shades-white-60: #cccccc; --shades-black-100: #0a0a0a; --shades-black-90: #1f1f1f; --shades-black-80: #404040; --shades-black-70: #666666; --shades-black-60: #808080; --violet-dark-100: #7e57c2; --violet-dark-80: #6d49ab; --violet-dark-60: #563894; --violet-dark-40: #44297a; --violet-dark-20: #331f5c; --violet-light-100: #ae94db; --violet-light-80: #b9a4df; --violet-light-60: #d3c6ec; --violet-light-40: #e8e0f5; --violet-light-20: #f3f0fa; --success-light-10: #d5f6e3; --success-light-50: #6cdf9c; --success-primary: #00c853; --success-dark-50: #029841; --success-dark-90: #034920; --error-light-10: #feebe6; --error-light-50: #f9947b; --error-primary: #f53100; --error-dark-50: #b62602; --error-dark-90: #4f1203; --bg: var(--shades-black-100); --fg: var(--shades-white-100); --color-disabled: var(--shades-black-60); --text-input-bg: var(--shades-black-80); --text-input-color: var(--shades-white-60); --text-input-placeholder: var(--shades-white-60); --border: var(--shades-black-80); --error: var(--error-primary); --success: var(--success-dark-50); /* Color Theme */ --btn-bg-primary: var(--violet-dark-100); --btn-bg-danger: var(--error-primary); --chat-bg: var(--violet-dark-80); --chat-confirmation-icon: var(--violet-dark-100); --keyserver-selection: var(--violet-dark-60); --thread-selection: var(--violet-light-80); --selected-thread-bg: var(--shades-black-90); --chat-timestamp-color: var(--shades-black-60); --tool-tip-bg: var(--shades-black-80); --tool-tip-color: var(--shades-black-60); --border-color: var(--shades-black-60); --calendar-chevron: var(--shades-black-60); --calendar-day-bg: var(--shades-black-60); --calendar-day-selected-color: var(--violet-dark-80); --community-bg: var(--shades-black-90); --unread-bg: var(--error-primary); --settings-btn-bg: var(--violet-dark-100); --modal-bg: var(--shades-black-90); --join-bg: var(--shades-black-90); --help-color: var(--shades-black-60); --modal-bg: var(--shades-black-90); --breadcrumb-color: var(--shades-black-60); --breadcrumb-color-unread: var(--shades-white-60); --join-bg: var(--shades-black-90); --btn-secondary-border: var(--shades-black-60); --thread-color-read: var(--shades-black-60); --thread-from-color-read: var(--shades-black-80); --thread-last-message-color-read: var(--shades-black-60); --relationship-button-green: var(--success-dark-50); --relationship-button-red: var(--error-primary); --relationship-button-text: var(--fg); --disconnected-bar-alert-bg: var(--error-dark-50); --disconnected-bar-alert-color: var(--shades-white-100); --disconnected-bar-connecting-bg: var(--shades-white-70); --disconnected-bar-connecting-color: var(--shades-black-100); --permission-color: var(--shades-white-60); --thread-top-bar-color: var(--shades-white-100); --thread-top-bar-menu-color: var(--shades-white-70); --thread-ancestor-keyserver-border: var(--shades-black-70); --thread-ancestor-color-light: var(--shades-white-70); --thread-ancestor-color-dark: var(--shades-black-100); - --unread-btn-bg: var(--shades-black-80); }