diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -43,10 +43,7 @@
const focusTabsItem = React.useMemo(
() => (
- }
- >
+ }>
{chatThreadList}
),
@@ -57,7 +54,7 @@
() => (
}
+ header={}
>
{chatThreadList}
diff --git a/web/chat/chat-thread-tab.react.js b/web/chat/chat-thread-tab.react.js
--- a/web/chat/chat-thread-tab.react.js
+++ b/web/chat/chat-thread-tab.react.js
@@ -2,25 +2,15 @@
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
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -8,23 +8,34 @@
}
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);
}
diff --git a/web/components/tabs.react.js b/web/components/tabs.react.js
--- a/web/components/tabs.react.js
+++ b/web/components/tabs.react.js
@@ -33,7 +33,9 @@
return (
-
{headers}
+
{currentContent}
);
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -139,7 +139,8 @@
--search-icon-color: var(--shades-black-60);
--tabs-header-active-color: var(--shades-white-100);
--tabs-header-active-border: var(--violet-light-100);
- --tabs-header-background-color: var(--shades-black-60);
+ --tabs-header-active-background: var(--violet-dark-100);
+ --tabs-header-background-color: var(--shades-white-60);
--tabs-header-background-border: var(--shades-black-80);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-70);