Continued work on facility mobile dialog.

src/components/FacilityDialog.js

 import React from 'react';
-import Dialog, {DialogTitle, DialogContent} from 'material-ui/Dialog';
+import Dialog from 'material-ui/Dialog';
 import Grid from 'material-ui/Grid';
 import FacilityTags from './FacilityTags';
 import WeekHours from './WeekHours';
@@ -7,7 +7,9 @@ import Button from 'material-ui/Button';
 import Avatar from 'material-ui/Avatar';
 import Typography from 'material-ui/Typography';
 import MapDialog from './MapDialog';
-import TextwTitle from './TextwTitle';
+import CloseIcon from 'material-ui-icons/Close';
+import IconButton from 'material-ui/IconButton';
+import LocationOnIcon from 'material-ui-icons/LocationOn';
 import {getMaxBounds} from '../utils/mapboxUtils';
 import {removeBrackets} from '../utils/nameUtils';
 
@@ -42,24 +44,32 @@ class FacilityDialog extends React.Component {
 
         return (
             <Dialog classes={{root: 'fd-dialog-root', paper: 'fd-dialog-paper'}} open={isOpen} onRequestClose={onRequestClose}>
-                <Grid container className={'fd-container'}>
-                    <Grid item>
+                <IconButton className={'fd-close-btn'} onClick={onRequestClose}>
+                    <CloseIcon />
+                </IconButton>
+                <Grid container className={'fd-container'} justify={'center'}>
+                    <Grid item className={'fd-header-container'}>
                         <Grid container className={'fd-header'}>
                             <Grid item>
                                 <Avatar src={require('../images/chipotleLogo.png')} />
                             </Grid>
-                            <Grid item>
-                                <Typography type={'headline'}>{removeBrackets(facility.facility_name)}</Typography>
+                            <Grid item className={'fd-header-text-container'}>
+                                <Typography className={'fd-header-text'} type={'headline'}>
+                                    {removeBrackets(facility.facility_name)}
+                                    </Typography>
                             </Grid>
                         </Grid>
                     </Grid>
 
-
-                    <Grid item>
-                        <TextwTitle label="Building" content={facility.facility_location.building} />
+                    <Grid item className={'fd-location-wrapper'}>
+                        <Typography type={'caption'}>
+                            <LocationOnIcon/>
+                        </Typography>
+                        <Typography title={facility.facility_location.building} type={'caption'} align={'center'}>
+                            {facility.facility_location.building}
+                        </Typography>
                     </Grid>
 
-
                     <Grid item className={'fd-facility-tags'}>
                         <FacilityTags facility={facility}/>
                     </Grid>

src/styles/components/facilityDialog.scss

 @import '../variables';
 
+.fd-small-grid {
+  padding: 4px !important;
+}
+
 .fd-dialog-paper {
-  width: 100%;
+  //width: 100%;
+  width: auto !important;
+  border-radius: 5px !important;
 }
 
 .fd-container {
   margin: 0 !important;
   width: 100% !important;
+  overflow-x: hidden;
+}
+
+.fd-close-btn {
+  position: absolute !important;
+  width: 24px !important;
+  height: 24px !important;
+  top: 5px;
+  right: 5px;
+}
+
+.fd-header-container {
+  @extend .fd-small-grid;
+
+  width: 100%;
 }
 
 .fd-header {
-  display: flex;
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: center;
+}
+
+.fd-header-text-container {
+  flex: 1 !important;
+}
+
+.fd-header-text {
+  max-width: 80% !important;
+}
+
+.fd-location-wrapper {
+  @extend .fd-small-grid;
+
+  display: flex !important;
   align-items: center;
-  width: 100%;
 }
 
 .fd-facility-tags {
+  @extend .fd-small-grid;
+
   width: 100%;
 }
 
 .fd-week-hours {
+  @extend .fd-small-grid;
+
   width: 100%;
 }