diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 6f64d45da..9afecbbf8 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -20,7 +20,7 @@ function App() { return ( <> - }> + {/* }> } /> } /> } /> @@ -38,7 +38,8 @@ function App() { } - /> + /> */} + } /> ); diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css index 9126d9b3b..f42ae2801 100644 --- a/Client/src/Components/Charts/Servers/serverStatus.css +++ b/Client/src/Components/Charts/Servers/serverStatus.css @@ -13,8 +13,6 @@ .server-status-tile { width: 230px; - margin: var(--spacing-general-0); - margin-left: 10px; padding: var(--spacing-general-1); border: 1px solid var(--color-border-0); border-radius: var(--border-radius-0); diff --git a/Client/src/Components/CurrentMonitors/index.css b/Client/src/Components/CurrentMonitors/index.css new file mode 100644 index 000000000..7b00b1cec --- /dev/null +++ b/Client/src/Components/CurrentMonitors/index.css @@ -0,0 +1,15 @@ +.current-monitors { + border: 1px solid #eaecf0; + padding: 40px; + border-radius: 4px; +} + +.current-monitors-title-holder { + display: flex; +} + +.current-monitors-title { + font-size: 1rem; + font-weight: bold; + margin-right: var(); +} diff --git a/Client/src/Components/CurrentMonitors/index.jsx b/Client/src/Components/CurrentMonitors/index.jsx new file mode 100644 index 000000000..bf376c832 --- /dev/null +++ b/Client/src/Components/CurrentMonitors/index.jsx @@ -0,0 +1,18 @@ +import "./index.css"; +import React from "react"; + +const CurrentMonitors = () => { + return ( +
+
+
+
Current monitors
+
5
+
+
+
+
+ ); +}; + +export default CurrentMonitors; diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index e69de29bb..eab5fbb7d 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -0,0 +1,25 @@ +.monitors { + width: 90vw; + min-height: 100vh; + padding: 4vw; +} + +.monitors-bar { + display: flex; + justify-content: space-between; + align-items: center; +} + +.monitors-bar-title { + font-size: 24px; + font-weight: 700; +} + +.monitors-stats { + display: flex; + justify-content: space-between; +} + +.monitors-gaps-medium { + height: var(--env-var-spacing-2); +} diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 6d4e3d59d..0c0555d5a 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -1,9 +1,30 @@ -import React from 'react' +import Button from "../../Components/Button"; +import ServerStatus from "../../Components/Charts/Servers/ServerStatus"; +import CurrentMonitors from "../../Components/CurrentMonitors"; +import "./index.css"; +import React from "react"; const Monitors = () => { - return ( -
Monitors
- ) -} + return ( +
+
+
Hello, Jackie
+
+
+
+ + + +
+
+ +
+ ); +}; -export default Monitors \ No newline at end of file +export default Monitors;