From b32b1f8e60b5c0d90e8d3a7a5d5dd0115ebafa46 Mon Sep 17 00:00:00 2001
From: Burhan <2019cs626@student.uet.edu.pk>
Date: Fri, 5 Nov 2021 23:57:42 +0500
Subject: [PATCH] Added effects on reset button

---
 pages/Components/Navbar.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/Components/Navbar.js b/pages/Components/Navbar.js
index 30f0a2a..4382070 100644
--- a/pages/Components/Navbar.js
+++ b/pages/Components/Navbar.js
@@ -58,17 +58,17 @@ const Navbar = () => {
                     <div className='flex items-center gap-2 pr-2 border-r-2 md:border-none relative'>
                         <FaSearch />
                         <input type="text" placeholder="Job title, keywords, or company" className="input focus:shadow-none" value={jobTitle} onChange={(e) => { setJobTitle(e.target.value) }} />
-                        {jobTitle && <p className=' absolute text-2xl cursor-pointer right-3' onClick={() => { setJobTitle('') }} >×</p>}
+                        {jobTitle && <p className='absolute cursor-pointer right-3 hover:bg-red-600 w-6 text-lg h-6 flex items-center justify-center rounded-full hover:text-white' onClick={() => { setJobTitle('') }} >×</p>}
                     </div>
                     <div className='flex lg:hidden items-center gap-2 pr-2 border-r-2 relative'>
                         <FaMapMarkerAlt />
                         <input type="text" placeholder="City or postcode" className="input focus:shadow-none" value={cityName} onChange={(e) => { setCityName(e.target.value) }} />
-                        {cityName && <p className=' absolute text-2xl cursor-pointer right-3' onClick={() => { setCityName('') }} >×</p>}
+                        {cityName && <p className='absolute cursor-pointer right-3 hover:bg-red-600 w-6 text-lg h-6 flex items-center justify-center rounded-full hover:text-white' onClick={() => { setCityName('') }} >×</p>}
                     </div>
                     <div className='flex lg:hidden items-center gap-2 pr-2 relative'>
                         <FaBriefcase />
                         <input type="text" placeholder="All Categories" className="input focus:shadow-none" value={category} onChange={(e) => { setCategory(e.target.value) }} />
-                        {category && <p className=' absolute text-2xl cursor-pointer right-2' onClick={() => { setCategory('') }} >×</p>}
+                        {category && <p className='absolute cursor-pointer right-0 hover:bg-red-600 w-6 text-lg h-6 flex items-center justify-center rounded-full hover:text-white' onClick={() => { setCategory('') }} >×</p>}
                     </div>
                     <div>
                         <button type='submit' className="btn border-none pr-6 pl-6 hover:bg-red-700 capitalize bg-red-600">Find Jobs</button>