Skip to content

GitLab

Commit 6170ce32 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Updated dependencies and started fixing breaking changes before TS conversion

parent aef8cb0a
Pipeline #3853 passed with stage
in 1 minute and 38 seconds
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 444 additions and 391 deletions
package-lock.json
View file @ 6170ce32
This diff is collapsed.
src/components/Alert.js
View file @ 6170ce32
import React from 'react';
import classNames from 'classnames';
import {findLink} from '../utils/nameUtils';
import Chip from 'material-ui/Chip';
import Chip from '@material-ui/core/Chip';
const Alert = ({alert}) => {
const getUrgencyClass = () => {
......
src/components/AppBar.js
View file @ 6170ce32
import React from 'react';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
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';
import SearchBar from '../containers/SearchBar';
import classNames from 'classnames';
import AlertContainer from '../containers/AlertContainer';
......@@ -35,7 +35,7 @@ class CustomAppBar extends React.Component {
<Toolbar className={'app-bar-tool-bar'}>
<div className={'app-bar-logo-name'}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
<Typography variant="h6" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open
</Typography>
</div>
......
src/components/CardContainer.js
View file @ 6170ce32
import React from 'react';
import FacilityCard from '../containers/FacilityCard';
import Grid from 'material-ui/Grid';
import Grid from '@material-ui/core/Grid';
class CardContainer extends React.Component {
constructor(props) {
......
src/components/FacilitiesMap.js
View file @ 6170ce32
import React from 'react';
import ReactMapboxGl, {Marker, Popup} from 'react-mapbox-gl';
import {MenuItem} from 'material-ui/Menu';
import Select from 'material-ui/Select';
import {FormControl} from 'material-ui/Form';
import {MenuItem} from '@material-ui/core/Menu';
import Select from '@material-ui/core/Select';
import {FormControl} from '@material-ui/core/FormControl';
import {getMaxBounds, getCenterOfCampusRegion} from '../utils/mapboxUtils';
import mapboxgl from 'mapbox-gl';
import {Typography} from 'material-ui';
import {Typography} from '@material-ui/core/Typography';
import {removeBrackets} from '../utils/nameUtils';
const mapboxToken = 'pk.eyJ1IjoibWR1ZmZ5OCIsImEiOiJjaXk2a2lxODQwMDdyMnZzYTdyb3M4ZTloIn0.mSocl7zUnZBO6-CV9cvmnA';
......@@ -189,7 +189,7 @@ class FacilitiesMap extends React.Component {
{selectedLocation && (
<Popup coordinates={selectedLocation.location.coordinate_location.coordinates} anchor="top">
<div>
<Typography type="subheading" align={'center'}>
<Typography variant="subtitle1" align={'center'}>
{selectedLocation.location.building}
</Typography>
</div>
......@@ -198,7 +198,7 @@ class FacilitiesMap extends React.Component {
{selectedLocation.facilities.map((facility) => {
return (
<li key={facility.slug}>
<Typography type="caption">{removeBrackets(facility.facility_name)}</Typography>
<Typography variant="caption">{removeBrackets(facility.facility_name)}</Typography>
</li>
);
})}
......
src/components/FacilityCategory.js
View file @ 6170ce32
import React from 'react';
import Typography from 'material-ui/Typography';
import Typography from '@material-ui/core/Typography';
const FacilityCategory = ({category}) => {
return (
<div className={'facility-category-wrapper'}>
<Typography type={'body1'} noWrap>
<Typography variant={'body1'} noWrap>
{category.name}
</Typography>
</div>
......
src/components/FacilityDialog.js
View file @ 6170ce32
import React from 'react';
import Dialog from 'material-ui/Dialog';
import Grid from 'material-ui/Grid';
import Dialog from '@material-ui/core/Dialog';
import Grid from '@material-ui/core/Grid';
import FacilityLabels from './FacilityLabels';
import WeekHours from './WeekHours';
import Button from 'material-ui/Button';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
import Button from '@material-ui/core/Button';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import MapDialog from './MapDialog';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
class FacilityDialog extends React.Component {
......@@ -48,7 +48,7 @@ class FacilityDialog extends React.Component {
<Avatar className={'fd-avatar'} src={facility.logo} />
</Grid>
<Grid item className={'fd-header-text-container'}>
<Typography className={'fd-header-text'} type={'headline'}>
<Typography className={'fd-header-text'} variant={'h5'}>
{removeBrackets(facility.facility_name)}
</Typography>
</Grid>
......@@ -56,10 +56,10 @@ class FacilityDialog extends React.Component {
</Grid>
<Grid item className={'fd-location-wrapper'}>
<Typography type={'caption'}>
<Typography variant={'caption'}>
<LocationOnIcon />
</Typography>
<Typography title={facility.facility_location.building} type={'caption'} align={'center'}>
<Typography title={facility.facility_location.building} variant={'caption'} align={'center'}>
{facility.facility_location.building}
</Typography>
</Grid>
......
src/components/FacilityLabels.js
View file @ 6170ce32
import React from 'react';
import Chip from 'material-ui/Chip';
import Chip from '@material-ui/core/Chip';
const FacilityLabels = ({facility}) => {
return (
......
src/components/FacilityStatus.js
View file @ 6170ce32
import React from 'react';
import Typography from 'material-ui/Typography';
import Typography from '@material-ui/core/Typography';
import FacilityUtils from '../utils/facilityUtils';
import classNames from 'classnames';
......@@ -31,7 +31,7 @@ const FacilityStatus = ({facility}) => {
const statusInfo = generateStatusInfo();
return (
<Typography type={'caption'}
<Typography variant={'caption'}
className={classNames('facility-status-text', statusInfo.isOpen ? 'facility-status-open' : 'facility-status-closed')}>
{statusInfo.label}
</Typography>
......
src/components/FavoriteButton.js
View file @ 6170ce32
import React from 'react';
import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
import FavoriteIcon from 'material-ui-icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ReactPiwik from 'react-piwik';
......
src/components/MapDialog.js
View file @ 6170ce32
import React from 'react';
import PropTypes from 'prop-types';
import Dialog from 'material-ui/Dialog';
import Dialog from '@material-ui/core/Dialog';
import FacilitiesMap from './FacilitiesMap';
import IconButton from 'material-ui/IconButton';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
class MapDialog extends React.Component {
handleRequestClose = () => {
......
src/components/Sidebar.js
View file @ 6170ce32
import React from 'react';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import Typography from 'material-ui/Typography';
import Divider from 'material-ui/Divider';
import Paper from '@material-ui/core/Paper';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import TextwTitle from '../components/TextwTitle';
import FacilitiesMap from '../components/FacilitiesMap';
import MapDialog from '../components/MapDialog';
import classNames from 'classnames';
import WeekHours from './WeekHours';
import FacilityLabels from './FacilityLabels';
import CloseIcon from 'material-ui-icons/Close';
import IconButton from 'material-ui/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import {removeBrackets} from '../utils/nameUtils';
import phoneFormatter from 'phone-formatter';
import ReactPiwik from 'react-piwik';
......@@ -53,13 +52,13 @@ class Sidebar extends React.Component {
<meta></meta>
<Paper
className={classNames(['sidebar-root', (isSidebarOpen && 'sidebar-open'), (!isSidebarOpen && 'sidebar-closed')])}>
<IconButton className={'sidebar-close-btn'} onClick={this.handleSidebarClose}>
<IconButton className={'sidebar-close-btn'} size="small" onClick={this.handleSidebarClose}>
<CloseIcon />
</IconButton>
<div className={'sidebar-row1'}>
<Avatar className={'sidebar-avatar'} src={facility.logo} />
<div className={'sidebar-title'}>
<Typography type="display1">{removeBrackets(facility.facility_name)}</Typography>
<Typography variant="h4">{removeBrackets(facility.facility_name)}</Typography>
</div>
</div>
<Divider className={'sidebar-divider'} />
......
src/components/WeekHours.js
View file @ 6170ce32
import React from 'react';
import Grid from 'material-ui/Grid';
import Grid from '@material-ui/core/Grid';
import facilityUtils from '../utils/facilityUtils';
import Typography from 'material-ui/Typography';
import Typography from '@material-ui/core/Typography';
const WeekHours = ({facility}) => {
const weekDays = [
......@@ -23,10 +23,10 @@ const WeekHours = ({facility}) => {
output[index] = (
<Grid container spacing={0} key={facility.slug + index} className="week-hours-row">
<Grid item xs={2}>
<Typography type={'body1'}>{weekDays[dayOfWeek]}</Typography>
<Typography variant={'body1'}>{weekDays[dayOfWeek]}</Typography>
</Grid>
<Grid item>
<Typography type={'body1'}>{todaysHours[i].text}</Typography>
<Typography variant={'body1'}>{todaysHours[i].text}</Typography>
</Grid>
</Grid>
);
......
src/containers/AlertContainer.js
View file @ 6170ce32
import React from 'react';
import {findDOMNode} from 'react-dom';
import IconButton from 'material-ui/IconButton';
import Popover from 'material-ui/Popover';
import IconButton from '@material-ui/core/IconButton';
import Popover from '@material-ui/core/Popover';
import Alert from '../components/Alert';
import NotificationsIcon from 'material-ui-icons/Notifications';
import CloseIcon from 'material-ui-icons/Close';
import Typography from 'material-ui/Typography';
import NotificationsIcon from '@material-ui/icons/Notifications';
import CloseIcon from '@material-ui/icons/Close';
import Typography from '@material-ui/core/Typography';
import {connect} from 'react-redux';
import {viewAlert} from '../actions/api';
......@@ -56,7 +56,7 @@ class AlertContainer extends React.Component {
}} ref={this.handleBtnRef} onClick={this.handleOpen}>
{activeAlerts.filter((alert) => !alert.viewed).length !== 0 &&
<span className={'alert-container-number'}>
<Typography type={'caption'} className={'alert-container-number-text'}>
<Typography variant={'caption'} className={'alert-container-number-text'}>
{activeAlerts.length}
</Typography>
</span>}
......@@ -78,7 +78,7 @@ class AlertContainer extends React.Component {
onClose={this.handleClose}>
<div className={'alert-container-popover'}>
<div className={'alert-container-header'}>
<Typography type={'title'} className={'alert-container-title'}>
<Typography variant={'h6'} className={'alert-container-title'}>
Alerts
</Typography>
<IconButton className={'alert-container-close-btn'} onClick={this.handleClose}>
......
src/containers/FacilityCard.js
View file @ 6170ce32
import React from 'react';
import Card, {CardContent} from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import Grid from 'material-ui/Grid';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import FacilityStatus from '../components/FacilityStatus';
import FavoriteButton from '../components/FavoriteButton';
import FacilityCategory from '../components/FacilityCategory';
import {connect} from 'react-redux';
import {addFavoriteFacility, removeFavoriteFacility, setSelectedFacility, setSidebar} from '../actions/ui';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {removeBrackets} from '../utils/nameUtils';
import classNames from 'classnames';
import FacilityDialog from '../components/FacilityDialog';
import FacilityUtils from '../utils/facilityUtils';
import ReactPiwik from 'react-piwik';
import Perf from 'react-addons-perf';
class FacilityCard extends React.Component {
constructor(props) {
super(props);
this.state = {
modified: null,
modified: null
};
}
......@@ -97,11 +97,10 @@ class FacilityCard extends React.Component {
removeFavoriteFacility={removeFavoriteFacility} />
<CardContent className={'fc-card-content'}>
<Grid container alignItems={'center'} direction={'column'}
className={'fc-small-grid-container-spacing'}>
<Grid container alignItems={'center'} direction={'column'}>
<Grid item
className={classNames('fc-small-grid-item-spacing', 'fc-ellipsis-container', 'fc-title-container')}>
<Typography type={'subheading'} align={'center'}
<Typography variant={'subtitle1'} align={'center'}
className={classNames('fc-title', 'fc-one-line-ellipsis')}>
{removeBrackets(facility.facility_name)}
</Typography>
......@@ -109,23 +108,23 @@ class FacilityCard extends React.Component {
<Grid item className={'fc-small-grid-item-spacing'}>
<FacilityCategory category={facility.facility_category} />
</Grid>
<Grid item className={'fc-small-grid-item-spacing'}>
<Typography type={'body1'}>
<Grid item className={'fc-small-grid-item-spacing fc-display-hours'}>
<Typography variant={'body1'}>
{`Today: ${getDisplayHours()}`}
</Typography>
</Grid>
</Grid>
<Grid container justify={'space-around'} className={'fc-extra-info-wrapper'}>
<Grid container justify={'space-around'}>
<Grid item className={'fc-extra-info'}>
<FacilityStatus facility={facility} />
</Grid>
<Grid item className={'fc-extra-info'}>
<Typography type={'caption'}>
<Typography variant={'caption'}>
<LocationOnIcon className={'fc-card-map-marker-icon'} />
</Typography>
<Typography title={buildingName} type={'caption'} align={'center'}
<Typography title={buildingName} variant={'caption'} align={'center'}
className={'fc-two-line-ellipsis'}>
{buildingName}
</Typography>
......
src/containers/SearchBar.js
View file @ 6170ce32
......@@ -2,15 +2,15 @@ import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {setCampusRegion, setSearchTerm} from '../actions/ui';
import SearchIcon from 'material-ui-icons/Search';
import CloseIcon from 'material-ui-icons/Close';
import ArrowBackIcon from 'material-ui-icons/ArrowBack';
import IconButton from 'material-ui/IconButton';
import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper';
import {MenuItem} from 'material-ui/Menu';
import Select from 'material-ui/Select';
import {FormControl} from 'material-ui/Form';
import SearchIcon from '@material-ui/icons/Search';
import CloseIcon from '@material-ui/icons/Close';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import IconButton from '@material-ui/core/IconButton';
import Input from '@material-ui/core/Input';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import classNames from 'classnames';
import ReactPiwik from 'react-piwik';
......@@ -92,10 +92,10 @@ class SearchBar extends React.Component {
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')}>
<IconButton onClick={this.handleMobileExpand} disableRipple className={'search-bar-search-btn'}>
<IconButton onClick={this.handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
<SearchIcon className={'search-bar-search-icon'}/>
</IconButton>
<IconButton onClick={this.handleMobileCollapse} disableRipple className={'search-bar-back-btn'}>
<IconButton onClick={this.handleMobileCollapse} disableRipple={true} className={'search-bar-back-btn'}>
<ArrowBackIcon className={'search-bar-back-icon'}/>
</IconButton>
<Input
......@@ -113,7 +113,7 @@ class SearchBar extends React.Component {
inputRef={(el) => this.inputElement = el}
value={this.state.value}
/>
<IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
<IconButton onClick={this.clear} disableRipple={true} className={'search-bar-close-btn'}>
<CloseIcon/>
</IconButton>
<FormControl className={'search-bar-campus-control'}>
......
src/index.js
View file @ 6170ce32
......@@ -10,7 +10,7 @@ import {ConnectedRouter, routerMiddleware} from 'react-router-redux';
import {Provider} from 'react-redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers/index';
import {MuiThemeProvider} from 'material-ui/styles';
import {MuiThemeProvider} from '@material-ui/core/styles';
import theme from './theme';
import './styles/whatsOpen.scss';
import 'typeface-roboto';
......
src/styles/containers/facilityCard.scss
View file @ 6170ce32
......@@ -17,17 +17,18 @@
}
.fc-card-content {
padding: 8px 4px !important;
padding: 8px 4px 0 !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 3px 8px !important;
}
.fc-display-hours {
white-space: nowrap;
}
.fc-ellipsis-container {
width: 100%;
}
......@@ -56,20 +57,14 @@
.fc-title {
font-weight: bold !important;
margin-right: 6px!important;
}
.fc-extra-info {
display: flex;
align-items: center;
max-width: 50%;
}
.fc-extra-info-wrapper {
padding-top: 8px;
}
.fc-one-line-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
......
src/theme.js
View file @ 6170ce32
import {createMuiTheme} from 'material-ui/styles';
import {createMuiTheme} from '@material-ui/core/styles';
const theme = createMuiTheme({
direction: 'ltr',
......@@ -177,6 +177,7 @@ const theme = createMuiTheme({
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
useNextVariants: true,
display4: {
fontSize: 112,
fontWeight: 300,
......@@ -221,7 +222,7 @@ const theme = createMuiTheme({
lineHeight: 1,
color: 'rgba(0, 0, 0, 0.87)'
},
subheading: {
subtitle1: {
fontSize: 16,
fontWeight: 400,
fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
......@@ -342,6 +343,13 @@ const theme = createMuiTheme({
popover: 2100,
snackbar: 2900,
tooltip: 3000
},
overrides: {
MuiButtonBase: {
root: {
backgroundColor: 'transparent !important' // Removes hover affects on buttons - Maybe add this back at some point
}
}
}
});
export default theme;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment