saving changes

package.json

@@ -32,7 +32,7 @@
   },
   "proxy": "http://localhost:3001",
   "scripts": {
-    "build-css": "node-sass-chokidar src/styles/whatsOpen.scss -o src/styles/",
+    "build-css": "node-sass-chokidar src/styles/ -o src/styles/",
     "watch-css": "npm run build-css --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",

src/components/MapDialog.js

@@ -72,7 +72,7 @@ class MapDialog extends React.Component {
           borderRadius:'5px',
         }}
         center={center}
-        zoom={[zoom]}
+        zoom={zoom}
         maxBounds={maxBounds}>
          
             {(facilities.length > 0) && facilities.map((item) =>{

src/styles/_variables.scss

-$breakpoints: (
-        xs: 360px,
-        sm: 600px,
-        md: 900px,
-        lg: 1024px,
-        xl: 1680px,
-);
-
-/* FacilityCard */
-
-$fc-lg-scale: .8;
-$fc-sm-scale: .75;
-
-/* Favorite Button */
-
-$favorite-button-lg-scale: .8;
-$favorite-button-sm-scale: .75;
\ No newline at end of file

src/styles/components/appBar.css

+.app-bar {
+  background-color: white !important;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important; }
+
+.app-bar-title {
+  margin-right: auto !important; }
+
+.app-bar-menu-button {
+  display: none !important; }
+
+.app-bar-logo {
+  width: 30px;
+  height: 30px;
+  margin-right: 5px; }
+
+.app-bar-text-color {
+  color: #354052; }
+
+@media screen and (max-width: 600px) {
+  .app-bar-link-button {
+    display: block !important;
+    padding: 0 !important;
+    text-align: left; }
+  .app-bar-menu-button {
+    display: inherit !important; }
+  .app-bar-hide {
+    max-height: 0 !important;
+    overflow: hidden; }
+  .app-bar-tool-bar {
+    flex-wrap: wrap; }
+  .app-bar-link-container {
+    display: block;
+    flex-basis: 100%;
+    transition: ease-in-out 2s; } }

src/styles/components/cardContainer.css

+.card-container-root {
+  margin: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap; }

src/styles/components/facilityCategory.css

+.facility-category-wrapper {
+  display: flex;
+  justify-content: center; }
+
+.facility-category-icon {
+  width: 14px !important;
+  height: 14px !important;
+  padding: 4px !important; }
+
+.facility-category-icon {
+  width: auto !important;
+  height: auto !important;
+  margin-right: 8px; }

src/styles/components/facilityStatus.css

+.facility-status-text {
+  align-items: center;
+  border: 1.5px solid;
+  border-radius: 3px;
+  padding: 5px;
+  font-weight: bold !important; }
+  .facility-status-text.facility-status-closed {
+    color: white;
+    background-color: #f44336;
+    border-color: #f44336; }
+  .facility-status-text.facility-status-open {
+    color: #4caf50;
+    border-color: #4caf50; }

src/styles/components/favoriteButton.scss

@@ -21,7 +21,8 @@
 }
 
 //Between lg and xl
-@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
+//@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
+@media screen and (min-width: 1024px) and (max-width: 1680px) {
   .favorite-button-heart {
     height: 24px * $favorite-button-lg-scale !important;
     width: 24px * $favorite-button-lg-scale !important;
@@ -30,7 +31,8 @@
 }
 
 //Under lg
-@media screen and (max-width: map-get($breakpoints, lg)) {
+//@media screen and (max-width: map-get($breakpoints, lg)) {
+@media screen and (max-width: 1024px) {
   .favorite-button-heart {
     height: 24px * $favorite-button-sm-scale !important;
     width: 24px * $favorite-button-sm-scale !important;

src/styles/components/textwTitle.scss

@@ -8,7 +8,8 @@
   font-family: "Roboto-Medium";
   font-size: 14px;
   text-overflow: ellipsis;
-  width: 176px;
+  width: 100%;
+  margin:8px;
   white-space: nowrap;
   overflow: hidden;
   color:#354052;

src/styles/containers/facilityCard.scss

@@ -87,7 +87,9 @@
 }
 
 //Between lg and xl
-@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
+// (min-width: 1024px) and (max-width: 1680px) 
+//@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
+@media screen and (min-width: 1024px) and (max-width: 1680px) {
   .fc-root {
     width: 250px * $fc-lg-scale;
     height: 230px;
@@ -125,7 +127,9 @@
 }
 
 //Under lg
-@media screen and (max-width: map-get($breakpoints, lg)) {
+// (max-width: 1024px)
+//@media screen and (max-width: map-get($breakpoints, lg)) {
+@media screen and (max-width: 1024px) {
   .fc-root {
     &.fc-selected {
       .fc-one-line-ellipsis {

src/styles/whatsOpen.scss

@@ -11,4 +11,7 @@
 @import './components/textwTitle';
 
 @import './containers/facilityCard';
-@import './containers/layout';
+@import './containers/layout';
\ No newline at end of file
+.something{
+    display: flex;
+} 
\ No newline at end of file