Fix styles

frontend/src/components/EventList.jsx

@@ -1,80 +1,3 @@
-/* import React from 'react';
-import { connect } from 'react-redux';
-// import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
-import PropTypes from 'prop-types';
-import { AutoSizer, Column, SortDirection, Table } from 'react-virtualized';
-import InfoIcon from '@material-ui/icons/InfoOutlined';
-import { actions as calendarActions, eventStruct } from '../redux/modules/calendar';
-import {actions as spaceDataActions, spacedataStruct} from '../redux/modules/spacedata';
-
-
-
-class EventList extends React.Component {
-  static propTypes = {
-    events: PropTypes.arrayOf(
-      PropTypes.shape(eventStruct),
-    ),
-    fetchCalendars: PropTypes.func,
-    spacedata: spacedataStruct,
-  };
-
-  static defaultProps = {
-    events: [],
-  };
-
-  componentWillMount() {
-    this.props.fetchCalendars();
-  }
-
-  formatDate = date => (date.format('DD.MM.YYYY'));
-  formatTime = date => (date.format('HH:mm'));
-
-  render() {
-    return (
-      <Table headerRenderer={()=>{}}>
-        <TableBody>
-          {this.props.events
-            .filter(event =>
-              (
-                this.props.spacedata.filter.indexOf(event.space) !== -1
-                || this.props.spacedata.filter.length === 0
-              )
-            )
-            .map(event => (
-              <TableRow
-                key={event.importId + event.start.toLocaleString() + event.description}
-              >
-                <TableCell style={{ width: '80px', padding: '5px' }}>
-                  {this.formatDate(event.start)}
-                </TableCell>
-                <TableCell style={{ width: '55px', padding: '5px' }}>
-                  {event.wholeDayEvent ? null : this.formatTime(event.start)}
-                </TableCell>
-                <TableCell>
-                  {event.summary || event.description}
-                </TableCell>
-                <TableCell>
-                  {event.space}
-                </TableCell>
-                <TableCell style={{ textAlign: 'right' }}>
-                  {event.url && <a href={event.url}>
-                    <InfoIcon style={{ cursor: 'pointer' }} />
-                  </a>}
-                </TableCell>
-              </TableRow>
-            ))}
-        </TableBody>
-      </Table>
-    );
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(EventList);
-*/
-
 import React from 'react';
 import { connect } from 'react-redux';
 import TableCell from '@material-ui/core/TableCell';
