Merge remote-tracking branch 'upstream/master' into feat/registration-flow

Client/src/Pages/Login/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
@@ -9,6 +9,24 @@ import Google from "../../assets/Images/Google.png";
 import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 
 const Login = () => {
+  const idMap = {
+    "login-email-input": "email",
+    "login-password-input": "password",
+  };
+
+  const [form, setForm] = useState({
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({
+      ...form,
+      [fieldName]: e.target.value,
+    });
+  };
+
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
@@ -25,15 +43,17 @@ const Login = () => {
         <div className="login-form-v3-spacing" />
         <div className="login-form-inputs">
           <EmailTextField
+            onChange={handleInput}
             error={false}
             placeholder="Enter your email"
             id="login-email-input"
           />
           <div className="login-form-v2-spacing" />
           <PasswordTextField
+            onChange={handleInput}
             error={false}
             placeholder="Password"
-            id="login-email-input"
+            id="login-password-input"
           />
         </div>
         <div className="login-form-v3-spacing" />

Client/src/Pages/Monitors/index.css

@@ -0,0 +1,24 @@
+.monitors {
+  width: 70vw;
+  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);
+}

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 (
-        <div>Monitors</div>
-    )
-}
+  return (
+    <div className="monitors">
+      <div className="monitors-bar">
+        <div className="monitors-bar-title">Hello, Jackie</div>
+        <Button
+          level="primary"
+          label="Create new monitor"
+          sx={{ padding: "10px 20px", fontSize: "13px" }}
+        />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <div className="monitors-stats">
+        <ServerStatus title="Up" value="4" state="up" />
+        <ServerStatus title="Down" value="0" state="down" />
+        <ServerStatus title="Paused" value="0" state="pause" />
+      </div>
+      <div className="monitors-gaps-medium"></div>
+      <CurrentMonitors />
+    </div>
+  );
+};
 
-export default Monitors
+export default Monitors;