Update animation and styling when hovering and clicking buttons

jduffey · Apr 27, 2024 · df2345e · df2345e
1 parent ab1ef3d
commit df2345e
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <link href="https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@700&display=swap" rel="stylesheet">
 </head>
 
 <body>

diff --git a/src/components/manage-funds/DepositEthButton.jsx b/src/components/manage-funds/DepositEthButton.jsx
@@ -0,0 +1,63 @@
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { keyframes } from '@mui/system';
+
+const colorAnimation = keyframes`
+  0% {
+    color: #FFFFFF;
+  }
+  30% {
+    color: #FFFFFF;
+  }
+  100% {
+    color: #000000;
+  }
+`;
+
+const DepositEthButton = () => {
+    const handleMouseDown = (event) => {
+        event.currentTarget.blur();
+    };
+
+    return (
+        <Button
+            variant="contained"
+            onMouseDown={handleMouseDown}
+            disableRipple={true}
+            sx={{
+                width: 200,
+                height: 55,
+                borderRadius: '15px',
+                border: '4px solid #000000',
+                backgroundColor: '#A388EE',
+                boxShadow: '2px 4px 0px rgba(0, 0, 0)',
+                textTransform: 'none',
+                '&:focus .MuiTypography-root': {
+                    animation: `${colorAnimation} 0.5s forwards`,
+                },
+                '&:hover': {
+                    backgroundColor: '#A388EE',
+                    boxShadow: '2px 4px 0px rgba(0, 0, 0)',
+                    '& .MuiTypography-root': {
+                        fontSize: '20px',
+                    },
+                },
+            }}
+        >
+            <Typography
+                variant="button"
+                sx={{
+                    fontFamily: 'Lexend Mega, sans-serif',
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    whiteSpace: 'nowrap',
+                    color: '#000000',
+                }}
+            >
+                Deposit
+            </Typography>
+        </Button>
+    );
+};
+
+export default DepositEthButton;
diff --git a/src/components/manage-funds/ManageFunds.jsx b/src/components/manage-funds/ManageFunds.jsx
@@ -1,9 +1,7 @@
-// import { useState } from "react";
+import DepositEthButton from "./DepositEthButton";
+import WithdrawEthButton from "./WithdrawEthButton";
 
 export function ManageFunds() {
-    // const [ethBalances, setEthBalances] = useState([]);
-    // console.log(ethBalances);
-
     return (
         <div
             style={{
@@ -12,7 +10,8 @@ export function ManageFunds() {
                 outline: '1px solid red',
             }}
         >
-            MANAGE FUNDS
+            <DepositEthButton />
+            <WithdrawEthButton />
         </div>
     );
 }
diff --git a/src/components/manage-funds/WithdrawEthButton.jsx b/src/components/manage-funds/WithdrawEthButton.jsx
@@ -0,0 +1,63 @@
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import { keyframes } from '@mui/system';
+
+const colorAnimation = keyframes`
+  0% {
+    color: #FFFFFF;
+  }
+  30% {
+    color: #FFFFFF;
+  }
+  100% {
+    color: #000000;
+  }
+`;
+
+const WithdrawEthButton = () => {
+    const handleMouseDown = (event) => {
+        event.currentTarget.blur();
+    };
+
+    return (
+        <Button
+            variant="contained"
+            onMouseDown={handleMouseDown}
+            disableRipple={true}
+            sx={{
+                width: 200,
+                height: 55,
+                borderRadius: '15px',
+                border: '4px solid #000000',
+                backgroundColor: '#FFA07A',
+                boxShadow: '2px 4px 0px rgba(0, 0, 0)',
+                textTransform: 'none',
+                '&:focus .MuiTypography-root': {
+                    animation: `${colorAnimation} 0.5s forwards`,
+                },
+                '&:hover': {
+                    backgroundColor: '#FFA07A',
+                    boxShadow: '2px 4px 0px rgba(0, 0, 0)',
+                    '& .MuiTypography-root': {
+                        fontSize: '20px',
+                    },
+                },
+            }}
+        >
+            <Typography
+                variant="button"
+                sx={{
+                    fontFamily: 'Lexend Mega, sans-serif',
+                    fontWeight: 'bold',
+                    fontSize: '16px',
+                    whiteSpace: 'nowrap',
+                    color: '#000000',
+                }}
+            >
+                Withdraw
+            </Typography>
+        </Button>
+    );
+};
+
+export default WithdrawEthButton;
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,8 @@ @@
           Learn how to configure a non-root public URL by running `npm run build`.
         -->
         <title>React App</title>
+        <link href="https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@700&display=swap" rel="stylesheet">
     </head>
     <body>
@@ Expand Down @@