Fix search bar styling

src/components/Nav.tsx

@@ -17,7 +17,7 @@ const Nav = () => {
     return (
         <Flex className="header">
             <Box className="left-nav">
-                <Link to="/"><Image src={Logo} alt="project logo" height="90%" width="80%" /></Link>
+                <Link to="/"><Image src={Logo} alt="project logo"height="90%" width="80%" /></Link>
             </Box>
             <Spacer />
             <Flex className="right-nav">
@@ -41,7 +41,7 @@ const Nav = () => {
                     borderRadius="sm"
                     bgGradient="linear(to-r, teal.500,blue.500)"
                     _hover={{
-                        bgGradient: "linear(to-r, yellow.500, blue.500)",
+                        bgGradient: "linear(to-r, blue.500, yellow.500)",
                     }}
                     onClick={handleAuth}>{authLinkText}</Button>
             </Flex>

src/index.css

@@ -62,9 +62,30 @@ code {
 
 /* body */
 
+.body-div {
+  padding-top: 50px;
+}
+
+
+.search-div {
+  padding: 5px;
+}
+
+.searchbar {
+  width: 300px;
+  margin-right: 150px;
+  border: 1px solid blue;
+  border-radius: 2px;
+}
+
+
+.searchbar:focus {
+  outline: none;
+}
+
 .table-div {
   padding: 150px;
-  padding-top: 80px;
+  padding-top: 20px;
 }
 
 .index-table {
@@ -72,6 +93,7 @@ code {
   padding: 0 10px 15px 10px;
   border-radius: 2px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  padding-top: 10px;
 }
 
 .show-div {
@@ -92,6 +114,11 @@ code {
 }
 
 
+.account {
+  padding: 250px 0;
+}
+
+
 
 /* footer */
 

src/pages/AccountPage.tsx

@@ -3,7 +3,7 @@ import {useGoogleAuth} from 'hooks'
 const AccountPage = () => {
     const { manager } = useGoogleAuth();
     return (
-        <Center>
+        <Center className="account">
             <Box>
                 <Box>
                     <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />

src/pages/OrderIndexPage.tsx

@@ -43,7 +43,7 @@ const OrderIndexPage = () => {
     useEffect(() => {
         const newArray: Order[] = []
             for (const ele of allOrders) {
-                if (ele.id.includes(searchInput)) {
+                if (ele.id.includes(searchInput.toLowerCase())) {
                     newArray.push(ele)
                 }
             }
@@ -56,31 +56,35 @@ const OrderIndexPage = () => {
     }
 
     return (
-        <div className="table-div">
-            <Input 
-                type="text" 
-                placeholder="Search by Order Number"
-                focusBorderColor="telegram.400"
-                value={searchInput} 
-                onChange={handleChange} 
-                onKeyDown={handleChange}
-                >
-            </Input>
+        <div className="body-div">
+            <div className="table-div">
+                <div className="search-div">
+                    <input 
+                        type="text" 
+                        placeholder="  Search by Order Number"
+                        value={searchInput} 
+                        onChange={handleChange} 
+                        onKeyDown={handleChange}
+                        className="searchbar"
+                        >
+                    </input>
+                </div>
             <br/>
-            <div className="index-table">
-                <Table variant="striped" colorScheme="messenger" size="sm">
-                    <Thead>
-                        <Tr className="table-header">
-                            <Th fontSize="26px" color="gray">Order number</Th>
-                            <Th fontSize="26px" color="gray">Order Date</Th>
-                            <Th fontSize="26px" color="gray">Order Status</Th>
-                        </Tr>
-                    </Thead>
-                    <Tbody>
-                        { orderDetailsArr }
-                    </Tbody>
-                </Table>
-            </div>
+                <div className="index-table">
+                    <Table variant="striped" colorScheme="messenger" size="sm">
+                        <Thead>
+                            <Tr className="table-header">
+                                <Th fontSize="26px" color="gray">Order number</Th>
+                                <Th fontSize="26px" color="gray">Order Date</Th>
+                                <Th fontSize="26px" color="gray">Order Status</Th>
+                            </Tr>
+                        </Thead>
+                        <Tbody>
+                            { orderDetailsArr }
+                        </Tbody>
+                    </Table>
+                </div>
+        </div>
         </div>
     )
 }