Skip to content

Commit

Permalink
change to dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
abc committed May 6, 2020
1 parent 0f256fb commit 34b253d
Show file tree
Hide file tree
Showing 6 changed files with 336 additions and 328 deletions.
10 changes: 5 additions & 5 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ import Footer from './components/Footer';
import World from './components/World';

function App() {
useEffect(() => {
ReactGA.initialize('UA-163580653-1');
ReactGA.pageview(window.location.pathname);
}, []);
// useEffect(() => {
// ReactGA.initialize('UA-163580653-1');
// ReactGA.pageview(window.location.pathname);
// }, []);

const country = () => {
return <Country />;
Expand All @@ -29,7 +29,7 @@ function App() {

return (
<HashRouter>
<div className='container-fluid mt-3'>
<div className='bg-dark'>
<Header />
<Switch>
<Route path='/india' component={country} />
Expand Down
9 changes: 0 additions & 9 deletions src/App.test.js
View file

This file was deleted.

213 changes: 98 additions & 115 deletions src/components/CountryComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import {
CardTitle,
CardText,
Badge,
Container,
Row,
Col,
Spinner,
Button,
Container,
} from 'reactstrap';
import States from './StateComponent';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -41,129 +41,112 @@ class Country extends Component {
/>
</div>
) : (
<div>
<Row className='d-flex justify-content-center'>
<Col className='col-5 col-md-4 offset-md-2 '>
<Link to='/'>
<Button
outline
color='primary'
style={{ padding: '.4em 2em' }}
>
India
<div className='m-2 mb-5 justify-content-center'>

<Row className='d-flex justify-content-center'>

<Col className='col-5 col-md-4 offset-md-2 '>
<Link to='/'>
<Button outline color='primary' style={{ padding: '.4em 2em' }}>
India
</Button>
</Link>
</Col>
<Col className='col-5 col-md-4 offset-md-2'>
<Link to='/world'>
<Button
outline
color='primary'
style={{ padding: '.4em 2em' }}
>
World
</Link>
</Col>

<Col className='col-5 col-md-4 offset-md-2'>
<Link to='/world'>
<Button outline color='primary' style={{ padding: '.4em 2em' }}>
World
</Button>
</Link>
</Col>
</Row>
<Row>
<Col xs='12' sm='6' md='6' lg='3'>
<Card
body
outline
color='primary'
className=' shadow m-3 bg-white rounded'
>
<h4>
<CardTitle className='text-primary font-weight-bold'>
Confirmed &nbsp;&nbsp;
</Link>
</Col>

</Row>

<Row>

<Col xs='12' sm='6' md='6' lg='3'>
<Card body outline color='primary' className=' shadow m-3 bg-dark rounded'>
<h5>
<CardTitle className='text-primary font-weight-bold'>
Confirmed &nbsp;&nbsp;
<Badge pill color='primary'>
&#8593;{' '}
&#8593;
{numberWithCommas(this.state.total.deltaconfirmed)}
</Badge>
</CardTitle>
</h4>
<h4>
<CardText className='text-primary float-left font-weight-bold'>
{numberWithCommas(this.state.total.confirmed)}
</CardText>
</h4>
</Card>
</Col>
<Col xs='12' sm='6' md='6' lg='3'>
<Card
body
outline
color='warning'
className=' shadow m-3 bg-white rounded'
>
<h4>
<CardTitle className='text-warning font-weight-bold'>
Active &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</Badge>
</CardTitle>
</h5>
<h4>
<CardText className='text-primary float-left font-weight-bold'>
{numberWithCommas(this.state.total.confirmed)}
</CardText>
</h4>
</Card>
</Col>

<Col xs='12' sm='6' md='6' lg='3'>
<Card body outline color='warning' className=' shadow m-3 bg-dark rounded'>
<h5>
<CardTitle className='text-warning font-weight-bold'>
Active &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</CardTitle>
</h4>
<h4>
<CardText className='text-warning font-weight-bold'>
{numberWithCommas(this.state.total.active)}
</CardText>
</h4>
</Card>
</Col>
<Col xs='12' sm='6' md='6' lg='3'>
<Card
body
outline
color='success'
className=' shadow m-3 bg-white rounded'
>
<h4>
<CardTitle className='text-success font-weight-bold'>
Recovered &nbsp;&nbsp;&nbsp;&nbsp;
</h5>
<h4>
<CardText className='text-warning font-weight-bold'>
{numberWithCommas(this.state.total.active)}
</CardText>
</h4>
</Card>
</Col>

<Col xs='12' sm='6' md='6' lg='3'>
<Card body outline color='success' className=' shadow m-3 bg-dark rounded' >
<h5>
<CardTitle className='text-success font-weight-bold'>
Recovered &nbsp;&nbsp;&nbsp;&nbsp;
<Badge pill color='success'>
&#8593;{' '}
&#8593;
{numberWithCommas(this.state.total.deltarecovered)}
</Badge>
</CardTitle>
</h4>
<h4>
<CardText className='text-success float-left font-weight-bold'>
{numberWithCommas(this.state.total.recovered)}
</CardText>
</h4>
</Card>
</Col>
<Col xs='12' sm='6' md='6' lg='3'>
<Card
body
outline
color='danger'
className=' shadow m-3 bg-white rounded'
>
<h4>
<CardTitle className='text-danger font-weight-bold'>
Deaths &nbsp;&nbsp;
</Badge>
</CardTitle>
</h5>
<h4>
<CardText className='text-success float-left font-weight-bold'>
{numberWithCommas(this.state.total.recovered)}
</CardText>
</h4>
</Card>
</Col>

<Col xs='12' sm='6' md='6' lg='3'>
<Card body outline color='danger' className=' shadow m-3 bg-dark rounded'>
<h5>
<CardTitle className='text-danger font-weight-bold'>
Deaths &nbsp;&nbsp;
<Badge pill color='danger'>
&#8593; {numberWithCommas(this.state.total.deltadeaths)}
</Badge>
</CardTitle>
</h4>
<h4>
<CardText className='text-danger font-weight-bold'>
{numberWithCommas(this.state.total.deaths)}
</CardText>
</h4>
</Card>
</Col>
</Row>
<h2 className='d-flex justify-content-center'>
States
&#8593; {numberWithCommas(this.state.total.deltadeaths)}
</Badge>
</CardTitle>
</h5>
<h4>
<CardText className='text-danger font-weight-bold'>
{numberWithCommas(this.state.total.deaths)}
</CardText>
</h4>
</Card>
</Col>

</Row>

<h2 className='d-flex justify-content-center text-white'>
States
<span style={{ marginLeft: '10px' }}>
{this.state.total.lastupdatedtime}
</span>
</h2>
<States total={this.state.states} />
</div>
)}
{this.state.total.lastupdatedtime}
</span>
</h2>
<States total={this.state.states} />
</div>
)}
</Container>
);
}
Expand Down
26 changes: 13 additions & 13 deletions src/components/StateComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class States extends Component {
}

