Material-Ui reordered css upon react build when deploying to heroku - reactjs

Question

my build is not working correctly in build when i deploy to heroku. i have read about reordering the css but how do i verify this or make it work with material ui.
i have tried to look at the inspector and verify css is reordered.
this is the container and the whole screen and is being set off a good bit. the whole build in total has extra padding and the header is not working correctly. it can hopefully be seen at this address.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import classNames from 'classnames';
import { logoutUser } from '../../actions/authActions';
import { getSongs, getSong } from '../../actions/songActions';
import { clearCurrentProfile, getCurrentProfile } from '../../actions/profileActions';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import Drawer from '#material-ui/core/Drawer';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import List from '#material-ui/core/List';
import Typography from '#material-ui/core/Typography';
import Divider from '#material-ui/core/Divider';
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import FadeIn from 'react-fade-in';
import ListItem from '#material-ui/core/ListItem';
import Modal from '#material-ui/core/Modal';
import Editor from "./Editor";
import Viewer from "./Viewer";
import ANContainer from '../audio-and-notes/ANContainer';
import AddSongModal from './AddSongModal';
import Resources from '../resources/Resources';
import Songs from '../songs/Songs';
import Song from '../song/Song';
import Spinner from '../../common/Spinner';
import { MenuItem } from '#material-ui/core';
import InboxIcon from "#material-ui/icons/MoveToInbox";
import ListItemText from "#material-ui/core/ListItemText";
import Menu from "#material-ui/core/Menu";
import MailIcon from "#material-ui/icons/Mail";
import { ExpansionPanelDetails } from "#material-ui/core";
const logo = require('../../img/songbird-logo.png');
const drawerWidth = 276;
const styles = theme => ({
root: {
display: 'flex',
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '0 8px',
...theme.mixins.toolbar,
},
appBar: {
backgroundColor: "#203e55",
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
menuButtonHidden: {
display: 'none',
},
//right side menu
menu2Button: {
marginLeft: 0,
marginRight: 0,
},
menu2ButtonHidden: {
display: 'none',
},
//songbook
drawerTitle: {
color: "white",
flexGrow: 1,
textAlign: "center"
},
//songbird
title: {
marginLeft: "300px",
flexGrow: 1,
fontFamily: 'Open Sans, sans-serif'
},
drawerPaper: {
backgroundColor: "#203e55",
color: "white",
position: 'relative',
whiteSpace: 'nowrap',
width: drawerWidth,
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: 'hidden',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
//how much it pops out from the drawer pre-view
width: theme.spacing.unit * 0,
[theme.breakpoints.up('sm')]: {
width: theme.spacing.unit * 0,
},
},
appBarSpacer: theme.mixins.toolbar,
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
height: '96.6vh',
overflow: 'auto',
},
h5: {
marginBottom: theme.spacing.unit * 2,
},
});
const options = ["Viewer", "Resources", "Notes"];
class AppContainer extends Component {
state = {
open: false,
left: false,
right: false,
anchorEl: null,
selectedIndex: 0
};
toggleDrawer = (side, open) => () => {
this.setState({ [side]: open
});
};
componentDidMount(){
this.props.getSongs();
this.props.getCurrentProfile();
}
//trying to maintain the component state for switcher
pageControl() {
if (this.state.selectedIndex === 0) {
return <Viewer />;
} else if (this.state.selectedIndex === 1) {
return <Resources />;
} else if (this.state.selectedIndex === 2) {
return <ANContainer />;
}
}
toggleDrawer = (side, open) => () => {
this.setState({
[side]: open,
});
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleDrawerOpen = () => {
this.setState({ open: true });
};
handleDrawerClose = () => {
this.setState({ open: false });
};
handleClickListItem = event => {
this.setState({ anchorEl: event.currentTarget });
this.pageControl();
};
handleMenuItemClick = (event, index) => {
this.setState({ selectedIndex: index, anchorEl: null });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
openSongModal = () => {
//open popup here
}
onLogoutClick(e){
e.preventDefault();
this.props.clearCurrentProfile();
this.props.logoutUser();
}
render(){
//for routing
const { isAuthenticated, user } = this.props.auth;
const { profile, loading } = this.props.profile;
const { classes } = this.props;
const { anchorEl } = this.state;
//will display iframe for wix site if the user does not have an account
const unauthContent = (
<div>
<nav class="navbar">
<div class="nav-wrapper">
<Link to="/" class="brand-logo"><img className="navlogo" src={logo} /></Link>
<ul class="right hide-on-med-and-down">
<li><Link to="/register">Sign Up</Link></li>
<li><Link to="/login">Log In</Link></li>
</ul>
</div>
</nav>
<iframe
style={{height: "92vh", width: "100%"}}
src="https://www.songbirdapp.com/"
frameBorder="none">
</iframe>
</div>
);
//rendered content
return(
<div className={classes.root}>
<CssBaseline />
{/* NAVBAR SECTION!!! */}
<AppBar
position="absolute"
className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
>
<Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(
classes.menuButton,
this.state.open && classes.menuButtonHidden,
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
Editor
</Typography>
<div className="hide-on-med-and-down">
</div>
{/* TO CHANGE THE VIEWER RESOURCE PANEL */}
<List
component="nav-wrapper"
style={{
display: "flex",
flexDirection: "row",
alignContent: "center",
justifyContent: "flex-end",
width: "14%",
backgroundColor: "transparent"
}}
>
<ListItem
button
aria-haspopup="true"
aria-controls="lock-menu"
aria-label="Select Resource"
onClick={this.handleClickListItem}
>
<ListItemText
style={{
color: "white"
}}
primary={options[this.state.selectedIndex]}
/>
<ExpandMoreIcon />
</ListItem>
</List>
<Menu
id="lock-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
{options.map((option, index) => (
<MenuItem
key={option}
disabled={index === 4}
selected={index === this.state.selectedIndex}
onClick={event =>
this.handleMenuItemClick(event, index) & this.pageControl()
}
>
{option}
</MenuItem>
))}
</Menu>
{/* End Resources */}
</Toolbar>
</AppBar>
{/* NAVBAR SECTION END */}
{/* LEFT DRAWER */}
<Drawer
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<Typography variant="h6" className={classes.drawerTitle}>
Songs
</Typography>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon style={{color: "white"}}/>
</IconButton>
</div>
<Divider />
<List>
<AddSongModal />
<Songs />
</List>
<Divider />
<List>
<ListItem>
<Link className="menu-listitem" to="/myprofile">
{user.firstName} {user.lastName}
</Link>
</ListItem>
<ListItem>
<Link className="menu-listitem" to="/subscription">
Your Subscription
</Link>
</ListItem>
<ListItem>
<a className="logout-listitem"
href=""
onClick={this.onLogoutClick.bind(this)}
>
Logout</a>
</ListItem>
</List>
</Drawer>
{/* LEFT DRAWER END */}
<main className={classes.content}>
<div
className="row no-padding"
style={{
display: "flex",
margin: 0
}}
>
<div
className="col s12 no-padding"
style={{
margin: 0
}}
>
<Song />
</div>
<div className="col s12 m9 no-padding" style={{}}>
{this.pageControl()}
</div>
</div>
</main>
{/* RIGHT DRAWER TO BE USED FOR DRAFTS */}
{/* <Drawer
anchor="right"
variant="permanent"
classes={{
paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
}}
open={this.state.open}
>
<div className={classes.toolbarIcon}>
<Typography variant="h6" className={classes.drawerTitle}>
Songs
</Typography>
<IconButton onClick={this.handleDrawerTwoClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<List>
<ListItem>Draft 04/12/2019 1PM</ListItem>
<ListItem>Draft 04/12/2019 12:30PM</ListItem>
<ListItem>Draft 04/10/2019 3PM</ListItem>
<ListItem>Draft 04/09/2019 11AM</ListItem>
<ListItem>Draft 04/09/2019 9PM</ListItem>
<ListItem>Draft 04/08/2019 8:34PM</ListItem>
</List>
</Drawer> */}
{/* RIGHT DRAWER END */}
</div>
);
}
}
AppContainer.propTypes = {
getCurrentProfile: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
song: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
logoutUser: PropTypes.func.isRequired,
getSongs: PropTypes.func.isRequired,
};
const mapStateToProps = (state) => ({
profile: state.profile,
auth: state.auth,
song: state.song,
});
export default connect(mapStateToProps, { logoutUser, getCurrentProfile, clearCurrentProfile, getSongs, getSong })(withStyles(styles)(AppContainer));
https://ovrchr-songbirdapp.herokuapp.com/