More consistent design, fixed a bug with the users page

src/components/BaseLayout.js

@@ -25,13 +25,15 @@ const FooterLink = ({ href, children }) => {
 export default ({ children }) => (
     <div className="BaseLayout">
         <Navbar fixed brand={<Wordmark />} alignLinks="right" className="grey darken-4">
-            <NavLink to="/downloads">Download</NavLink>
-            <a href="https://docs.velocitypowered.com">Documentation</a>
             <NavLink to="/community">Community</NavLink>
             <a href="https://forums.velocitypowered.com">Forums</a>
+            <a href="https://docs.velocitypowered.com">Documentation</a>
+            <NavLink to="/downloads">Download</NavLink>
         </Navbar>
-
-        {children}
+
+        <div className="page-content">
+            {children}
+        </div>
 
         <footer className="page-footer grey darken-4 white-text">
             <div className="container">
@@ -44,6 +46,7 @@ export default ({ children }) => (
                             <li>About</li>
                             <li><FooterLink href="https://docs.velocitypowered.com">Documentation</FooterLink></li>
                             <li><FooterLink href="/downloads">Download</FooterLink></li>
+                            <li><FooterLink href="/users">Servers using Velocity</FooterLink></li>
                         </ul>
                     </Col>
                     <Col l={4} s={12}>

src/components/Jumbotron.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+
+class Jumbotron extends Component {
+    render() {
+        return <div className={"grey " + this.props.darken + " jumbotron white-text"}>
+            <div className="container">
+                <h1>{this.props.title}</h1>
+                <p>{this.props.subtitle}</p>
+                {this.props.children}
+            </div>
+        </div>
+    }
+}
+
+export default Jumbotron;

src/components/PageIntro.js

@@ -1,11 +1,15 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-export default ({ children }) => (
-    <div className="container">
-        <div className="row intro">
-            <div className="col s12">
-                {children}
+class PageIntro extends Component {
+    render() {
+        return <div className="center">
+            <div className="container">
+                <h1>{this.props.title}</h1>
+                <p>{this.props.subtitle}</p>
+                {this.props.children}
             </div>
         </div>
-    </div>
-)
+    }
+}
+
+export default PageIntro;

src/pages/Community.css

@@ -1,11 +1,23 @@
+.page-content {
+    margin-bottom: 0;
+}
+
+.row {
+    margin-bottom: 0 !important;
+}
+
+.row .col {
+    padding: 0 !important;
+}
+
 #community-discord-blurb {
     background: #7289DA url('../assets/images/discord-background.svg');
-    background-size: 120px;
+    height: 600px;
 }
 
 #community-forums-blurb {
     background: #212121 url('../assets/images/forum-background.svg');
-    background-size: 120px;
+    height: 600px;
 }
 
 .community-platform {
@@ -14,4 +26,16 @@
 
 .community-platform h4 {
     font-weight: 700;
+}
+
+@media (max-width: 1375px) {
+    #discord-widget {
+        height: 350px;
+    }
+}
+
+@media (max-width: 600px) {
+    #community-forums-blurb {
+        height: auto;
+    }
 }

src/pages/Community.js

@@ -1,53 +1,49 @@
 import React from 'react';
 import {LargeButtonLink} from "../components/Button";
-import PageIntro from "../components/PageIntro";
 import './Community.css';
