feat: implement new ui features and styles

This commit is contained in:
kangfenmao 2024-11-20 17:49:39 +08:00
parent efa0f4cbdb
commit 697c3b1838
6 changed files with 8 additions and 5 deletions

View File

@ -41,6 +41,7 @@
--color-hover: rgba(40, 40, 40, 1); --color-hover: rgba(40, 40, 40, 1);
--color-active: rgba(55, 55, 55, 1); --color-active: rgba(55, 55, 55, 1);
--color-frame-border: #333; --color-frame-border: #333;
--color-group-background: var(--color-background-soft);
--navbar-background-mac: rgba(30, 30, 30, 0.6); --navbar-background-mac: rgba(30, 30, 30, 0.6);
--navbar-background: rgba(30, 30, 30); --navbar-background: rgba(30, 30, 30);
@ -97,6 +98,7 @@ body[theme-mode='light'] {
--color-hover: var(--color-white-mute); --color-hover: var(--color-white-mute);
--color-active: var(--color-white-soft); --color-active: var(--color-white-soft);
--color-frame-border: #ddd; --color-frame-border: #ddd;
--color-group-background: var(--color-white);
--navbar-background-mac: rgba(255, 255, 255, 0.6); --navbar-background-mac: rgba(255, 255, 255, 0.6);
--navbar-background: rgba(255, 255, 255); --navbar-background: rgba(255, 255, 255);

View File

@ -112,6 +112,7 @@ const Header = styled.div`
background-color: var(--color-background-mute); background-color: var(--color-background-mute);
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-bottom: 0.5px solid var(--color-frame-border);
` `
const HeaderLeft = styled.div` const HeaderLeft = styled.div`

View File

@ -391,7 +391,6 @@ const SettingsTab: FC<Props> = (props) => {
<SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle> <SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
<Switch size="small" checked={showTopicTime} onChange={(checked) => dispatch(setShowTopicTime(checked))} /> <Switch size="small" checked={showTopicTime} onChange={(checked) => dispatch(setShowTopicTime(checked))} />
</SettingRow> </SettingRow>
<SettingDivider />
</SettingGroup> </SettingGroup>
</Container> </Container>
) )
@ -427,7 +426,8 @@ export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
margin-top: 0; margin-top: 0;
border-radius: 8px; border-radius: 8px;
margin-bottom: 10px; margin-bottom: 10px;
background: var(--color-background-soft); border: 0.5px solid var(--color-border);
background: var(--color-group-background);
` `
export default SettingsTab export default SettingsTab

View File

@ -11,9 +11,9 @@ import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import styled from 'styled-components' import styled from 'styled-components'
import Assistants from './Assistants' import Assistants from './AssistantsTab'
import Settings from './Settings' import Settings from './SettingsTab'
import Topics from './Topics' import Topics from './TopicsTab'
interface Props { interface Props {
activeAssistant: Assistant activeAssistant: Assistant