Style Changes

Author: PrinceSumberia

src/components/Barchart.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
+import { Bar, BarChart, Tooltip, XAxis, YAxis } from "recharts";
 
 export default class Barchart extends Component {
   render() {
@@ -23,7 +23,7 @@ export default class Barchart extends Component {
             (newObject.totalrecovered + newObject.totaldeceased),
         };
       });
-    } catch (err) {}
+    } catch (err) { }
 
     return (
       <div className="barcharts">

src/components/Cards.js

@@ -1,5 +1,5 @@
-import React from "react";
 import { withStyles } from "@material-ui/styles";
+import React from "react";
 import styles from "../styles/CardsStyles";
 
 function Cards({ title, src, classes }) {

src/components/Charts.js

@@ -1,19 +1,14 @@
+import { withStyles } from "@material-ui/styles";
 import React, { Component } from "react";
 import {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
+  Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis
 } from "recharts";
 import colors from "../constants/colors";
-import "../styles/Charts.css";
+import styles from '../styles/ChartsStyles';
 
-export default class Charts extends Component {
+class Charts extends Component {
   render() {
-    const { data } = this.props;
+    const { data, classes } = this.props;
     let result;
     try {
       const updatedData = data.slice(1).slice(-50);
@@ -33,10 +28,10 @@ export default class Charts extends Component {
             (newObject.totalrecovered + newObject.totaldeceased),
         };
       });
-    } catch (err) {}
+    } catch (err) { }
 
     return (
-      <div className="charts">
+      <div className={classes.charts}>
         <ResponsiveContainer>
           <LineChart
             width={600}
@@ -88,3 +83,5 @@ export default class Charts extends Component {
     );
   }
 }
+
+export default withStyles(styles)(Charts)

src/components/DisplayPanels.js

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
+import React, { Component } from "react";
 import styles from "../styles/DisplayPanelsStyles";
 
 class DisplayPanels extends Component {

src/components/DisplayTable.js

@@ -1,9 +1,6 @@
-import React, { useState } from "react";
+import { faArrowCircleDown, faArrowCircleRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowCircleRight,
-  faArrowCircleDown,
-} from "@fortawesome/free-solid-svg-icons";
+import React, { useState } from "react";
 import "../styles/DisplayTable.css";
 
 const useSortableData = (items, config = null) => {
@@ -58,7 +55,7 @@ const DisplayTable = ({ tableData, isDarkMode, districtLevel }) => {
       }
       return newObject;
     });
-  } catch (err) {}
+  } catch (err) { }
 
   const getDistrictData = (statecode) => {
     try {
@@ -107,7 +104,7 @@ const DisplayTable = ({ tableData, isDarkMode, districtLevel }) => {
         </>
       );
       return markup;
-    } catch (err) {}
+    } catch (err) { }
   };
 
   const { items, requestSort, sortConfig } = useSortableData(result);

src/components/Footer.js

@@ -1,7 +1,7 @@
-import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
-import styles from "../styles/FooterStyles.js";
 import classNames from "classnames";
+import React, { Component } from "react";
+import styles from "../styles/FooterStyles.js";
 
 class Footer extends Component {
   render() {

src/components/Form.js

@@ -1,5 +1,5 @@
-import React, { Component } from "react";
 import { withStyles } from "@material-ui/styles";
+import React, { Component } from "react";
 import styles from "../styles/FormStyles";
 
 class Form extends Component {

src/components/Help.js

@@ -46,7 +46,7 @@ class Help extends Component {
           hashmap[x["state"]][x["city"]][x["category"]].push(x);
       });
       this.setState({ data: hashmap });
-    } catch (err) {}
+    } catch (err) { }
   }
 
   handleQuery(query) {

src/components/LinearGradient.js

@@ -1,8 +1,8 @@
-import React from "react";
+import { withStyles } from "@material-ui/styles";
+import classNames from 'classnames';
 import PropTypes from "prop-types";
+import React from "react";
 import styles from "../styles/LinearGradientStyles";
-import { withStyles } from "@material-ui/styles";
-import classNames from 'classnames'
 
 const LinearGradient = (props) => {
   const { data, classes } = props;

src/components/Map.js

@@ -1,12 +1,12 @@
+import { withStyles } from "@material-ui/styles";
+import { scaleQuantile } from "d3-scale";
 import React, { Component } from "react";
 import { ComposableMap, Geographies, Geography } from "react-simple-maps";
-import { scaleQuantile } from "d3-scale";
 import ReactTooltip from "react-tooltip";
-import LinearGradient from "./LinearGradient.js";
 import INDIA_TOPO_JSON from "../constants/india.topo.json";
-import "../styles/MapStyles.js"
-import { withStyles } from "@material-ui/styles";
-import styles from '../styles/MapStyles'
+import styles from '../styles/MapStyles';
+import "../styles/MapStyles.js";
+import LinearGradient from "./LinearGradient.js";
 
 /**
  * Courtesy: https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json