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; border: none;
} }
} }
.ant-select-dropdown {
border: 0.5px solid var(--color-border);
}
.ant-popover { .ant-popover {
.ant-popover-inner { .ant-popover-inner {

View File

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