Removed ETA via walking, replaced with open / closed status. Toned down color.

src/components/FacilityCategory.js

@@ -3,14 +3,13 @@ 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';
+import {red, blue, brown, grey, teal, deepOrange, lime} from 'material-ui/colors';
 
 /*
     Proposed Category Types:
@@ -41,24 +40,19 @@ const FacilityCategory = ({classes, category}) => {
 
         switch (category.id) {
             case 1: //Dining Hall
-                color = amber[500];
-                icon = <RestaurantMenuIcon className={classes.categoryIcon}/>;
-                break;
             case 2: //Restaurant
-                color = blue[500];
+            case 5: //Take out dining hall
+                color = red[400];
                 icon = <RestaurantIcon className={classes.categoryIcon}/>;
                 break;
             case 3: //Convenience Store
-                color = purple[500];
+                color = blue[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}/>;

src/components/FacilityStatus.js

 import React from 'react';
 import {withStyles} from 'material-ui/styles';
-import Chip from 'material-ui/Chip';
 import Typography from 'material-ui/Typography';
+import DoneIcon from 'material-ui-icons/Done';
+import CloseIcon from 'material-ui-icons/Close';
+import AlarmIcon from 'material-ui-icons/Alarm';
 import {blue, green, orange, red} from 'material-ui/colors'
 
 const FacilityStatus = ({classes, facility}) => {
@@ -184,64 +186,68 @@ const FacilityStatus = ({classes, facility}) => {
     };
 
     /**
-     * Generates the chip label
+     * Generates information about the facility's status.
      *
      * @param isOpen True if the facility is open, otherwise false.
      * @param time The time in minutes until the facility opens / closes.
-     * @returns {string} The label for the chip
+     * @returns {{label: string, color: *, icon: *}} Information about the facility.
      */
-    const chipLabel = (isOpen, time) => {
-        if (time === -1) {
-            return "OPEN 24/7"
-        }
+    const generateStatusInfo = (isOpen, time) => {
+        let label;
+        let color;
+        let icon;
 
-        if (isOpen && time > 60) {
-            return "OPEN";
+        if (time === -1) {
+            label = 'OPEN 24/7';
+            color = green[500];
+            icon = <DoneIcon/>;
+        } else if (isOpen && time > 60) {
+            label = 'OPEN';
+            color = green[500];
+            icon = <DoneIcon/>;
         } else if (isOpen && time <= 30) {
-            return "CLOSING SOON";
+            label = 'CLOSING SOON';
+            color = orange[500];
+            icon = <AlarmIcon/>;
         } else if (!isOpen && time > 15) {
-            return "CLOSED";
+            label = 'CLOSED';
+            color = red[500];
+            icon = <CloseIcon/>
         } else {
-            return `OPENING IN ${Math.round(time)}m`;
+            label = `OPENS IN ${Math.round(time)}m`;
+            color = blue[500];
+            icon = <AlarmIcon/>
         }
-    };
 
-    /**
-     * Generates the background color of the chip.
-     *
-     * @param isOpen True if the facility is open, otherwise false.
-     * @param time The time in minutes until the facility opens / closes.
-     * @returns {string} The background color of the chip.
-     */
-    const backgroundColor = (isOpen, time) => {
-        if (time === -1) {
-            return green[500];
-        }
-
-        if (isOpen && time > 60) {
-            return green[500];
-        } else if (isOpen && time <= 30) {
-            return orange[500];
-        } else if (!isOpen && time > 15) {
-            return red[500];
-        } else {
-            return blue[500];
+        return {
+            label: label,
+            color: color,
+            icon: icon,
         }
     };
 
-    const time = timeTill(facility);
+    const statusInfo = generateStatusInfo(facility.isOpen, timeTill(facility));
 
     return (
-        <Chip label={
+        <Typography type={'caption'} className={classes.statusText} style={{color: statusInfo.color}}>
+            {statusInfo.icon}
+            {statusInfo.label}
+        </Typography>
+
+        /*<Chip label={
             <div>
                 <Typography type={'caption'} className={classes.isOpenText}>
                     {chipLabel(facility.isOpen, time)}
                 </Typography>
             </div>
-        } className={classes.chip} style={{backgroundColor: backgroundColor(facility.isOpen, time)}}/>
+        } className={classes.chip} style={{backgroundColor: backgroundColor(facility.isOpen, time)}}/>*/
     )
 };
 const styleSheet = {
+    statusText: {
+      display: 'flex',
+      alignItems: 'center'
+    },
     chip: {
         height: '28px',
         borderRadius: '4px',

src/containers/FacilityCard.js

@@ -137,9 +137,6 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
                             {removeBrackets(facility.facility_name)}
                         </Typography>
                     </Grid>
-                    <Grid item className={classes.smallGridItemSpacing}>
-                        <FacilityStatus facility={facility}/>
-                    </Grid>
                     <Grid item className={classes.smallGridItemSpacing}>
                         <FacilityCategory category={facility.facility_category} />
                     </Grid>
@@ -149,12 +146,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
             <CardActions>
                 <Grid container justify={'space-around'}>
                     <Grid item className={classes.extraInfoWrapper}>
-                        <Typography type={'caption'}>
-                            <DirectionsWalkIcon/>
-                        </Typography>
-                        <Typography type={'caption'} align={'center'}>
-                            3M
-                        </Typography>
+                        <FacilityStatus facility={facility}/>
                     </Grid>
 
                     <Grid item className={classes.extraInfoWrapper}>
@@ -177,7 +169,7 @@ const styleSheet = {
         position: 'relative'
     },
     cardContent: {
-        padding: '8px 4px !important'
+        padding: '8px 4px 0 4px !important'
     },
     smallGridContainerSpacing: {
         margin: '-2px -8px !important'