Page MenuHomePhorge
Files F33057828

D6734.1768430624.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6734.1768430624.diff
View Options

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(
() => (
- <Tabs.Item
- id="Focus"
- header={<ChatThreadTab title="Focus" icon="home-1" />}
- >
+ <Tabs.Item id="Focus" header={<ChatThreadTab title="Focused" />}>
{chatThreadList}
</Tabs.Item>
),
@@ -57,7 +54,7 @@
() => (
<Tabs.Item
id="Background"
- header={<ChatThreadTab title={backgroundTitle} icon="bell-disabled" />}
+ header={<ChatThreadTab title={backgroundTitle} />}
>
{chatThreadList}
</Tabs.Item>
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 (
- <div className={css.tabItem}>
- <SWMansionIcon icon={icon} size={24} />
- {title}
- </div>
- );
+ return <div className={css.tabItem}>{title}</div>;
}
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,39 @@
}
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
--- a/web/components/tabs.react.js
+++ b/web/components/tabs.react.js
@@ -33,7 +33,9 @@
return (
<div className={css.tabsContainer}>
- <div className={css.tabsHeaderContainer}>{headers}</div>
+ <div className={css.tabsHeaderContainer}>
+ <div className={css.tabsHeaderContainerPill}>{headers}</div>
+ </div>
{currentContent}
</div>
);
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);

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 14, 10:43 PM (14 h, 7 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5934436
Default Alt Text
D6734.1768430624.diff (3 KB)

Event Timeline