Merge pull request #151 from CodeForPhilly/UI-fix

Quick fix for UI

Author: urirot

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

@@ -42,7 +42,7 @@ class Adoptions extends Component {
         // todo: update when we add pet info
         // todo: clean array of animal_id
         return (<Container className={styles.adoptions} style={{"marginTop":"1em"}}>
-                    <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster Records(Top 3)</Typography>
+                    <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster Records (Top 3)</Typography>
                     <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
                         <Table className="main_table">
                             <TableHead>

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

@@ -20,13 +20,9 @@ class ContactInfo extends Component {
         let phone = _.isEmpty(phoneStr) ? '-' : phoneStr.split(" ").join("");
 
         return (<Container className={styles.contact_info}>
-            <Typography align='center' variant='h4'>Contact Info</Typography>
                 <Paper variant='outlined' className={styles.contact_info_main} style={{padding:'1em'}}>
-                    <div style={{"display":"flex", "justifyContent":"space-between"}}>
+                    <div className={styles.contact_container}>
                         <Typography className={styles.contact_info_name}>
-                            <span style={{'fontWeight':'600'}}>
-                                {'Name:\t'}
-                            </span>
                             <span>
                                 {_.get(this.props, "participant.first_name")}{'\t'}
                                 {_.get(this.props, "participant.last_name")}

src/client/src/pages/DataView360/components/Donations.js

@@ -53,7 +53,7 @@ class Donations extends Component {
     render() {
         return (
             <Container className={styles.donations} style={{"marginTop":"1em"}}>
-                <Typography className={styles.donations_title} variant='h4'>Financial Support Activity(Top 3)</Typography>
+                <Typography className={styles.donations_title} variant='h4'>Financial Support Activity (Top 3)</Typography>
                 <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
                     <Table className="main_table">
                         <TableHead>

src/client/src/pages/DataView360/components/Volunteer.js

@@ -72,7 +72,7 @@ class Volunteer extends Component {
                     </TableContainer>
                 </Container>
                 <Container className={styles.volonteer_history} style={{"marginTop":"1em"}}>
-                    <Typography className={styles.volonteer_history_title} variant='h4'>Volunteer History(Top 3)</Typography>
+                    <Typography className={styles.volonteer_history_title} variant='h4'>Volunteer History (Top 3)</Typography>
                     <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'>
                         <Table className="main_table">
                             <TableHead>

src/client/src/pages/DataView360/components/styles/ContactInfo.module.css

@@ -27,6 +27,11 @@ div.contact_info_main::before {
 	overflow: hidden;
 	transform: translate(-50%, 0);
 }
+div.contact_info_container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
 p.contact_info_name {
 	margin-bottom: 10px;
 	font-size: 20px;

src/client/src/pages/DataView360/components/styles/table.css

@@ -11,6 +11,7 @@ div.main_table_container {
 .main_table thead th,
 .main_table tbody td {
     padding: 12px 10px 12px 20px;
+    text-align: left;
 }
 .main_table thead th:last-child,
 .main_table tbody td:last-child {