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 { language } = useSettings()
|
||||
const { theme: _theme } = useTheme()
|
||||
const isDarkTheme = _theme === 'dark'
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
@ -21,14 +20,6 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
|
||||
theme={{
|
||||
algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
|
||||
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: {
|
||||
activeBarBorderWidth: 0,
|
||||
darkItemBg: 'transparent'
|
||||
|
||||
@ -98,14 +98,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
|
||||
{showTab && (
|
||||
<Segmented
|
||||
value={tab}
|
||||
style={{
|
||||
borderRadius: 0,
|
||||
padding: '10px 0',
|
||||
margin: '0 10px',
|
||||
paddingBottom: 10,
|
||||
borderBottom: '0.5px solid var(--color-border)',
|
||||
gap: 2
|
||||
}}
|
||||
style={{ borderRadius: 16, paddingTop: 10, margin: '0 10px', gap: 2 }}
|
||||
options={
|
||||
[
|
||||
position === 'left' && topicPosition === 'left' ? assistantTab : undefined,
|
||||
@ -173,6 +166,8 @@ const Segmented = styled(AntSegmented)`
|
||||
line-height: 34px;
|
||||
background-color: transparent;
|
||||
user-select: none;
|
||||
border-radius: var(--list-item-border-radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
.ant-segmented-item-selected {
|
||||
background-color: var(--color-background-soft);
|
||||
@ -204,7 +199,18 @@ const Segmented = styled(AntSegmented)`
|
||||
transition: none !important;
|
||||
background-color: var(--color-background-soft);
|
||||
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user