diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css index ae138db..d3b5c89 100644 --- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css +++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css @@ -65,6 +65,33 @@ width: 50%; } +.paper-right_Badges{ + display: flex; + justify-content: space-between; +} + +.paper-right_Badges h5{ + margin-right: 10px; + color: aquamarine; + font-family: monospace; + font-size: 22px; +} + +.paper-right_Badges .healing_icon{ + color: white; +} + +.paper-right_Badges p { + color: whitesmoke; + font-size: 15px; +} + +.paper-right_Badges p span{ + color: aquamarine; + font-family: monospace; + font-size: 20px; +} + /*Media Queries*/ @@ -90,6 +117,7 @@ .paper-left .paper-left_time { display: flex; flex-direction: column; + text-align: center; } .paper-left .paper-left_time .time{ @@ -99,4 +127,25 @@ .paper-right { width: 90%; } + + .paper-right_Badges h5{ + margin-top: 5px; + margin-right: 3px; + color: aquamarine; + font-size: 12px; + } + + .paper-right_Badges .healing_icon{ + font-size: 20px; + } + + .paper-right_Badges p { + margin-top: 5px; + color: whitesmoke; + font-size: 15px; + } + + .paper-right_Badges p span{ + font-size: 15px; + } } \ No newline at end of file diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js index b88900c..45a0dc1 100644 --- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js +++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js @@ -1,5 +1,9 @@ import { makeStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; +import Badge from '@material-ui/core/Badge'; + +import HealingIcon from '@material-ui/icons/Healing'; +import VerifiedUserRoundedIcon from '@material-ui/icons/VerifiedUserRounded'; import "./VaccineDataSingle.css" @@ -16,7 +20,9 @@ const VaccineDataSingle = (vaccine)=> {
Date:{vaccine.date}
+