Style Button

Author: PrinceSumberia

src/components/CovidApp.js

@@ -23,6 +23,7 @@ const styles = {
   },
   heading: {
     fontWeight: "500",
+    color: colors.darkPurple,
     "& span": {
       color: colors.purple,
       fontWeight: "900",

src/components/DisplayPanels.js

@@ -10,13 +10,12 @@ const styles = {
     backgroundColor: "#fff",
     marginBottom: "3.5rem",
     marginTop: "3.5rem",
-    padding: "2rem 3.5rem",
+    padding: "1.5rem 3rem",
     boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
+    borderRadius: "2.5rem",
   },
   heading: {
     fontSize: "2rem",
-    // fontWeight: "500",
-    // color: "red",
   },
   number: {
     color: (props) => {
@@ -33,9 +32,9 @@ const styles = {
       }
       return color;
     },
-    fontSize: "4rem",
-    paddingTop: "1rem",
-    paddingBottom: "1rem",
+    fontSize: "3.5rem",
+    paddingTop: ".5rem",
+    paddingBottom: ".5rem",
   },
   dataChange: {
     color: (props) => {

src/components/Overview.js

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import DisplayPanels from "./DisplayPanels";
 import axios from "axios";
 import { withStyles } from "@material-ui/styles";
+import colors from "../colors";
 
 const styles = {
   root: {
@@ -12,6 +13,29 @@ const styles = {
     justifyContent: "space-between",
     alignItems: "center",
   },
+  button: {
+    border: "none",
+    backgroundColor: colors.purple,
+    padding: "1.5rem 3rem",
+    color: "#fff",
+    borderRadius: "10rem",
+    fontFamily: "inherit",
+    fontSize: "1.6rem",
+    marginTop: "6rem",
+    transition: "all .2s",
+    boxShadow: "0 1.5rem 2.5rem rgba(0,0,0,.2)",
+
+    "&:hover": {
+      backgroundColor: colors.darkPurple,
+      boxShadow: "0 .5rem 1rem rgba(0,0,0,.2)",
+      outline: "none",
+      border: "none",
+    },
+    "&:focus": {
+      border: "none",
+      outline: "none",
+    },
+  },
 };
 
 class Overview extends Component {
@@ -96,7 +120,9 @@ class Overview extends Component {
           />
         </div>
 
-        <button onClick={this.fetchData}>Update Results</button>
+        <button className={classes.button} onClick={this.fetchData}>
+          Update Results
+        </button>
       </div>
     );
   }

src/index.css

@@ -20,6 +20,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-size: 1.6rem;
   line-height: 1.7;
+  color: #1A1053;
   background-color: rgba(185, 185, 185, 0.281);
 }