diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
index 335d353fa..b30d02137 100644
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -1,44 +1,45 @@
// @flow
import classNames from 'classnames';
import * as React from 'react';
import type { ThreadInfo } from 'lib/types/thread-types';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
import { useModalContext } from '../modals/modal-provider.react';
import css from './chat-thread-list.css';
type Props = {
+threadInfo: ThreadInfo,
+unread: boolean,
+showingSidebarsInline: boolean,
};
function ChatThreadListSeeMoreSidebars(props: Props): React.Node {
const { unread, showingSidebarsInline, threadInfo } = props;
const { setModal } = useModalContext();
const onClick = React.useCallback(
() => setModal(),
[setModal, threadInfo],
);
const buttonText = showingSidebarsInline ? 'See more...' : 'See sidebars...';
return (
);
}
export default ChatThreadListSeeMoreSidebars;
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index d45ff4987..6f7bb91e2 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,314 +1,318 @@
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.threadListSidebar:hover {
background: var(--thread-active-bg);
}
div.activeThread :is(div.dark, .lastMessage span.read, .title) {
color: var(--fg);
}
div.activeThread .lastMessage.read {
color: var(--fg);
}
div.activeThread.thread:hover {
background: var(--thread-active-bg);
}
div.thread:hover {
background: var(--thread-hover-bg);
}
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: 42px;
width: 42px;
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.unread {
color: var(--fg);
font-weight: var(--semi-bold);
}
div.lastMessage.unread {
color: var(--fg);
}
div.dark {
color: var(--thread-color-read);
}
.read {
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.sidebarTitle.unread {
color: var(--fg);
}
+div.seeMoreButton {
+ padding-left: 58px;
+ font-size: 12px;
+}
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;
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;
}
.menuContentVisible {
display: block;
}
button.menuContent {
border: none;
cursor: pointer;
padding: 10px;
font-size: 16px;
}
button.menuContent: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;
}