initial refactor

Client/src/Components/CurrentMonitors/index.css

@@ -1,117 +0,0 @@
-.current-monitors {
-  border: 1px solid #eaecf0;
-  padding: 40px;
-  border-radius: 4px;
-}
-
-.current-monitors-title-holder {
-  display: flex;
-}
-
-.current-monitors-bar {
-  display: flex;
-  justify-content: space-between;
-}
-
-.current-monitors-title {
-  font-size: 1rem;
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
-}
-
-.current-monitors-counter {
-  width: var(--env-var-spacing-2);
-  height: var(--env-var-spacing-2);
-  background-color: var(--env-var-color-15);
-  border: 1px solid var(--env-var-color-6);
-  border-radius: 50%;
-  text-align: center;
-  align-items: center;
-}
-
-.monitors-v-gaping {
-  height: var(--env-var-spacing-3);
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-}
-
-.current-monitors-table {
-  width: 100%;
-  text-align: left;
-  border-collapse: collapse;
-  border: 1px solid var(--env-var-color-16);
-  border-radius: var(--env-var-radius-1);
-}
-
-.current-monitors-table th,
-.current-monitors-table td {
-  border: 1px solid var(--env-var-color-16);
-  border-left: none;
-  border-right: none;
-  padding: 8px;
-}
-
-.theader-row {
-  background-color: var(--env-var-color-13);
-  color: var(--env-var-color-2);
-  font-weight: 500;
-}
-
-.theader-row td {
-  padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
-  font-size: var(--env-var-font-size-medium);
-}
-
-.host-list-item {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.host-list-item-open {
-  width: var(--env-var-img-width-2);
-  height: var(--env-var-img-width-2);
-  margin-right: 8px;
-}
-
-.host-list-item-name {
-  font-size: var(--env-var-font-size-medium);
-  font-weight: bold;
-  margin-right: var(--env-var-spacing-1);
-}
-
-.host-list-item-precentage {
-  font-size: var(--env-var-font-size-medium);
-}
-
-.tbody-row td {
-  padding: var(--env-var-spacing-2) var(--env-var-img-width-2);
-}
-
-.host-status-box {
-  display: flex;
-  width: fit-content;
-  border: 1px solid var(--env-var-color-4);
-  border-radius: var(--env-var-radius-2);
-  align-items: center;
-  padding: calc(var(--env-var-spacing-1) / 2);
-}
-
-.host-status-box-circle {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  margin-right: calc(var(--env-var-spacing-1) / 2);
-}
-
-.host-actions {
-  margin: auto;
-  cursor: pointer;
-}
-
-.tbody-row-cell.actions-cell {
-  padding-left: 30px;
-}

Client/src/Components/CurrentMonitors/index.jsx

@@ -1,38 +0,0 @@
-import SearchTextField from "../TextFields/Search/SearchTextField";
-import "./index.css";
-import HostsTable from "../HostsTable";
-import Pagination from "../Pagination";
-import PropTypes from "prop-types";
-
-/**
- * CurrentMonitors displays the current status of monitor
- *
- * @component
- * @param {Array<Monitor>} monitors - An array of monitor objects to be displayed.
- */
-
-const CurrentMonitors = ({ monitors }) => {
-  return (
-    <div className="current-monitors">
-      <div className="current-monitors-bar">
-        <div className="current-monitors-title-holder">
-          <div className="current-monitors-title">Current monitors</div>
-          <div className="current-monitors-counter">{monitors.length}</div>
-        </div>
-        <div className="current-monitors-search-bar">
-          <SearchTextField />
-        </div>
-      </div>
-      <div className="monitors-v-gaping"></div>
-      <HostsTable monitors={monitors} />
-      <div className="monitors-v-gaping"></div>
-      <Pagination />
-    </div>
-  );
-};
-
-CurrentMonitors.propTypes = {
-  monitors: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-export default CurrentMonitors;