From 937832c07c32bfe3444a3fd90e4ba76e4bfebd78 Mon Sep 17 00:00:00 2001
From: Jiwoo Ahn <ilp_rincipe@naver.com>
Date: Sat, 18 May 2024 20:15:37 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Style:=20hover=20transition=20on?=
 =?UTF-8?q?=20search=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aeye/app/(nav)/home/styleSearch.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/aeye/app/(nav)/home/styleSearch.ts b/aeye/app/(nav)/home/styleSearch.ts
index d61f640..9b1b0d1 100644
--- a/aeye/app/(nav)/home/styleSearch.ts
+++ b/aeye/app/(nav)/home/styleSearch.ts
@@ -4,13 +4,21 @@ import { styled, alpha } from "@mui/material/styles";
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
   borderRadius: theme.shape.borderRadius,
-  backgroundColor: "info.main",
-  "&:hover": {
-    backgroundColor: alpha(theme.palette.common.white, 0.25),
-  },
+  backgroundColor: theme.palette.info.main, // Use theme.palette.info.main
   marginLeft: 0,
   width: "100%",
   marginBottom: theme.spacing(2),
+  transition: theme.transitions.create([
+    "background-color",
+    "box-shadow",
+    "border",
+  ]),
+  border: `1px solid transparent`, // Default border
+  "&:hover, &:focus-within": {
+    backgroundColor: theme.palette.info.light,
+    boxShadow: `0 0 0 1px ${alpha(theme.palette.info.contrastText, 0.5)}`,
+    border: `1px solid ${theme.palette.info.main}`,
+  },
   [theme.breakpoints.up("sm")]: {
     marginLeft: theme.spacing(1),
     width: "auto",
@@ -28,11 +36,10 @@ const SearchIconWrapper = styled("div")(({ theme }) => ({
 }));
 
 const StyledInputBase = styled(InputBase)(({ theme }) => ({
-  color: "inherit",
+  color: theme.palette.info.contrastText, // Use theme.palette.info.contrastText for text color
   width: "100%",
   "& .MuiInputBase-input": {
     padding: theme.spacing(1, 1, 1, 0),
-    // vertical padding + font size from searchIcon
     paddingLeft: `calc(1em + ${theme.spacing(4)})`,
     transition: theme.transitions.create("width"),
     [theme.breakpoints.up("sm")]: {