From 7dc51f3bbcaaf2ed008b2d9bfa6d6c2dec662dd9 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 22 Jul 2024 13:48:26 -0400
Subject: [PATCH] Removed unnecessary flex

---
 Client/src/Pages/Monitors/Configure/index.css |   6 +
 Client/src/Pages/Monitors/Configure/index.jsx | 348 +++++++++---------
 Client/src/Pages/Settings/index.css           |   6 +
 Client/src/Pages/Settings/index.jsx           | 184 +++++----
 4 files changed, 276 insertions(+), 268 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index b9b8792b4..693e9f804 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -64,3 +64,9 @@
 .MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset {
   border-color: var(--env-var-color-29);
 }
+
+.configure-monitor-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--env-var-spacing-4);
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 8f0047206..c6ce13f89 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -144,185 +144,183 @@ const Configure = () => {
         }}
       />
       <form className="configure-monitor-form" noValidate spellCheck="false">
-        <Stack gap={theme.gap.xl}>
-          <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
-            {config?.status ? <GreenCheck /> : <RedCheck />}
-            <Box>
-              <Typography component="h1" sx={{ lineHeight: 1 }}>
-                {config?.url.replace(/^https?:\/\//, "") || "..."}
-              </Typography>
-              <Typography mt={theme.gap.small}>
-                <Typography
-                  component="span"
-                  sx={{
-                    color: config?.status
-                      ? "var(--env-var-color-17)"
-                      : "var(--env-var-color-24)",
-                  }}
-                >
-                  Your site is {config?.status ? "up" : "down"}.
-                </Typography>{" "}
-                Checking every {formatDurationRounded(config?.interval)}. Last
-                time checked{" "}
-                {formatDurationRounded(getLastChecked(config?.checks))} ago.
-              </Typography>
-            </Box>
-            <Stack
-              direction="row"
-              gap={theme.gap.medium}
+        <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+          {config?.status ? <GreenCheck /> : <RedCheck />}
+          <Box>
+            <Typography component="h1" sx={{ lineHeight: 1 }}>
+              {config?.url.replace(/^https?:\/\//, "") || "..."}
+            </Typography>
+            <Typography mt={theme.gap.small}>
+              <Typography
+                component="span"
+                sx={{
+                  color: config?.status
+                    ? "var(--env-var-color-17)"
+                    : "var(--env-var-color-24)",
+                }}
+              >
+                Your site is {config?.status ? "up" : "down"}.
+              </Typography>{" "}
+              Checking every {formatDurationRounded(config?.interval)}. Last
+              time checked{" "}
+              {formatDurationRounded(getLastChecked(config?.checks))} ago.
+            </Typography>
+          </Box>
+          <Stack
+            direction="row"
+            gap={theme.gap.medium}
+            sx={{
+              ml: "auto",
+              alignSelf: "flex-end",
+            }}
+          >
+            <Button
+              level="tertiary"
+              label="Pause"
+              img={<PauseCircleOutlineIcon />}
               sx={{
-                ml: "auto",
-                alignSelf: "flex-end",
+                backgroundColor: "#f4f4f4",
+                pl: theme.gap.small,
+                pr: theme.gap.medium,
+                "& svg": {
+                  pr: theme.gap.xs,
+                },
               }}
-            >
-              <Button
-                level="tertiary"
-                label="Pause"
-                img={<PauseCircleOutlineIcon />}
-                sx={{
-                  backgroundColor: "#f4f4f4",
-                  pl: theme.gap.small,
-                  pr: theme.gap.medium,
-                  "& svg": {
-                    pr: theme.gap.xs,
-                  },
-                }}
-              />
-              <Button
-                level="error"
-                label="Remove"
-                sx={{
-                  boxShadow: "none",
-                  px: theme.gap.ml,
-                }}
-              />
-            </Stack>
-          </Stack>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
-            <Box>
-              <Typography component="h2">General settings</Typography>
-              <Typography component="p" sx={{ mt: theme.gap.small }}>
-                Here you can select the URL of the host, together with the type
-                of monitor.
-              </Typography>
-            </Box>
-            <Stack gap={theme.gap.xl}>
-              <Field
-                type="url"
-                id="monitor-url"
-                label="URL to monitor"
-                placeholder="google.com"
-                value={monitor?.url || ""}
-                onChange={handleChange}
-                error={errors["url"]}
-              />
-              <Field
-                type="text"
-                id="monitor-name"
-                label="Friendly name"
-                isOptional={true}
-                placeholder="Google"
-                value={monitor?.name || ""}
-                onChange={handleChange}
-                error={errors["name"]}
-              />
-            </Stack>
-          </Stack>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
-            <Box>
-              <Typography component="h2">Checks to perform</Typography>
-              <Typography component="p" sx={{ mt: theme.gap.small }}>
-                You can always add or remove checks after adding your site.
-              </Typography>
-            </Box>
-            <Stack gap={theme.gap.xl}>
-              <RadioButton
-                id="monitor-checks-http"
-                title="HTTP/website monitoring"
-                desc="Use HTTP(s) to monitor your website or API endpoint."
-                size="small"
-                value="http"
-                checked={monitor?.type === "http"}
-                onChange={handleChange}
-              />
-              <RadioButton
-                id="monitor-checks-ping"
-                title="Ping monitoring"
-                desc="Check whether your server is available or not."
-                size="small"
-                value="ping"
-                checked={monitor?.type === "ping"}
-                onChange={handleChange}
-              />
-              <Box className="error-container">
-                {errors["type"] ? (
-                  <Typography component="p" className="input-error">
-                    {errors["type"]}
-                  </Typography>
-                ) : (
-                  ""
-                )}
-              </Box>
-            </Stack>
-          </Stack>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
-            <Box>
-              <Typography component="h2">Advanced settings</Typography>
-            </Box>
-            <Stack gap={theme.gap.xl}>
-              <Box>
-                <Typography component="p" mb={theme.gap.small}>
-                  Check frequency
-                </Typography>
-                <Select
-                  id="monitor-interval"
-                  value={monitor?.interval || 1}
-                  inputProps={{ id: "monitor-interval-select" }}
-                  MenuProps={{
-                    PaperProps: {
-                      style: {
-                        marginTop: "10px",
-                      },
-                    },
-                  }}
-                  IconComponent={KeyboardArrowDownIcon}
-                  onChange={(event) => handleChange(event, "interval")}
-                >
-                  {frequencies.map((freq) => (
-                    <MenuItem
-                      key={`port-${freq}`}
-                      value={freq}
-                      disableRipple
-                      sx={{
-                        fontSize: "13px",
-                        borderRadius: `${theme.shape.borderRadius}px`,
-                        margin: theme.gap.xs,
-                      }}
-                    >
-                      {freq} {freq === 1 ? "minute" : "minutes"}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </Box>
-            </Stack>
+            />
+            <Button
+              level="error"
+              label="Remove"
+              sx={{
+                boxShadow: "none",
+                px: theme.gap.ml,
+              }}
+            />
           </Stack>
         </Stack>
-        <Stack direction="row" justifyContent="flex-end" mt={theme.gap.xl}>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">General settings</Typography>
+            <Typography component="p" sx={{ mt: theme.gap.small }}>
+              Here you can select the URL of the host, together with the type of
+              monitor.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <Field
+              type="url"
+              id="monitor-url"
+              label="URL to monitor"
+              placeholder="google.com"
+              value={monitor?.url || ""}
+              onChange={handleChange}
+              error={errors["url"]}
+            />
+            <Field
+              type="text"
+              id="monitor-name"
+              label="Friendly name"
+              isOptional={true}
+              placeholder="Google"
+              value={monitor?.name || ""}
+              onChange={handleChange}
+              error={errors["name"]}
+            />
+          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Checks to perform</Typography>
+            <Typography component="p" sx={{ mt: theme.gap.small }}>
+              You can always add or remove checks after adding your site.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <RadioButton
+              id="monitor-checks-http"
+              title="HTTP/website monitoring"
+              desc="Use HTTP(s) to monitor your website or API endpoint."
+              size="small"
+              value="http"
+              checked={monitor?.type === "http"}
+              onChange={handleChange}
+            />
+            <RadioButton
+              id="monitor-checks-ping"
+              title="Ping monitoring"
+              desc="Check whether your server is available or not."
+              size="small"
+              value="ping"
+              checked={monitor?.type === "ping"}
+              onChange={handleChange}
+            />
+            <Box className="error-container">
+              {errors["type"] ? (
+                <Typography component="p" className="input-error">
+                  {errors["type"]}
+                </Typography>
+              ) : (
+                ""
+              )}
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h2">Advanced settings</Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <Box>
+              <Typography component="p" mb={theme.gap.small}>
+                Check frequency
+              </Typography>
+              <Select
+                id="monitor-interval"
+                value={monitor?.interval || 1}
+                inputProps={{ id: "monitor-interval-select" }}
+                MenuProps={{
+                  PaperProps: {
+                    style: {
+                      marginTop: "10px",
+                    },
+                  },
+                }}
+                IconComponent={KeyboardArrowDownIcon}
+                onChange={(event) => handleChange(event, "interval")}
+              >
+                {frequencies.map((freq) => (
+                  <MenuItem
+                    key={`port-${freq}`}
+                    value={freq}
+                    disableRipple
+                    sx={{
+                      fontSize: "13px",
+                      borderRadius: `${theme.shape.borderRadius}px`,
+                      margin: theme.gap.xs,
+                    }}
+                  >
+                    {freq} {freq === 1 ? "minute" : "minutes"}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Box>
+          </Stack>
+        </Stack>
+        <Stack direction="row" justifyContent="flex-end">
           <Button level="primary" label="Save" sx={{ px: theme.gap.ml }} />
         </Stack>
       </form>
diff --git a/Client/src/Pages/Settings/index.css b/Client/src/Pages/Settings/index.css
index 738757f77..11a61b7d2 100644
--- a/Client/src/Pages/Settings/index.css
+++ b/Client/src/Pages/Settings/index.css
@@ -34,3 +34,9 @@
 .settings .config-box .MuiStack-root {
   flex: 1;
 }
+
+.settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--env-var-spacing-4);
+}
\ No newline at end of file
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index c2ef71666..40cca5e66 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -19,104 +19,102 @@ const Settings = () => {
       }}
     >
       <form className="settings-form" noValidate spellCheck="false">
-        <Stack gap={theme.gap.xl}>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
-            <Box>
-              <Typography component="h1">General Settings</Typography>
-              <Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
-                <Typography component="span">Display timezone</Typography>- The
-                timezone of the dashboard you publicly display.
-              </Typography>
-              <Typography>
-                <Typography component="span">Server timezone</Typography>- The
-                timezone of your server.
-              </Typography>
-            </Box>
-            <Stack gap={theme.gap.xl}>
-              {/* TODO - build select component */}
-              <Field
-                type="text"
-                id="display-timezone"
-                label="Display timezone"
-                placeholder="America / Toronto"
-                value=""
-                onChange={() => console.log("Disabled")}
-              />
-              <Field
-                type="text"
-                id="server-timezone"
-                label="Server timezone"
-                placeholder="America / Toronto"
-                value=""
-                onChange={() => console.log("Disabled")}
-              />
-            </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h1">General Settings</Typography>
+            <Typography sx={{ mt: theme.gap.small, mb: theme.gap.xs }}>
+              <Typography component="span">Display timezone</Typography>- The
+              timezone of the dashboard you publicly display.
+            </Typography>
+            <Typography>
+              <Typography component="span">Server timezone</Typography>- The
+              timezone of your server.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            {/* TODO - build select component */}
+            <Field
+              type="text"
+              id="display-timezone"
+              label="Display timezone"
+              placeholder="America / Toronto"
+              value=""
+              onChange={() => console.log("Disabled")}
+            />
+            <Field
+              type="text"
+              id="server-timezone"
+              label="Server timezone"
+              placeholder="America / Toronto"
+              value=""
+              onChange={() => console.log("Disabled")}
+            />
           </Stack>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h1">History and monitoring</Typography>
+            <Typography sx={{ mt: theme.gap.small }}>
+              Define here for how long you want to keep the data. You can also
+              remove all past data.
+            </Typography>
+          </Box>
+          <Stack gap={theme.gap.xl}>
+            <Field
+              type="text"
+              id="history-monitoring"
+              label="The days you want to keep monitoring history."
+              isOptional={true}
+              optionalLabel="0 for infinite"
+              placeholder="90"
+              value=""
+              onChange={() => console.log("Disabled")}
+            />
             <Box>
-              <Typography component="h1">History and monitoring</Typography>
-              <Typography sx={{ mt: theme.gap.small }}>
-                Define here for how long you want to keep the data. You can also
-                remove all past data.
-              </Typography>
-            </Box>
-            <Stack gap={theme.gap.xl}>
-              <Field
-                type="text"
-                id="history-monitoring"
-                label="The days you want to keep monitoring history."
-                isOptional={true}
-                optionalLabel="0 for infinite"
-                placeholder="90"
-                value=""
-                onChange={() => console.log("Disabled")}
-              />
-              <Box>
-                <Typography>Clear all stats. This is irreversible.</Typography>
-                <Button
-                  level="error"
-                  label="Clear all stats"
-                  sx={{ mt: theme.gap.small }}
-                />
-              </Box>
-            </Stack>
-          </Stack>
-          <Stack
-            className="config-box"
-            direction="row"
-            justifyContent="space-between"
-            gap={theme.gap.xxl}
-          >
-            <Box>
-              <Typography component="h1">About</Typography>
-            </Box>
-            <Box>
-              <Typography component="h2">Uptime Genie v1.0.0</Typography>
-              <Typography
-                sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
-              >
-                Developed by Bluewave Labs.
-              </Typography>
-              <Link
-                level="secondary"
-                url="https://github.com/bluewave-labs"
-                label="https://github.com/bluewave-labs"
+              <Typography>Clear all stats. This is irreversible.</Typography>
+              <Button
+                level="error"
+                label="Clear all stats"
+                sx={{ mt: theme.gap.small }}
               />
             </Box>
           </Stack>
-          <Stack direction="row" justifyContent="flex-end">
-            <Button level="primary" label="Save" />
-          </Stack>
+        </Stack>
+        <Stack
+          className="config-box"
+          direction="row"
+          justifyContent="space-between"
+          gap={theme.gap.xxl}
+        >
+          <Box>
+            <Typography component="h1">About</Typography>
+          </Box>
+          <Box>
+            <Typography component="h2">Uptime Genie v1.0.0</Typography>
+            <Typography
+              sx={{ mt: theme.gap.xs, mb: theme.gap.medium, opacity: 0.6 }}
+            >
+              Developed by Bluewave Labs.
+            </Typography>
+            <Link
+              level="secondary"
+              url="https://github.com/bluewave-labs"
+              label="https://github.com/bluewave-labs"
+            />
+          </Box>
+        </Stack>
+        <Stack direction="row" justifyContent="flex-end">
+          <Button level="primary" label="Save" />
         </Stack>
       </form>
     </Box>