Made facility card SCSS file "DRYer"

src/components/Sidebar.js

@@ -24,7 +24,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
     };
 
     return (
-
         <Paper
             className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
             <div className={'sidebar-row1'}>

src/containers/FacilityCard.js

@@ -156,7 +156,7 @@ class FacilityCard extends React.Component {
             <CardContent className={'fc-card-content'}>
                 <Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}>
                     <Grid item className={'fc-small-grid-item-spacing'}>
-                        <Typography type={'subheading'} align={'center'} className={twoLineEllipsis}>
+                        <Typography type={'subheading'} align={'center'} className={classnames('fc-title', twoLineEllipsis)}>
                             {removeBrackets(facility.facility_name)}
                         </Typography>
                     </Grid>

src/containers/SearchBar.js

@@ -97,11 +97,6 @@ function getSuggestions(value,suggestions) {
 }
 
 const styles = theme => ({
-    '@media screen and (max-width: 600px)': {
-        paperBackground: {
-            width: '90% !important'
-        }
-    },
   container: {
     flexGrow: 1,
     position: 'relative',
@@ -133,7 +128,8 @@ const styles = theme => ({
   },
   paperBackground:{
       height:54,
-      width:600,
+      maxWidth:600,
+      width:'90%',
       display:'flex',
       margin:'0px auto 16px auto',
   },

src/styles/components/facilityStatus.scss

 .facility-status-text {
-  display: flex;
+  display: flex !important;
   align-items: center;
 }
\ No newline at end of file

src/styles/components/sidebar.scss

@@ -54,7 +54,7 @@
   width: 100%;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 960px) {
   .sidebar-root {
     display: none !important;
   }

src/styles/containers/facilityCard.scss

+.fc-root {
+  width: 250px;
+  border-radius: 5px;
+  position: relative;
+}
+
+.fc-card-content {
+  padding: 8px 4px 0 4px !important;
+}
+
+.fc-small-grid-container-spacing {
+  margin: -2px -8px !important;
+}
+
+.fc-small-grid-item-spacing {
+  padding: 3px 8px !important;
+}
+
+.fc-media {
+  flex: 1;
+  height: 115px;
+}
+
+.fc-logo-container {
+  width: 100px;
+  height: 100px;
+  margin: auto;
+  margin-top: -60px;
+  border-radius: 90px;
+  border: 5px solid white;
+}
+
+.fc-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);
+}
+
+.fc-title {
+  font-weight: bold !important;
+}
+
+.fc-extra-info-wrapper {
+  display: flex;
+  align-items: center;
+  max-width: 50%;
+}
+
 .fc-two-line-ellipsis {
   position: relative;
   line-height: 1em;
@@ -19,16 +69,6 @@
   .fc-root {
     width: 250px * $fc-mdScale;
     height: 230px;
-    border-radius: 5px !important;
-    position: relative;
-  }
-
-  .fc-card-content {
-    padding: 8px 4px 0 4px !important;
-  }
-
-  .fc-small-grid-container-spacing {
-    margin: -2px -8px !important;
   }
 
   .fc-small-grid-item-spacing {
@@ -36,7 +76,6 @@
   }
 
   .fc-media {
-    flex: 1;
     border-radius: 5px 5px 0 0;
     height: 115px * $fc-mdScale;
   }
@@ -44,24 +83,17 @@
   .fc-logo-container {
     width: 100px * $fc-mdScale;
     height: 100px * $fc-mdScale;
-    margin: auto;
     margin-top: -60px * $fc-mdScale;
     border-radius: 50%;
-    border: 5px solid white;
+    border: 5px * $fc-mdScale solid white;
   }
 
   .fc-logo {
     width: 100px * $fc-mdScale;
     height: 100px * $fc-mdScale;
-    margin: auto;
-    border-radius: 50%;
-    box-shadow: 0 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);
   }
 
   .fc-extra-info-wrapper {
-    display: flex;
-    align-items: center;
-    max-width: 50%;
     font-size: 11px;
   }
 
@@ -70,51 +102,3 @@
     width: 20px !important;
   }
 }
\ No newline at end of file
-
-@media screen and (min-width: 1680px) {
-  .fc-root {
-    width: 250px;
-    border-radius: 5px;
-    position: relative;
-  }
-
-  .fc-card-content {
-    padding: 8px 4px 0 4px !important;
-  }
-
-  .fc-small-grid-container-spacing {
-    margin: -2px -8px !important;
-  }
-
-  .fc-small-grid-item-spacing {
-    padding: 3px 8px !important;
-  }
-
-  .fc-media {
-    flex: 1;
-    height: 115px;
-  }
-
-  .fc-logo-container {
-    width: 100px;
-    height: 100px;
-    margin: auto;
-    margin-top: -60px;
-    border-radius: 90px;
-    border: 5px solid white;
-  }
-
-  .fc-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);
-  }
-
-  .fc-extra-info-wrapper {
-    display: flex;
-    align-items: center;
-    max-width: 50%;
-  }
-}
\ No newline at end of file

src/styles/containers/layout.scss

@@ -8,6 +8,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  overflow-x: hidden;
 }
 
 .layout-main-content {
@@ -51,7 +52,7 @@
   overflow-x: hidden;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 960px) {
   .layout-sidebar-toggle-container {
     display: none;
   }