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