Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-04 03:40:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor: Remove unused CSS classes and optimize conditional styling

Browse Source 
- 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 1fd0a33500
commit faecbbb857
2 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/src/pages/home/Markdown/CodeBlock.tsx
View File

@ -48,7 +48,13 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
language={match[1]} language={match[1]}
style={theme === ThemeMode.dark ? atomDark : oneLight} style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true} 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$/, '')} {String(children).replace(/\n$/, '')}
</SyntaxHighlighter> </SyntaxHighlighter>
</> </>
@ -57,7 +63,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
{...rest} {...rest}
style={theme === ThemeMode.dark ? atomDark : oneLight} style={theme === ThemeMode.dark ? atomDark : oneLight}
wrapLongLines={true} 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$/, '')} {String(children).replace(/\n$/, '')}
</SyntaxHighlighter> </SyntaxHighlighter>
) )

10
src/renderer/src/pages/home/Topics.tsx
View File

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