Monitors:hosts, with some bugs and challenges to fix

Client/src/Components/TextFields/Search/SearchTextField.jsx

@@ -0,0 +1,14 @@
+import "./searchTextField.css";
+import React from "react";
+import Search from "../../../assets/Images/Icon-search-gray.png";
+
+const SearchTextField = () => {
+  return (
+    <div className="search-field-holder">
+      <img className="search-field-icon" src={Search} alt="Search" />
+      <input className="search-field" type="text" placeholder="Search" />
+    </div>
+  );
+};
+
+export default SearchTextField;

Client/src/Components/TextFields/Search/searchTextField.css

@@ -0,0 +1,26 @@
+.search-field-holder {
+  display: flex;
+  align-items: center;
+  width: 180px;
+  height: 9px;
+  padding: var(--env-var-spacing-1);
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.search-field-icon {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: calc(var(--env-var-img-width-2) / 2);
+}
+
+.search-field {
+  width: 150px;
+  border: none;
+  outline: none;
+  font-size: var(--env-var-font-size-large);
+}
+
+.search-field::placeholder {
+  color: var(--env-var-color-14);
+}