Merge pull request #41 from stephin007/stephin007/betterUI

Finalized vaccine card UI
stephin007 · May 8, 2021 · 182698f · 182698f
2 parents 3ef068c + 17321ca
commit 182698f
Show file tree

Hide file tree

Showing 2 changed files with 145 additions and 5 deletions.
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -1,7 +1,7 @@
 .wrapper {
     display: flex;
     background-color: #333333;
-    height: 30vh
+    height: 27vh
 }
 
 .wrapper > * {
@@ -18,6 +18,30 @@
     font-family: monospace;
 }
 
+.paper-left_vaccine_head{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.paper-left_vaccine_head h3{
+    text-transform: uppercase;
+    font-weight: bold;
+    color: white;
+    font-family: "Fira Code Medium", "monospace";
+}
+
+.paper-left_vaccine_head p{
+    text-transform: uppercase;
+    font-weight: bold;
+    color: black;
+    font-family: monospace;
+    background-color: #009E60;
+    padding: 10px;
+    border-radius: 7px;
+    text-align: center;
+}
+
 .paper-left .paper-left_content{
     display: flex;
     justify-content: space-between;
@@ -92,19 +116,77 @@
     font-size: 20px;
 }
 
+.paper-right_age{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+}
+
+.paper-right_age .age_text h3{
+    color: aquamarine;
+    font-family: monospace;
+    font-size: 20px;
+}
+
+.paper-right_age .age_content p{
+    margin-bottom: 5px;
+    font-size: 20px;
+}
+
+.paper-right_age .age_content{
+    background-color: rgb(222,49,99);
+    height: 25px;
+    width: 75px;
+    padding: 5px;
+    border-radius: 3px;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.paper-right_slots h3{
+    text-align: center;
+    font-weight: 700;
+    color: #BB86FC;
+    margin: 5px;
+}
+
+.paper-right_slots p{
+    color: whitesmoke;
+    font-size: 17px;
+    text-align: center;
+}
 
 
 /*Media Queries*/
 @media screen and (max-width: 500px) {
     .wrapper {
-        height: 50vh;
+        height: 70vh;
         flex-direction: column;
     }
 
     .paper-left {
         width: 90%;
     }
 
+    .paper-left_vaccine_head{
+        flex-direction: column;
+    }
+
+    .paper-left_vaccine_head h3{
+        font-size: 15px;
+        margin-bottom: 10px;
+    }
+
+    .paper-left_vaccine_head p{
+        padding: 5px;
+        font-size: 15px;
+        border-radius: 7px;
+        text-align: center;
+    }
+
     .paper-left p {
         width: 100%;
     }
@@ -132,7 +214,8 @@
         margin-top: 5px;
         margin-right: 3px;
         color: aquamarine;
-        font-size: 12px;
+        font-weight: bold;
+        font-size: 11px;
     }
 
     .paper-right_Badges .healing_icon{
@@ -148,4 +231,39 @@
     .paper-right_Badges p span{
         font-size: 15px;
     }
+
+    .paper-right_age{
+        margin-top: 3px;
+    }
+
+    .paper-right_age .age_text h3{
+        font-size: 13px;
+    }
+
+    .paper-right_age .age_content{
+        background-color: rgb(222,49,99);
+        height: 15px;
+        width: 65px;
+        padding: 3px;
+        border-radius: 3px;
+        color: white;
+    }
+
+    .paper-right_age .age_content p{
+        margin-bottom: 1px;
+        font-size: 13px;
+    }
+
+    .paper-right_slots h3{
+        text-align: center;
+        font-weight: 700;
+        color: #BB86FC;
+        margin: 3px;
+    }
+
+    .paper-right_slots p{
+        color: whitesmoke;
+        font-size: 15px;
+        text-align: center;
+    }
 }
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -25,6 +25,11 @@ const VaccineDataSingle = (vaccine)=> {
                     </div>
                     <hr/>
                     <br/>
+                    <div className="paper-left_vaccine_head">
+                        <h3>Vaccine Name</h3>
+                        <p>{vaccine.vaccine}</p>
+                    </div>
+
                     <div className="paper-left_content">
                         <h3>address</h3>
                         <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
@@ -53,8 +58,25 @@ const VaccineDataSingle = (vaccine)=> {
                             <p><span>Date:</span>{vaccine.date}</p>
                         </div>
                     </div>
-                    <div className="paper-right_date">
-
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                             <h3>Minimum Age</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.min_age_limit} years</p>
+                        </div>
+                    </div>
+                    <div className="paper-right_age">
+                        <div className="age_text">
+                             <h3>Minimum Fare(₹)</h3>
+                        </div>
+                        <div className="age_content">
+                            <p>{vaccine.fee_type} </p>
+                        </div>
+                    </div>
+                    <div className="paper-right_slots">
+                        <h3>Slots Available</h3>
+                        <p>{vaccine.slots.join(",")}</p>
                     </div>
                 </div>
             </Paper>