diff --git a/src/components/Cryptos/Crypto.jsx b/src/components/Cryptos/Crypto.jsx index 41a5d70..70099c5 100644 --- a/src/components/Cryptos/Crypto.jsx +++ b/src/components/Cryptos/Crypto.jsx @@ -5,6 +5,7 @@ import { Box, Card, CardContent, CardMedia, Grid, Typography } from '@mui/materi import { Chart as ChartJS } from 'chart.js/auto' import { Chart, Line } from 'react-chartjs-2' //WTF https://stackoverflow.com/questions/67727603/error-category-is-not-a-registered-scale import Cookies from 'js-cookie'; +import { borderRadius } from '@mui/system'; const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLength, setLoading}) => { @@ -20,6 +21,8 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt } } + const [backgroundColor, setBackgroundColor] = useState("#ffffff0") + React.useEffect(() => { // console.log(cryptoPrices[data.id].prices) @@ -51,6 +54,7 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt height="10vh" width="100%" sx={{display: "flex", alignItems: "center"}} + paddingRight="10px" > {data.name} @@ -110,7 +114,9 @@ const Crypto = ({CryptoStyles, data, cryptoPrices, dates, index, cryptoListLengt }, }} className="line" - style={{backgroundColor: "#ffffff0"}} + style={{backgroundColor: backgroundColor, boxSizing: "content-box", transition: "all 0.4s ease-in-out", borderRadius: "3px"}} + onMouseEnter={() => setBackgroundColor("#ffffff1a")} + onMouseLeave={() => setBackgroundColor("transparent")} // https://stackoverflow.com/questions/8739665/is-background-colornone-valid-css /> { .card { - background: rgba( 78, 159, 255, 0) !important; + background: rgba( 78, 159, 255, 0); + backdrop-filter: blur( 14px ); + -webkit-backdrop-filter: blur( 14px ); + + } .container { @@ -44,6 +48,11 @@ const Cryptos = ({setLoading}) => { /* height: 80vh; */ user-select: none; cursor: pointer; + transition: 0.25s ease-in-out; + + :hover { + background: #00f7ff5e; + } .line { @@ -189,10 +198,7 @@ const Cryptos = ({setLoading}) => { //Almacenate actual day on LocalStorage const actualDay = moment().format('DD-MM-YYYY') localStorage.setItem('lastDayPrices', actualDay) - } - - - + } }, [cryptosPrices]) return (