+import Jumbotron from "../components/Jumbotron";
 
 export const Community = () => (
     <div>
-        <PageIntro>
-            <h1>Join Our Community</h1>
-            <p>
-                The Velocity community welcomes all with open arms. Whether you like to play with the internals
-                of the Minecraft server, run a server, or write plugins, we've got a place for you in our community.
-            </p>
-        </PageIntro>
-
-        <div id="community-forums-blurb" className="community-platform">
-            <div className="container white-text">
-                <div className="row">
-                    <div className="col s12">
-                        <h4>Forums</h4>
-                        <p>
-                            Our forums are your source for important news about Velocity, along with providing a place
-                            to discuss Velocity, discovering Velocity plugins, and talking to other server administrators
-                            and plugin developers.
-                        </p>
 
-                        <LargeButtonLink href="https://forums.velocitypowered.com">
-                            <i className="material-icons left">forum</i> Join the Velocity forums
-                        </LargeButtonLink>
+        <Jumbotron darken="darken-4" title="Join Our Community"
+                   subtitle=" The Velocity community welcomes all with open arms. Whether you like to play with the internals
+                of the Minecraft server, run a server, or write plugins, we've got a place for you in our community." />
+
+        <div className="row">
+            <div className="col m6 s12 no-pad">
+                <div id="community-forums-blurb" className="community-platform">
+                    <div className="container white-text">
+                            <h4>Forums</h4>
+                            <p>
+                                Our forums are your source for important news about Velocity, along with providing a place
+                                to discuss Velocity, discovering Velocity plugins, and talking to other server administrators
+                                and plugin developers.
+                            </p>
+
+                            <LargeButtonLink href="https://forums.velocitypowered.com">
+                                <i className="material-icons left">forum</i> Join the Velocity forums
+                            </LargeButtonLink>
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div id="community-discord-blurb" className="community-platform">
-            <div className="container white-text">
-                <div className="row">
-                    <div className="col s12">
-                        <h4>Discord</h4>
-                        <p>
-                            Discord is a popular option for many gamers to communicate with each other. We have a Discord
-                            community server that anyone can join. This is the best choice if you're new to Velocity and want
-                            support in real-time.
-                        </p>
+            <div className="col m6 s12 no-pad">
+                <div id="community-discord-blurb" className="community-platform">
+                    <div className="container white-text">
+                            <h4>Discord</h4>
+                            <p>
+                                Discord is a popular option for many gamers to communicate with each other. We have a Discord
+                                community server that anyone can join. This is the best choice if you're new to Velocity and want
+                                support in real-time.
+                            </p>
 
-                        <iframe src="https://discordapp.com/widget?id=472484458856185878&theme=dark" width="350"
-                                height="500" allowTransparency="true" frameBorder="0"></iframe>
-                    </div>
+                            <iframe src="https://discordapp.com/widget?id=472484458856185878&theme=dark" width="100%"
+        height="400" allowTransparency="true" frameBorder="0" id="discord-widget"/>
+                        </div>
                 </div>
             </div>
         </div>
+
     </div>
 );

src/pages/Download.css

@@ -1,6 +1,7 @@
 .build {
     text-align: right;
     padding-bottom: 1rem;
+    height: 100%;
 }
 
 .build.side-by-side {

src/pages/Download.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ButtonLink} from "../components/Button";
-import PageIntro from "../components/PageIntro";
 import "./Download.css";
