Bug fix/cross button

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",

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"

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";
@@ -131,20 +130,36 @@ function ResponsiveDrawer(props) {
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <IconButton
-            color="inherit"
+            color="primary"
             aria-label="open drawer"
             edge="start"
             onClick={handleDrawerToggle}
             className={classes.menuButton}
           >
-            <MenuIcon />
+            <MenuIcon style={{ color: "white" }} />
           </IconButton>
           <Link to="/">
-            <Typography variant="h6" noWrap>
+            <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" }}>
+
+          <div
+            style={{
+              marginLeft: "auto",
+              fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
+            }}
+          >
             <a
               href="https://reactnativeelements.com/"
               target="_blank"

src/content/Input/input.playground.jsx

@@ -69,7 +69,7 @@ const InputPlayground = () => {
       },
       rightIcon: {
         type: PropTypes.ReactNode,
-        value: `<Icon name="close" size={20}/>`,
+        value: `<Icon name="close" size={20} onPress={()=>{setValue("")}}/>`,
       },
       rightIconContainerStyle: {
         type: PropTypes.Object,
@@ -88,6 +88,17 @@ const InputPlayground = () => {
         type: PropTypes.String,
         value: "Enter Name",
       },
+      value: {
+        type: PropTypes.String,
+        value: "",
+        stateful: true,
+        hidden: true,
+      },
+      onChange: {
+        type: PropTypes.Function,
+        value: `(e)=>{setValue(e.target.value)}`,
+        hidden: true,
+      },
     },
     scope: {
       Input,

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;

src/pages/home/index.jsx

@@ -10,16 +10,18 @@ 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"
             }}
           >
-            Exploring possibilities
+            Exploring 
+            Possibilities 
           </Typography>
           <Typography
-            variant="h6"
-            style={{ fontWeight: "200", fontStyle: "italic" }}
+            variant="h4"
+            style={{ fontWeight: "25", fontStyle: "italic"}}
           >
             with React Native Elements
           </Typography>
@@ -32,17 +34,12 @@ 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>
-      <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}>
@@ -60,21 +57,38 @@ 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",
+
+          }}>
+            Why?
+            </Typography>
+          <Typography
+          style={{
+            textAlign : "centre",
+
+          }}>
             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",
+          }}>How it solves the problem?</Typography>
+          <Typography  
+          style={{
+            textAlign : "centre",
+          }}>
             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