added scss and changed the card sizing a bit

package.json

@@ -13,6 +13,8 @@
     "mapbox-gl": "^0.40.1",
     "material-ui": "next",
     "material-ui-icons": "^1.0.0-alpha.19",
+    "node-sass-chokidar": "^0.0.3",
+    "npm-run-all": "^4.1.1",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-autosuggest": "^9.3.2",
@@ -30,8 +32,12 @@
   },
   "proxy": "http://localhost:3001",
   "scripts": {
-    "start": "react-scripts start ",
-    "build": "react-scripts build",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",

src/components/FacilityCategory.js

@@ -78,7 +78,7 @@ const FacilityCategory = ({classes, category}) => {
 
     return (
         <div className={classes.categoryWrapper}>
-            {generateAvatar()}
+            {/* {generateAvatar()} */}
             <Typography type={'body1'} noWrap>
                 {category.name}
             </Typography>

src/containers/FacilityCard.js

@@ -134,12 +134,12 @@ class FacilityCard extends React.Component {
         const {classes, facility, favorites, addFavoriteFacility, removeFavoriteFacility, setSidebar} = this.props
         const twoLineEllipsis = CSS.supports('-webkit-line-clamp', 2) ? classes.twoLineEllipsisWebkit : classes.twoLineEllipsis;
         return (
-        <Card onClick={this.handleClick} className={classes.root} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
-            <CardMedia className={classes.media}
+        <Card onClick={this.handleClick} className={'root'} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} raised>
+            <CardMedia className={'media'}
                        image={'https://gmucampus.files.wordpress.com/2010/09/00sothside2.jpg'}/>
 
-            <div className={classes.logoContainer}>
-                <CardMedia className={classes.logo}
+            <div className={'logoContainer'}>
+                <CardMedia className={'logo'}
                            image={'https://upload.wikimedia.org/wikipedia/en/d/d3/Starbucks_Corporation_Logo_2011.svg'}/>
             </div>
 
@@ -147,14 +147,14 @@ class FacilityCard extends React.Component {
             <FavoriteButton facility={facility} isFavorite={favorites.includes(facility.slug)}
                             addFavoriteFacility={addFavoriteFacility} isHovered={this.state.isHovered} removeFavoriteFacility={removeFavoriteFacility}/>
 
-            <CardContent className={classes.cardContent}>
-                <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
-                    <Grid item className={classes.smallGridItemSpacing}>
-                        <Typography type={'title'} align={'center'} className={twoLineEllipsis}>
+            <CardContent className={'cardContent'}>
+                <Grid container align={'center'} direction={'column'} className={'smallGridContainerSpacing'}>
+                    <Grid item className={'smallGridItemSpacing'}>
+                        <Typography type={'subheading'} align={'center'} className={twoLineEllipsis}>
                             {removeBrackets(facility.facility_name)}
                         </Typography>
                     </Grid>
-                    <Grid item className={classes.smallGridItemSpacing}>
+                    <Grid item className={'smallGridItemSpacing'}>
                         <FacilityCategory category={facility.facility_category} />
                     </Grid>
                 </Grid>
@@ -162,11 +162,11 @@ class FacilityCard extends React.Component {
 
             <CardActions>
                 <Grid container justify={'space-around'}>
-                    <Grid item className={classes.extraInfoWrapper}>
+                    <Grid item className={'extraInfoWrapper'}>
                         <FacilityStatus facility={facility}/>
                     </Grid>
 
-                    <Grid item className={classes.extraInfoWrapper}>
+                    <Grid item className={'extraInfoWrapper'}>
                         <Typography type={'caption'}>
                             <LocationOnIcon/>
                         </Typography>

src/index.css

@@ -14,3 +14,4 @@ body>#root{
     width:100%;
     height: 100%;
 }
+

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {applyMiddleware, compose, createStore} from 'redux';
 import './index.css';
+import './styles/containers/facilityCard.css'
 import Layout from './containers/Layout';
 import registerServiceWorker from './registerServiceWorker';
 import createHistory from 'history/createBrowserHistory'

src/styles/containers/facilityCard.css

+@media screen and (min-width: 1024px) {
+  .root {
+    width: 187.5px;
+    height: 230px;
+    border-radius: 5px;
+    position: relative; }
+  .cardContent {
+    padding: 8px 4px 0 4px !important; }
+  .smallGridContainerSpacing {
+    margin: -2px -8px !important; }
+  .smallGridItemSpacing {
+    padding: 0px 8px !important; }
+  .media {
+    flex: 1;
+    height: 86.25px; }
+  .logoContainer {
+    width: 75px;
+    height: 75px;
+    margin: auto;
+    margin-top: -45px;
+    border-radius: 50%;
+    border: 5px solid white; }
+  .logo {
+    width: 75px;
+    height: 75px;
+    margin: auto;
+    border-radius: 50%;
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
+  .extraInfoWrapper {
+    display: flex;
+    align-items: center;
+    max-width: 50%; }
+  .twoLineEllipsis {
+    position: relative;
+    line-height: 1em;
+    max-height: 2em;
+    overflow: hidden; }
+  .twoLineEllipsisWebkit {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical; } }
+
+@media screen and (min-width: 1680px) {
+  .root {
+    width: 250px;
+    border-radius: 5px;
+    position: relative; }
+  .cardContent {
+    padding: 8px 4px 0 4px !important; }
+  .smallGridContainerSpacing {
+    margin: -2px -8px !important; }
+  .smallGridItemSpacing {
+    padding: 3px 8px !important; }
+  .media {
+    flex: 1;
+    height: 115px; }
+  .logoContainer {
+    width: 100px;
+    height: 100px;
+    margin: auto;
+    margin-top: -60px;
+    border-radius: 90px;
+    border: 5px solid white; }
+  .logo {
+    width: 100px;
+    height: 100px;
+    margin: auto;
+    border-radius: 50%;
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
+  .extraInfoWrapper {
+    display: flex;
+    align-items: center;
+    max-width: 50%; }
+  .twoLineEllipsis {
+    position: relative;
+    line-height: 1em;
+    max-height: 2em;
+    overflow: hidden; }
+  .twoLineEllipsisWebkit {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical; } }

src/styles/containers/facilityCard.scss

+@media screen and (min-width:1024px) {
+    .root {
+        width: 250px * .75;
+        height:230px;
+        border-radius: 5px;
+        position: relative;
+    }
+    .cardContent {
+        padding: 8px 4px 0 4px !important;
+    }
+    .smallGridContainerSpacing {
+        margin: -2px -8px !important;
+    }
+    .smallGridItemSpacing {
+        padding: 0px 8px !important;
+    }
+    .media {
+        flex: 1;
+        height: 115px * .75;
+    }
+    .logoContainer {
+        width: 100px * .75;
+        height: 100px * .75;
+        margin: auto;
+        margin-top: -60px * .75;
+        border-radius: 50%;
+        border: 5px solid white;
+    }
+    .logo {
+        width: 100px * .75;
+        height: 100px * .75;
+        margin: auto;
+        border-radius: 50%;
+        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+    .extraInfoWrapper {
+        display: flex;
+        align-items: center;
+        max-width: 50%;
+    }
+    .twoLineEllipsis {
+        position: relative;
+        line-height: 1em;
+        max-height: 2em;
+        overflow: hidden;
+    }
+    .twoLineEllipsisWebkit {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}
+
+@media screen and (min-width:1680px) {
+    .root {
+        width: 250px;
+        border-radius: 5px;
+        position: relative;
+    }
+    .cardContent {
+        padding: 8px 4px 0 4px !important;
+    }
+    .smallGridContainerSpacing {
+        margin: -2px -8px !important;
+    }
+    .smallGridItemSpacing {
+        padding: 3px 8px !important;
+    }
+    .media {
+        flex: 1;
+        height: 115px;
+    }
+    .logoContainer {
+        width: 100px;
+        height: 100px;
+        margin: auto;
+        margin-top: -60px;
+        border-radius: 90px;
+        border: 5px solid white;
+    }
+    .logo {
+        width: 100px;
+        height: 100px;
+        margin: auto;
+        border-radius: 50%;
+        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    }
+    .extraInfoWrapper {
+        display: flex;
+        align-items: center;
+        max-width: 50%;
+    }
+    .twoLineEllipsis {
+        position: relative;
+        line-height: 1em;
+        max-height: 2em;
+        overflow: hidden;
+    }
+    .twoLineEllipsisWebkit {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}
\ No newline at end of file