+import PageIntro from "../components/PageIntro";
 
 const VELOCITY_VERSIONS = {
     '1.1.0': {
@@ -71,14 +71,14 @@ export default class Download extends React.Component {
     render() {
         return (
             <>
-                <PageIntro>
-                    <h1>Download Velocity</h1>
+                <PageIntro title="Download Velocity">
                     <p>
                         Choose a version of Velocity to download below. Once you've got it, <a href="https://docs.velocitypowered.com/en/latest/users/getting-started.html">
                         install and configure Velocity</a>.
                     </p>
                 </PageIntro>
-                <div className="container">
+
+                <div className="container downloadContainers">
                     <div className="row">
                         <div className="col s12">
                             {this._renderDownloads()}

src/pages/Index.css

@@ -1,3 +1,7 @@
+.page-content {
+    margin-bottom: 40px;
+}
+
 /* Jumbotron */
 .jumbotron {
     padding: 4rem 0;

src/pages/Index.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import './Index.css';
 import { ButtonLink, JumbotronButtonLink } from "../components/Button";
+import Jumbotron from "../components/Jumbotron"
 
 const Sponsor = ({ name, icon, url }) => (
     <div className="Sponsor">
@@ -10,19 +11,6 @@ const Sponsor = ({ name, icon, url }) => (
     </div>
 );
 
-const Jumbotron = () => (
-    <div className="grey darken-3 jumbotron white-text">
-        <div className="container">
-            <div className="row">
-                <div className="col l12">
-                    <h1>Don't stop now.</h1>
-                    <p>Unleash the full power of your Minecraft server with Velocity, the next-generation high-performance Minecraft server proxy.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-);
-
 const Sponsors = () => (
     <div className="container" id="sponsors-section">
         <div className="row">
@@ -51,7 +39,7 @@ const Benefit = ({ iconName, title, children }) => (
 
 const Index = () => (
     <div id="Index">
-        <Jumbotron />
+        <Jumbotron title="Don't stop now." subtitle="Unleash the full power of your Minecraft server with Velocity, the next-generation high-performance Minecraft server proxy." />
 
         <div className="section front-section" id="benefits">
             <div className="container">

src/pages/Users.css

@@ -1,5 +1,9 @@
+.userContainer {
+    margin: 50px auto !important;
+}
+
 .user {
-    padding: 1rem 0 !important;
+    margin: 1.5rem 0 !important;
 }
 
 .favicon-col {

src/pages/Users.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import "./Users.css";
+import PageIntro from "../components/PageIntro";
 
 const users = [
     {
@@ -40,18 +41,18 @@ const UserPlayers = ({ players }) => {
     }
 
     if (players.status) {
-        return <div>{players.players.online} players online</div>
+        return <div>{players.players.now} players online</div>
     } else {
         return <div>Offline</div>
     }
 }
 
 const User = ({ name, url, ip }) => {
-    const [players, setPlayers] = useState(null)
+    const [result, setPlayers] = useState(null)
     useEffect(() => {
         async function fetchPlayersData() {
             try {
-                const resp = await window.fetch('https://mcapi.ca/ping/all/' + ip)
+                const resp = await window.fetch('https://mcapi.us/server/status?ip='+ ip +'&port=25565')
                 setPlayers(await resp.json())
             } catch (e) {
                 setPlayers({ status: false })
@@ -64,13 +65,13 @@ const User = ({ name, url, ip }) => {
     return (
         <div className="col m3">
             <div className="col favicon-col user">
-                {players && players.favicon ? <img src={players.favicon} alt={name} width="64" height="64" /> : null}
+                {result && result.favicon ? <img src={result.favicon} alt={name} width="64" height="64" /> : null}
             </div>
             <div className="col user">
                 <a href={url} className="user-title">
                     {name}
                 </a>
-                <UserPlayers players={players} />
+                <UserPlayers players={result} />
             </div>
         </div>
     )
@@ -86,21 +87,18 @@ function partition(arr, by) {
 
 const Users = () => {
     const usersPartition = partition(users, 4)
-    return <div className="container">
-        <div className="row intro">
-            <div className="col s12">
-                <h1>Who's Using Velocity?</h1>
-                <p>
-                    These networks are powered by Velocity. Want yours added? <a href="https://docs.google.com/forms/d/e/1FAIpQLSdFeOdwtSPZjK3lJVzwEI_hyYMGDxUsCmcQm7IRDTFZTkgSGw/viewform">Let us know!</a>
-                </p>
+    return <>
+            <PageIntro title="Who's Using Velocity?">
+            <p> These networks are powered by Velocity. Want yours added? <a href="https://docs.google.com/forms/d/e/1FAIpQLSdFeOdwtSPZjK3lJVzwEI_hyYMGDxUsCmcQm7IRDTFZTkgSGw/viewform">Let us know!</a></p>
+            </PageIntro>
+            <div className="container userContainer">
+                {usersPartition.map((users, i) => {
+                    return <div className="row" key={i}>
+                        {users.map((user) => <User {...user} key={user.name} />)}
+                    </div>
+                })}
             </div>
-        </div>
-        {usersPartition.map((users, i) => {
-            return <div className="row" key={i}>
-                {users.map((user) => <User {...user} key={user.name} />)}
-            </div>
-        })}
-    </div>
+        </>
 }
 
 export default Users