Display scientific and genera names using italics

src/crop/ui/DisplayPage.tsx

@@ -34,6 +34,9 @@ import Permissions from 'ui/common/permission/Permissions';
 
 /*tslint:disable*/
 const styles = (theme) => ({
+  italicProperties: {
+    fontStyle: 'italic' as 'italic',
+  }
 });
 /*tslint:enable*/
 
@@ -75,7 +78,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
   }
 
   public render() {
-    const { cropDetails, shortName, t } = this.props;
+    const { cropDetails, shortName, classes, t } = this.props;
     const crop = cropDetails;
 
     return (
@@ -137,6 +140,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     terms={ crop.overview['taxonomy.genus'].terms }
                     missing={ crop.overview['taxonomy.genus'].missing }
                     total={ crop.overview['taxonomy.genus'].total }
+                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                   />
                 }
 
@@ -146,6 +150,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                     terms={ crop.overview['taxonomy.genusSpecies'].terms }
                     missing={ crop.overview['taxonomy.genusSpecies'].missing }
                     total={ crop.overview['taxonomy.genusSpecies'].total }
+                    propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                   />
                 }
                 </GridContainer >

src/institutes/ui/DisplayPage.tsx

 import * as React from 'react';
+import { withStyles } from '@material-ui/core/styles';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { translate } from 'react-i18next';
@@ -34,9 +35,18 @@ import DownloadDialog from 'ui/common/download-dialog';
 import PageTitle from 'ui/common/PageTitle';
 import BlurbText from 'cms/ui/c/BlurbText';
 
+/*tslint:disable*/
+const styles = (theme) => ({
+  italicProperties: {
+    fontStyle: 'italic' as 'italic',
+  }
+});
+/*tslint:enable*/
+
+
 interface IDisplayPageProps extends React.ClassAttributes<any> {
   t: any;
-  classes?: any;
+  classes: any;
   code: string;
   institute: FaoInstituteDetails;
   error: any;
@@ -104,7 +114,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
   }
 
   public render() {
-    const { error, loading, institute, code, userRoles, mapLayers, t } = this.props;
+    const { error, loading, institute, code, userRoles, mapLayers, classes, t } = this.props;
     const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
 
     let cropShortNameOverview;
@@ -228,6 +238,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                       terms={ taxonomyGenusOverview.terms }
                       missing={ taxonomyGenusOverview.missing }
                       total={ taxonomyGenusOverview.total }
+                      propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                     />
                   }
 
@@ -237,6 +248,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
                       terms={ taxonomyGenusSpeciesOverview.terms }
                       missing={ taxonomyGenusSpeciesOverview.missing }
                       total={ taxonomyGenusSpeciesOverview.total }
+                      propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
                     />
                   }
 
@@ -287,4 +299,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
 }, dispatch);
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(translate()(DisplayPage));
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(translate()(DisplayPage)));

src/ui/common/Properties.tsx

@@ -27,6 +27,10 @@ const styles = (theme) => ({
         },
         /* tslint:enable */
     },
+    propertiesRowLabel: {
+        fontSize: '1rem',
+        fontFamily: 'Roboto, sans-serif',
+    },
     propertiesValue: {
         // display: 'flex' as 'flex',
         // flexWrap: 'wrap' as 'wrap',
@@ -62,7 +66,7 @@ interface IItemProps extends React.ClassAttributes<any> {
     className?: string;
 }
 
-class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
+class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesRowLabel' | 'propertiesValue' | 'propertiesValueSmall' | 'propertiesValueNumeric'>, any> {
 
     public render() {
         const { keepEmpty, small, md, numeric, title, classes, className, children, t, style } = this.props;
@@ -74,7 +78,7 @@ class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertie
           <Grid item xs={ 12 } md={ small ? 3 : md ? 6 : 12 } lg={ md ? 4 : 12 } className={ `${classes.propertiesRow} ${className ? className : ''}` }>
             <Grid container  style={ small ? {height: '100%' } : {} } spacing={ 0 }>
               { hasTitle && (
-                <Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className="font-bold p-halfrem" style={ { fontSize: '1rem', fontFamily: 'Roboto, sans-serif' } }>
+                <Grid item xs={ (small || md) && numeric ? 8 : 6 } md={ small ? 12 : (numeric ? 10 : 4) } className={ `font-bold p-halfrem ${classes.propertiesRowLabel}` } >
                     { title && typeof title === 'string' ? t(title) : title }
                 </Grid>
               ) }

src/ui/common/PropertiesCard.tsx

@@ -6,7 +6,7 @@ import { translate } from 'react-i18next';
 
 interface IBundledProps extends React.ClassAttributes<any> {
     children?: any;
-    propertiesList: Array<{title: string, value: any}>;
+    propertiesList: Array<{title: string, value: any, customProps?: any}>;
     title: string;
     small?: boolean;
     t: any;
@@ -36,7 +36,7 @@ class PropertiesCard extends React.Component<IBundledProps, any> {
                             <Properties>
                                 {
                                     propertiesList.map((property, i) => (
-                                        <PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps }>
+                                        <PropertiesItem key={ `${i}-${property.title}` } title={ property.title } { ...propertyItemProps } { ...property.customProps }>
                                             { property.value &&  typeof property.value === 'number' ? t(`common:label.prettyNumber`, {value: property.value}) : property.value }
                                         </PropertiesItem>
                                     ))

src/ui/common/pie-chart/PieChartCard.tsx

@@ -9,6 +9,7 @@ interface IPieChartCardProps extends React.ClassAttributes<any> {
   terms: Array<{term: string, count: any}>;
   total: number;
   missing?: number;
+  propertyItemProps?: any;
 
   t: any;
 }
@@ -17,7 +18,7 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
 
 
   public render() {
-    const {title, maxTerms = 5, terms, total, missing = 0, t} = this.props;
+    const {title, maxTerms = 5, terms, total, missing = 0, propertyItemProps, t} = this.props;
 
     const topXTerms = terms.slice(0, maxTerms).map((term) => ({title: term.term, value: term.count}));
     const other = total - missing - topXTerms.map((term) => term.value).reduce((cur, val) => cur + val);
@@ -27,10 +28,10 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
         title={ title }
         propertiesList={ [
           ...topXTerms,
-          {title: t('common:label.other'), value: other},
-          {title: t('common:label.missing'), value: missing},
+          {title: t('common:label.other'), value: other, customProps: { classes: null }},
+          {title: t('common:label.missing'), value: missing, customProps: { classes: null }},
         ] }
-        propertyItemProps={ {numeric: true} }
+        propertyItemProps={ {numeric: true, ...propertyItemProps} }
         small
       >
         <PieChart