Work on mobile card design. WIP.

src/containers/FacilityCard.js

@@ -170,7 +170,7 @@ class FacilityCard extends React.Component {
                 </Grid>
             </CardContent>
 
-            <CardActions>
+            <CardActions className={'fc-card-actions'}>
                 <Grid container justify={'space-around'}>
                     <Grid item className={'fc-extra-info-wrapper'}>
                         <FacilityStatus facility={facility}/>
@@ -184,11 +184,13 @@ class FacilityCard extends React.Component {
                             {facility.facility_location.building}
                         </Typography>
                     </Grid>
+
+                    <Grid item className={classnames('fc-extra-info-wrapper', 'fc-toggle-map-btn-container')}>
+                        <Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
+                    </Grid>
                 </Grid>
             </CardActions>
 
-            <Button className={'fc-toggle-map-btn'} onClick={this.toggleMap}>Open Map</Button>
-
             <Dialog open={this.state.isMapOpen} onRequestClose={this.toggleMap} classes={{paper: 'fc-map-dialog'}}>
                 <FacilitiesMap facilities={facilities} facility={facility} isMapOpen={true}/>
             </Dialog>

src/styles/components/facilityStatus.scss

@@ -2,8 +2,8 @@
 
 .facility-status-text {
   align-items: center;
-  border: 2px solid;
-  border-radius: 10px;
+  border: 1.5px solid;
+  border-radius: 7px;
   padding: 5px;
   font-weight: bold !important;
 

src/styles/containers/facilityCard.scss

@@ -60,7 +60,7 @@
   overflow: hidden;
 }
 
-.fc-toggle-map-btn {
+.fc-toggle-map-btn-container {
   display: none !important;
 }
 
@@ -130,10 +130,25 @@
         overflow: inherit;
       }
 
-      .fc-toggle-map-btn {
+      .fc-toggle-map-btn-container {
         display: block !important;
+      }
+
+      .fc-toggle-map-btn {
         width: 100% !important;
       }
+
+      .fc-extra-info-wrapper {
+        max-width: 100%;
+        width: 100%;
+        justify-content: center;
+        padding: 4px !important;
+      }
+
+      .fc-card-actions {
+        height: inherit !important;
+        padding-top: 8px !important;
+      }
     }
   }