Merge pull request #413 from bluewave-labs/feat/form-styling-refactor

Refactored form structure and added fix to optional field in create monitor

Client/src/Components/ConfigBox/index.css

@@ -1,15 +0,0 @@
-.config-box {
-  display: flex;
-  padding: var(--env-var-spacing-4) 50px;
-  padding-bottom: 60px;
-  border: 1px solid var(--env-var-color-16);
-  border-radius: var(--env-var-radius-1);
-  justify-content: space-between;
-}
-.config-box>.MuiStack-root{
-  flex-direction: column;
-  flex: 1;
-}
-.config-box>.MuiStack-root:first-of-type{
-  margin-right: var(--env-var-spacing-3);
-}

Client/src/Components/ConfigBox/index.jsx

@@ -1,13 +0,0 @@
-import "./index.css";
-import React from "react";
-
-const ConfigBox = ({ leftLayout, rightLayout }) => {
-  return (
-    <div className="config-box">
-      {leftLayout}
-      {rightLayout}
-    </div>
-  );
-};
-
-export default ConfigBox;

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);
+}

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>

Client/src/Pages/Monitors/CreateMonitor/index.css

@@ -1,49 +1,45 @@
-.create-monitor-form h1.MuiTypography-root {
+.create-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
   color: var(--env-var-color-1);
 }
-.create-monitor-form h1.MuiTypography-root,
-.create-monitor-form h2.MuiTypography-root {
+.create-monitor h1.MuiTypography-root,
+.create-monitor h2.MuiTypography-root {
   font-weight: 600;
 }
-.create-monitor-form h2.MuiTypography-root {
+.create-monitor h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
-.create-monitor-form p.MuiTypography-root,
-.create-monitor-form button.MuiButtonBase-root,
+.create-monitor p.MuiTypography-root,
+.create-monitor button.MuiButtonBase-root,
 #monitor-frequencies {
   font-size: var(--env-var-font-size-medium);
 }
-.create-monitor-form h2.MuiTypography-root,
-.create-monitor-form h6.MuiTypography-root,
-.create-monitor-form p.MuiTypography-root,
+.create-monitor h2.MuiTypography-root,
+.create-monitor h6.MuiTypography-root,
+.create-monitor p.MuiTypography-root,
 #monitor-frequencies {
   color: var(--env-var-color-2);
 }
-.create-monitor-form h6.MuiTypography-root {
+.create-monitor h6.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
   opacity: 0.8;
 }
