Skip to content

Commit b8734e0

Browse files
Андрей ЕлисеевАндрей Елисеев
Андрей Елисеев
authored and
Андрей Елисеев
committed
Refactored UI code
1 parent da851cb commit b8734e0

25 files changed

+353
-357
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,6 @@ src/server/api/__pycache__
1414
/src/client/.idea
1515
/.idea
1616
start_env.sh
17+
*.DS_Store
1718

1819
/src/server/venv/

‎src/client/public/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<link rel="stylesheet" href="%PUBLIC_URL%/assets/styles/font.css">
1918
<!--
2019
Notice the use of %PUBLIC_URL% in the tags above.
2120
It will be replaced with the URL of the `assets` folder during the build.
@@ -27,7 +26,7 @@
2726
-->
2827
<title>PAWS Best Friend</title>
2928
</head>
30-
<body style="background-color: rgba(0, 0, 0, 0.015);">
29+
<body style="margin: 0; background-color: rgba(0, 0, 0, 0.015);">
3130
<noscript>You need to enable JavaScript to run this app.</noscript>
3231
<div id="root"></div>
3332
<!--

‎src/client/public/font/NowayRound-Regular.woff renamed to ‎src/client/src/assets/font/NowayRound-Regular.woff

File renamed without changes.

‎src/client/public/styles/font.css renamed to ‎src/client/src/assets/font/font.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
font-style: normal;
44
font-weight: normal;
55
font-display: swap;
6-
src: local('Noway Round Regular'), url('../font/NowayRound-Regular.woff') format('woff');
6+
src: local('Noway Round Regular'), url('./NowayRound-Regular.woff') format('woff');
77
}

‎src/client/src/components/Header.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import React from "react";
22
import { Link as RouterLink } from "react-router-dom";
33
import {AppBar, Button, Toolbar, Typography } from "@material-ui/core";
4-
import "./styles/header.css";
4+
import styles from "./styles/header.module.css";
55

66
export default function Header(props){
77

88
return(
9-
<AppBar position="static" id="header" color="primary" elevation={1}>
9+
<AppBar position="static" id="header" className={styles.header} elevation={1}>
1010
<Toolbar style={{"minWidth":"100", "dipslay":"flex", "justifyContent":"space-between"}}>
11-
<Typography variant="h6">PAWS Data Pipeline</Typography>
12-
<div style={{"display":"flex", "justifyContent":"space-between", "margin":"1em"}}>
13-
<Button color="default" component={RouterLink} to="/upload">Admin</Button>
14-
<Button color="default" component={RouterLink} to="/dataView">360 DataView</Button>
15-
<Button color="default" component={RouterLink} to="/about">About</Button>
11+
<Typography className={styles.header_logo} variant="h6">PAWS Data Pipeline</Typography>
12+
<div style={{"display":"flex", "justifyContent":"space-between", "margin":"16px 6px 16px 16px"}}>
13+
<Button className={styles.header_link} component={RouterLink} to="/upload">Admin</Button>
14+
<Button className={styles.header_link} component={RouterLink} to="/dataView">360 DataView</Button>
15+
<Button className={styles.header_link} component={RouterLink} to="/about">About</Button>
1616
</div>
1717
</Toolbar>
1818
</AppBar>

‎src/client/src/components/styles/header.css renamed to ‎src/client/src/components/styles/header.module.css

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
#root .MuiTypography-h6 {
1+
header.header {
2+
margin-bottom: 30px;
3+
background-color: #00AFDA !important;
4+
}
5+
6+
h6.header_logo {
27
position: relative;
38
top: 2px;
49
left: 14px;
@@ -8,18 +13,7 @@
813
color: #fff;
914
letter-spacing: initial;
1015
}
11-
#root header.MuiAppBar-colorPrimary {
12-
background-color: #00AFDA;
13-
}
14-
#root header.MuiAppBar-colorPrimary .MuiButton-root {
15-
font-family: 'Noway Round Regular', sans-serif;
16-
color: #fff;
17-
font-weight: 700;
18-
}
19-
#root header.MuiAppBar-colorPrimary .MuiButton-root:not(:last-child) {
20-
margin-right: 10px;
21-
}
22-
#root .MuiTypography-h6::before {
16+
h6.header_logo::before {
2317
content: '';
2418
position: absolute;
2519
top: -1px;
@@ -32,6 +26,10 @@
3226
background-position: center;
3327
background-size: contain;
3428
}
35-
#root > header {
36-
margin-bottom: 30px;
29+
30+
a.header_link {
31+
margin-right: 10px;
32+
font-family: 'Noway Round Regular', sans-serif;
33+
color: #fff;
34+
font-weight: 700;
3735
}

