From f13b64a496537e52a9949fe98576ccfcfc181a68 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 13:39:58 -0700
Subject: [PATCH 1/3] Added start and end icon props to buttons to allow for
 images, made prop type for level more specific, added onClick prop so a
 function can be passed to onClick

---
 Client/src/Components/Button/index.jsx | 19 +++++++++++---
 Client/src/Pages/Home/index.jsx        | 36 +++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index f357e1dd2..034a1823f 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -24,22 +24,35 @@ const levelConfig = {
  * @typedef {Object} Props
  * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
  * @property {string} label - The label of the button
+ * @property {React.ReactNode} [startIcon] - Icon prepended to the label
+ * @property {React.ReactNode} [endIcon] - Icon appended to the button label
  * @property {boolean} [disabled] - Whether the button is disabled
+ * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - The click handler of the button
  */
 
-const Button = ({ level, label, disabled }) => {
+const Button = ({ level, label, disabled, startIcon, endIcon, onClick }) => {
   const { variant, color } = levelConfig[level];
   return (
-    <MuiButton variant={variant} color={color} disabled={disabled}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      onClick={onClick}
+    >
       {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
-  level: PropTypes.string.isRequired,
+  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
   label: PropTypes.string.isRequired,
+  startIcon: PropTypes.node,
+  endIcon: PropTypes.node,
   disabled: PropTypes.bool,
+  onClick: PropTypes.func,
 };
 
 export default Button;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 849489ff8..d0e2eebbc 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
+import SettingsIcon from "@mui/icons-material/Settings";
 
 const Home = () => {
   return (
@@ -13,10 +14,24 @@ const Home = () => {
       >
         <h4>Buttons</h4>
         <div>
-          <Button level="primary" label="Primary" />
-          <Button level="secondary" label="Secondary" />
-          <Button level="tertiary" label="Tertiary" />
-          <Button level="error" label="Error" />
+          <Button
+            level="primary"
+            label="Primary"
+            onClick={() => {
+              alert("Primary");
+            }}
+          />
+          <Button
+            level="secondary"
+            label="Secondary"
+            onClick={() => alert("Secondary")}
+          />
+          <Button
+            level="tertiary"
+            label="Tertiary"
+            onClick={() => alert("Tertiary")}
+          />
+          <Button level="error" label="Error" onClick={() => alert("Error")} />
         </div>
         <h4>Disabled Buttons</h4>
         <div>
@@ -25,6 +40,19 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
+        <h4>Image Button</h4>
+        <div>
+          <Button
+            level="tertiary"
+            label="Configure"
+            startIcon={<SettingsIcon />}
+          />
+          <Button
+            level="tertiary"
+            label="Configure"
+            endIcon={<SettingsIcon />}
+          />
+        </div>
       </div>
     </>
   );

From 731cb8424480649084a2d4d8ac4bcaa3e138e101 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 14:58:26 -0700
Subject: [PATCH 2/3] Added a link component, currently only have tertiary
 style

---
 Client/src/Components/Link/index.css |  0
 Client/src/Components/Link/index.jsx | 47 ++++++++++++++++++++++++++++
 Client/src/Pages/Home/index.jsx      |  8 +++++
 Client/src/Utils/Theme.js            |  2 ++
 4 files changed, 57 insertions(+)
 create mode 100644 Client/src/Components/Link/index.css
 create mode 100644 Client/src/Components/Link/index.jsx

diff --git a/Client/src/Components/Link/index.css b/Client/src/Components/Link/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Link/index.jsx b/Client/src/Components/Link/index.jsx
new file mode 100644
index 000000000..e8d26a7c7
--- /dev/null
+++ b/Client/src/Components/Link/index.jsx
@@ -0,0 +1,47 @@
+import { Link as MuiLink, useTheme } from "@mui/material";
+import PropTypes from "prop-types";
+
+const Link = ({ level, label, url }) => {
+  const theme = useTheme();
+
+  const levelConfig = {
+    primary: {},
+    secondary: {},
+    tertiary: {
+      color: theme.palette.tertiary.main,
+      sx: {
+        textDecoration: "underline",
+        textDecorationStyle: "dashed",
+        textDecorationColor: theme.palette.primary.main,
+        ":hover": {
+          color: theme.palette.tertiary.main,
+          textDecorationColor: theme.palette.primary.main,
+          backgroundColor: theme.palette.tertiary.linkHover,
+        },
+      },
+    },
+    error: {},
+  };
+
+  /**
+   * @typedef {Object} Props
+   * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the link
+   * @property {string} label - The label of the link
+   * @property {string} url - The URL of the link
+   */
+
+  const { sx, color } = levelConfig[level];
+  return (
+    <MuiLink href={url} sx={sx} color={color}>
+      {label}
+    </MuiLink>
+  );
+};
+
+Link.propTypes = {
+  url: PropTypes.string.isRequired,
+  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
+  label: PropTypes.string.isRequired,
+};
+
+export default Link;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 849489ff8..f9a7cf14d 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
+import Link from "../../Components/Link";
 
 const Home = () => {
   return (
@@ -25,6 +26,13 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
+        <div>
+          <Link
+            level="tertiary"
+            label="Tertiary Link"
+            url={"https://www.google.com"}
+          />
+        </div>
       </div>
     </>
   );
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 5ad9df5c8..60e6da3ad 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -3,6 +3,7 @@ import { createTheme } from "@mui/material";
 // Colors for MUI theme
 const secondaryMain = "#475467";
 const tertiaryMain = "#475467";
+const tertiaryLinkHover = "#eff8ff";
 
 const theme = createTheme({
   palette: {
@@ -11,6 +12,7 @@ const theme = createTheme({
     },
     tertiary: {
       main: tertiaryMain,
+      linkHover: tertiaryLinkHover,
     },
   },
 });

From d40920c43a95a63a25e07d56bd4e396cb0eff20d Mon Sep 17 00:00:00 2001
From: Veysel <66980512+veyselboybay@users.noreply.github.com>
Date: Tue, 7 May 2024 14:40:33 -0400
Subject: [PATCH 3/3] =?UTF-8?q?Revert=20"Added=20start=20and=20end=20icon?=
 =?UTF-8?q?=20props=20to=20buttons=20to=20allow=20for=20images,=20made=20p?=
 =?UTF-8?q?=E2=80=A6"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Client/src/Components/Button/index.jsx | 19 +++-----------
 Client/src/Pages/Home/index.jsx        | 36 +++-----------------------
 2 files changed, 7 insertions(+), 48 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 034a1823f..f357e1dd2 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -24,35 +24,22 @@ const levelConfig = {
  * @typedef {Object} Props
  * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
  * @property {string} label - The label of the button
- * @property {React.ReactNode} [startIcon] - Icon prepended to the label
- * @property {React.ReactNode} [endIcon] - Icon appended to the button label
  * @property {boolean} [disabled] - Whether the button is disabled
- * @property {(event: React.MouseEvent<HTMLButtonElement>) => void} [onClick] - The click handler of the button
  */
 
-const Button = ({ level, label, disabled, startIcon, endIcon, onClick }) => {
+const Button = ({ level, label, disabled }) => {
   const { variant, color } = levelConfig[level];
   return (
-    <MuiButton
-      variant={variant}
-      color={color}
-      disabled={disabled}
-      startIcon={startIcon}
-      endIcon={endIcon}
-      onClick={onClick}
-    >
+    <MuiButton variant={variant} color={color} disabled={disabled}>
       {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
-  level: PropTypes.oneOf(["primary", "secondary", "tertiary", "error"]),
+  level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  startIcon: PropTypes.node,
-  endIcon: PropTypes.node,
   disabled: PropTypes.bool,
-  onClick: PropTypes.func,
 };
 
 export default Button;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index d0e2eebbc..849489ff8 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,7 +2,6 @@ import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
-import SettingsIcon from "@mui/icons-material/Settings";
 
 const Home = () => {
   return (
@@ -14,24 +13,10 @@ const Home = () => {
       >
         <h4>Buttons</h4>
         <div>
-          <Button
-            level="primary"
-            label="Primary"
-            onClick={() => {
-              alert("Primary");
-            }}
-          />
-          <Button
-            level="secondary"
-            label="Secondary"
-            onClick={() => alert("Secondary")}
-          />
-          <Button
-            level="tertiary"
-            label="Tertiary"
-            onClick={() => alert("Tertiary")}
-          />
-          <Button level="error" label="Error" onClick={() => alert("Error")} />
+          <Button level="primary" label="Primary" />
+          <Button level="secondary" label="Secondary" />
+          <Button level="tertiary" label="Tertiary" />
+          <Button level="error" label="Error" />
         </div>
         <h4>Disabled Buttons</h4>
         <div>
@@ -40,19 +25,6 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
-        <h4>Image Button</h4>
-        <div>
-          <Button
-            level="tertiary"
-            label="Configure"
-            startIcon={<SettingsIcon />}
-          />
-          <Button
-            level="tertiary"
-            label="Configure"
-            endIcon={<SettingsIcon />}
-          />
-        </div>
       </div>
     </>
   );