feat: implement new ui features and styles
This commit is contained in:
parent
efa0f4cbdb
commit
697c3b1838
@ -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);
|
||||||
|
|||||||
@ -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`
|
||||||
|
|||||||
@ -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
|
||||||
@ -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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user