diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js --- a/web/chat/chat-thread-list-item.react.js +++ b/web/chat/chat-thread-list-item.react.js @@ -89,12 +89,13 @@ [color], ); - const sidebars = item.sidebars.map(sidebarItem => { + const sidebars = item.sidebars.map((sidebarItem, index) => { if (sidebarItem.type === 'sidebar') { const { type, ...sidebarInfo } = sidebarItem; return ( <ChatThreadListSidebar sidebarInfo={sidebarInfo} + isMultipleSidebarItem={index > 0} key={sidebarInfo.threadInfo.id} /> ); diff --git a/web/chat/chat-thread-list-sidebar.react.js b/web/chat/chat-thread-list-sidebar.react.js --- a/web/chat/chat-thread-list-sidebar.react.js +++ b/web/chat/chat-thread-list-sidebar.react.js @@ -15,9 +15,10 @@ type Props = { +sidebarInfo: SidebarInfo, + +isMultipleSidebarItem: boolean, }; function ChatThreadListSidebar(props: Props): React.Node { - const { sidebarInfo } = props; + const { sidebarInfo, isMultipleSidebarItem } = props; const { threadInfo, mostRecentNonLocalMessage } = sidebarInfo; const { currentUser: { unread }, @@ -39,7 +40,10 @@ onClick={onClick} > <div className={css.dotContainer}>{unreadDot}</div> - <SidebarItem sidebarInfo={sidebarInfo} /> + <SidebarItem + sidebarInfo={sidebarInfo} + extendArrow={isMultipleSidebarItem} + /> <ChatThreadListItemMenu threadInfo={threadInfo} mostRecentNonLocalMessage={mostRecentNonLocalMessage} diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js --- a/web/chat/sidebar-item.react.js +++ b/web/chat/sidebar-item.react.js @@ -11,10 +11,12 @@ type Props = { +sidebarInfo: SidebarInfo, + +extendArrow?: boolean, }; function SidebarItem(props: Props): React.Node { const { sidebarInfo: { threadInfo }, + extendArrow = false, } = props; const { currentUser: { unread }, @@ -26,6 +28,7 @@ return ( <> + {extendArrow ? <div className={css.threadArrowExtender} /> : null} <SWMansionIcon icon="right-angle-arrow" size={28} /> <div className={css.spacer} /> <a className={css.threadButtonSidebar} onClick={onClick}> diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -142,4 +142,5 @@ --subchannels-modal-color-hover: var(--shades-white-100); --color-selector-active-bg: var(--shades-black-80); --relationship-modal-color: var(--shades-black-60); + --arrow-extension-color: var(--shades-black-60); }