From f0beddbaa8f1597ba3079dc126312a52ced1a7b0 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Sun, 19 May 2024 22:40:55 -0700
Subject: [PATCH 1/2] Implemented the integrations component.

---
 Client/src/Components/Integrations/index.css |  0
 Client/src/Components/Integrations/index.jsx | 24 ++++++++++++++++++++
 Client/src/Pages/Home/index.jsx              |  2 ++
 3 files changed, 26 insertions(+)
 create mode 100644 Client/src/Components/Integrations/index.css
 create mode 100644 Client/src/Components/Integrations/index.jsx

diff --git a/Client/src/Components/Integrations/index.css b/Client/src/Components/Integrations/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Integrations/index.jsx b/Client/src/Components/Integrations/index.jsx
new file mode 100644
index 000000000..030a79309
--- /dev/null
+++ b/Client/src/Components/Integrations/index.jsx
@@ -0,0 +1,24 @@
+import { Box, Button, Typography } from '@mui/material';
+
+const Integrations = () => {
+  return (
+    <Box display="flex" alignItems="center" p={2} border={1} borderRadius={2}>
+      <Box component="img" src="https://via.placeholder.com/100" alt="Placeholder" width={100} height={100} />
+      
+      <Box flex={1} mx={2} display="flex" flexDirection="column" alignItems="flex-start">
+        <Typography variant="h6" component="div">
+          Header
+        </Typography>
+        <Typography variant="body1" component="div" sx={{ maxWidth: '300px', wordWrap: 'break-word', textAlign: 'left' }}>
+          This is a paragraph that provides more detail about the header.
+        </Typography>
+      </Box>
+      
+      <Button variant="contained" color="primary" sx={{ minWidth: '120px', minHeight: '45px' }}>
+        Click Me
+      </Button>
+    </Box>
+  );
+};
+
+export default Integrations;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index ff5cb454e..a1ad8e314 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,6 +2,7 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import Search from "../../Components/Search";
 import "./index.css";
 import DashboardMenu from "../../Components/DashboardMenu";
+import Integrations from "../../Components/Integrations";
 
 const Home = () => {
   return (
@@ -10,6 +11,7 @@ const Home = () => {
       <DropdownTeamMember />
       <Search />
       <DashboardMenu />
+      <Integrations />
     </>
   );
 };

From aa000bda8bb710a8aa413747e9526a664f6eb271 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Tue, 21 May 2024 16:38:11 -0700
Subject: [PATCH 2/2] Refactored the code and addressed the comments.

---
 Client/src/Components/Integrations/index.jsx | 48 ++++++++++++++++----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/Client/src/Components/Integrations/index.jsx b/Client/src/Components/Integrations/index.jsx
index 030a79309..b0e00bdfe 100644
--- a/Client/src/Components/Integrations/index.jsx
+++ b/Client/src/Components/Integrations/index.jsx
@@ -1,22 +1,54 @@
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
+import Button from '../Button';
 
+/**
+ * Integrations component
+ * @returns {JSX.Element}
+ */
 const Integrations = () => {
+  const theme = useTheme();
+
   return (
-    <Box display="flex" alignItems="center" p={2} border={1} borderRadius={2}>
-      <Box component="img" src="https://via.placeholder.com/100" alt="Placeholder" width={100} height={100} />
+    <Box
+      display="flex"
+      alignItems="center"
+      p={theme.spacing(2)}
+      border={1}
+      borderColor={theme.palette.divider}
+      borderRadius={theme.shape.borderRadius}
+    >
+      <Box
+        component="img"
+        src="https://via.placeholder.com/100"
+        alt="Placeholder"
+        width={100}
+        height={100}
+      />
       
-      <Box flex={1} mx={2} display="flex" flexDirection="column" alignItems="flex-start">
+      <Box
+        flex={1}
+        mx={theme.spacing(2)}
+        display="flex"
+        flexDirection="column"
+        alignItems="flex-start"
+      >
         <Typography variant="h6" component="div">
           Header
         </Typography>
-        <Typography variant="body1" component="div" sx={{ maxWidth: '300px', wordWrap: 'break-word', textAlign: 'left' }}>
+        <Typography
+          variant="body1"
+          component="div"
+          sx={{
+            maxWidth: '300px',
+            wordWrap: 'break-word',
+            textAlign: 'left'
+          }}
+        >
           This is a paragraph that provides more detail about the header.
         </Typography>
       </Box>
       
-      <Button variant="contained" color="primary" sx={{ minWidth: '120px', minHeight: '45px' }}>
-        Click Me
-      </Button>
+      <Button label="Click Me" level="primary" />
     </Box>
   );
 };