Changes css to css in js

Author: PrinceSumberia

src/components/CovidApp.js

@@ -1,7 +1,7 @@
 import {
   faBell,
   faBellSlash,
-  faSyncAlt,
+  faSyncAlt
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { withStyles } from "@material-ui/styles";
@@ -144,7 +144,7 @@ class CovidApp extends Component {
       const month = date.slice(3, 5);
       const time = date.slice(11);
       return `${day} ${months[month]}, ${time.slice(0, 5)} IST`;
-    } catch (err) {}
+    } catch (err) { }
   }
 
   render() {
@@ -189,7 +189,7 @@ class CovidApp extends Component {
             </div>
           );
         });
-    } catch (err) {}
+    } catch (err) { }
 
     return (
       <>
@@ -216,13 +216,13 @@ class CovidApp extends Component {
                   onClick={this.handleNotification}
                 />
               ) : (
-                <div className={classes.notificationBell}>
-                  <FontAwesomeIcon
-                    icon={faBell}
-                    onClick={this.handleNotification}
-                  />
-                </div>
-              )}
+                  <div className={classes.notificationBell}>
+                    <FontAwesomeIcon
+                      icon={faBell}
+                      onClick={this.handleNotification}
+                    />
+                  </div>
+                )}
             </div>
             {expanded && <div className={classes.update}>{displayUpdates}</div>}
           </div>

src/components/LinearGradient.js

@@ -1,25 +1,19 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "../styles/LinearGradient.css";
+import styles from "../styles/LinearGradientStyles";
+import { withStyles } from "@material-ui/styles";
+import classNames from 'classnames'
 
 const LinearGradient = (props) => {
-  const { data } = props;
-  const boxStyle = {
-    width: 180,
-    margin: "auto",
-  };
-  const gradientStyle = {
-    backgroundImage: `linear-gradient(to right, ${data.fromColor} , ${data.toColor})`,
-    height: 20,
-  };
+  const { data, classes } = props;
   return (
     <div>
-      <div style={boxStyle} className="display-flex">
+      <div className={classNames(classes.boxStyle, classes.displayFlex)}>
         <span>{data.min}</span>
-        <span className="fill"></span>
+        <span className={classes.fill}></span>
         <span>{data.max}</span>
       </div>
-      <div style={{ ...boxStyle, ...gradientStyle }} className="mt8"></div>
+      <div className={classNames(classes.mt8, classes.boxStyle, classes.gradientStyle)}></div>
     </div>
   );
 };
@@ -28,4 +22,4 @@ LinearGradient.propTypes = {
   data: PropTypes.object.isRequired,
 };
 
-export default LinearGradient;
+export default withStyles(styles)(LinearGradient);

src/components/Map.js

@@ -4,7 +4,9 @@ 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/Map.css"
+import "../styles/MapStyles.js"
+import { withStyles } from "@material-ui/styles";
+import styles from '../styles/MapStyles'
 
 /**
  * Courtesy: https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json
@@ -76,6 +78,7 @@ class Map extends Component {
 
   render() {
     const data = this.props.mapData;
+    const { classes } = this.props
     const gradientData = {
       fromColor: COLOR_RANGE[0],
       toColor: COLOR_RANGE[COLOR_RANGE.length - 1],
@@ -121,4 +124,4 @@ class Map extends Component {
   }
 }
 
-export default Map;
+export default withStyles(styles)(Map);

src/styles/LinearGradient.css

@@ -0,0 +1,27 @@
+export default {
+  displayFlex: {
+    display: "flex",
+  },
+
+  boxStyle: {
+    width: "180px",
+    margin: "auto",
+  },
+
+  gradientStyle: {
+    backgroundImage: (props) => `linear-gradient(to right, ${props.data.fromColor} , ${props.data.toColor})`,
+    height: "20px",
+  },
+
+  fill: {
+    flex: 1,
+  },
+
+  center: {
+    textAlign: "center",
+  },
+
+  mt16: {
+    marginTop: "16px",
+  },
+}

src/styles/LinearGradientStyles.js

@@ -0,0 +1,8 @@
+export default {
+  container: {
+    backgroundColor: "rgba(129, 124, 155, 0.05)",
+    padding: "3rem",
+    borderRadius: "2.5rem",
+    width: "100%",
+  }
+}