Merge pull request #38 from nlok5923/fix

fix part of #3: created seperate css file for explore page

src/pages/explore/Explore.module.css

@@ -0,0 +1,14 @@
+.paperPosition {
+    height: 60px;
+    padding: 5px 10px;
+    align-items: center;
+    display: flex;
+    position: relative;
+}
+.arrow {
+    position: absolute;
+    right: 10px;
+}
+.gridContainer {
+    margin-top: 10;
+}

src/pages/explore/index.jsx

@@ -2,31 +2,22 @@ import React from "react";
 import { Typography, Paper, Grid } from "@material-ui/core";
 import { Link } from "react-router-dom";
 import { ArrowForward } from "@material-ui/icons";
-
+import styles from "./Explore.module.css"
 import { Components_Index } from "../../containers/Navigation";
 
 function Expore() {
   return (
     <section>
       <Typography variant="h2">Explore</Typography>
 
-      <Grid container spacing={1} style={{ marginTop: 20 }}>
+      <Grid container spacing={1} className={styles.gridContainer} >
         {Components_Index.map((elm, idx) => {
           return (
             <Grid item xs={12} sm={6} md={4} lg={3}>
               <Link to={elm.path}>
-                <Paper
-                  style={{
-                    height: 60,
-                    padding: "5px 10px",
-                    alignItems: "center",
-                    display: "flex",
-                    position: "relative",
-                  }}
-                >
+                <Paper className={styles.paperPosition}>
                   <Typography variant="h5">{elm.name}</Typography>
-
-                  <ArrowForward style={{ position: "absolute", right: 10 }} />
+                  <ArrowForward className={styles.arrow} />
                 </Paper>
               </Link>
             </Grid>
@@ -37,4 +28,4 @@ function Expore() {
   );
 }
 
-export default Expore;
+export default Expore;