From a01c9943729da4b4b5fb9ee1b62f868fea808ecc Mon Sep 17 00:00:00 2001
From: Jed Duffey <jedduffey@gmail.com>
Date: Sat, 27 Apr 2024 12:04:51 -0400
Subject: [PATCH] Container for holding buttons

---
 .../manage-funds/ButtonContainer.jsx          | 37 +++++++++++++++++++
 src/components/manage-funds/ManageFunds.jsx   | 10 ++++-
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/components/manage-funds/ButtonContainer.jsx

diff --git a/src/components/manage-funds/ButtonContainer.jsx b/src/components/manage-funds/ButtonContainer.jsx
new file mode 100644
index 0000000..13e3465
--- /dev/null
+++ b/src/components/manage-funds/ButtonContainer.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import DepositEthButton from './DepositEthButton';
+import WithdrawEthButton from './WithdrawEthButton';
+
+const Container = ({ children }) => {
+    return (
+        <Box
+            sx={{
+                display: 'inline-flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: '#D9D9D9',
+                borderRadius: '20px',
+                padding: '30px',
+                gap: '40px',
+                '& > *': {
+                    // Shift up to compensate for the the shadow on the buttons
+                    transform: 'translateY(-2px)',
+                  },
+            }}
+        >
+            {children}
+        </Box>
+    );
+};
+
+const ButtonContainer = () => {
+    return (
+        <Container>
+            <DepositEthButton />
+            <WithdrawEthButton />
+        </Container>
+    );
+};
+
+export default ButtonContainer;
\ No newline at end of file
diff --git a/src/components/manage-funds/ManageFunds.jsx b/src/components/manage-funds/ManageFunds.jsx
index c63cbca..72aa0a3 100644
--- a/src/components/manage-funds/ManageFunds.jsx
+++ b/src/components/manage-funds/ManageFunds.jsx
@@ -1,3 +1,4 @@
+import ButtonContainer from "./ButtonContainer";
 import DepositEthButton from "./DepositEthButton";
 import WithdrawEthButton from "./WithdrawEthButton";
 
@@ -8,10 +9,15 @@ export function ManageFunds() {
                 width: 1440,
                 height: 1024,
                 outline: '1px solid red',
+                backgroundColor: '#FFFFFF',
             }}
         >
-            <DepositEthButton />
-            <WithdrawEthButton />
+            <ButtonContainer
+                children={[
+                    <DepositEthButton />,
+                    <WithdrawEthButton />,
+                ]}
+            />
         </div>
     );
 }
\ No newline at end of file