add server list connection to discord

UI/public/index.html

@@ -4,6 +4,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/png" sizes="any" href="%PUBLIC_URL%/favicon.png"/>
 <title>Roleypoly</title>
+<link rel="stylesheet" href="https://use.typekit.net/bck0pci.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script>
@@ -11,7 +12,7 @@
 <noscript>
   You need to enable JavaScript to run this app.
 </noscript>
-<div id="root"></div>
+<div id="root" class="tk-source-han-sans-japanese"></div>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.

UI/src/components/servers/Navigation.js

@@ -7,10 +7,11 @@ import UserCard from './UserCard'
 
 class ServersNavigation extends Component {
   render () {
+    console.log(this.props.servers)
     return <Fragment>
       <UserCard user={this.props.user} />
       <div className={this.props.className}>
-        { this.props.servers.map((s, i) => <ServerCard server={s} key={i} />) }
+        { this.props.servers.map((s, i) => <ServerCard server={s} user={this.props.user} key={i} />) }
       </div>
     </Fragment>
   }

UI/src/components/servers/ServerCard.css

@@ -1,8 +1,10 @@
 .server-list__item {
   display: flex;
-  border-bottom: 1px solid var(--c-3);
+  /* border-bottom: 1px solid var(--c-3); */
   padding: 25px 15px;
   padding-right: 0;
+  align-items: center;
+  /* justify-content: center; */
 }
 
 a.server-list__item {
@@ -21,6 +23,8 @@ a.server-list__item.active {
 .server-list__item:hover:not(.active) {
   background-color: rgba(0,0,0,0.25) !important;
   cursor: pointer;
+  transform: translateX(1px); 
+  transition: background 0.05s ease-in-out, transform 0.1s ease-in-out;  
 }
 
 .server-list__item:last-of-type {

UI/src/components/servers/ServerCard.js

@@ -5,14 +5,25 @@ import './ServerCard.css'
 
 class ServerCard extends Component {
   render () {
-    const { server } = this.props
-    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${server.id}`}>
+    const { server: { server, id, gm, perms }, user } = this.props
+
+    let icon = ''
+    
+    if (perms.canManageRoles) {
+      icon = <span title='Role Manager' uk-tooltip=''>🔰</span>
+    }
+
+    if (perms.isAdmin) {
+      icon = <span title='Server Admin' uk-tooltip=''>🔰⭐️</span>
+    }
+
+    return <NavLink className='server-list__item' activeClassName='active' to={`/s/${id}`}>
       <div className='server-list__item__icon'>
-        <img src={`https://cdn.discordapp.com/icons/${server.id}/${server.icon}.png`} />
+        <img src={`https://cdn.discordapp.com/icons/${id}/${server.icon}.png`} />
       </div>
       <div className='server-list__item__info'>
         <b>{server.name}</b><br />
-        <span>{server.name}</span>
+        <span style={{ color: gm.color }}>{ gm.nickname || user.username }</span> { icon }
       </div>
     </NavLink>
   }

UI/src/components/servers/UserCard.css

@@ -2,7 +2,7 @@
   position: relative;
   display: flex;
   background-color: rgba(0,0,0,0.3);
-  border-bottom: 1px solid var(--c-3);  
+  /* border-bottom: 1px solid var(--c-3);   */
   padding: 25px 15px;
   grid-area: user;
 }
@@ -40,6 +40,14 @@
   justify-content: center;
 }
 
+.user-card__actions svg {
+  transition: transform 0.05s ease-in-out;
+}
+
+.user-card__actions svg:hover {
+  transform: scale(1.15);
+}
+
 .user-card__actions polygon {
   fill: var(--c-7);
 }

UI/src/components/servers/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import Radium from 'radium'
+import superagent from 'superagent'
 import './index.css'
 
 import Navigation from './Navigation'
@@ -7,9 +8,20 @@ import Navigation from './Navigation'
 import mockData from './mockData'
 
 class Servers extends Component {
+  state = {
+    user: mockData.user,
+    servers: [],
+  }
+
+  async componentWillMount () {
+    const rsp = await superagent.get(`/api/~/relevant-servers/62601275618889728`)
+
+    this.setState({ servers: rsp.body })
+  }
+
   render () {
     return <div className="servers">
-      <Navigation className="servers__nav" servers={mockData.servers} user={mockData.user} />
+      <Navigation className="servers__nav" servers={this.state.servers} user={this.state.user} />
       <div className="servers__content">
         {/* another router probably. */}
       </div>

UI/src/components/wrapper/index.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import Radium from 'radium'
 import Logotype from '../logotype'
 import styles from './styles'
+import './wrapper.css'
 
 class Wrapper extends Component {
   render () {
@@ -11,7 +12,7 @@ class Wrapper extends Component {
       <div style={styles.container}>
         <nav uk-navbar='' style={styles.nav} className='uk-navbar-transparent'>
           <div className='uk-navbar-left'>
-            <Logotype style={{ height: '2rem' }} />
+            <Logotype style={{ height: '2rem' }} className='wrapper__logotype' />
           </div>
           <div class='uk-navbar-right'>
             <ul class='uk-navbar-nav'>

UI/src/components/wrapper/wrapper.css

@@ -0,0 +1,4 @@
+.wrapper__logo:hover mask {
+  /* transform: translate 1s ease-in-out repeat; */
+  transform: rotate(30deg)
+}

UI/src/index.css

@@ -1,7 +1,10 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif;
+  font-family: "source-han-sans-japanese", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 :root {