handleState = (index) => {
if (this.state.stateindex === null || this.state.stateindex !== index) {
if (this.state.stateindex === null || this.state.stateindex !== index || this.state.stateindex === index) {
const state = this.props.total.statewise[index].state;
this.toggle();
this.setState({ stateData: state, stateindex: index });
Expand All @@ -41,7 +41,7 @@ class States extends Component {
body
outline
color='primary'
className='shadow m-3 bg-white rounded'
className='shadow m-3 bg-dark rounded'
onClick={() => {
this.handleState(index);
}}
Expand All @@ -55,46 +55,46 @@ class States extends Component {
</h4>
</CardTitle>
<div>
<div className='text-center font-weight-bold'>
<div className='text-center text-white font-weight-bold'>
confirmed : {numberWithCommas(state.confirmed)}
</div>
<Progress
style={{ height: '22px' }}
style={{ height: '22px', backgroundColor: 'grey' }}
value={state.confirmed !== '0' ? 100 : 0}
>
100%
</Progress>
<div className='text-center font-weight-bold'>
<div className='text-center text-white font-weight-bold'>
Recovered : {numberWithCommas(state.recovered)}
</div>
<Progress
style={{ height: '22px' }}
style={{ height: '22px', backgroundColor: 'grey' }}
color='success'
value={recoveredPercent ? recoveredPercent : 0}
>
{recoveredPercent ? recoveredPercent.toFixed(1) : 0}%
</Progress>
<div className='text-center font-weight-bold'>
<div className='text-center text-white font-weight-bold'>
Active : {numberWithCommas(state.active)}
</div>
<Progress
style={{ height: '22px' }}
style={{ height: '22px', backgroundColor: 'grey' }}
color='warning'
value={activePercent ? activePercent : 0}
>
{activePercent ? activePercent.toFixed(1) : 0}%
</Progress>
<div className='text-center font-weight-bold'>
<div className='text-center text-white font-weight-bold'>
Deaths : {numberWithCommas(state.deaths)}
</div>
<Progress
style={{ height: '22px' }}
style={{ height: '22px', backgroundColor: 'grey' }}
color='danger'
value={deathsPercent ? deathsPercent : 0}
>
{deathsPercent ? deathsPercent.toFixed(1) : 0}%
</Progress>
<p className='text-muted mt-2'>*This card is clickable</p>
<p className='text-white mt-2'>*This card is clickable</p>
</div>
</Card>
{this.state.stateindex === index ? (
Expand All @@ -104,8 +104,8 @@ class States extends Component {
toggle={() => this.toggle}
/>
) : (
<div></div>
)}
<div></div>
)}
</Col>
);
} else {
Expand Down
Loading

0 comments on commit 34b253d

Please sign in to comment.