Changes to app bar

src/components/AppBar.tsx

@@ -8,41 +8,26 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
 
-class CustomAppBar extends React.Component<{}, CustomAppBarState> {
+class CustomAppBar extends React.Component<CustomAppBarProps, CustomAppBarState> {
 
-    constructor(props: {}) {
+    constructor(props: CustomAppBarProps) {
         super(props);
         this.state = {
-            isAppBarExpanded: false,
             isSearchExpanded: false
         };
-
-        this.toggleExpand = this.toggleExpand.bind(this);
-    }
-
-    /**
-     * Toggles whether the app bar is expanded. This is
-     * mobile only functionality.
-     *
-     * @memberof CustomAppBar
-     */
-    toggleExpand() {
-        this.setState({
-            isAppBarExpanded: !this.state.isAppBarExpanded
-        });
     }
 
     render() {
+        const {isMobile} = this.props;
+
         return (
             <div>
                 <AppBar position="absolute"
-                        className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
+                        className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded', isMobile && 'app-bar-mobile')}>
                     <Toolbar className={'app-bar-tool-bar'}>
                         <div className={'app-bar-logo-name'}>
-                            <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
+                            <img src={'favicon.png'} className={'app-bar-logo'}/>
                             <Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
                                 What's Open
                             </Typography>
@@ -59,15 +44,9 @@ class CustomAppBar extends React.Component<{}, CustomAppBarState> {
                                 onSearchCollapse={() => this.setState({
                                     isSearchExpanded: false
                                 })}/>
-
-                            <IconButton onClick={this.toggleExpand} aria-label="Menu"
-                                        className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
-                                <MenuIcon/>
-                            </IconButton>
                         </div>
                         
-                        <div
-                            className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
+                        <div className={'app-bar-link-container'}>
                             <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}
                                     href={'https://srct.gmu.edu/'} target="_blank" rel="noopener">
                                 About
@@ -84,8 +63,11 @@ class CustomAppBar extends React.Component<{}, CustomAppBarState> {
     }
 }
 
+export interface CustomAppBarProps {
+    isMobile?: boolean;
+}
+
 export interface CustomAppBarState {
-    isAppBarExpanded: boolean;
     isSearchExpanded: boolean;
 }
 

src/components/MobileAppBar.tsx

-import * as React from 'react';
-import * as classNames from 'classnames';
-import AlertContainer from '../containers/AlertContainer';
-
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-
-const MobileAppBar = () => {
-    return (
-        <div>
-            <AppBar position="absolute" className={classNames('mobile-app-bar')}>
-                <Toolbar>
-                    <div className={'app-bar-logo-name'}>
-                        <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
-                        <Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
-                            What's Open
-                        </Typography>
-                    </div>
-
-                    <div className={'app-bar-right-section'}>
-                        <div className={'app-bar-alert-container'}>
-                            <AlertContainer />
-                        </div>
-                    </div>
-                </Toolbar>
-            </AppBar>
-        </div>
-    );
-};
-
-export default MobileAppBar;
\ No newline at end of file

src/containers/MobileLayout.tsx

@@ -5,7 +5,7 @@ import { fetchFacilities } from '../store/facility/facility.actions';
 import { fetchAlerts } from '../store/alert/alert.actions';
 import { useDispatch, useSelector } from 'react-redux';
 import facilityUtils from '../utils/facilityUtils';
-import MobileAppBar from '../components/MobileAppbar';
+import AppBar from '../components/AppBar';
 import CardContainer from '../components/CardContainer';
 import FacilityDetail from './FacilityDetail';
 import { Drawer } from '@material-ui/core';
@@ -43,7 +43,7 @@ const MobileLayout = () => {
 
     return (
       <div className={'mobile-layout-root'}>
-        <MobileAppBar />
+        <AppBar isMobile={true} />
 
         <CardContainer facilities={facilityUtils.filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={false} />
 

src/containers/SearchBar.tsx

@@ -5,6 +5,7 @@ import { CampusRegion } from '../models/facility.model';
 import { Dispatch } from 'redux';
 import { setSearchTerm, setSelectedCampusRegion } from '../store/ui/ui.actions';
 import { trackPiwikEvent } from '../piwik/piwik';
+import { isMobile } from 'react-device-detect';
 
 import SearchIcon from '@material-ui/icons/Search';
 import CloseIcon from '@material-ui/icons/Close';
@@ -102,7 +103,8 @@ class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
     render() {
         return (
             <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
-                this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
+                this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open',
+                isMobile && 'search-bar-mobile')}>
                 <IconButton onClick={this.handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
                     <SearchIcon className={'search-bar-search-icon'}/>
                 </IconButton>

src/styles/components/appBar.scss

@@ -28,21 +28,15 @@
   align-items: center;
 }
 
-@media screen and (min-width: map-get($breakpoints, lg)) {
+.app-bar:not(.app-bar-mobile) {
   .app-bar-logo-name {
     margin-right: auto !important;
   }
-
-  .app-bar-menu-button {
-    display: none !important;
-  }
 }
 
-@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .app-bar-link-button {
-    display: block !important;
-    padding: 0 !important;
-    text-align: left;
+.app-bar-mobile {
+  .app-bar-link-container {
+    display: none !important;
   }
 
   .app-bar-hide {
@@ -55,14 +49,16 @@
     justify-content: space-between;
   }
 
-  .app-bar-link-container {
-    display: block;
-    flex-basis: 100%;
-    transition: ease-in-out 2s;
-  }
+  &.app-bar-search-expanded {
+    .app-bar-tool-bar {
+      padding: 0 !important;
+    }
+
+    .app-bar-right-section {
+      width: 100%
+    }
 
-  .app-bar-search-expanded {
-    .app-bar-logo, .app-bar-title, .app-bar-alert-container, .app-bar-menu-button, .app-bar-link-container {
+    .app-bar-logo, .app-bar-title, .app-bar-alert-container, .app-bar-link-container {
       display: none !important;
     }
   }

src/styles/components/mobileAppBar.scss

-.mobile-app-bar {
-    background-color: white !important;
-
-    @media (prefers-color-scheme: dark) {
-        background-color: #424242 !important;
-    }
-}
\ No newline at end of file

src/styles/containers/searchBar.scss

@@ -5,7 +5,6 @@
   width: 400px;
   display: flex;
   border-radius: 4px !important;
-  background-color: rgba(0, 0, 0, 0.04) !important;
   box-shadow: none !important;
 }
 
@@ -49,14 +48,12 @@
   justify-content: center;
 }
 
-@media screen and (min-width: map-get($breakpoints, lg)) {
-  .search-bar-paper-background {
-    &.search-bar-focus {
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
-      border: 1px solid rgba(0, 0, 0, 0.15);
-    }
+.search-bar-paper-background:not(.search-bar-mobile) {
+  &.search-bar-focus {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
   }
-
+  
   .search-bar-input {
     transition: ease-in-out width 250ms;
   }
@@ -68,8 +65,8 @@
   }
 }
 
-@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
-  .search-bar-paper-background {
+.search-bar-mobile {
+  &.search-bar-paper-background {
     width: auto !important;
 
     &.search-bar-mobile-open {
@@ -81,6 +78,7 @@
   .hide-search-input {
     display: none !important;
   }
+
   .search-bar-input {
     width: 0 !important;
   }
@@ -93,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/whatsOpenMobile.scss

 @import "./containers/mobileLayout.scss";
 @import "./containers/facilityDetail.scss";
-@import './components/mobileAppBar.scss';
 
 body {
     overflow-y: auto;