Add company list

nextjs/components/organisms/CompanyRow.js

@@ -9,7 +9,9 @@ import CardContent from '@material-ui/core/CardContent';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardMedia from '@material-ui/core/CardMedia';
 import Typography from '@material-ui/core/Typography';
-
+import Chip from '@material-ui/core/Chip';
+import IconText from './../atoms/IconText';
+import KeyboardArrowleftIcon from '@material-ui/icons/PlayArrowRounded';
 
 const { publicRuntimeConfig } = getConfig()
 
@@ -17,7 +19,7 @@ const styles = theme => ({
   card: {
     display: 'flex',
     position: 'relative',
-    height: '50vh',
+    height: '60vh',
     width: '100%',
     
     [theme.breakpoints.up('md')]: {
@@ -30,22 +32,24 @@ const styles = theme => ({
       width : '100%',
     },
 
-    margin: '1vh 2vh 1vh 2vh',
+    margin: theme.spacing(1.5),
+    marginBottom: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      margin: '1vh 0 1vh 0',
+      margin: theme.spacing(2,0),
     },
-    borderRadius: 0
+    borderRadius: '4px',
   },
   details_container: {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    padding: '8vh 0 0 0',
+    width: '100%',
+    paddingTop: theme.spacing(6),
   },
   company_title: {
+    textAlign: 'center',
     fontSize: '1em',
-    fontWeight: 'normal',
-    textTransform: 'uppercase',
+    fontWeight: '500',
   },
   content: {
     display: 'flex',
@@ -60,23 +64,50 @@ const styles = theme => ({
     height: '50%',
     backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
+    position: 'relative',
   },
   logo_container: {
     display: 'flex',
     alignItems: 'center',
-    width: 100,
-    height: 100,
+    width: 90,
+    height: 90,
     position: 'absolute',
     left: '50%',
     top: '50%',
     transform: 'translate(-50%, -66%)',
     backgroundColor: 'white',
     boxShadow: '0 8px 6px -6px grey',
+    borderRadius: '5px',
+  },
+  IconText_container: {
+    width: '100%',
+  },
+  iconText: {
+    marginLeft: 0,
+    padding: theme.spacing(2,3),
+    justifyContent: 'flex-start',
+  },
+  iconTextIcon: {
+    color: theme.palette.offerlistitem.icon,
+    fontSize: '1em',
+  },
+  iconTextText: {
+    color: theme.palette.offerlistitem.text,
+    fontSize: '0.8em',
+    textTransform: 'capitalize',
+    paddingLeft: theme.spacing(1),
+  },
+  iconPlay: {
+    fontSize: '3em',
+    color: theme.palette.background.grey,
+    position: 'absolute',
+    top: 'calc(50% - 0.5em)',
+    left: 'calc(50% - 0.5em)',
   },
   logo: {
     width: '100%',
     height: 'auto',
-    objectfit: 'contain',
+    objectFit: 'contain',
     borderRadius: 0,
   },
   chip: {
@@ -96,65 +127,36 @@ class CompanyRowComponent extends React.Component {
     const imgUrl = (rowData.presentation_video && rowData.presentation_video.thumbnails[0] && rowData.presentation_video.thumbnails[0].sizes[4]) ? rowData.presentation_video.thumbnails[0].sizes[4].link : imgDefaultUrl
     const logoUrl = publicRuntimeConfig.logoRootUrl + rowData.logo
 
+    const location = (rowData.addresses.billing.city.toLowerCase() +', '+rowData.addresses.billing.postcode)
 
     return (
-      <Card onClick={() => Router.push(`/Company?id=${rowData.id}`)}>
+      <Card className={classes.card} onClick={() => Router.push(`/Company?id=${rowData.id}`)}>
         <CardContent className={classes.content}>
           <CardMedia
             className={classes.cover}
             image={imgUrl}
             title={rowData.title}
-          />
-
+          >
+              <KeyboardArrowleftIcon className={classes.iconPlay} />
+          </CardMedia>
           <div className={classes.logo_container}>
             <Avatar className={classes.logo} src={logoUrl} />
           </div>
 
           <div className={classes.details_container}>
             <Typography
-              gutterBottom
-              variant="headline"
-              variant="h6"
-              component="h4"
-              align="center"
-              className={classes.company_title}>
-              {rowData.business_name}
-            </Typography>
-            {/* <Typography
-              gutterBottom
               variant="headline"
               variant="h6"
               component="h3"
-              align="center"
-              className={classes.job_title}>
-              {rowData.title}
-            </Typography> */}
-          </div>
-          <div>
-            {/* <Chip label={rowData.extra.contract_type} className={classes.chip} />
-            <Chip label={rowData.location.gmap_address.address_components[0].long_name} className={classes.chip} /> */}
+              className={classes.company_title}>
+              {rowData.business_name}
+            </Typography>
+            <div className={classes.IconText_container}>
+              <IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={location} />
+            </div>
           </div>
+          <Chip color="primary" size="small" label="Basic Chip" className={classes.chip} />
         </CardContent>
-        {/* <CardHeader />
-        <CardContent>
-          <CardMedia
-            className={classes.cover}
-            image={imgUrl}
-            title={rowData.presentation_video&&rowData.presentation_video.title}
-          />
-          <Typography gutterBottom  component="h3"
-            className={classes.details}>
-            {rowData.brand_name}
-          </Typography>
-          <Typography gutterBottom  component="h4"
-            className={classes.details}>
-            {rowData.website}
-          </Typography>
-          <Typography gutterBottom  component="h5"
-            className={classes.details}>
-            {rowData.description}
-          </Typography>
-        </CardContent> */}
       </Card>
     );
   }

nextjs/pages/Companies.js

@@ -14,17 +14,30 @@ import { CompaniesSelector } from '../reducers/companies'
 import { connect } from "react-redux";
 
 const styles = theme => ({
-    root: {
-      position: 'relative',
-      textAlign: 'center',
-      paddingTop: theme.spacing(20),
-      justifyContent: 'center',
-    },
-    container: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-    },
+  root: {
+    position: 'relative',
+    textAlign: 'center',
+    paddingTop: theme.spacing(20),
+    justifyContent: 'center',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    padding: theme.spacing(0,1),
+  },
+  title: {
+    fontFamily: 'Dosis',
+    fontSize: '1.5em',
+    fontWeight: '600',
+    textAlign: 'center',
+    marginTop: theme.spacing(4),
+    marginBottom: theme.spacing(3),
+    padding: theme.spacing(0,8),
+  },
+  primary: {
+    color: theme.palette.primary.main,
+  },
     
   });
   
@@ -35,16 +48,19 @@ const styles = theme => ({
   
       return (
         <LayoutGrid backLink="/">
-          <div className={classes.container}>
-            <Grid CustomRowComponent={CompanyRow}
-             dataFetcher={this.props.fetchCompaniesRequest}
-             data={this.props.companies}
-             currentPage={this.props.currentPage}
-             recordCount={this.props.recordCount}
-             >
-            </Grid>
-          </div>
-        </LayoutGrid>
+        <Typography gutterBottom component="h1"
+          className={classes.title}>
+          Les entreprises en <span className={classes.primary}>vidéo</span>
+        </Typography>
+        <div className={classes.container}>
+          <Grid CustomRowComponent={CompanyRow}
+            dataFetcher={this.props.fetchCompaniesRequest}
+            data={this.props.companies}
+            currentPage={this.props.currentPage}
+            recordCount={this.props.recordCount}
+          />
+        </div>
+      </LayoutGrid>
       );
     }