feat: use poppins fonts

This commit is contained in:
kangfenmao 2024-07-31 23:20:28 +08:00
parent c36075f0b5
commit c53e35db76
13 changed files with 73 additions and 35 deletions

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,47 @@
@font-face {
font-family: 'Poppins';
src: url(Poppins-Thin.ttf) format('truetype');
font-weight: 100;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-ExtraLight.ttf) format('truetype');
font-weight: 200;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Light.ttf) format('truetype');
font-weight: 300;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Regular.ttf) format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Medium.ttf) format('truetype');
font-weight: 500;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-SemiBold.ttf) format('truetype');
font-weight: 600;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-Bold.ttf) format('truetype');
font-weight: 700;
}
@font-face {
font-family: 'Poppins';
src: url(Poppins-ExtraBold.ttf) format('truetype');
font-weight: 800;
}

View File

@ -1,7 +1,7 @@
@import '../fonts/icon-fonts/iconfont.css';
@import './markdown.scss';
@import './scrollbar.scss';
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import '../fonts/icon-fonts/iconfont.css';
@import '../fonts/Poppins/Poppins.css';
:root {
--color-white: #ffffff;
@ -46,7 +46,7 @@
--topic-list-width: 260px;
--settings-width: var(--assistants-width);
--status-bar-height: 40px;
--input-bar-height: 130px;
--input-bar-height: 115px;
}
body[theme-mode='light'] {
@ -83,8 +83,8 @@ body[theme-mode='light'] {
--color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
--color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
--navbar-background: rgba(255, 255, 255, 0.6);
--sidebar-background: rgba(255, 255, 255, 0.6);
--navbar-background: rgba(255, 255, 255, 0.75);
--sidebar-background: rgba(255, 255, 255, 0.75);
}
*,

View File

@ -141,7 +141,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
return (
<Container id="inputbar" style={{ minHeight: expended ? '100%' : 'var(--input-bar-height)' }}>
<Toolbar>
<Toolbar onDoubleClick={() => setExpend(!expended)}>
<ToolbarMenu>
<Tooltip placement="top" title={t('assistant.input.new_chat')} arrow>
<ToolbarButton type="text" onClick={addNewTopic}>
@ -171,6 +171,17 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
<ControlOutlined />
</ToolbarButton>
</Tooltip>
<Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow>
<ToolbarButton type="text" onClick={() => setExpend(!expended)}>
{expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</ToolbarButton>
</Tooltip>
{showInputEstimatedTokens && (
<TextCount>
<HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T
{`${inputTokenCount}/${estimateTokenCount}`}
</TextCount>
)}
</ToolbarMenu>
<ToolbarMenu>
{generating && (
@ -180,11 +191,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
</ToolbarButton>
</Tooltip>
)}
<Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow>
<ToolbarButton type="text" onClick={() => setExpend(!expended)}>
{expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</ToolbarButton>
</Tooltip>
<SendMessageButton sendMessage={sendMessage} />
</ToolbarMenu>
</Toolbar>
<Textarea
@ -198,15 +205,6 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
ref={inputRef}
styles={{ textarea: { paddingLeft: 0 } }}
/>
<Footer>
{showInputEstimatedTokens && (
<TextCount>
<HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T
{`${inputTokenCount}/${estimateTokenCount}`}
</TextCount>
)}
<SendMessageButton sendMessage={sendMessage} />
</Footer>
</Container>
)
}
@ -215,9 +213,7 @@ const Container = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: var(--input-bar-height);
border-top: 0.5px solid var(--color-border);
padding: 5px 10px;
transition: all 0.3s ease;
position: relative;
`
@ -227,14 +223,14 @@ const Textarea = styled(TextArea)`
border-radius: 0;
display: flex;
flex: 1;
margin-left: 6px;
margin: 0 15px 5px 15px;
`
const Toolbar = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5px;
padding: 3px 10px;
`
const ToolbarMenu = styled.div`
@ -263,19 +259,11 @@ const ToolbarButton = styled(Button)`
}
`
const Footer = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-bottom: 5px;
`
const TextCount = styled.div`
font-size: 11px;
color: var(--color-text-3);
z-index: 10;
padding: 2px 8px;
padding: 2px;
border-top-left-radius: 7px;
user-select: none;
margin-right: 10px;

View File

@ -3,7 +3,7 @@ import { Dropdown, MenuProps } from 'antd'
import { FC } from 'react'
import { ArrowUpOutlined, EnterOutlined } from '@ant-design/icons'
import { useTranslation } from 'react-i18next'
import { DownOutlined } from '@ant-design/icons'
import { SendOutlined } from '@ant-design/icons'
interface Props {
sendMessage: () => void
@ -30,12 +30,15 @@ const SendMessageButton: FC<Props> = ({ sendMessage }) => {
return (
<Dropdown.Button
size="small"
onClick={sendMessage}
trigger={['click']}
placement="topLeft"
arrow
menu={{ items: sendSettingItems, selectable: true, defaultSelectedKeys: [sendMessageShortcut] }}
icon={<DownOutlined />}
style={{ width: 'auto' }}>
{t('assistant.input.send')}
<SendOutlined />
</Dropdown.Button>
)
}