refactor: Simplify Segmented component styling
- Remove custom Segmented styling from AntdProvider - Update HomeTabs Segmented component with refined styles - Consolidate Segmented styling in a single location - Improve visual consistency with rounded corners and transparent background
This commit is contained in:
parent
28c59ea436
commit
ac92f1a783
@ -13,7 +13,6 @@ import { useTheme } from './ThemeProvider'
|
|||||||
const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
|
const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
|
||||||
const { language } = useSettings()
|
const { language } = useSettings()
|
||||||
const { theme: _theme } = useTheme()
|
const { theme: _theme } = useTheme()
|
||||||
const isDarkTheme = _theme === 'dark'
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ConfigProvider
|
<ConfigProvider
|
||||||
@ -21,14 +20,6 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
|
|||||||
theme={{
|
theme={{
|
||||||
algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
|
algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
|
||||||
components: {
|
components: {
|
||||||
Segmented: {
|
|
||||||
trackBg: 'transparent',
|
|
||||||
itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
|
|
||||||
boxShadowTertiary: undefined,
|
|
||||||
borderRadiusLG: 16,
|
|
||||||
borderRadiusSM: 16,
|
|
||||||
borderRadiusXS: 16
|
|
||||||
},
|
|
||||||
Menu: {
|
Menu: {
|
||||||
activeBarBorderWidth: 0,
|
activeBarBorderWidth: 0,
|
||||||
darkItemBg: 'transparent'
|
darkItemBg: 'transparent'
|
||||||
|
|||||||
@ -98,14 +98,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
|
|||||||
{showTab && (
|
{showTab && (
|
||||||
<Segmented
|
<Segmented
|
||||||
value={tab}
|
value={tab}
|
||||||
style={{
|
style={{ borderRadius: 16, paddingTop: 10, margin: '0 10px', gap: 2 }}
|
||||||
borderRadius: 0,
|
|
||||||
padding: '10px 0',
|
|
||||||
margin: '0 10px',
|
|
||||||
paddingBottom: 10,
|
|
||||||
borderBottom: '0.5px solid var(--color-border)',
|
|
||||||
gap: 2
|
|
||||||
}}
|
|
||||||
options={
|
options={
|
||||||
[
|
[
|
||||||
position === 'left' && topicPosition === 'left' ? assistantTab : undefined,
|
position === 'left' && topicPosition === 'left' ? assistantTab : undefined,
|
||||||
@ -173,6 +166,8 @@ const Segmented = styled(AntSegmented)`
|
|||||||
line-height: 34px;
|
line-height: 34px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
border-radius: var(--list-item-border-radius);
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.ant-segmented-item-selected {
|
.ant-segmented-item-selected {
|
||||||
background-color: var(--color-background-soft);
|
background-color: var(--color-background-soft);
|
||||||
@ -204,7 +199,18 @@ const Segmented = styled(AntSegmented)`
|
|||||||
transition: none !important;
|
transition: none !important;
|
||||||
background-color: var(--color-background-soft);
|
background-color: var(--color-background-soft);
|
||||||
border: 0.5px solid var(--color-border);
|
border: 0.5px solid var(--color-border);
|
||||||
|
border-radius: var(--list-item-border-radius);
|
||||||
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Added styles from AntdProvider */
|
||||||
|
&.ant-segmented {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* These styles ensure the same appearance as before */
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: none;
|
||||||
`
|
`
|
||||||
|
|
||||||
export default HomeTabs
|
export default HomeTabs
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user