‎src/client/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
33
import App from './App';
44
import {createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
55
import * as serviceWorker from './serviceWorker';
6+
import "./assets/font/font.css";
67

78
const theme = createMuiTheme({
89
palette: {

‎src/client/src/pages/DataView360/DataView360.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { withStyles } from '@material-ui/core/styles';
33
import { Paper, Container} from '@material-ui/core';
44
import CircularProgress from '@material-ui/core/CircularProgress';
55
import Box from '@material-ui/core/Box';
6-
import "./styles/DataView360.css";
6+
import styles from "./styles/DataView360.module.css";
77
import _ from 'lodash';
88

99
import SearchBar from './components/SearchBar';
@@ -13,7 +13,7 @@ import Donations from './components/Donations';
1313
import Adoptions from './components/Adoptions';
1414

1515

16-
const styles = theme => ({
16+
const customStyles = theme => ({
1717
spinner: {
1818
display: 'flex',
1919
align: 'center',
@@ -64,7 +64,7 @@ class DataView360 extends Component {
6464
handleParticipantChange={this.handleGetParticipant}
6565
handleSearchChange={this.handleSearchChange}/>
6666
{(_.isEmpty(this.state.participantData) !== true && this.state.isDataBusy !== true) && (
67-
<Paper elevation={1} style={{"padding":"1em"}}>
67+
<Paper className={styles.main} elevation={1} style={{"padding":"1em"}}>
6868
<ContactInfo participant={_.get(this.state, "participantData.salesforcecontacts")} />
6969
<Donations donations={_.get(this.state, 'participantData.salesforcedonations')} />
7070
<Adoptions adoptions={_.get(this.state, 'participantData.petpoint')} />
@@ -82,4 +82,4 @@ class DataView360 extends Component {
8282
}
8383
}
8484

85-
export default withStyles(styles)(DataView360);
85+
export default withStyles(customStyles)(DataView360);

‎src/client/src/pages/DataView360/components/Adoptions.js

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import React, { Component } from 'react';
22
import { Paper, Typography, Table, TableContainer, TableHead, TableBody, TableRow, TableCell, Container} from '@material-ui/core';
33
import { withStyles } from '@material-ui/core/styles';
4-
import "./styles/Adoptions.css";
4+
import styles from "./styles/Adoptions.module.css";
5+
import "./styles/table.css";
56
import _ from 'lodash';
67
import moment from 'moment';
78

89
const ROWS_TO_SHOW = 3
910

11+
/* I don't khow, how to remove it. So I changed background-color on 'initial' */
1012
const StyledTableCell = withStyles((theme)=>({
1113
head:{
12-
backgroundColor: theme.palette.grey.A100,
14+
backgroundColor: 'initial', // here
1315
fontWeight: 600,
1416
}
1517
}))(TableCell);
1618

1719
const StyledTableRow = withStyles((theme)=>({
1820
root:{
1921
'&:nth-of-type(even)':{
20-
backgroundColor: theme.palette.action.hover,
22+
backgroundColor: 'initial', // and here
2123
}
2224
}
2325
}))(TableRow);
@@ -38,12 +40,12 @@ class Adoptions extends Component {
3840

3941
const result = _.map(latestAdoptions, pet => {
4042
return(<StyledTableRow>
41-
<TableCell align="center">{moment(pet.outcome_date).format("YYYY-MM-DD")}</TableCell>
42-
<TableCell align="center">{pet.animal_name}</TableCell>
43-
<TableCell align="center">{pet.animal_type}</TableCell>
44-
<TableCell align="center">{pet.primary_breed}</TableCell>
45-
<TableCell align="center">{pet.animal_num}</TableCell>
46-
<TableCell align="center">{pet.age_group}</TableCell>
43+
<TableCell>{moment(pet.outcome_date).format("YYYY-MM-DD")}</TableCell>
44+
<TableCell>{pet.animal_name}</TableCell>
45+
<TableCell>{pet.animal_type}</TableCell>
46+
<TableCell>{pet.primary_breed}</TableCell>
47+
<TableCell>{pet.animal_num}</TableCell>
48+
<TableCell>{pet.age_group}</TableCell>
4749
</StyledTableRow>);
4850

4951
});
@@ -52,18 +54,18 @@ class Adoptions extends Component {
5254
}
5355

5456
render() {
55-
return (<Container style={{"marginTop":"1em"}}>
56-
<Typography align='center' gutterBottom='true' variant='h4'>Adoption/Foster Records(Top 3)</Typography>
57-
<TableContainer style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
58-
<Table>
57+
return (<Container className={styles.adoptions}>
58+
<Typography className={styles.adoptions_title} gutterBottom='true' variant='h4'>Adoption/Foster Records(Top 3)</Typography>
59+
<TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
60+
<Table className="main_table">
5961
<TableHead>
6062
<TableRow>
61-
<StyledTableCell align="center">Date of Adoption</StyledTableCell>
62-
<StyledTableCell align="center">Name</StyledTableCell>
63-
<StyledTableCell align="center">Type/Species</StyledTableCell>
64-
<StyledTableCell align="center">Primary Breed</StyledTableCell>
65-
<StyledTableCell align="center">Animal-Number</StyledTableCell>
66-
<StyledTableCell align="center">Current Age</StyledTableCell>
63+
<StyledTableCell>Date of Adoption</StyledTableCell>
64+
<StyledTableCell>Name</StyledTableCell>
65+
<StyledTableCell>Type/Species</StyledTableCell>
66+
<StyledTableCell>Primary Breed</StyledTableCell>
67+
<StyledTableCell>Animal-Number</StyledTableCell>
68+
<StyledTableCell>Current Age</StyledTableCell>
6769
</TableRow>
6870
</TableHead>
6971
<TableBody>

‎src/client/src/pages/DataView360/components/ContactInfo.js

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import { Paper, Typography, Container} from '@material-ui/core';
33
import { withStyles } from '@material-ui/core/styles';
4-
import "./styles/ContactInfo.css";
4+
import styles from "./styles/ContactInfo.module.css";
55

66
import _ from 'lodash';
77

@@ -19,47 +19,34 @@ class ContactInfo extends Component {
1919
const phoneStr = _.get(this.props, "participant.phone");
2020
let phone = _.isEmpty(phoneStr) ? '-' : phoneStr.split(" ").join("");
2121

22-
return (<Container>
23-
<Typography align='center' gutterBottom='true' variant='h4'>Contact Info</Typography>
24-
<Paper variant='outlined' style={{padding:'1em'}}>
25-
<div style={{"display":"flex", "justifyContent":"space-between"}}>
26-
<Typography>
27-
<span style={{'fontWeight':'600'}}>
28-
{'Name:\t'}
29-
</span>
22+
return (<Container className={styles.contact_info}>
23+
<Paper variant='outlined' className={styles.contact_info_main} style={{padding:'1em'}}>
24+
<div>
25+
<Typography className={styles.contact_info_name}>
3026
<span>
3127
{_.get(this.props, "participant.first_name")}{'\t'}
3228
{_.get(this.props, "participant.last_name")}
3329
</span>
3430
</Typography>
35-
<StyledContact>
36-
<span style={{'fontWeight':'600'}}>
37-
{'Phone:\t'}
38-
</span>
31+
<StyledContact className={styles.contact_info_phone}>
3932
<span>
4033
{phone}
4134
</span>
4235
</StyledContact>
43-
<Typography>
44-
<span style={{'fontWeight':'600'}}>
45-
{'Email:\t'}
46-
</span>
36+
<Typography className={styles.contact_info_email}>
4737
<span>
4838
{_.get(this.props, "participant.email")}
4939
</span>
5040
</Typography>
41+
<Typography className={styles.contact_info_address}>
42+
<span style={{"textTransform":"uppercase"}}>
43+
{_.get(this.props, "participant.mailing_street")}{'\t'}
44+
{_.get(this.props, "participant.mailing_city")}{'\t'}
45+
</span>
46+
</Typography>
5147
</div>
52-
<Typography>
53-
<span style={{'fontWeight':'600'}}>
54-
{'Address:\t'}
55-
</span>
56-
<span style={{"textTransform":"uppercase"}}>
57-
{_.get(this.props, "participant.mailing_street")}{'\t'}
58-
{_.get(this.props, "participant.mailing_city")}{'\t'}
59-
</span>
60-
</Typography>
61-
</Paper>
62-
</Container>
48+
</Paper>
49+
</Container>
6350
);
6451
}
6552
}

0 commit comments

Comments
 (0)