diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 133389b..9f68396 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -6,14 +6,17 @@ import PropTypes from 'prop-types'; const useStyles = makeStyles(theme => ({ paper: { padding: 24, - margin: 6 + margin: "6px 0", + height: "146px", }, cardPercentage: { - position: "absolute", - right: 40, - marginTop: 24, + position: "relative", + textAlign: "right", + right: 0, + top: 0, + marginTop: "-90px", opacity: 0.3, - "& span": { + "&>span": { fontSize: 20 } @@ -27,27 +30,29 @@ function Card({ percentage, text, title, subtitle, background = "black" }) { const classes = useStyles(); return - {percentage}% - {title} - {text} - {subtitle} +
+ {title} + {text} + {subtitle} + + {percentage >= 0 ? {percentage}% + : ""} +
} Card.propTypes = { - title: PropTypes.string, - text: PropTypes.string, - subtitle: PropTypes.string, - percentage: PropTypes.number, - background: PropTypes.string, + title: PropTypes.string, + text: PropTypes.string, + subtitle: PropTypes.string, + percentage: PropTypes.number, + background: PropTypes.string, }; export default Card; \ No newline at end of file