Merge pull request #37 from stephin007/stephin007/betterUI

Enhanced vaccine card UI
stephin007 · May 8, 2021 · 3ef068c · 3ef068c
2 parents af18c8f + a5399b4
commit 3ef068c
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 1 deletion.
diff --git 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;
+    }
 }
diff --git 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)=> {
         <div className={classes.paperMainDiv}>
             <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
                 <div className="paper-left">
-                    <h1>{vaccine.name}</h1>
+                    <div>
+                        <h1>{vaccine.name} <VerifiedUserRoundedIcon style={{color: "#009E60"}}/></h1>
+                    </div>
                     <hr/>
                     <br/>
                     <div className="paper-left_content">
@@ -37,6 +43,19 @@ const VaccineDataSingle = (vaccine)=> {
                     </div>
                 </div>
                 <div className="paper-right">
+                    <div className="paper-right_Badges">
+                        <div className="paper-right_capacity">
+                            <Badge color="secondary" badgeContent={vaccine.available_capacity}>
+                                <h5>Available Capacity</h5> <HealingIcon className="healing_icon"/>
+                            </Badge>
+                        </div>
+                        <div>
+                            <p><span>Date:</span>{vaccine.date}</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_date">
+
+                    </div>
                 </div>
             </Paper>
         </div>