feat(TranslatePage, ant.scss): add ChevronDown icon to select components and update dropdown styles

- Introduced ChevronDown icon to various Select components in TranslatePage for improved visual consistency.
- Updated ant.scss to add a border style to the select dropdown for enhanced UI clarity.
This commit is contained in:
Teo 2025-06-14 00:41:02 +08:00
parent 36fa3af9e9
commit 3544c40d9a
2 changed files with 9 additions and 1 deletions

View File

@ -215,6 +215,9 @@
border: none;
}
}
.ant-select-dropdown {
border: 0.5px solid var(--color-border);
}
.ant-popover {
.ant-popover-inner {

View File

@ -23,7 +23,7 @@ import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
import dayjs from 'dayjs'
import { useLiveQuery } from 'dexie-react-hooks'
import { find, isEmpty, sortBy } from 'lodash'
import { HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
import { ChevronDown, HelpCircle, Settings2, TriangleAlert } from 'lucide-react'
import { FC, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
@ -120,6 +120,7 @@ const TranslateSettings: FC<{
}}
options={selectOptions}
showSearch
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
</HStack>
{!translateModel && (
@ -174,6 +175,7 @@ const TranslateSettings: FC<{
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
<span></span>
<Select
@ -191,6 +193,7 @@ const TranslateSettings: FC<{
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
</Flex>
)}
@ -433,6 +436,7 @@ const TranslatePage: FC = () => {
</Space.Compact>
)
}))}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
)
}
@ -529,6 +533,7 @@ const TranslatePage: FC = () => {
)
}))
]}
suffixIcon={<ChevronDown strokeWidth={1.5} size={16} color="var(--color-text-3)" />}
/>
<Button
type="text"