begin styling and using material-ui

src/components/App.js

@@ -2,8 +2,6 @@ import React from 'react';
 import Header from './Header';
 import Channels from './Channel/Channels';
 
-import './App.scss';
-
 export default () => {
   return (
     <div className='App'>

src/components/Channel/ChannelList.js

@@ -1,17 +1,26 @@
 import React from 'react';
 
+import { withStyles } from '@material-ui/core';
 import ChannelEntry from './ChannelEntry';
 
-export default ({ channels, clients }) => {
+const styles = () => ({
+  list: {
+    listStyle: 'none',
+  },
+});
+
+const channelList = ({ channels, clients, classes }) => {
   return (
-    <ul className='channelList'>
+    <div>
-      {channels.map(channel => {
+      <ul className={classes.list}>
-        return (
+        {channels.map(channel => (
           <li key={channel.id}>
             <ChannelEntry channel={channel} clients={clients} />
           </li>
-        );
+        ))}
-      })}
+      </ul>
-    </ul>
+    </div>
   );
 };
+
+export default withStyles(styles)(channelList);

src/components/Channel/Channels.js

@@ -1,7 +1,19 @@
 import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { Paper } from '@material-ui/core';
 import ApiService from '../../services/ApiService';
 import ChannelList from './ChannelList';
 
+const styles = theme => ({
+  root: {
+    ...theme.mixins.gutters(),
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2,
+    margin: `${theme.spacing.unit}px auto`,
+    width: '500px',
+  },
+});
+
 class Channels extends Component {
   constructor(props) {
     super(props);
@@ -24,9 +36,17 @@ class Channels extends Component {
 
   render() {
     const { loaded, channels, clients } = this.state;
-    if (!loaded) return <div className='loading'>Loading...</div>;
+    const { classes } = this.props;
-    return <ChannelList channels={channels} clients={clients} />;
+    return (
+      <Paper className={classes.root}>
+        {!loaded ? (
+          <div className='loading'>Loading...</div>
+        ) : (
+          <ChannelList channels={channels} clients={clients} />
+        )}
+      </Paper>
+    );
   }
 }
 
-export default Channels;
+export default withStyles(styles)(Channels);

src/components/Header.js

@@ -12,7 +12,7 @@ const Header = ({ classes }) => {
       <AppBar position='static'>
         <Toolbar>
           <Typography variant='headline' color='inherit'>
-            Cliffbreak.de
+            {'Cliffbreak.de'}
           </Typography>
         </Toolbar>
       </AppBar>

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App';
-import './index.scss';
+import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));