From b5409f0c0f0b51f7826d8833992f014bccd2d8e3 Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 14 Jan 2025 10:38:55 -0500
Subject: [PATCH] - Made the reorder icon having indicator and move it outside
 the search box

---
 .../TabPanels/Status/Card/Server/index.jsx    | 60 +++++++++++--------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/Client/src/Components/TabPanels/Status/Card/Server/index.jsx b/Client/src/Components/TabPanels/Status/Card/Server/index.jsx
index e49d347aa..e4a701d60 100644
--- a/Client/src/Components/TabPanels/Status/Card/Server/index.jsx
+++ b/Client/src/Components/TabPanels/Status/Card/Server/index.jsx
@@ -1,42 +1,50 @@
-import { ServerStartAdornment, ServerEndAdornment } from "../../../../Inputs/TextInput/Adornments";
+import {
+	ServerEndAdornment,
+} from "../../../../Inputs/TextInput/Adornments";
 import Search from "../../../../Inputs/Search";
-import {useState} from "react"
-
+import { useState } from "react";
+import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
+import { Stack, IconButton } from "@mui/material";
+import React from "react";
 /**
- * 
+ *
  * @param {*} id The Id of the Server component
  * @param {*} removeItem The function used to remove a single server
  * @param {*} onChange The Change handler function to handle when the server value is changed
  * used to update the server(monitor) lists
  * @param {*} monitors The server monitors options
  * @param {*} value the option label of the server/monitor, namely the monitor name field
- * @returns 
+ * @returns
  */
-const Server = ({ id, removeItem, onChange, monitors, value }) => {
-	const [search, setSearch] = useState("");	
+const Server = (props) => {
+	const [search, setSearch] = useState("");
 	const handleSearch = (val) => {
 		setSearch(val);
 	};
 	return (
-		<Search
-			id={id}
-			multiple={false}
-			isAdorned={false}
-			options={monitors ? monitors : []}
-			filteredBy="name"
-			inputValue={search}
-			value={value}		
-			startAdornment={<ServerStartAdornment />}
-			endAdornment={
-				<ServerEndAdornment
-					id={id}
-					removeItem={removeItem}
-				/>
-			}
-			handleInputChange={handleSearch}
-			handleChange={onChange}
-		/>
+		<Stack direction={"row"}>
+			<IconButton>
+				<ReorderRoundedIcon />
+			</IconButton>
+			<Search
+				id={props.id}
+				multiple={false}
+				isAdorned={false}
+				options={props.monitors ? props.monitors : []}
+				filteredBy="name"
+				inputValue={search}
+				value={props.value}
+				endAdornment={
+					<ServerEndAdornment
+						id={props.id}
+						removeItem={props.removeItem}
+					/>
+				}
+				handleInputChange={handleSearch}
+				handleChange={props.onChange}
+			/>
+		</Stack>
 	);
 };
 
-export default Server;
\ No newline at end of file
+export default Server;