@@ -89,23 +12,26 @@ import { AutoSizer, Column, Table } from 'react-virtualized';
 const styles = theme => ({
   table: {
     fontFamily: theme.typography.fontFamily,
+    border: 0,
   },
   flexContainer: {
     display: 'flex',
     alignItems: 'center',
     boxSizing: 'border-box',
   },
-  tableRow: {
+  tableRow: {},
-    border: 0,
-  },
   tableRowHover: {
     '&:hover': {
       backgroundColor: theme.palette.grey[600],
     },
   },
+  tableRowEven: {
+    backgroundColor: theme.palette.grey[700],
+  },
   tableCell: {
     flex: 1,
     color: '#fff',
+    border: 0,
   },
   noClick: {
     cursor: 'initial',
@@ -114,10 +40,11 @@ const styles = theme => ({
 
 class MuiVirtualizedTable extends React.PureComponent {
   getRowClassName = ({ index }) => {
-    const { classes, rowClassName, onRowClick } = this.props;
+    const { classes, rowClassName } = this.props;
 
     return classNames(classes.tableRow, classes.flexContainer, rowClassName, {
-      [classes.tableRowHover]: index !== -1 && onRowClick != null,
+      [classes.tableRowHover]: index !== -1,
+      [classes.tableRowEven]: index % 2,
     });
   };
 

frontend/src/components/SpaceApiInput.jsx

@@ -2,11 +2,68 @@ import React from 'react';
 import request from 'superagent';
 import TextField from '@material-ui/core/TextField';
 import FloatingActionButton from '@material-ui/core/Fab';
+import SnackbarContent from '@material-ui/core/SnackbarContent';
 import ContentAdd from '@material-ui/icons/AddOutlined';
 import Snackbar from '@material-ui/core/Snackbar';
 import PropTypes from 'prop-types';
+import InfoIcon from '@material-ui/icons/Info';
+import CloseIcon from '@material-ui/icons/Close';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles } from '@material-ui/core/styles';
 import config from '../api/config';
 
+const styles = theme => ({
+  table: {
+    fontFamily: theme.typography.fontFamily,
+    border: 0,
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+  },
+  snackbar: {
+    backgroundColor: theme.palette.grey[700],
+    width: '100%',
+  },
+});
+
+
+class MuiSnackbarContent extends React.PureComponent {
+  render() {
+    console.log(this.props.classes);
+    return (
+      <SnackbarContent
+        aria-describedby="client-snackbar"
+        className={this.props.classes.snackbar}
+        message={
+          <div>
+            <InfoIcon/>
+            <div  style={{ paddingLeft: '10px', paddingTop: '3px', float: 'right' }} >
+              Die URL wurde hinzugefuegt und befindet sich nun im review.
+            </div>
+          </div>
+        }
+        action={[
+          <IconButton
+            key="close"
+            aria-label="Close"
+            color="inherit"
+            onClick={() => this.setState({open: false})}
+          >
+            <CloseIcon/>
+          </IconButton>,
+        ]}
+      />
+    );
+  }
+}
+
+MuiSnackbarContent.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+const MySnackbarContent = withStyles(styles)(MuiSnackbarContent);
+
 class SpaceApiInput extends React.Component {
   static propTypes = {
     style: PropTypes.shape({}),
@@ -86,19 +143,20 @@ class SpaceApiInput extends React.Component {
           />
           <FloatingActionButton
             style={{ marginLeft: '20px' }}
-            mini
             onClick={this.handleButtonClick}
           >
             <ContentAdd />
           </FloatingActionButton>
         </div>
         <Snackbar
+          variant={'info'}
           open={this.state.open}
-          message={'Die URL wurde hinzugefuegt und befindet sich nun im review.'}
           autoHideDuration={4000}
           style={{ minWidth: '490px' }}
-          onRequestClose={() => this.setState({ open: false })}
+          onClose={() => this.setState({ open: false })}
-        />
+        >
+          <MySnackbarContent />
+        </Snackbar>
       </div>
     );
   }

frontend/src/components/SpaceList.jsx

@@ -4,7 +4,38 @@ import TableBody from '@material-ui/core/TableBody';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { spacedataStruct } from '../redux/modules/spacedata';
+import {withStyles} from "@material-ui/core";
+
+const styles = theme => ({
+  table: {
+    fontFamily: theme.typography.fontFamily,
+    border: 0,
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+  },
+  tableRow: {},
+  tableRowHover: {
+    '&:hover': {
+      backgroundColor: theme.palette.grey[600],
+    },
+  },
+  tableRowEven: {
+    backgroundColor: theme.palette.grey[700],
+  },
+  tableCell: {
+    flex: 1,
+    color: '#fff',
+    border: 0,
+  },
+  noClick: {
+    cursor: 'initial',
+  },
+});
 
 export class SpaceList extends React.Component {
   static propTypes = {
@@ -31,12 +62,14 @@ export class SpaceList extends React.Component {
         <Table>
           <TableBody>
             {items
-              .map(space => (
+              .map((space, index) => (
-                <TableRow key={space.space}>
+                <TableRow key={space.space} className={classNames({
-                  <TableCell style={{ color: '#fff' }}>
+                  [this.props.classes.tableRowEven]: index % 2
+                })} >
+                  <TableCell style={{ color: '#fff', border: 0 }}>
                     {space.space}
                   </TableCell>
-                  <TableCell>
+                  <TableCell style={{ border: 0 }}>
                     <a
                       href={space.url}
                       style={{ textDecoration: 'none', color: 'white' }}
@@ -54,4 +87,4 @@ export class SpaceList extends React.Component {
   }
 }
 
-export default SpaceList;
+export default withStyles(styles)(SpaceList);