From f03cbff9a94bc6fc347908bce7d6460a33d9e018 Mon Sep 17 00:00:00 2001
From: Niel Rohling <niel.rohling@gmail.com>
Date: Wed, 24 Apr 2019 22:43:18 +0200
Subject: [PATCH] begin styling and using material-ui

---
 src/components/App.js                 |  2 --
 src/components/Channel/ChannelList.js | 23 ++++++++++++++++-------
 src/components/Channel/Channels.js    | 26 +++++++++++++++++++++++---
 src/components/Channels.js            |  0
 src/components/Header.js              |  2 +-
 src/index.js                          |  2 +-
 6 files changed, 41 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Channels.js

diff --git a/src/components/App.js b/src/components/App.js
index 7390945..20e6345 100644
--- a/src/components/App.js
+++ b/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'>
diff --git a/src/components/Channel/ChannelList.js b/src/components/Channel/ChannelList.js
index cfb834c..4b579b7 100644
--- a/src/components/Channel/ChannelList.js
+++ b/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'>
-      {channels.map(channel => {
-        return (
+    <div>
+      <ul className={classes.list}>
+        {channels.map(channel => (
           <li key={channel.id}>
             <ChannelEntry channel={channel} clients={clients} />
           </li>
-        );
-      })}
-    </ul>
+        ))}
+      </ul>
+    </div>
   );
 };
+
+export default withStyles(styles)(channelList);
diff --git a/src/components/Channel/Channels.js b/src/components/Channel/Channels.js
index 54e22a4..6f06fbe 100644
--- a/src/components/Channel/Channels.js
+++ b/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>;
-    return <ChannelList channels={channels} clients={clients} />;
+    const { classes } = this.props;
+    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);
diff --git a/src/components/Channels.js b/src/components/Channels.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Header.js b/src/components/Header.js
index 71b1c75..751adc3 100644
--- a/src/components/Header.js
+++ b/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>
diff --git a/src/index.js b/src/index.js
index ca95c8b..a545cb1 100644
--- a/src/index.js
+++ b/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'));