[AFP-137] 💄 Fix searchbar styling [@svalencia]

src/components/Nav.tsx

@@ -15,37 +15,41 @@ const Nav = () => {
     <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full"  src={manager.imageUrl} alt="profile"/> : null
 
     return (
-        <Flex className="header">
-            <Box className="left-nav">
-                <Link to="/"><Image src={Logo} alt="project logo"height="90%" width="80%" /></Link>
-            </Box>
-            <Spacer />
-            <Flex className="right-nav">
-                <Link className="nav-link" to="/account">{userIcon}</Link>
-                <Button
-                    p={2}
-                    size="sm"
-                    color="white"
-                    fontWeight="bold"
-                    borderRadius="sm"
-                    bgGradient="linear(to-r, teal.500,blue.500)"
-                    _hover={{
-                        bgGradient: "linear(to-r, blue.500, yellow.500)",
-                    }}
-                    ><Link to="/orders">Orders</Link></Button>
-                <Button
-                    p={2}
-                    size="sm"
-                    color="white"
-                    fontWeight="bold"
-                    borderRadius="sm"
-                    bgGradient="linear(to-r, teal.500,blue.500)"
-                    _hover={{
-                        bgGradient: "linear(to-r, blue.500, yellow.500)",
-                    }}
-                    onClick={handleAuth}>{authLinkText}</Button>
+        <div >
+            <Flex className="header">
+                {/* <Box className="left-nav">
+                    <Link to="/"><Image src={Logo} alt="project logo"height="90%" width="80%" /></Link>
+                </Box> */}
+                <Spacer />
+                <Flex className="right-nav">
+                    <Link className="nav-link" to="/account">{userIcon}</Link>
+                    <button
+                        // p={2}
+                        // size="sm"
+                        // color="white"
+                        // fontWeight="bold"
+                        // borderRadius="sm"
+                        // bgGradient="linear(to-r, teal.500,blue.500)"
+                        // _hover={{
+                        //     bgGradient: "linear(to-r, blue.500, yellow.500)",
+                        // }}
+                        >
+                        <Link to="/orders">Orders</Link></button>
+                    <button
+                        // p={2}
+                        // size="sm"
+                        // color="white"
+                        // fontWeight="bold"
+                        // borderRadius="sm"
+                        // bgGradient="linear(to-r, teal.500,blue.500)"
+                        // _hover={{
+                        //     bgGradient: "linear(to-r, blue.500, yellow.500)",
+                        // }}
+                    
+                        onClick={handleAuth}>{authLinkText}</button>
+                </Flex>
             </Flex>
-        </Flex>
+        </div>
     )
 }
 

src/index.css

@@ -49,7 +49,9 @@ body {
 /* header */
 
 .header {
-  border-bottom: 1.5px solid orange;
+  /* border-bottom: 1.5px solid orange; */
+  background-color: rgba(216, 130, 32, 0.404);
+  
 }
 
 
@@ -88,14 +90,35 @@ body {
 
 
 .search-div {
-  padding: 5px;
+  padding: 2px;
 }
 
-.searchbar {
-  width: 300px;
+/* .searchbar {
+  width: 220px;
   margin-right: 150px;
   border: 1px solid blue;
   border-radius: 2px;
+} */
+
+
+
+input[type=text] {
+  width: 220px;
+  border: 2px solid rgb(184, 180, 180);
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+  background-image: url('./img/searchicon.png');
+  background-size: 18px;
+  background-position: 10px 8px; 
+  background-repeat: no-repeat;
+  padding: 12px 20px 12px 40px;
+  transition: width 0.4s ease-in-out;
+  height: 35px;
+}
+
+input[type=text]:focus {
+  width: 100%;
 }
 
 
@@ -145,8 +168,7 @@ body {
 .footer {
   padding: 5px 0;
   /* border-top: 1.5px solid orange; */
-  background-color: rgba(253, 165, 0, 0.404);
+  background-color: rgba(216, 130, 32, 0.404);
   flex-shrink: 0;
   font-size: 12px;
-  /* height: 50px; */
 }
\ No newline at end of file

src/pages/OrderIndexPage.tsx

@@ -61,7 +61,7 @@ const OrderIndexPage = () => {
                 <div className="search-div">
                     <input 
                         type="text" 
-                        placeholder="  Search by Order Number"
+                        placeholder="Search Order Number"
                         value={searchInput} 
                         onChange={handleChange} 
                         onKeyDown={handleChange}