From df2345ea27ab65f2824dcf8cc6b8293d06356376 Mon Sep 17 00:00:00 2001 From: Jed Duffey Date: Sat, 27 Apr 2024 11:47:30 -0400 Subject: [PATCH] Update animation and styling when hovering and clicking buttons --- public/index.html | 2 + .../manage-funds/DepositEthButton.jsx | 63 +++++++++++++++++++ src/components/manage-funds/ManageFunds.jsx | 9 ++- .../manage-funds/WithdrawEthButton.jsx | 63 +++++++++++++++++++ 4 files changed, 132 insertions(+), 5 deletions(-) create mode 100644 src/components/manage-funds/DepositEthButton.jsx create mode 100644 src/components/manage-funds/WithdrawEthButton.jsx diff --git a/public/index.html b/public/index.html index 916403e..fc93337 100644 --- 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`. --> React App + + diff --git a/src/components/manage-funds/DepositEthButton.jsx b/src/components/manage-funds/DepositEthButton.jsx new file mode 100644 index 0000000..78b3b85 --- /dev/null +++ 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 ( + + ); +}; + +export default DepositEthButton; \ No newline at end of file diff --git a/src/components/manage-funds/ManageFunds.jsx b/src/components/manage-funds/ManageFunds.jsx index 048058e..c63cbca 100644 --- 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 (
- MANAGE FUNDS + +
); } \ No newline at end of file diff --git a/src/components/manage-funds/WithdrawEthButton.jsx b/src/components/manage-funds/WithdrawEthButton.jsx new file mode 100644 index 0000000..1e25a03 --- /dev/null +++ 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 ( + + ); +}; + +export default WithdrawEthButton; \ No newline at end of file