From 6c7bd7b0a41f93a7cef7cef6c9f0d78d4cadd8ec Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Mon, 22 Mar 2021 23:34:10 +0530
Subject: [PATCH 1/8] UI Text Changed for Professional Look

---
 src/containers/Drawer/index.jsx     |  6 ++++--
 src/containers/Navigation/index.jsx |  2 +-
 src/index.css                       |  2 +-
 src/pages/home/index.jsx            | 17 ++++++++++-------
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index 6eef997..375a567 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -126,7 +126,7 @@ function ResponsiveDrawer(props) {
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <IconButton
-            color="inherit"
+            color="primary"
             aria-label="open drawer"
             edge="start"
             onClick={handleDrawerToggle}
@@ -135,7 +135,9 @@ function ResponsiveDrawer(props) {
             <MenuIcon />
           </IconButton>
           <Link to="/">
-            <Typography variant="h6" noWrap>
+            <Typography variant="h4" noWrap
+             style={{ fontStyle: "bold",'font-family': "Aerial"}}
+             >
               React Native Elements
             </Typography>
           </Link>
diff --git a/src/containers/Navigation/index.jsx b/src/containers/Navigation/index.jsx
index 9d87aee..76336da 100644
--- a/src/containers/Navigation/index.jsx
+++ b/src/containers/Navigation/index.jsx
@@ -186,7 +186,7 @@ export default function App() {
         })}
         <Route exact path="/explore">
           <Helmet>
-            <title>Explore | Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
+            <title>Explore Now| Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
           </Helmet>
           <ExplorePage />
         </Route>
