fix: sidebar search :focus border on Safari

* chore: add placeholder on sidebar search
* chore: modify input:focus border-color to adapting to global theme
This commit is contained in:
pacmandoh 2024-02-05 01:10:33 +08:00 committed by Hk-Gosuto
parent f76e47931f
commit 666c80456a
5 changed files with 17 additions and 3 deletions

View File

@ -65,12 +65,11 @@
.sidebar-search-bar {
display: flex;
flex-direction: column;
margin-bottom: 10px;
margin-bottom: 15px;
.sidebar-search-bar-input {
position: relative;
width: 100%;
margin-bottom: 5px;
.search-icon {
position: absolute;
@ -90,12 +89,17 @@
height: 16px;
}
input {
.search-input {
text-align: left;
max-width: 100%;
width: inherit;
padding-left: 35px;
padding-right: 35px;
outline: none;
}
.search-input:focus {
border: 1px solid var(--primary);
}
}

View File

@ -21,6 +21,11 @@
flex-grow: 1;
max-width: 100%;
min-width: 0;
outline: none;
}
.search-bar:focus {
border: 1px solid var(--primary);
}
.plugin-filter-lang {

View File

@ -16,6 +16,7 @@ import CloseIcon from "../icons/close.svg";
import { Markdown } from "./markdown";
import { useNavigate } from "react-router-dom";
import { Path } from "@/app/constant";
import Locale from "../locales";
interface SearchResult {
sessionId: string;
@ -209,12 +210,14 @@ function SearchBarComponent(
<div className={styles["sidebar-search-bar-input"]}>
<SearchIcon className={styles["search-icon"]} />
<input
className={styles["search-input"]}
ref={inputRef}
type="text"
value={input}
onChange={(e) => handleChange(e.target.value)}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder={Locale.Home.Search}
/>
{input.trim().length > 0 && (
<IconButton

View File

@ -125,6 +125,7 @@ const cn = {
DeleteChat: "确认删除选中的对话?",
DeleteToast: "已删除会话",
Revert: "撤销",
Search: "搜索聊天",
},
Settings: {
Title: "设置",

View File

@ -128,6 +128,7 @@ const en: LocaleType = {
DeleteChat: "Confirm to delete the selected conversation?",
DeleteToast: "Chat Deleted",
Revert: "Revert",
Search: "Search Chat",
},
Settings: {
Title: "Settings",