Started working on FacilityCategory (The category icon).

src/components/FacilityCategory.js

+import React from 'react';
+import {withStyles} from 'material-ui/styles';
+import Avatar from 'material-ui/Avatar';
+import Typography from 'material-ui/Typography';
+import RestaurantIcon from 'material-ui-icons/Restaurant';
+import RestaurantMenuIcon from 'material-ui-icons/RestaurantMenu';
+import StoreIcon from 'material-ui-icons/Store';
+import LocalCafeIcon from 'material-ui-icons/LocalCafe';
+import LocalPrintShopIcon from 'material-ui-icons/LocalPrintshop';
+import LocalPostOfficeIcon from 'material-ui-icons/LocalPostOffice';
+import FitnessCenterIcon from 'material-ui-icons/FitnessCenter';
+import ShoppingCartIcon from 'material-ui-icons/ShoppingCart'
+import {amber, purple, brown, grey, teal, blue, deepOrange, lime} from 'material-ui/colors';
+
+/*
+    Proposed Category Types:
+
+    dining hall
+    convenience store
+    cafe
+    restaurant
+    food truck ???
+    athletic
+    mailroom
+    print services
+    retail
+    school offices
+    student centers
+ */
+
+const FacilityCategory = ({classes, category}) => {
+
+    const generateAvatar = () => {
+        let color;
+        let icon;
+
+        /*
+            TODO: May not want to hardcode the id's. Can be dynamically retrieved from /api/categories.
+            this wouldn't be of any use unless the API returns something to indicate the icon / color.
+         */
+
+        switch (category.id) {
+            case 1: //Dining Hall
+                color = amber[500];
+                icon = <RestaurantMenuIcon className={classes.categoryIcon}/>;
+                break;
+            case 2: //Restaurant
+                color = blue[500];
+                icon = <RestaurantIcon className={classes.categoryIcon}/>;
+                break;
+            case 3: //Convenience Store
+                color = purple[500];
+                icon = <StoreIcon className={classes.categoryIcon}/>;
+                break;
+            case 4: //Cafe
+                color = brown[500];
+                icon = <LocalCafeIcon className={classes.categoryIcon}/>;
+                break;
+            //case 5: //Take out dining hall
+                //TODO: No idea for this icon...
+                //break;
+            case 6: //Athletic Facility
+                color = teal[500];
+                icon = <FitnessCenterIcon className={classes.categoryIcon}/>;
+                break;
+            case 7: //TODO: Print Services - NOT IN API
+                color = grey[500];
+                icon = <LocalPrintShopIcon className={classes.categoryIcon} />;
+                break;
+            case 8: //TODO Mailroom - NOT IN API
+                color = deepOrange[500];
+                icon = <LocalPostOfficeIcon className={classes.categoryIcon}/>;
+                break;
+            default:
+                color = lime[500];
+                icon = <ShoppingCartIcon className={classes.categoryIcon}/>
+        }
+
+        return (
+            <Avatar className={classes.avatar} style={{backgroundColor: color}}>
+                {icon}
+            </Avatar>
+        )
+    };
+
+    return (
+        <div className={classes.categoryWrapper}>
+            {generateAvatar()}
+            <Typography type={'body1'} className={classes.nunito} noWrap>
+                {category.name}
+            </Typography>
+        </div>
+    )
+};
+
+const styleSheet = {
+    categoryWrapper: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    categoryIcon: {
+        width: '14px !important',
+        height: '14px !important',
+        padding: '4px !important',
+    },
+    avatar: {
+        width: 'auto !important',
+        height: 'auto !important',
+        marginRight: '8px'
+    },
+    nunito: {
+        fontFamily: 'Nunito'
+    }
+};
+
+export default withStyles(styleSheet)(FacilityCategory);
\ No newline at end of file

src/components/FacilityStatus.js

@@ -56,7 +56,7 @@ const FacilityStatus = ({classes, facility}) => {
                 timeInParts[2]);
 
             const entryTillOpen = openTime - curDateTime;
-            if (!timeTillOpen || (entryTillOpen > 0 && entryTillOpen < timeTillOpen)) {
+            if (entryTillOpen > 0 && (!timeTillOpen || (entryTillOpen < timeTillOpen))) {
                 timeTillOpen = entryTillOpen;
             }
         }

src/containers/FacilityCard.js

@@ -3,13 +3,12 @@ import {withStyles} from 'material-ui/styles';
 import Card, {CardActions, CardContent, CardMedia} from 'material-ui/Card';
 import Typography from 'material-ui/Typography';
 import Grid from 'material-ui/Grid';
-import Avatar from 'material-ui/Avatar';
 import FacilityStatus from '../components/FacilityStatus';
 import FavoriteButton from '../components/FavoriteButton';
+import FacilityCategory from '../components/FacilityCategory';
 import {compose} from 'redux';
 import {connect} from 'react-redux';
 import {addFavoriteFacility, removeFavoriteFacility, setSidebar} from '../actions/ui';
-import RestaurantIcon from 'material-ui-icons/Restaurant';
 import DirectionsWalkIcon from 'material-ui-icons/DirectionsWalk';
 import LocationOnIcon from 'material-ui-icons/LocationOn';
 import {removeBrackets} from '../utils/nameUtils';
@@ -134,14 +133,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
                         <FacilityStatus facility={facility}/>
                     </Grid>
                     <Grid item className={classes.smallGridItemSpacing}>
-                        <div className={classes.categoryWrapper}>
-                            <Avatar className={classes.avatar}>
-                                <RestaurantIcon className={classes.categoryIcon}/>
-                            </Avatar>
-                            <Typography type={'body1'} className={classes.nunito} noWrap>
-                                {facility.facility_category.name}
-                            </Typography>
-                        </div>
+                        <FacilityCategory category={facility.facility_category} />
                     </Grid>
                 </Grid>
             </CardContent>
@@ -198,24 +190,6 @@ const styleSheet = {
     mediaContainer: {
         position: 'relative'
     },
-    avatarContainer: {
-        marginRight: '8px'
-    },
-    avatar: {
-        width: 'auto !important',
-        height: 'auto !important',
-        marginRight: '8px',
-        backgroundColor: red[500],
-    },
-    categoryWrapper: {
-        display: 'flex',
-        alignItems: 'center'
-    },
-    categoryIcon: {
-        width: '14px !important',
-        height: '14px !important',
-        padding: '4px !important',
-    },
     logoContainer: {
         width: '100px',
         height: '100px',