refactor: Remove unused CSS classes and optimize conditional styling

- Removed unused CSS classes and optimized code for conditional styling.
This commit is contained in:
kangfenmao 2024-09-06 15:50:06 +08:00
parent f3bafbeb52
commit e61e4b109a
2 changed files with 10 additions and 10 deletions

View File

@ -48,7 +48,13 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
language={match[1]}
style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true}
customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
customStyle={{
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
marginTop: 0,
border: '0.5px solid var(--color-code-background)',
borderTop: 'none'
}}>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
</>
@ -57,7 +63,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
{...rest}
style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true}
customStyle={{ border: '0.5px solid var(--color-border)', padding: '8px 12px' }}>
customStyle={{ border: '0.5px solid var(--color-code-background)', padding: '8px 12px' }}>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
)

View File

@ -96,10 +96,9 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
<DragableList list={assistant.topics} onUpdate={updateTopics}>
{(topic) => {
const isActive = topic.id === activeTopic?.id
const activeClass = topicPosition === 'left' ? 'active-left' : 'active-right'
return (
<Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
<TopicListItem className={isActive ? activeClass : ''} onClick={() => onSwitchTopic(topic)}>
<TopicListItem className={isActive ? 'active' : ''} onClick={() => onSwitchTopic(topic)}>
{topic.name}
</TopicListItem>
</Dropdown>
@ -134,12 +133,7 @@ const TopicListItem = styled.div`
&:hover {
background-color: var(--color-background-soft);
}
&.active-left {
background-color: var(--color-primary);
color: white;
font-weight: 500;
}
&.active-right {
&.active {
background-color: var(--color-background-mute);
font-weight: 500;
}