Skip to content

Commit 54e07ac

Browse files
PrinceSumberiaPrinceSumberia
committed
Add Styling
1 parent 0cee470 commit 54e07ac

File tree

7 files changed

+310
-55
lines changed

7 files changed

+310
-55
lines changed

‎package-lock.json‎

Lines changed: 157 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/styles": "^4.9.10",
67
"@testing-library/jest-dom": "^4.2.4",
78
"@testing-library/react": "^9.5.0",
89
"@testing-library/user-event": "^7.2.1",

‎public/index.html‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
17+
18+
<!--
1919
Notice the use of %PUBLIC_URL% in the tags above.
2020
It will be replaced with the URL of the `public` folder during the build.
2121
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,13 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
27+
<title>React App</title>
28+
</head>
29+
30+
<body>
31+
<noscript>You need to enable JavaScript to run this app.</noscript>
32+
<div id="root"></div>
33+
<!--
3334
This HTML file is a template.
3435
If you open it directly in the browser, you will see an empty page.
3536
@@ -39,5 +40,6 @@
3940
To begin the development, run `npm start` or `yarn start`.
4041
To create a production bundle, use `npm run build` or `yarn build`.
4142
-->
42-
</body>
43-
</html>
43+
</body>
44+
45+
</html>

‎src/App.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@
3232
from {
3333
transform: rotate(0deg);
3434
}
35+
3536
to {
3637
transform: rotate(360deg);
3738
}
38-
}
39+
}

‎src/components/DisplayPanels.js‎

Lines changed: 62 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,78 @@
11
import React, { Component } from "react";
2+
import { withStyles } from "@material-ui/styles";
23

3-
export default class DisplayPanels extends Component {
4+
const styles = {
5+
panel: {
6+
width: "15%",
7+
display: "flex",
8+
flexDirection: "column",
9+
backgroundColor: "#fff",
10+
marginBottom: "3.5rem",
11+
marginTop: "3.5rem",
12+
padding: "2rem 3.5rem",
13+
boxShadow: "0 1rem 2rem rgba(0, 0, 0, 0.05)",
14+
},
15+
heading: {
16+
fontSize: "2rem",
17+
// fontWeight: "500",
18+
// color: "red",
19+
},
20+
number: {
21+
color: (props) => {
22+
let color;
23+
let title = props.title.toLowerCase();
24+
if (title === "recovered") {
25+
color = "green";
26+
} else if (title === "deceased") {
27+
color = "purple";
28+
} else if (title === "active") {
29+
color = "orange";
30+
} else if (title === "confirmed") {
31+
color = "red";
32+
}
33+
return color;
34+
},
35+
fontSize: "4rem",
36+
paddingTop: "1rem",
37+
paddingBottom: "1rem",
38+
},
39+
dataChange: {
40+
color: (props) => {
41+
let color;
42+
let title = props.title.toLowerCase();
43+
if (title === "recovered") {
44+
color = "green";
45+
} else if (title === "deceased") {
46+
color = "purple";
47+
} else if (title === "active") {
48+
color = "orange";
49+
} else if (title === "confirmed") {
50+
color = "red";
51+
}
52+
return color;
53+
},
54+
},
55+
};
56+
57+
class DisplayPanels extends Component {
458
constructor(props) {
559
super(props);
660
this.state = {};
761
}
862

963
render() {
10-
const { title, number, dataChange } = this.props;
64+
const { title, number, dataChange, classes } = this.props;
1165
return (
12-
<div>
13-
<p>{title}</p>
14-
<p>{number}</p>
15-
<p>
66+
<div className={classes.panel}>
67+
<h3 className={classes.heading}>{title}</h3>
68+
<h3 className={classes.number}>{number}</h3>
69+
<p className={classes.dataChange}>
1670
{dataChange > 0 ? "+" : ""}
1771
{dataChange}
1872
</p>
1973
</div>
2074
);
2175
}
2276
}
77+
78+
export default withStyles(styles)(DisplayPanels);

0 commit comments

Comments
 (0)