UI improvement on Home Page

src/components/PropDrawer/PropDrawer.module.css

@@ -0,0 +1,10 @@
+.propdrawer{
+    position: fixed;
+    right: 0.5rem;
+    bottom: 1rem;
+}
+.propdrawer__child{
+    width: 70vw;
+    max-width: 700;
+    padding-left: 1rem;
+}

src/components/PropDrawer/index.jsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
 
 import { Drawer, Fab } from "@material-ui/core";
-
+import styles from "./PropDrawer.module.css";
 export default function TemporaryDrawer(props) {
   const [state, setState] = React.useState({
     right: false,
@@ -23,13 +23,9 @@ export default function TemporaryDrawer(props) {
   return (
     <div>
       <React.Fragment>
-        <Fab
-          style={{
-            position: "fixed",
-            right: "0.5rem",
-            bottom: "1rem",
-          }}
-          variant="extended"
+        <Fab className={styles.propdrawer}
+
+         variant="extended"
           size="small"
           color="secondary"
           onClick={toggleDrawer("right", true)}
@@ -41,13 +37,7 @@ export default function TemporaryDrawer(props) {
           open={state["right"]}
           onClose={toggleDrawer("right", false)}
         >
-          <div
-            style={{
-              width: "70vw",
-              maxWidth: 700,
-              paddingLeft: "1rem",
-            }}
-          >
+          <div className={styles.propdrawer__child}>
             {props.children}
           </div>
         </Drawer>

src/components/playground/index.jsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import styles from "./playground.module.css";
 
 import {
   Compiler,
@@ -12,12 +13,7 @@ import {
 export default ({ params }) => {
   return (
     <React.Fragment>
-      <div
-        style={{
-          border: "1px dashed #ccc",
-          position:'relative'
-        }}
-      >
+      <div className={styles.playground}>
         <Compiler
           {...params.compilerProps}
           minHeight={62}

src/components/playground/playground.module.css

@@ -0,0 +1,4 @@
+.playground{
+    border: 1px dashed #ccc;
+    position: relative;
+}

src/pages/home/home.module.css

@@ -0,0 +1,51 @@
+.home__header{
+    font-size: calc(2rem + 6 * ((100vw - 320px) / 680)) !important;
+
+}
+.home__headerbottom{
+    font-weight: 200 !important;
+     font-style: italic;
+}
+.home__explorenow{
+    width: 100%;
+     text-align: center;
+      margin-bottom: 2rem;
+}
+.home__divider{
+    margin: 3vh 0;
+}
+.home__grid{
+    justify-content: space-evenly;
+
+}
+
+
+.home__paper{
+    padding: 14px 7px;
+     height: 100%;
+
+}
+.home__paper:hover{
+    transform: scale(1.05);
+    transition: transform 0.6s;
+
+}
+
+.home__inside_paper{
+    bottom: 0;
+     margin-top: 1rem;
+}
+
+.home__line{
+    margin-top: 20px;
+    margin-bottom: 15px;
+    border: none;
+    border-top: 1px solid rgb(226, 226, 226);
+}
+.home__image{
+    width: 70%;
+    min-height: 250px;
+    margin: auto;
+    display: flex;
+    margin-bottom: 15px;
+}

src/pages/home/index.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Typography, Grid, Paper, Divider, Button } from "@material-ui/core";
 import { Link } from "react-router-dom";
+import styles from "./home.module.css";
+
 
 import LBannerAnimation from "./animation.jsx";
 
@@ -11,15 +13,13 @@ function HomePage() {
         <Grid item md={6} sm={12}>
           <Typography
             variant="h2"
-            style={{
-              fontSize: "calc(2rem + 6 * ((100vw - 320px) / 680))",
-            }}
+            className={styles.home__header}
           >
-            Exploring possibilities
+          Exploring possibilities 
           </Typography>
           <Typography
             variant="h6"
-            style={{ fontWeight: "200", fontStyle: "italic" }}
+            className={styles.home__headerbottom}
           >
             with React Native Elements
           </Typography>
@@ -30,7 +30,7 @@ function HomePage() {
           </div>
         </Grid>
       </Grid>
-      <div style={{ width: "100%", textAlign: "center", marginBottom: "2rem" }}>
+      <div className={styles.home__explorenow}>
         <Link to="/explore">
           <Button variant="outlined" color="secondary">
             <Typography variant="h6">Explore Now 🌇</Typography>
@@ -47,14 +47,17 @@ function HomePage() {
         })}
       </Grid>
 
-      <Divider style={{ margin: "3vh 0" }} />
+      <Divider className={styles.home__divider} />
+      <hr noshade className={styles.home__line}/> 
       <Grid
         container
         spacing={5}
         justify="center"
-        style={{ justifyContent: "space-evenly" }}
+        className={styles.home__grid}
       >
+
         <Grid item xs={12} md={7} lg={6}>
+
           <Typography variant="h5">Why?</Typography>
           <Typography>
             React Native Elements houses a lot of components, and these
@@ -85,17 +88,11 @@ export default HomePage;
 
 const FeatureCard = (props) => {
   return (
-    <Paper style={{ padding: "14px 7px", height: "100%" }}>
-      <img
-        style={{
-          width: "70%",
-          minHeight: 250,
-          margin: "auto",
-          display: "flex",
-        }}
+    <Paper className={styles.home__paper}>
+      <img className={styles.home__image}
         src={props.banner}
       />
-      <div style={{ bottom: 0, marginTop: "1rem" }}>
+      <div className="inside_paper">
         <Typography variant="h5">{props.title}</Typography>
         <Typography>{props.content}</Typography>
       </div>