Merge pull request #402 from bluewave-labs/feat/settings-page

Settings page

Client/src/Components/Inputs/Field/index.jsx

@@ -21,6 +21,7 @@ import { useState } from "react";
  * @param {string} [props.label] - Label for the input field.
  * @param {boolean} [props.isRequired] - Indicates if the field is required, will display a red asterisk.
  * @param {boolean} [props.isOptional] - Indicates if the field is optional, will display optional text.
+ * @param {string} [props.optionalLabel] - Optional label for the input field.
  * @param {boolean} [props.hasCopy] - Indicates if the field supports copying.
  * @param {string} [props.autoComplete] - Autocomplete value for the input field.
  * @param {string} [props.placeholder] - Placeholder text for the input field.
@@ -36,6 +37,7 @@ const Field = ({
   label,
   isRequired,
   isOptional,
+  optionalLabel,
   hasCopy,
   autoComplete,
   placeholder,
@@ -61,7 +63,13 @@ const Field = ({
         <Typography component="h3">
           {label}
           {isRequired ? <span className="field-required">*</span> : ""}
-          {isOptional ? <span className="field-optional">(optional)</span> : ""}
+          {isOptional ? (
+            <span className="field-optional">
+              {optionalLabel || "(optional)"}
+            </span>
+          ) : (
+            ""
+          )}
         </Typography>
       )}
       <TextField
@@ -146,6 +154,7 @@ Field.propTypes = {
   label: PropTypes.string,
   isRequired: PropTypes.bool,
   isOptional: PropTypes.bool,
+  optionalLabel: PropTypes.string,
   hasCopy: PropTypes.bool,
   autoComplete: PropTypes.string,
   placeholder: PropTypes.string,

Client/src/Components/Link/index.jsx

@@ -15,13 +15,21 @@ const Link = ({ level, label, url }) => {
 
   const levelConfig = {
     primary: {},
-    secondary: {},
+    secondary: {
+      color: theme.palette.otherColors.bluishGray,
+      sx: {
+        ":hover": {
+          color: theme.palette.otherColors.bluishGray,
+        },
+      },
+    },
     tertiary: {
       color: theme.palette.tertiary.main,
       sx: {
         textDecoration: "underline",
         textDecorationStyle: "dashed",
         textDecorationColor: theme.palette.primary.main,
+        textUnderlineOffset: "1px",
         ":hover": {
           color: theme.palette.tertiary.main,
           textDecorationColor: theme.palette.primary.main,
@@ -33,7 +41,13 @@ const Link = ({ level, label, url }) => {
   };
   const { sx, color } = levelConfig[level];
   return (
-    <MuiLink href={url} sx={sx} color={color}>
+    <MuiLink
+      href={url}
+      sx={{ width: "fit-content", ...sx }}
+      color={color}
+      target="_blank"
+      rel="noreferrer"
+    >
       {label}
     </MuiLink>
   );

Client/src/Pages/Settings/index.css

@@ -0,0 +1,36 @@
+.settings a.MuiTypography-root,
+.settings h2.MuiTypography-root,
+.settings span.MuiTypography-root,
+.settings button,
+.settings p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.settings h1.MuiTypography-root,
+.settings h2.MuiTypography-root,
+.settings p.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
+.settings h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+}
+.settings h1.MuiTypography-root,
+.settings h2.MuiTypography-root {
+  font-weight: 600;
+}
+.settings button {
+  height: 34px;
+}
+.settings span.MuiTypography-root {
+  opacity: 0.6;
+  margin-right: 4px;
+}
+.settings .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);
+}
+.settings .config-box .MuiBox-root,
+.settings .config-box .MuiStack-root {
+  flex: 1;
+}

Client/src/Pages/Settings/index.jsx

@@ -1,7 +1,126 @@
-import React from "react";
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Typography } from "@mui/material";
+import Button from "../../Components/Button";
+
+import "./index.css";
+import Field from "../../Components/Inputs/Field";
+import Link from "../../Components/Link";
 
 const Settings = () => {
-  return <div>Settings</div>;
+  const theme = useTheme();
+
+  return (
+    <Box
+      className="settings"
+      style={{
+        maxWidth: "1200px",
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+        paddingBottom: 0,
+      }}
+    >
+      <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>
+          <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>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"
+              />
+            </Box>
+          </Stack>
+          <Stack direction="row" justifyContent="flex-end">
+            <Button level="primary" label="Save" />
+          </Stack>
+        </Stack>
+      </form>
+    </Box>
+  );
 };
 
 export default Settings;