diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
index 50bb6f2f9..89c0117ec 100644
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -1,78 +1,75 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
import { unreadBackgroundCount } from 'lib/selectors/thread-selectors.js';
import css from './chat-tabs.css';
import ChatThreadList from './chat-thread-list.react.js';
import ChatThreadTab from './chat-thread-tab.react.js';
import { ThreadListContext } from './thread-list-provider.js';
import Tabs from '../components/tabs.react.js';
import { useSelector } from '../redux/redux-utils.js';
function ChatTabs(): React.Node {
let backgroundTitle = 'Background';
const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
if (unreadBackgroundCountVal) {
backgroundTitle += ` (${unreadBackgroundCountVal})`;
}
const threadListContext = React.useContext(ThreadListContext);
invariant(
threadListContext,
'threadListContext should be set in ChatThreadList',
);
const { activeTab, setActiveTab } = threadListContext;
const setActiveChatTab = React.useCallback(
(newTab: 'Background' | 'Focus') => {
setActiveTab(newTab);
},
[setActiveTab],
);
const chatThreadList = React.useMemo(
() => (
),
[],
);
const focusTabsItem = React.useMemo(
() => (
- }
- >
+ }>
{chatThreadList}
),
[chatThreadList],
);
const backgroundTabsItem = React.useMemo(
() => (
}
+ header={}
>
{chatThreadList}
),
[backgroundTitle, chatThreadList],
);
return (
{focusTabsItem}
{backgroundTabsItem}
);
}
export default ChatTabs;
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
index 020b2ea90..dad20f6d8 100644
--- a/web/chat/chat-thread-tab.react.js
+++ b/web/chat/chat-thread-tab.react.js
@@ -1,26 +1,16 @@
// @flow
import * as React from 'react';
-import SWMansionIcon, {
- type Icon,
-} from 'lib/components/SWMansionIcon.react.js';
-
import css from './chat-tabs.css';
type Props = {
+title: string,
- +icon: Icon,
};
function ChatThreadTab(props: Props): React.Node {
- const { title, icon } = props;
+ const { title } = props;
- return (
-
-
- {title}
-
- );
+ return {title}
;
}
export default ChatThreadTab;
diff --git a/web/components/tabs.css b/web/components/tabs.css
index b705bbfd8..cf0e3dc99 100644
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -1,30 +1,46 @@
div.tabsContainer {
color: var(--fg);
display: flex;
flex-direction: column;
overflow: hidden;
max-height: 100%;
flex: 1;
}
div.tabsHeaderContainer {
+ border-bottom: 1px solid var(--border);
+ height: 56px;
+}
+
+.tabsHeaderContainerPill {
display: flex;
+ background-color: var(--menu-bg);
+ border-radius: 8px;
+ margin: 8px;
+ align-items: center;
}
.tabHeader {
flex: 1;
- padding: 16px;
- font-size: var(--m-font-16);
+ font-size: var(--s-font-14);
+ font-weight: var(--semi-bold);
color: var(--tabs-header-active-color);
- border-bottom: 2px solid var(--tabs-header-active-border);
+ height: 32px;
+ border-radius: 4px;
+ background-color: var(--tabs-header-active-background);
+ margin: 4px;
}
.backgroundTabHeader {
color: var(--tabs-header-background-color);
- border-bottom-color: var(--tabs-header-background-border);
+ background-color: transparent;
}
.backgroundTabHeader:hover {
color: var(--tabs-header-background-color-hover);
- border-bottom-color: var(--tabs-header-background-border-hover);
+ transition: color 100ms;
+}
+
+.backgroundTabHeader:not(:hover) {
+ transition: color 100ms;
}
diff --git a/web/components/tabs.react.js b/web/components/tabs.react.js
index e05693a4d..2a0141b80 100644
--- a/web/components/tabs.react.js
+++ b/web/components/tabs.react.js
@@ -1,58 +1,60 @@
// @flow
import * as React from 'react';
import TabsHeader from './tabs-header.js';
import css from './tabs.css';
type TabsContainerProps = {
+children?: React.ChildrenArray>,
+activeTab: T,
+setTab: T => mixed,
};
function TabsContainer(props: TabsContainerProps): React.Node {
const { children, activeTab, setTab } = props;
const headers = React.Children.map(children, tab => {
const { id, header } = tab.props;
const isActive = id === activeTab;
return (
{header}
);
});
const currentTab = React.Children.toArray(children).find(
tab => tab.props.id === activeTab,
);
const currentContent = currentTab ? currentTab.props.children : null;
return (
-
{headers}
+
{currentContent}