back to hosts table from new monitor

Client/src/Components/TextFields/Flexibile/FlexibileTextField.jsx

@@ -0,0 +1,17 @@
+import "./flexibileTextField.css";
+import React from "react";
+
+const FlexibileTextField = ({ title, type, placeholder }) => {
+  return (
+    <div className="flexibile-textfield">
+      <div className="flexibile-textfield-title">{title}</div>
+      <input
+        type={type}
+        className="flexibile-textfield-input"
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default FlexibileTextField;

Client/src/Components/TextFields/Flexibile/flexibileTextField.css

@@ -0,0 +1,22 @@
+.flexibile-textfield-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.flexibile-textfield-input {
+  width: 292.8px;
+  height: 6.8px;
+  padding: var(--env-var-spacing-1);
+  margin-top: 10px;
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.flexibile-textfield-input:focus {
+  outline: none;
+}
+
+.flexibile-textfield-input::placeholder {
+  color: var(--env-var-color-25);
+  font-size: var(--env-var-font-size-medium);
+}

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

@@ -18,7 +18,7 @@
   width: 150px;
   border: none;
   outline: none;
-  font-size: var(--env-var-font-size-large);
+  font-size: var(--env-var-font-size-medium);
 }
 
 .search-field::placeholder {