diff --git a/src/index.css b/src/index.css
index 4a1df4d..21b7656 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: "Palatino",-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index bcb4d8b..1abba96 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -10,16 +10,19 @@ function HomePage() {
       <Grid container spacing={5} justify="center" alignItems="center">
         <Grid item md={6} sm={12}>
           <Typography
-            variant="h2"
+            variant="h1"
             style={{
-              fontSize: "calc(2rem + 6 * ((100vw - 320px) / 680))",
+              fontSize: "calc(4rem + 6 * ((100vw - 320px) / 680))",
+              fontStyle : "Bold",
+              'font-family': "Palatino"
             }}
           >
-            Exploring possibilities
+            Exploring 
+            Possibilities 
           </Typography>
           <Typography
-            variant="h6"
-            style={{ fontWeight: "200", fontStyle: "italic" }}
+            variant="h4"
+            style={{ fontWeight: "25", fontStyle: "bold",'font-family': "Palatino"}}
           >
             with React Native Elements
           </Typography>
@@ -32,8 +35,8 @@ function HomePage() {
       </Grid>
       <div style={{ width: "100%", textAlign: "center", marginBottom: "2rem" }}>
         <Link to="/explore">
-          <Button variant="outlined" color="secondary">
-            <Typography variant="h6">Explore Now <span role="img" aria-label="explore">🌇</span></Typography>
+          <Button variant="outlined" color="Primary">
+            <Typography variant="h6"> Explore Now</Typography>
           </Button>
         </Link>
       </div>

From 8099bed58d2fcfc2c1eab0cf28056bc2585c03c2 Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Tue, 23 Mar 2021 21:12:35 +0530
Subject: [PATCH 2/8] MobileViewFix

---
 public/index.html               |  2 +-
 src/containers/Drawer/index.jsx | 16 +++++++++++-----
 src/pages/home/index.jsx        | 31 +++++++++++++++++++++++++------
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/public/index.html b/public/index.html
index ecab673..297aef2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -57,7 +57,7 @@
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://react-native-elements.js.org/" />
-    <meta property="og:title" content="Playground 🚀 | React Native Elements" />
+    <meta property="og:title" content="Playground | React Native Elements" />
     <meta
       property="og:description"
       content="Exploring possibilities with React Native Elements"
diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index 375a567..3ee47c3 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -17,7 +17,6 @@ import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import { Button, Container } from "@material-ui/core";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
-
 import Navigation from "../Navigation";
 import { Link } from "react-router-dom";
 import { Components_Index } from "../Navigation";
@@ -92,7 +91,7 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
+          <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography>
         </Link>
       </div>
       <List>
@@ -132,16 +131,23 @@ function ResponsiveDrawer(props) {
             onClick={handleDrawerToggle}
             className={classes.menuButton}
           >
-            <MenuIcon />
+            <MenuIcon style={{ color: "white" }}/>
           </IconButton>
           <Link to="/">
             <Typography variant="h4" noWrap
-             style={{ fontStyle: "bold",'font-family': "Aerial"}}
+            //  style={{ fontStyle: "bold",'font-family': "Aerial"}}
+             style={{
+              marginLeft: "auto",
+              fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
+              fontStyle : "Bold",
+              marginLeft:"auto",
+              'font-family': "Palatino"
+            }}
              >
               React Native Elements
             </Typography>
           </Link>
-          <div style={{ marginLeft: "auto" }}>
+          <div style={{ marginLeft: "auto" ,fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))"}}>
             <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
               <Button color="inherit">Docs</Button>
             </a>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 1abba96..2c4a765 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -40,7 +40,7 @@ function HomePage() {
           </Button>
         </Link>
       </div>
-      <Grid container spacing={1} justify="center">
+      <Grid clasname={'image'} container spacing={1} justify="center">
         {FEATURES_LIST.map((feature, idx) => {
           return (
             <Grid item xs={6} md={4} lg={3} key={idx}>
@@ -58,21 +58,40 @@ function HomePage() {
         style={{ justifyContent: "space-evenly" }}
       >
         <Grid item xs={12} md={7} lg={6}>
-          <Typography variant="h5">Why?</Typography>
-          <Typography>
+          <Typography variant="h5"
+           style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
+            Why?
+            </Typography>
+          <Typography
+          style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
             React Native Elements houses a lot of components, and these
             components come with a lot of customisation and tweaks via props.
             Sometimes the user gets confused and wastes a lot of time in
             achieving the desired result.
             <br />
             We came across a lot of such questions every day and sometimes user
-            reports bugs which aren't bugs but just improper
+            reports bugs which aren't bugs but just improper 
             implementation/usage of the components.
+           
           </Typography>
         </Grid>
         <Grid item xs={12} md={5} lg={5}>
-          <Typography variant="h5">How it solves the problem?</Typography>
-          <Typography>
+          <Typography variant="h5"
+           style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>How it solves the problem?</Typography>
+          <Typography  
+          style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
             With Playground, users can explore components and tweak them as per
             their use-case and generate production-ready code. Or they can
             explore new possibilities with the components and improve the

From 4bf8aff36358ebbee0a93de89bc19d25a6a7d17c Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Thu, 25 Mar 2021 13:01:25 +0530
Subject: [PATCH 3/8] fontStyle Restored

---
 src/containers/Drawer/index.jsx |  4 ++--
 src/pages/home/index.jsx        | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index 3ee47c3..463431a 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -91,7 +91,8 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography>
+          {/* <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography> */}
+          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
         </Link>
       </div>
       <List>
@@ -141,7 +142,6 @@ function ResponsiveDrawer(props) {
               fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
               fontStyle : "Bold",
               marginLeft:"auto",
-              'font-family': "Palatino"
             }}
              >
               React Native Elements
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 2c4a765..8573838 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -13,8 +13,7 @@ function HomePage() {
             variant="h1"
             style={{
               fontSize: "calc(4rem + 6 * ((100vw - 320px) / 680))",
-              fontStyle : "Bold",
-              'font-family': "Palatino"
+              fontStyle : "bold"
             }}
           >
             Exploring 
@@ -22,7 +21,7 @@ function HomePage() {
           </Typography>
           <Typography
             variant="h4"
-            style={{ fontWeight: "25", fontStyle: "bold",'font-family': "Palatino"}}
+            style={{ fontWeight: "25", fontStyle: "italic"}}
           >
             with React Native Elements
           </Typography>
@@ -61,14 +60,14 @@ function HomePage() {
           <Typography variant="h5"
            style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
+            
           }}>
             Why?
             </Typography>
           <Typography
           style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
+           
           }}>
             React Native Elements houses a lot of components, and these
             components come with a lot of customisation and tweaks via props.
@@ -85,12 +84,10 @@ function HomePage() {
           <Typography variant="h5"
            style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
           }}>How it solves the problem?</Typography>
           <Typography  
           style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
           }}>
             With Playground, users can explore components and tweak them as per
             their use-case and generate production-ready code. Or they can

From 310c1fcf15451a438d9991737da2810935c3fafb Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Thu, 25 Mar 2021 13:01:25 +0530
Subject: [PATCH 4/8] fontStyle Restored

---
 src/containers/Drawer/index.jsx |  4 ++--
 src/pages/home/index.jsx        | 11 ++++-------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index 3ee47c3..463431a 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -91,7 +91,8 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography>
+          {/* <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography> */}
+          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
         </Link>
       </div>
       <List>
@@ -141,7 +142,6 @@ function ResponsiveDrawer(props) {
               fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
               fontStyle : "Bold",
               marginLeft:"auto",
-              'font-family': "Palatino"
             }}
              >
               React Native Elements
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 2c4a765..8573838 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -13,8 +13,7 @@ function HomePage() {
             variant="h1"
             style={{
               fontSize: "calc(4rem + 6 * ((100vw - 320px) / 680))",
-              fontStyle : "Bold",
-              'font-family': "Palatino"
+              fontStyle : "bold"
             }}
           >
             Exploring 
@@ -22,7 +21,7 @@ function HomePage() {
           </Typography>
           <Typography
             variant="h4"
-            style={{ fontWeight: "25", fontStyle: "bold",'font-family': "Palatino"}}
+            style={{ fontWeight: "25", fontStyle: "italic"}}
           >
             with React Native Elements
           </Typography>
@@ -61,14 +60,14 @@ function HomePage() {
           <Typography variant="h5"
            style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
+            
           }}>
             Why?
             </Typography>
           <Typography
           style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
+           
           }}>
             React Native Elements houses a lot of components, and these
             components come with a lot of customisation and tweaks via props.
@@ -85,12 +84,10 @@ function HomePage() {
           <Typography variant="h5"
            style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
           }}>How it solves the problem?</Typography>
           <Typography  
           style={{
             textAlign : "centre",
-            fontFamily: "Palatino"
           }}>
             With Playground, users can explore components and tweak them as per
             their use-case and generate production-ready code. Or they can

From c586488bd9cadfeb89acb1f13087fe2730f988ee Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Sat, 27 Mar 2021 04:12:25 +0530
Subject: [PATCH 5/8] retrigger checks


From 9b36178d2d35983a8c111fc3dc842da0936eedf1 Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Sat, 27 Mar 2021 04:25:15 +0530
Subject: [PATCH 6/8] retrigger checks


From 86dd22499b1f5ae14f7cee048ae08b74e444f335 Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Sat, 27 Mar 2021 13:57:30 +0530
Subject: [PATCH 7/8] Fixed

---
 src/containers/Drawer/index.jsx | 43 ++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/containers/Drawer/index.jsx b/src/containers/Drawer/index.jsx
index cdd03cc..8e772b9 100644
--- a/src/containers/Drawer/index.jsx
+++ b/src/containers/Drawer/index.jsx
@@ -91,7 +91,12 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
+          <Typography variant="h5">
+            Playground{" "}
+            <span role="img" aria-label="playground">
+              🚀
+            </span>
+          </Typography>
         </Link>
       </div>
       <List>
@@ -131,25 +136,35 @@ function ResponsiveDrawer(props) {
             onClick={handleDrawerToggle}
             className={classes.menuButton}
           >
-            <MenuIcon style={{ color: "white" }}/>
+            <MenuIcon style={{ color: "white" }} />
           </IconButton>
           <Link to="/">
-            <Typography variant="h4" noWrap
-            //  style={{ fontStyle: "bold",'font-family': "Aerial"}}
-             style={{
-              marginLeft: "auto",
-              fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
-              fontStyle : "Bold",
-              marginLeft:"auto",
-            }}
-             >
+            <Typography
+              variant="h4"
+              noWrap
+              //  style={{ fontStyle: "bold",'font-family': "Aerial"}}
+              style={{
+                marginLeft: "auto",
+                fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
+                fontStyle: "Bold",
+                marginLeft: "auto",
+              }}
+            >
               React Native Elements
             </Typography>
           </Link>
 
-          <div style={{ marginLeft: "auto" ,fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))"}}>
-            <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
-
+          <div
+            style={{
+              marginLeft: "auto",
+              fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
+            }}
+          >
+            <a
+              href="https://reactnativeelements.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               <Button color="inherit">Docs</Button>
             </a>
             <IconButton

From 56f332b9fa94628f978e7c0287fb5419c825e6a3 Mon Sep 17 00:00:00 2001
From: Piyush <piyush@Piyushs-MacBook-Air.local>
Date: Sat, 27 Mar 2021 14:02:28 +0530
Subject: [PATCH 8/8] DependencyIssuesFixed

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3d559f2..ce8d240 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
     "react-native-web-linear-gradient": "^1.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
-    "react-view": "^2.3.2"
+    "react-view": "^2.3.2",
+    "v8": "^0.1.0"
   },
   "scripts": {
     "start": "react-app-rewired start",