Some adjustments to begin working on a dark theme

resources/assets/styles/components/typography.css

@@ -0,0 +1,12 @@
+@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500&display=swap');
+
+h1, h2, h3, h4, h5, h6 {
+    @apply .font-medium;
+    font-family: 'IBM Plex Sans', -apple-system, '"Roboto"', 'system-ui', 'sans-serif';
+}
+
+p {
+    @apply .text-neutral-200;
+    letter-spacing: 0.015em;
+}

resources/assets/styles/main.css

@@ -9,6 +9,7 @@
 /**
  * Pterodactyl Specific CSS
  */
+@import "components/typography.css";
 @import "components/animations.css";
 @import "components/authentication.css";
 @import "components/forms.css";

resources/scripts/components/App.tsx

@@ -5,16 +5,19 @@ import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { Provider } from 'react-redux';
 import { persistor, store } from '@/redux/configure';
 import { PersistGate } from 'redux-persist/integration/react';
+import AccountRouter from '@/routers/AccountRouter';
+import ServerOverviewContainer from '@/components/ServerOverviewContainer';
 
 class App extends React.PureComponent {
     render () {
         return (
             <Provider store={store}>
                 <PersistGate persistor={persistor} loading={this.renderLoading()}>
-                    <Router>
-                        <div>
-                            <Route exact path="/"/>
+                    <Router basename={'/'}>
+                        <div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
+                            <Route exact path="/" component={ServerOverviewContainer}/>
                             <Route path="/auth" component={AuthenticationRouter}/>
+                            <Route path="/account" component={AccountRouter}/>
                         </div>
                     </Router>
                 </PersistGate>

resources/scripts/components/ServerOverviewContainer.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default class ServerOverviewContainer extends React.PureComponent {
+    render () {
+        return <p>Test</p>;
+    }
+}

resources/scripts/components/account/AccountOverview.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default class AccountOverview extends React.PureComponent {
+    render () {
+        return null;
+    }
+}

resources/scripts/components/account/DesignElements.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+export default class DesignElements extends React.PureComponent {
+    render () {
+        return (
+            <div className={'my-10'}>
+                <div className={'flex'}>
+                    <div className={'flex-1 mr-4'}>
+                        <h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2>
+                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
+                            <p className={'text-neutral-200 text-sm'}>Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!</p>
+                        </div>
+                    </div>
+                    <div className={'ml-4 flex-1'}>
+                        <h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
+                        <div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
+                            <label className={'uppercase text-neutral-200'}>Email</label>
+                            <input
+                                type={'text'}
+                                className={'w-full p-3 bg-neutral-600 border border-neutral-500 hover:border-neutral-400 text-sm rounded text-neutral-200 focus:shadow'}
+                                style={{
+                                    transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
+                                }}
+                            />
+                            <p className={'text-xs text-neutral-400 mt-2'}>
+                                This is some descriptive helper text to explain how things work.
+                            </p>
+                            <div className={'mt-6'}/>
+                            <label className={'uppercase text-neutral-200'}>Textarea</label>
+                            <textarea
+                                className={'w-full p-3 h-10 bg-neutral-600 border border-neutral-500 hover:border-neutral-400 text-sm rounded text-neutral-200 focus:shadow'}
+                                style={{
+                                    transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
+                                }}
+                            ></textarea>
+                            <div className={'mt-6'}/>
+                            <button className={'tracking-wide bg-primary-500 spacing-wide text-xs text-primary-50 rounded p-3 uppercase border border-primary-600'}>
+                                Button
+                            </button>
+                            <button className={'ml-2 tracking-wide bg-neutral-500 spacing-wide text-xs text-neutral-50 rounded p-3 uppercase border border-neutral-600'}>
+                                Secondary
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

resources/scripts/routers/AccountRouter.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import DesignElements from '@/components/account/DesignElements';
+
+export default class AccountRouter extends React.PureComponent {
+    render () {
+        return (
+            <BrowserRouter basename={'/account'}>
+                <Route
+                    render={({ location }) => (
+                        <TransitionGroup className={'route-transition-group'}>
+                            <CSSTransition key={location.key} timeout={150} classNames={'fade'}>
+                                <section>
+                                    <FlashMessageRender/>
+                                    <Switch location={location}>
+                                        <Route path={'/'} component={DesignElements} exact/>
+                                        <Route path={'/design'} component={DesignElements} exact/>
+                                    </Switch>
+                                    <p className={'text-right text-neutral-500 text-xs'}>
+                                        &copy; 2015 - 2019&nbsp;
+                                        <a
+                                            href={'https://pterodactyl.io'}
+                                            className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                                        >
+                                            Pterodactyl Software
+                                        </a>
+                                    </p>
+                                </section>
+                            </CSSTransition>
+                        </TransitionGroup>
+                    )}
+                />
+            </BrowserRouter>
+        );
+    }
+}

resources/themes/pterodactyl/templates/base/core.blade.php

@@ -1,14 +1,7 @@
-@extends('templates/wrapper')
+@extends('templates/wrapper', [
+    'css' => ['body' => 'bg-neutral-800'],
+])
 
 @section('container')
     <div id="app"></div>
 @endsection
-
-@section('below-container')
-    <div class="flex-grow"></div>
-    <div class="w-full m-auto mt-0 mb-6 container">
-        <p class="text-center sm:text-right text-neutral-300 text-xs">
-            {!! trans('strings.copyright', ['year' => date('Y')]) !!}
-        </p>
-    </div>
-@endsection

tailwind.js

@@ -12,7 +12,6 @@ we've done our very best to explain each section.
 
 View the full documentation at https://tailwindcss.com.
 
-
 |-------------------------------------------------------------------------------
 | The default config
 |-------------------------------------------------------------------------------
@@ -60,7 +59,7 @@ let colors = {
     'primary-600': 'hsl(214, 95%, 36%)', // dark
     'primary-700': 'hsl(215, 96%, 32%)',
     'primary-800': 'hsl(216, 98%, 25%)', // darker
-    'primary-900': 'hsl(218, 100%, 17%)', //darkest
+    'primary-900': 'hsl(218, 100%, 17%)', // darkest
 
     // Color used the most in the design and make up the majority of the UI.
     'neutral-50': 'hsl(216, 33%, 97%)',
@@ -163,10 +162,10 @@ module.exports = {
         'lg': '992px',
         'xl': '1200px',
 
-        'xsx': {'max': '575px'},
-        'smx': {'max': '767px'},
-        'mdx': {'max': '991px'},
-        'lgx': {'max': '1999px'},
+        'xsx': { 'max': '575px' },
+        'smx': { 'max': '767px' },
+        'mdx': { 'max': '991px' },
+        'lgx': { 'max': '1999px' },
     },
 
     /*
@@ -189,6 +188,7 @@ module.exports = {
 
     fonts: {
         'sans': [
+            'Rubik',
             '-apple-system',
             'BlinkMacSystemFont',
             '"Helvetica Neue"',
@@ -209,7 +209,7 @@ module.exports = {
             'Monaco',
             'Consolas',
             'monospace',
-        ]
+        ],
     },
 
     /*
@@ -394,7 +394,7 @@ module.exports = {
     |
     */
 
-    borderColors: global.Object.assign({default: colors['neutral-400']}, colors),
+    borderColors: global.Object.assign({ default: colors['neutral-400'] }, colors),
 
     /*
     |-----------------------------------------------------------------------------
@@ -469,7 +469,7 @@ module.exports = {
         '1/6': '16.66667%',
         '5/6': '83.33333%',
         'full': '100%',
-        'screen': '100vw'
+        'screen': '100vw',
     },
 
     /*
@@ -504,7 +504,7 @@ module.exports = {
         '48': '12rem',
         '64': '16rem',
         'full': '100%',
-        'screen': '100vh'
+        'screen': '100vh',
     },
 
     /*
@@ -543,7 +543,7 @@ module.exports = {
     minHeight: {
         '0': '0',
         'full': '100%',
-        'screen': '100vh'
+        'screen': '100vh',
     },
 
     /*