Moved styles to files and refactor code

Author: PrinceSumberia

src/components/Charts.js

@@ -8,8 +8,8 @@ import {
   Tooltip,
   Legend,
 } from "recharts";
-import colors from "../colors";
-import "./Charts.css";
+import colors from "../constants/colors";
+import "../styles/Charts.css";
 
 export default class Charts extends Component {
   render() {

src/components/CovidApp.js

@@ -2,105 +2,13 @@ import React, { Component } from "react";
 import Overview from "./Overview";
 import Navbar from "./Navbar";
 import { withStyles } from "@material-ui/styles";
-import colors from "../colors";
-import "./CodeApp.css";
+import colors from "../constants/colors";
+import "../styles/DarkModeButton.css";
 import Charts from "./Charts";
 import Map from "./Map/Map";
-import DisplayTable from "./Table/DisplayTable";
+import DisplayTable from "./DisplayTable";
 import TinyCharts from "./TinyCharts";
-
-const styles = {
-  root: {
-    display: "flex",
-  },
-  navBar: {
-    flex: "0 0 10%",
-    backgroundColor: colors.darkPurple,
-    color: (props) =>
-      props.isDarkMode ? "rgba(255,255,255,.87)" : "rgba(255,255,255,.9)",
-    textTransform: "capitalize",
-    display: "flex",
-    justifyContent: "center",
-  },
-  mainContent: {
-    flex: 1,
-    padding: "4rem",
-    position: "relative",
-    overflow: "hidden",
-  },
-  header: {
-    display: "flex",
-    alignItems: "center",
-  },
-  heading: {
-    fontWeight: "500",
-    color: (props) =>
-      props.isDarkMode ? "rgb(245, 245, 245)" : colors.darkPurple,
-    display: "inline-block",
-    "& span": {
-      fontWeight: "900",
-      color: colors.purple,
-      marginRight: "1rem",
-    },
-  },
-  content: {
-    backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
-    borderRadius: "2rem",
-    marginTop: "3rem",
-    display: "flex",
-    padding: "4rem",
-    flexDirection: "column",
-    justifyContent: "center",
-  },
-  contentArea: {
-    display: "flex",
-  },
-  mapArea: {
-    flex: "1",
-  },
-  chartArea: {
-    minWidth: "50%",
-    display: "flex",
-    justifyContent: "center",
-  },
-  tableContainer: {
-    padding: "2rem",
-    margin: "5rem 0",
-  },
-
-  tableHeading: {
-    textAlign: "center",
-    margin: "4rem 0",
-    fontSize: "3rem",
-    // textTransform: "uppercase",
-  },
-
-  tinyChartArea: {
-    display: "flex",
-    flexWrap: "wrap",
-    padding: "2rem",
-    // flexDirection: "column",
-    justifyContent: "space-around",
-    alignItems: "center",
-    marginTop: "3rem",
-  },
-  tinyChart: {
-    margin: "2rem",
-    // padding: "2rem",
-    "& h3": {
-      textTransform: "capitalize",
-      fontWeight: 500,
-
-      textAlign: "center",
-    },
-  },
-  tinych: {
-    // backgroundColor: "rgba(129, 124, 155, 0.05)",
-    borderRadius: "2rem",
-    marginBottom: "2rem",
-    padding: "2rem",
-  },
-};
+import styles from "../styles/CovidAppStyles";
 
 const stateCodes = {
   "Andhra Pradesh": "AP",

src/components/DisplayPanels.js

@@ -1,58 +1,6 @@
 import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
-import colors from "../colors";
-
-const styles = {
-  panel: {
-    width: "15%",
-    display: "flex",
-    flexDirection: "column",
-    backgroundColor: (props) => (props.isDarkMode ? colors.darkPurple : "#fff"),
-    marginBottom: "3.5rem",
-    marginTop: "3.5rem",
-    padding: "1.5rem 3rem",
-    boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
-    borderRadius: "2.5rem",
-  },
-  heading: {
-    fontSize: "2rem",
-  },
-  number: {
-    color: (props) => {
-      let color;
-      let title = props.title.toLowerCase();
-      if (title === "recovered") {
-        color = colors.green;
-      } else if (title === "deceased") {
-        color = colors.purple;
-      } else if (title === "active") {
-        color = colors.orange;
-      } else if (title === "confirmed") {
-        color = colors.red;
-      }
-      return color;
-    },
-    fontSize: "3.5rem",
-    paddingTop: ".5rem",
-    paddingBottom: ".5rem",
-  },
-  dataChange: {
-    color: (props) => {
-      let color;
-      let title = props.title.toLowerCase();
-      if (title === "recovered") {
-        color = colors.green;
-      } else if (title === "deceased") {
-        color = colors.purple;
-      } else if (title === "active") {
-        color = colors.orange;
-      } else if (title === "confirmed") {
-        color = colors.red;
-      }
-      return color;
-    },
-  },
-};
+import styles from "../styles/DisplayPanelsStyles";
 
 class DisplayPanels extends Component {
   constructor(props) {

src/components/Table/DisplayTable.js renamed to src/components/DisplayTable.js

@@ -1,5 +1,5 @@
 import React from "react";
-import "./DisplayTable.css";
+import "../styles/DisplayTable.css";
 
 const useSortableData = (items, config = null) => {
   const [sortConfig, setSortConfig] = React.useState(config);

src/components/Navbar.js

@@ -7,80 +7,8 @@ import {
   faFlask,
   faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
-import colors from "../colors";
 import classNames from "classnames";
-
-const styles = {
-  nav: {
-    marginTop: "12rem",
-  },
-  navItems: {
-    listStyle: "none",
-  },
-  navLinks: {
-    marginBottom: "5rem",
-    fontWeight: "500",
-  },
-  iconBox: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    position: "relative",
-    zIndex: "50",
-  },
-  icons: {
-    fontSize: "2.5rem",
-    padding: "1rem 0",
-  },
-  active: {
-    color: (props) => (props.isDarkMode ? "rgb(245, 245, 245)" : colors.purple),
-    position: "relative",
-    zIndex: "10",
-    animation: "$float 2s ease infinite",
-
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      width: "165%",
-      height: "110%",
-      display: "block",
-      backgroundColor: (props) =>
-        props.isDarkMode ? colors.lightPurple : "rgb(245, 245, 245)",
-      transform: "translateX(-1rem) skewX(10deg)",
-      borderRadius: "25px",
-      zIndex: 10,
-    },
-    "&::after": {
-      content: '""',
-      position: "absolute",
-      width: "145%",
-      height: "110%",
-      display: "block",
-      top: 0,
-      left: 0,
-      backgroundColor: (props) =>
-        props.isDarkMode ? "rgba(255,255,255,.6)nop" : colors.lightPurple,
-      transform: "translate(-.9rem, .4rem) skew(10deg, -5deg)",
-      borderRadius: "25px",
-    },
-  },
-
-  "@keyframes float": {
-    "0%": {
-      boxShadow: "0 5px 15px 0px rgba(0,0,0,0.6)",
-      transform: "translateY(0px)",
-    },
-    "50%": {
-      boxShadow: "0 25px 15px 0px rgba(0,0,0,0.2)",
-      transform: "translateY(-5px)",
-    },
-    "100%": {
-      boxShadow: "0 5px 15px 0px rgba(0,0,0,0.6)",
-      transform: "translateY(0px)",
-    },
-  },
-};
+import styles from "../styles/NavbarStyles";
 
 class Navbar extends Component {
   render() {

src/components/Overview.js

@@ -2,105 +2,9 @@ import React, { Component } from "react";
 import DisplayPanels from "./DisplayPanels";
 import axios from "axios";
 import { withStyles } from "@material-ui/styles";
-import colors from "../colors";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
-
-const styles = {
-  root: {
-    textAlign: "center",
-  },
-  panels: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  btnBox: {
-    position: "absolute",
-    top: "-.5%",
-    left: "27%",
-    marginLeft: "2rem",
-    // transform: "translate(-50%, 0)",
-  },
-  button: {
-    top: "0",
-    left: "0",
-    border: "none",
-    backgroundColor: colors.purple,
-    padding: "1.5rem 3rem",
-    color: "#fff",
-    borderRadius: "10rem",
-    fontFamily: "inherit",
-    fontSize: "1.6rem",
-    marginTop: "6rem",
-    transition: "all .4s",
-    boxShadow: "0 .5rem 1rem rgba(0,0,0,.2)",
-    position: "relative",
-
-    "&:hover": {
-      backgroundColor: colors.darkPurple,
-      boxShadow: "0 .25rem .5rem rgba(0,0,0,.2)",
-      outline: "none",
-      border: "none",
-      // transform: "translateY(-.3rem)",
-
-      "&::before": {
-        transform: "scaleX(1.4) scaleY(1.6)",
-        opacity: 0,
-      },
-    },
-
-    "&:focus": {
-      border: "none",
-      outline: "none",
-    },
-
-    "&:hover svg": {
-      animationName: "$rotation",
-      animationDuration: "1s",
-      animationTimingFunction: "linear",
-      animationIterationCount: "infinite",
-    },
-
-    "&::before": {
-      content: '""',
-      position: "absolute",
-      display: "inline-block",
-      backgroundColor: colors.purple,
-      width: "100%",
-      height: "100%",
-      top: 0,
-      left: 0,
-      borderRadius: "10rem",
-      transition: "all .4s",
-      zIndex: -1,
-    },
-  },
-
-  refreshIcon: {
-    fontSize: "10rem",
-    animationName: "$rotation",
-    animationDuration: "1s",
-    animationTimingFunction: "linear",
-    animationIterationCount: "infinite",
-  },
-
-  loadingIcon: {
-    height: "50vh",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-
-  "@keyframes rotation": {
-    from: {
-      transform: "rotate(0deg)",
-    },
-    to: {
-      transform: "rotate(359deg)",
-    },
-  },
-};
+import styles from "../styles/OverviewStyles";
 
 class Overview extends Component {
   constructor(props) {

src/components/TinyCharts.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import { LineChart, Line } from "recharts";
-// import "./Charts.css";
 
 export default class TinyCharts extends Component {
   render() {