fix(channels): channels makeover

app/routes/channels/components/Channels.js

@@ -12,6 +12,14 @@ import ChannelForm from 'components/ChannelForm'
 import styles from './Channels.scss'
 
 class Channels extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      refreshing: false
+    }
+  }
+
   componentWillMount() {
     const { fetchChannels, fetchPeers } = this.props
     
@@ -48,24 +56,50 @@ class Channels extends Component {
       channelFormProps
     } = this.props
 
-    const refreshClicked = (event) => {
+    const refreshClicked = event => {
+      // turn the spinner on
+      this.setState({ refreshing: true })
+
       // store event in icon so we dont get an error when react clears it
-      const icon = event.currentTarget
+      let icon = this.refs.repeat.childNodes
 
-      // fetch channels
+      // fetch peers
       fetchChannels()
 
-      // clear animation after the second so we can reuse it
-      setTimeout(() => { icon.style.animation = '' }, 1000)
+      // wait for the svg to appear as child
+      let svgTimeout = setTimeout(() => { 
+        if (icon[0].tagName === 'svg') {
+          // spin icon for 1 sec
+          icon[0].style.animation = 'spin 1000ms linear 1'
+          clearTimeout(svgTimeout)
+        }
+      }, 1)
 
-      // spin icon for 1 sec
-      icon.style.animation = 'spin 1000ms linear 1'
+      // clear animation after the second so we can reuse it
+      let refreshTimeout = setTimeout(() => { 
+        icon[0].style.animation = ''
+        this.setState({ refreshing: false })
+        clearTimeout(refreshTimeout)
+      }, 1000)
     }
 
     return (
       <div className={`${styles.container} ${viewType === 1 && styles.graphview}`}>
         <ChannelForm {...channelFormProps} />
 
+        <header className={styles.header}>
+          <div className={styles.titleContainer}>
+            <div className={styles.left}>
+              <h1>Channels</h1>
+            </div>
+          </div>
+          <div className={styles.createChannelContainer}>
+            <div className={`buttonPrimary ${styles.newChannelButton}`} onClick={openChannelForm}>
+              Create new channel
+            </div>
+          </div>
+        </header>
+        
         <div className={styles.search}>
           <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
             <MdSearch />
@@ -79,13 +113,6 @@ class Channels extends Component {
             id='channelSearch'
           />
         </div>
-        <header className={styles.header}>
-          <div className={styles.createChannelContainer}>
-            <div className={`buttonPrimary ${styles.newChannelButton}`} onClick={openChannelForm}>
-              Create new channel
-            </div>
-          </div>
-        </header>
 
         <div className={styles.filtersContainer}>
           <section>
@@ -102,11 +129,15 @@ class Channels extends Component {
               }
             </ul>
           </section>
-          <section className={`${styles.refreshContainer} hint--left`} data-hint='Refresh your channels list'>
-            <FaRepeat
-              style={{ verticalAlign: 'baseline' }}
-              onClick={refreshClicked}
-            />
+          <section className={styles.refreshContainer}>
+            <span className={styles.refresh} onClick={refreshClicked} ref='repeat'>
+              {
+                this.state.refreshing ?
+                  <FaRepeat />
+                :
+                  'Refresh'
+              }
+            </span>
           </section>
         </div>
 

app/routes/channels/components/Channels.scss

@@ -5,8 +5,9 @@
 }
 
 .search {
-  height: 75px;
+  height: 55px;
   padding: 2px 25px;
+  border-top: 1px solid $darkgrey;
   border-bottom: 1px solid $darkgrey;
   background: $white;
 
@@ -18,8 +19,8 @@
 
   .label {
     width: 5%;
-    line-height: 70px;
-    font-size: 25px;
+    line-height: 50px;
+    font-size: 20px;
     text-align: center;
     cursor: pointer;
   }
@@ -30,15 +31,39 @@
     padding: 0;
     border: 0;
     border-radius: 0;
-    height: 68px;
-    font-size: 18px;
+    height: 50px;
+    font-size: 16px;
   }
 }
 
 .header {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-between;
+  background: $lightgrey;
+
+  .titleContainer {
+    padding: 20px 40px;
+
+    .left {
+      padding: 10px 0;
+
+      h1 {
+        text-transform: uppercase;
+        font-size: 26px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .createChannelContainer {
+    padding: 20px 40px;
+
+    .createChannelButton {
+      font-size: 14px;
+      margin-left: 10px;
+    }
+  }
 }
 
 .filtersContainer {
@@ -46,7 +71,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 0 40px;
+  padding: 20px 40px;
 
   h2, h2 span {
     color: $bluegrey;
@@ -89,17 +114,22 @@
       }
     }
   }
-
+  
   .refreshContainer {
-    color: $bluegrey;
+    text-align: right;
+    cursor: pointer;
 
-    &:hover {
-      cursor: pointer;
-      color: lighten($bluegrey, 10%);
+    .refresh {
+      text-decoration: underline;
+
+      svg {
+        font-size: 12px;
+      }
     }
   }
 }
 
+
 .layoutsContainer {
   padding: 40px;