From 659ad1731d91c6d7f97a032b609fa7e5814fc2bd Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Wed, 29 Nov 2023 13:53:17 +0800
Subject: [PATCH] feat(HomeScreen): Update search input styles

- Added border properties to the search input field in the HomeScreen
component to improve the visual appearance.
- Changed the background color of the search input field in dark mode to
match the theme.
- Removed unnecessary border properties from the search input field in
the Navbar component.
---
 frontend/src/components/Navbar.tsx                 | 8 ++++----
 frontend/src/screens/HomeScreen/HomeScreen.tsx     | 4 ++--
 frontend/src/screens/SearchScreen/SearchScreen.tsx | 7 ++++---
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a5d2367..7a449e4 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -19,7 +19,7 @@ const Navbar: React.FC<Props> = () => {
 
   const navbarBg = isHome ? '' : 'bg-white dark:bg-black dark:bg-transparent-20'
   const navbarBorder = isHome
-    ? ''
+    ? 'border-b border-transparent'
     : 'border-b border-gray-200 dark:border-white dark:border-opacity-10'
 
   return (
@@ -43,14 +43,14 @@ const Navbar: React.FC<Props> = () => {
         )}
         {!isHome && (
           <div className="flex-1 hidden sm:flex">
-            <section className="relative w-full md:w-1/2">
+            <section className="relative w-full md:w-1/2 rounded-md border border-black border-opacity-10 dark:border-white dark:border-opacity-20">
               <input
                 type="text"
                 name="keywords"
                 value={input}
                 onChange={e => setInput(e.target.value)}
                 placeholder="Search"
-                className="w-full px-4 py-2 outline-none rounded-md bg-transparent border border-black border-opacity-30 dark:border-white dark:border-opacity-30"
+                className="w-full px-4 py-2 outline-none rounded-md bg-transparent"
                 onKeyDown={e => e.key === 'Enter' && onSearch()}
                 autoComplete="off"
                 required
@@ -59,7 +59,7 @@ const Navbar: React.FC<Props> = () => {
                 type="button"
                 onClick={onSearch}
                 className="absolute top-0 bottom-0 right-0 w-12 flex flex-row justify-center items-center cursor-pointer opacity-70">
-                <i className="iconfont icon-search text-white text-1xl mr-1"></i>
+                <i className="iconfont icon-search opacity-70 text-black dark:text-white text-1xl mr-1"></i>
               </button>
             </section>
           </div>
diff --git a/frontend/src/screens/HomeScreen/HomeScreen.tsx b/frontend/src/screens/HomeScreen/HomeScreen.tsx
index 04cb0ff..ffd5852 100644
--- a/frontend/src/screens/HomeScreen/HomeScreen.tsx
+++ b/frontend/src/screens/HomeScreen/HomeScreen.tsx
@@ -21,14 +21,14 @@ const HomeScreen: React.FC = () => {
           <span className="text-violet-700">N</span>
           <span>OTE</span>
         </h1>
-        <section className="relative mb-10 w-full border border-white border-opacity-30 rounded-md">
+        <section className="relative mb-10 w-full border border-black border-opacity-20 dark:border-white dark:border-opacity-30 rounded-md">
           <input
             type="text"
             name="keywords"
             value={keywords}
             onChange={e => setKeywords(e.target.value)}
             placeholder="Search Notes"
-            className="px-4 py-3 w-full outline-none bg-white border border-gray-300 dark:bg-zinc-800 dark:border-transparent rounded-md"
+            className="px-4 py-3 w-full outline-none bg-white dark:bg-zinc-800 rounded-md"
             onKeyDown={e => e.key === 'Enter' && onSearch()}
             autoComplete="off"
             autoFocus
diff --git a/frontend/src/screens/SearchScreen/SearchScreen.tsx b/frontend/src/screens/SearchScreen/SearchScreen.tsx
index 9536650..eda0b42 100644
--- a/frontend/src/screens/SearchScreen/SearchScreen.tsx
+++ b/frontend/src/screens/SearchScreen/SearchScreen.tsx
@@ -1,4 +1,4 @@
-import { Link, useSearchParams } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import React, { useEffect, useState } from 'react'
 import { displayName, runAsyncFunction } from '@/utils'
 import Navbar from '@/components/Navbar.tsx'
@@ -27,7 +27,7 @@ const SearchScreen: React.FC = () => {
   const [notes, setNotes] = useState<NoteType[]>(cachedSearchResult.get(keywords) || [])
   const [empty, setEmpty] = useState(false)
   const [loading, setLoading] = useState(false)
-
+  const navigate = useNavigate()
   useEffect(() => {
     runAsyncFunction(async () => {
       setLoading(true)
@@ -78,7 +78,8 @@ const SearchScreen: React.FC = () => {
                 dangerouslySetInnerHTML={{ __html: displayName(note.name) }}></h4>
             </Link>
             <p
-              className="font-medium opacity-80 line-clamp-5 search-content"
+              className="font-medium opacity-80 line-clamp-5 search-content cursor-pointer"
+              onClick={() => navigate(`/notes/${note.id}`)}
               dangerouslySetInnerHTML={{ __html: note.content }}></p>
             <span className="text-xs text-opacity-50">
               {dayjs(note.created_at).format('YYYY/MM/DD HH:mm')}