From 12948392a0206adeab5a1481358ba7d61e2d54d6 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Fri, 7 May 2021 23:28:03 +0530
Subject: [PATCH 1/5] Added new UI for the each VAccine Data.

---
 src/components/Home/Home.css                  |  2 +-
 src/components/Home/Home.js                   |  4 +-
 .../SingleVaccineData/VaccineDataSingle.css   | 68 +++++++++++++
 .../SingleVaccineData/VaccineDataSingle.js    | 95 ++++---------------
 4 files changed, 90 insertions(+), 79 deletions(-)
 create mode 100644 src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css

diff --git a/src/components/Home/Home.css b/src/components/Home/Home.css
index baee1e6..95cbeec 100644
--- a/src/components/Home/Home.css
+++ b/src/components/Home/Home.css
@@ -11,7 +11,7 @@ body {
 }
 
 .home__info {
-  background-color: #1E1E1E;
+  background-color: #352f44;
   padding: 15px;
   color: #bb86fc;
   margin-top: 20px;
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
index 1b0300b..63a7baf 100644
--- a/src/components/Home/Home.js
+++ b/src/components/Home/Home.js
@@ -23,10 +23,10 @@ import "./Home.css";
 
 const useStyles = makeStyles((theme) => ({
   input: {
-    color: "#BB86FC",
+    color: "#bb86fc",
   },
   textfield: {
-    color: "#BB86FC",
+    color: "#bb86fc",
     height: "50px",
     width: "248px",
     padding: "0px 0px 0px 0px",
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
new file mode 100644
index 0000000..da667fc
--- /dev/null
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -0,0 +1,68 @@
+.wrapper {
+    display: flex;
+    background-color: #333333;
+    height: 30vh
+}
+
+.wrapper > * {
+    padding: 20px;
+}
+
+.paper-left {
+    width: 50%;
+}
+
+.paper-left h1{
+    color: whitesmoke;
+    text-transform: uppercase;
+    font-family: monospace;
+}
+
+.paper-left .paper-left_address{
+    display: flex;
+    justify-content: space-between;
+}
+
+
+.paper-left .paper-left_address h3{
+    color: #BB86FC;
+    font-weight: bold;
+    text-transform: capitalize;
+}
+
+.paper-left .paper-left_address p{
+    color: #F48FB1;
+    margin-top: 5px;
+    text-transform: capitalize;
+    font-family: monospace;
+}
+
+.paper-right {
+    width: 50%;
+}
+
+
+
+/*Media Queries*/
+@media screen and (max-width: 500px) {
+    .wrapper {
+        height: 50vh;
+        flex-direction: column;
+    }
+
+    .paper-left {
+        width: 90%;
+    }
+
+    .paper-left p {
+        width: 100%;
+    }
+
+    .paper-left .paper-left_address{
+        display: flex;
+        flex-direction: column;    }
+
+    .paper-right {
+        width: 90%;
+    }
+}
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index a7ce7a5..6564112 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -1,89 +1,32 @@
 import { makeStyles } from '@material-ui/core/styles';
-import clsx from 'clsx';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import Divider from '@material-ui/core/Divider';
-import Badge from '@material-ui/core/Badge';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Paper from '@material-ui/core/Paper';
+
+import "./VaccineDataSingle.css"
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-        width: '100%',
-    },
-    heading: {
-        fontSize: theme.typography.pxToRem(15),
-    },
-    secondaryHeading: {
-        fontSize: theme.typography.pxToRem(15),
-        color: theme.palette.text.secondary,
-    },
-    icon: {
-        verticalAlign: 'bottom',
-        height: 20,
-        width: 20,
-    },
-    details: {
-        alignItems: 'center',
-    },
-    column: {
-        flexBasis: '33.33%',
-    },
-    helper: {
-        borderLeft: `2px solid ${theme.palette.divider}`,
-        padding: theme.spacing(1, 2),
-    },
-    link: {
-        color: theme.palette.primary.main,
-        textDecoration: 'none',
-        '&:hover': {
-            textDecoration: 'underline',
-        },
+    paperMainDiv:{
+        width: "100%"
     },
 }));
 
 const VaccineDataSingle = (vaccine)=> {
     const classes = useStyles();
+
     return(
-        <div className={classes.root}>
-            <Accordion defaultExpanded>
-                <AccordionSummary
-                    expandIcon={<ExpandMoreIcon />}
-                    aria-controls="panel1c-content"
-                    id="panel1c-header"
-                >
-                    <div className={classes.column}>
-                        <Typography className={classes.heading}>{vaccine.name}</Typography>
-                    </div>
-                    <div className={classes.column}>
-                        <Typography className={classes.secondaryHeading}>{vaccine.district_name}</Typography>
-                    </div>
-                    <div className={classes.column}>
-                        <Typography className={classes.secondaryHeading}>{vaccine.pincode}</Typography>
-                    </div>
-                    <div className={classes.column}>
-                        <Badge color="primary" badgeContent={vaccine.available_capacity}>
-                            <Typography className={classes.secondaryHeading}>Shots Available</Typography>
-                        </Badge>
-                    </div>
-                </AccordionSummary>
-                <AccordionDetails className={classes.details}>
-                    <div className={classes.column} />
-                    <div className={classes.column}>
-                        Fee Type: <Chip label={vaccine.fee_type} onDelete={() => {}} />
-                    </div>
-                    <div className={clsx(classes.column, classes.helper)}>
-                        <Typography variant="caption">
-                            Vaccine Type
-                            <br />
-                            <strong>{vaccine.vaccine}</strong>
-                        </Typography>
+        <div className={classes.paperMainDiv}>
+            <Paper variant="outlined" className="wrapper" style={{backgroundColor: "#333333"}}>
+                <div className="paper-left">
+                    <h1>{vaccine.name}</h1>
+                    <hr/>
+                    <br/>
+                    <div className="paper-left_address">
+                        <h3>address: </h3>
+                        <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
                     </div>
-                </AccordionDetails>
-                <Divider />
-            </Accordion>
+                </div>
+                <div className="paper-right">
+                </div>
+            </Paper>
         </div>
     )
 }

From 7c532ec0d9bf20779ead60e01cdfa564206e5b7e Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 8 May 2021 00:16:19 +0530
Subject: [PATCH 2/5] Added custom Time badges:hammer:

---
 .../SingleVaccineData/VaccineDataSingle.css   | 44 ++++++++++++++++---
 .../SingleVaccineData/VaccineDataSingle.js    | 16 ++++++-
 2 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index da667fc..ae138db 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -18,25 +18,49 @@
     font-family: monospace;
 }
 
-.paper-left .paper-left_address{
+.paper-left .paper-left_content{
     display: flex;
     justify-content: space-between;
+    margin-top: 10px;
 }
 
 
-.paper-left .paper-left_address h3{
+.paper-left .paper-left_content h3{
     color: #BB86FC;
     font-weight: bold;
     text-transform: capitalize;
 }
 
-.paper-left .paper-left_address p{
+.paper-left .paper-left_content p{
     color: #F48FB1;
     margin-top: 5px;
     text-transform: capitalize;
     font-family: monospace;
 }
 
+.paper-left .paper-left_time {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 10px;
+}
+
+.paper-left .paper-left_time .time{
+    padding: 10px;
+    border-radius: 7px;
+    font-weight: bold;
+}
+
+.paper-left .paper-left_time .open-time{
+    background-color: #009E60;
+    font-family: monospace;
+}
+
+.paper-left .paper-left_time .close-time{
+    background-color: rgb(222,49,99);
+    color: white;
+    font-family: monospace;
+}
+
 .paper-right {
     width: 50%;
 }
@@ -58,9 +82,19 @@
         width: 100%;
     }
 
-    .paper-left .paper-left_address{
+    .paper-left .paper-left_content{
+        display: flex;
+        flex-direction: column;
+    }
+
+    .paper-left .paper-left_time {
         display: flex;
-        flex-direction: column;    }
+        flex-direction: column;
+    }
+
+    .paper-left .paper-left_time .time{
+        margin-top: 5px;
+    }
 
     .paper-right {
         width: 90%;
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 6564112..b88900c 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
@@ -19,10 +19,22 @@ const VaccineDataSingle = (vaccine)=> {
                     <h1>{vaccine.name}</h1>
                     <hr/>
                     <br/>
-                    <div className="paper-left_address">
-                        <h3>address: </h3>
+                    <div className="paper-left_content">
+                        <h3>address</h3>
                         <p>{vaccine.block_name}, {vaccine.district_name}, {vaccine.state_name}</p>
                     </div>
+                    <div className="paper-left_content">
+                        <h3>pincode</h3>
+                        <p>{vaccine.pincode}</p>
+                    </div>
+                    <div className="paper-left_time">
+                        <div className="open-time time">
+                            Opening Time: {vaccine.from}
+                        </div>
+                        <div className="close-time time">
+                            Closing Time: {vaccine.to}
+                        </div>
+                    </div>
                 </div>
                 <div className="paper-right">
                 </div>

From eacf80b75ab0e76557ee79520504c42e4e2171db Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 8 May 2021 00:22:32 +0530
Subject: [PATCH 3/5] CSS Fixes

---
 .../VaccineData/SingleVaccineData/VaccineDataSingle.css          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index ae138db..d8411b2 100644
--- a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
+++ b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
@@ -90,6 +90,7 @@
     .paper-left .paper-left_time {
         display: flex;
         flex-direction: column;
+        text-align: center;
     }
 
     .paper-left .paper-left_time .time{

From a5399b41aec940523c95ad9581206dceea46a9b1 Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 8 May 2021 15:19:00 +0530
Subject: [PATCH 4/5] Enhanced vaccine card UI

---
 .../SingleVaccineData/VaccineDataSingle.css   | 48 +++++++++++++++++++
 .../SingleVaccineData/VaccineDataSingle.js    | 21 +++++++-
 2 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index d8411b2..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*/
@@ -100,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)=> {
         <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>

From 17321ca2c912d4f3660945633ad387fc65c7825f Mon Sep 17 00:00:00 2001
From: stephin007 <stephinreji123@gmail.com>
Date: Sat, 8 May 2021 17:51:59 +0530
Subject: [PATCH 5/5] Finalised vaccine card UI

---
 .../SingleVaccineData/VaccineDataSingle.css   | 124 +++++++++++++++++-
 .../SingleVaccineData/VaccineDataSingle.js    |  26 +++-
 2 files changed, 145 insertions(+), 5 deletions(-)

diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.css
index d3b5c89..b7704ab 100644
--- 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,12 +116,54 @@
     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;
     }
 
@@ -105,6 +171,22 @@
         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;
+    }
 }
\ No newline at end of file
diff --git a/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js b/src/components/VaccineData/SingleVaccineData/VaccineDataSingle.js
index 45a0dc1..0b4325f 100644
--- 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>