-
-.create-monitor-form .error-container {
+.create-monitor button.MuiButtonBase-root {
+  height: 34px;
+}
+.create-monitor .error-container {
   position: relative;
 }
-.create-monitor-form .error-container p.MuiTypography-root.input-error {
+.create-monitor .error-container p.MuiTypography-root.input-error {
   color: var(--env-var-color-24);
   opacity: 0.8;
   position: absolute;
   top: 0;
 }
-
-/* for testing, will remove later */
-/* .config-box:has(.error-container):has(.input-error) {
-  border-color: var(--env-var-color-24);
-} */
-
-.create-monitor-form .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
+.create-monitor .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
   padding: var(--env-var-spacing-1);
 }
-.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) {
+.create-monitor .MuiInputBase-root:has(#monitor-frequencies) {
   min-width: 300px;
   width: 100%;
   height: 34px;
@@ -51,26 +47,32 @@
   border-radius: var(--env-var-radius-1);
   overflow: hidden;
 }
-.create-monitor-form .MuiInputBase-root:has(#monitor-frequencies) fieldset {
+.create-monitor .MuiInputBase-root:has(#monitor-frequencies) fieldset {
   outline: none;
   border: none;
 }
-.create-monitor-form .MuiStack-root:has(span.MuiTypography-root.input-error) {
+.create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }
-.create-monitor-form span.MuiTypography-root.input-error {
+.create-monitor span.MuiTypography-root.input-error {
   position: absolute;
   top: 100%;
 }
-
-.monitors-gaps-medium {
-  height: var(--env-var-spacing-2);
+.create-monitor .config-box {
+  padding: var(--env-var-spacing-4) 50px;
+  padding-bottom: 60px;
+  border: 1px solid var(--env-var-color-16);
+  border-radius: var(--env-var-radius-1);
+  flex-direction: row;
+  gap: var(--env-var-spacing-4);
 }
-.monitors-gaps-small-plus {
-  height: var(--env-var-spacing-1-plus);
+.create-monitor .config-box .MuiBox-root,
+.create-monitor .config-box .MuiStack-root {
+  flex: 1;
 }
 
-.monitors-create-button-holder {
+.create-monitor-form {
   display: flex;
-  justify-content: end;
-}
+  flex-direction: column;
+  gap: var(--env-var-spacing-4);
+}

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -1,5 +1,4 @@
 import "./index.css";
-import ConfigBox from "../../../Components/ConfigBox";
 import React, { useState } from "react";
 import RadioButton from "../../../Components/RadioButton";
 import Button from "../../../Components/Button";
@@ -84,11 +83,14 @@ const CreateMonitor = () => {
     event.preventDefault();
     //obj to submit
     let monitor = {
-      ...generalSettings,
       url:
         checks.type === "http"
           ? "https://" + generalSettings.url
           : generalSettings.url,
+      name:
+        generalSettings.name === ""
+          ? generalSettings.url
+          : generalSettings.name,
       ...checks,
     };
 
@@ -126,14 +128,10 @@ const CreateMonitor = () => {
   const frequencies = [1, 2, 3, 4, 5];
 
   return (
-    <form
-      className="create-monitor-form"
-      onSubmit={handleCreateMonitor}
-      noValidate
-      spellCheck="false"
+    <div
+      className="create-monitor"
       style={{
         maxWidth: "1200px",
-        flex: 1,
         padding: `${theme.content.pY} ${theme.content.pX}`,
       }}
     >
@@ -151,19 +149,21 @@ const CreateMonitor = () => {
           },
         }}
       />
-      <Typography component="h1">Create new monitor</Typography>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+      <form
+        className="create-monitor-form"
+        onSubmit={handleCreateMonitor}
+        noValidate
+        spellCheck="false"
+      >
+        <Typography component="h1">Create new monitor</Typography>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">General settings</Typography>
-            <Typography component="p">
+            <Typography component="p" mt={theme.gap.small}>
               Here you can select the URL of the host, together with the type of
               monitor.
             </Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.xl}>
             <Field
               type="url"
@@ -189,20 +189,14 @@ const CreateMonitor = () => {
               error={errors["name"]}
             />
           </Stack>
-        }
-      />
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+        </Stack>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">Checks to perform</Typography>
-            <Typography component="p">
+            <Typography component="p" mt={theme.gap.small}>
               You can always add or remove checks after adding your site.
             </Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.large}>
             <RadioButton
               id="monitor-checks-http"
@@ -231,7 +225,6 @@ const CreateMonitor = () => {
               checked={checks.type === "port"}
               onChange={(event) => handleChange(event, "type", setChecks)}
             />
-            <div className="monitors-gaps-small-plus"></div>
             <div className="monitors-dropdown-holder">
               <Select
                 id="monitor-ports"
@@ -259,11 +252,9 @@ const CreateMonitor = () => {
               )}
             </Box>
           </Stack>
-        }
-      />
-      {/* TODO */}
-      {/* <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
+        </Stack>
+        {/* TODO */}
+        {/* 
       <ConfigBox
         leftLayout={
           <div className="config-box-desc">
@@ -278,7 +269,6 @@ const CreateMonitor = () => {
             <div className="incident-notif-config-title">
               When there is a new incident,
             </div>
-            <div className="monitors-gaps-medium"></div>
             <div className="incident-notif-config-checks">
               <CustomizableCheckBox
                 id="monitor-notify-sms"
@@ -286,21 +276,18 @@ const CreateMonitor = () => {
                 isChecked={notifications.viaSms}
                 handleChange={() => handleCheck("viaSms", setNotifications)}
               />
-              <div className="monitors-gaps-medium"></div>
               <CustomizableCheckBox
                 id="monitor-notify-email"
                 title="Notify via email (to current email address)"
                 isChecked={notifications.viaEmail}
                 handleChange={() => handleCheck("viaEmail", setNotifications)}
               />
-              <div className="monitors-gaps-medium"></div>
               <CustomizableCheckBox
                 id="monitor-notify-other"
                 title="Notify via email (to another email address below)"
                 isChecked={notifications.viaOther}
                 handleChange={() => handleCheck("viaOther", setNotifications)}
               />
-              <div className="monitors-gaps-small-plus"></div>
               <div className="monitors-dropdown-holder">
                 <FlexibileTextField
                   id="monitor-notify-other-email"
@@ -316,15 +303,10 @@ const CreateMonitor = () => {
           </div>
         }
       /> */}
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
-      <ConfigBox
-        leftLayout={
-          <Stack gap={theme.gap.small}>
+        <Stack className="config-box">
+          <Box>
             <Typography component="h2">Advanced settings</Typography>
-          </Stack>
-        }
-        rightLayout={
+          </Box>
           <Stack gap={theme.gap.large}>
             {/* TODO - refactor select component */}
             <Box>
@@ -371,7 +353,6 @@ const CreateMonitor = () => {
                 handleChange(event, "retries", setAdvancedSettings)
               }
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-settings-codes"
               title="Accepted status codes"
@@ -381,7 +362,6 @@ const CreateMonitor = () => {
                 handleChange(event, "codes", setAdvancedSettings)
               }
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-settings-redirects"
               title="Maximum redirects"
@@ -392,11 +372,9 @@ const CreateMonitor = () => {
               }
             /> */}
           </Stack>
-        }
-      />
-      {/* TODO */}
-      {/* <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-medium"></div>
+        </Stack>
+        {/* TODO */}
+        {/*
       <ConfigBox
         leftLayout={
           <div className="config-box-desc">
@@ -411,21 +389,18 @@ const CreateMonitor = () => {
               isChecked={proxy.enabled}
               handleChange={() => handleCheck("enabled", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-protocol"
               title="Proxy protocol"
               value={proxy.protocol}
               onChange={(event) => handleChange(event, "protocol", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-address"
               title="Proxy address"
               value={proxy.address}
               onChange={(event) => handleChange(event, "address", setProxy)}
             />
-            <div className="monitors-gaps-medium"></div>
             <FlexibileTextField
               id="monitor-proxy-port"
               title="Proxy port"
@@ -435,19 +410,17 @@ const CreateMonitor = () => {
           </div>
         }
       /> */}
-      <div className="monitors-gaps-medium"></div>
-      <div className="monitors-gaps-small"></div>
-      <div className="monitors-create-button-holder">
-        <Button
-          id="create-new-monitor-btn"
-          level="primary"
-          label="Create new monitor"
-          sx={{ width: "210px", fontSize: "var(--env-var-font-size-medium)" }}
-          onClick={handleCreateMonitor}
-          disabled={Object.keys(errors).length !== 0 && true}
-        />
-      </div>
-    </form>
+        <Stack direction="row" justifyContent="flex-end">
+          <Button
+            id="create-new-monitor-btn"
+            level="primary"
+            label="Create new monitor"
+            onClick={handleCreateMonitor}
+            disabled={Object.keys(errors).length !== 0 && true}
+          />
+        </Stack>
+      </form>
+    </div>
   );
 };
 

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);
+}

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>