Remove @media queries for screen size

src/components/AppBar.tsx

@@ -4,17 +4,13 @@ import SearchBar from '../containers/SearchBar';
 import AlertContainer from '../containers/AlertContainer';
 import { AppBar, Toolbar, Typography, Button } from '@material-ui/core';
 
-interface AppBarProps {
-    isMobile?: boolean;
-}
-
-export default ({isMobile}: AppBarProps) => {
+export default () => {
     const [isSearchExpanded, setIsSearchExpanded] = React.useState<boolean>(false);
 
     return (
         <div>
             <AppBar position="absolute"
-                    className={classNames('app-bar', isSearchExpanded && 'app-bar-search-expanded', isMobile && 'app-bar-mobile')}>
+                    className={classNames('app-bar', isSearchExpanded && 'app-bar-search-expanded')}>
                 <Toolbar className={'app-bar-tool-bar'}>
                     <div className={'app-bar-logo-name'}>
                         <img src={'favicon.png'} className={'app-bar-logo'}/>

src/containers/DesktopLayout.tsx

@@ -36,14 +36,14 @@ export default () => {
     const showSpinner = isFetching && (!facilities || facilities.length === 0);
 
     return (
-        <div className={'layout-root'}>
+        <div className={'desktop-layout-root'}>
             <AppBar />
             
             {showSpinner && <LoadingSpinner />}
 
-            <div className={'layout-container'}>
-                <div className={'layout-main-content'}>
-                    <div className={'layout-card-container'}>
+            <div className={'desktop-layout-container'}>
+                <div className={'desktop-layout-main-content'}>
+                    <div className={'desktop-layout-card-container'}>
                         <CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={true} />
                     </div>
                 </div>

src/containers/MobileLayout.tsx

@@ -43,7 +43,7 @@ export default () => {
 
     return (
       <div className={'mobile-layout-root'}>
-        <AppBar isMobile={true} />
+        <AppBar />
 
         {showSpinner && <LoadingSpinner />}
 

src/containers/SearchBar.tsx

@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
 import { CampusRegion } from '../models/facility.model';
 import { setSearchTermAction, setSelectedCampusRegionAction } from '../store/ui/ui.actions';
 import { trackPiwikEvent } from '../piwik/piwik';
-import { isMobile } from 'react-device-detect';
 import { IconButton, Input, Paper, MenuItem, Select, FormControl } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
@@ -80,8 +79,7 @@ export default ({onSearchExpand, onSearchCollapse}: SearchBarProps) => {
     
     return (
         <Paper className={classNames('search-bar-paper-background', isFocused && 'search-bar-focus',
-            value && 'search-bar-has-value', isMobileOpen && 'search-bar-mobile-open',
-            isMobile && 'search-bar-mobile')}>
+            value && 'search-bar-has-value', isMobileOpen && 'search-bar-mobile-open')}>
             <IconButton onClick={handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
                 <SearchIcon className={'search-bar-search-icon'}/>
             </IconButton>

src/styles/components/appBar.scss

@@ -28,13 +28,13 @@
   align-items: center;
 }
 
-.app-bar:not(.app-bar-mobile) {
+.desktop-layout-root {
   .app-bar-logo-name {
     margin-right: auto !important;
   }
 }
 
-.app-bar-mobile {
+.mobile-layout-root {
   .app-bar-link-container {
     display: none !important;
   }
@@ -49,7 +49,7 @@
     justify-content: space-between;
   }
 
-  &.app-bar-search-expanded {
+  .app-bar-search-expanded {
     .app-bar-tool-bar {
       padding: 0 !important;
     }

src/styles/components/favoriteButton.scss

@@ -15,28 +15,29 @@
   color: #E91E63 !important; //TODO: Somehow use materials color system
 }
 
-//Between lg and xl
-@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
-  .favorite-button-heart {
-    height: 24px * $favorite-button-lg-scale !important;
-    width: 24px * $favorite-button-lg-scale !important;
-    padding: 5px * $favorite-button-lg-scale !important;
+.desktop-layout-root {
+  //Between lg and xl
+  @media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
+    .favorite-button-heart {
+      height: 24px * $favorite-button-lg-scale !important;
+      width: 24px * $favorite-button-lg-scale !important;
+      padding: 5px * $favorite-button-lg-scale !important;
+    }
   }
-}
 
-//Above lg
-@media screen and (min-width: map-get($breakpoints, lg)) {
-  .favorite-button-heart-hover {
-    color: grey;
+  //Above lg
+  @media screen and (min-width: map-get($breakpoints, lg)) {
+    .favorite-button-heart-hover {
+      color: grey;
 
-    @media (prefers-color-scheme: dark) {
-      color: white;
+      @media (prefers-color-scheme: dark) {
+        color: white;
+      }
     }
   }
 }
 
-//Under lg
-@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
+.mobile-layout-root {
   .favorite-button-heart {
     top: 5px;
     left: 5px;

src/styles/components/sidebar.scss

@@ -90,14 +90,4 @@
 .sidebar-scroll {
   height: calc(100% - 220px - 116px - 32px) !important;
   overflow-y: auto;
-}
-
-@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .sidebar-root {
-    display: none !important;
-  }
-
-  .sidebar-container {
-    display: none !important;
-  }
 }
\ No newline at end of file

src/styles/components/weekHours.scss

@@ -2,10 +2,4 @@
 
 .week-hours-row {
   font-size: 14px;
-}
-
-/*@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .week-hours-row {
-    justify-content: center;
-  }
-}*/
\ No newline at end of file
+}
\ No newline at end of file

src/styles/containers/layout.scss → src/styles/containers/desktopLayout.scss

 @import '../_variables.scss';
 
-.layout-root {
+.desktop-layout-root {
   padding-top: 64px;
   box-sizing: border-box;
   height: 100%;
 }
 
-.layout-container {
+.desktop-layout-container {
   width: 100%;
   height: 100%;
   display: flex;
@@ -15,7 +15,7 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.layout-main-content {
+.desktop-layout-main-content {
   box-sizing: border-box;
   position: relative;
   flex: 1 1 100%;
@@ -23,42 +23,8 @@
   width: 100%;
 }
 
-.layout-sidebar-toggle-container {
-  width: 16px;
-  position: relative;
-}
-
-.layout-sidebar-toggle-btn {
-  width: 24px;
-  height: 54px;
-  position: absolute;
-  top: 16px;
-  right: -1px;
-  border: 0;
-  background-color: white;
-  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
-  outline: none;
-  border-radius: 1px;
-}
-
-.layout-arrow-icon {
-  position: absolute;
-  top: 16px;
-  right: 0;
-  color: rgba(0, 0, 0, 0.54);
-  width: 24px !important;
-  height: 24px !important;
-}
-
-.layout-card-container {
+.desktop-layout-card-container {
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-}
-
-@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .layout-sidebar-toggle-container {
-    display: none;
-  }
-
 }
\ No newline at end of file

src/styles/containers/facilityCard.scss

@@ -7,19 +7,6 @@
   position: relative;
 }
 
-//Above lg
-@media screen and (min-width: map-get($breakpoints, lg)) {
-  .fc-root:hover {
-    .favorite-button-heart {
-        color: grey;
-
-        @media (prefers-color-scheme: dark) {
-          color: white;
-        }
-    }
-  }
-}
-
 .fc-card-content {
   padding: 8px 4px 0 !important;
 }
@@ -94,14 +81,23 @@
   }
 }
 
-//Above lg
-@media screen and (min-width: map-get($breakpoints, lg)) {
+.desktop-layout-root {
   .fc-root {
     @include transition(150ms ease-in-out);
 
     &.fc-selected {
       transform: scale(.9);
     }
+
+    &:hover {
+      .favorite-button-heart {
+          color: grey;
+
+          @media (prefers-color-scheme: dark) {
+            color: white;
+          }
+      }
+    }
   }
 }
 

src/styles/containers/searchBar.scss

@@ -48,8 +48,8 @@
   justify-content: center;
 }
 
-.search-bar-paper-background:not(.search-bar-mobile) {
-  &.search-bar-focus {
+.desktop-layout-root {
+  .search-bar-focus {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
     border: 1px solid rgba(0, 0, 0, 0.15);
   }
@@ -65,8 +65,8 @@
   }
 }
 
-.search-bar-mobile {
-  &.search-bar-paper-background {
+.mobile-layout-root {
+  .search-bar-paper-background {
     width: auto !important;
 
     &.search-bar-mobile-open {
@@ -91,7 +91,7 @@
     display: none !important;
   }
 
-  &.search-bar-mobile-open {
+  .search-bar-mobile-open {
     &.search-bar-has-value {
       .search-bar-close-btn {
         display: inline-flex !important;

src/styles/whatsOpen.scss

@@ -14,8 +14,10 @@
 /* Containers */
 @import './containers/alertContainer';
 @import './containers/facilityCard';
-@import './containers/layout';
+@import './containers/desktopLayout';
 @import './containers/searchBar';
+@import "./containers/facilityDetail.scss";
+@import "./containers/mobileLayout.scss";
 
 html {
     width: 100%;

src/styles/whatsOpenMobile.scss

-@import "./containers/mobileLayout.scss";
-@import "./containers/facilityDetail.scss";
-
 body {
     overflow-y: auto;
     overflow-x: hidden;