Skip to content

Commit aabf9b8

Browse files
DaneEverittDaneEveritt
committed
Some adjustments to begin working on a dark theme
1 parent ad61774 commit aabf9b8

File tree

9 files changed

+134
-24
lines changed

9 files changed

+134
-24
lines changed

‎resources/assets/styles/components/typography.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
2+
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500&display=swap');
3+
4+
h1, h2, h3, h4, h5, h6 {
5+
@apply .font-medium;
6+
font-family: 'IBM Plex Sans', -apple-system, '"Roboto"', 'system-ui', 'sans-serif';
7+
}
8+
9+
p {
10+
@apply .text-neutral-200;
11+
letter-spacing: 0.015em;
12+
}

‎resources/assets/styles/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
/**
1010
* Pterodactyl Specific CSS
1111
*/
12+
@import "components/typography.css";
1213
@import "components/animations.css";
1314
@import "components/authentication.css";
1415
@import "components/forms.css";

‎resources/scripts/components/App.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@ import AuthenticationRouter from '@/routers/AuthenticationRouter';
55
import { Provider } from 'react-redux';
66
import { persistor, store } from '@/redux/configure';
77
import { PersistGate } from 'redux-persist/integration/react';
8+
import AccountRouter from '@/routers/AccountRouter';
9+
import ServerOverviewContainer from '@/components/ServerOverviewContainer';
810

911
class App extends React.PureComponent {
1012
render () {
1113
return (
1214
<Provider store={store}>
1315
<PersistGate persistor={persistor} loading={this.renderLoading()}>
14-
<Router>
15-
<div>
16-
<Route exact path="/"/>
16+
<Router basename={'/'}>
17+
<div className={'mx-auto px-10 w-auto'} style={{ maxWidth: '1000px' }}>
18+
<Route exact path="/" component={ServerOverviewContainer}/>
1719
<Route path="/auth" component={AuthenticationRouter}/>
20+
<Route path="/account" component={AccountRouter}/>
1821
</div>
1922
</Router>
2023
</PersistGate>

‎resources/scripts/components/ServerOverviewContainer.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
export default class ServerOverviewContainer extends React.PureComponent {
4+
render () {
5+
return <p>Test</p>;
6+
}
7+
}

‎resources/scripts/components/account/AccountOverview.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
3+
export default class AccountOverview extends React.PureComponent {
4+
render () {
5+
return null;
6+
}
7+
}

‎resources/scripts/components/account/DesignElements.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from 'react';
2+
3+
export default class DesignElements extends React.PureComponent {
4+
render () {
5+
return (
6+
<div className={'my-10'}>
7+
<div className={'flex'}>
8+
<div className={'flex-1 mr-4'}>
9+
<h2 className={'text-neutral-300 mb-2 px-4'}>A Special Announcement</h2>
10+
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
11+
<p className={'text-neutral-200 text-sm'}>Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!</p>
12+
</div>
13+
</div>
14+
<div className={'ml-4 flex-1'}>
15+
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
16+
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
17+
<label className={'uppercase text-neutral-200'}>Email</label>
18+
<input
19+
type={'text'}
20+
className={'w-full p-3 bg-neutral-600 border border-neutral-500 hover:border-neutral-400 text-sm rounded text-neutral-200 focus:shadow'}
21+
style={{
22+
transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
23+
}}
24+
/>
25+
<p className={'text-xs text-neutral-400 mt-2'}>
26+
This is some descriptive helper text to explain how things work.
27+
</p>
28+
<div className={'mt-6'}/>
29+
<label className={'uppercase text-neutral-200'}>Textarea</label>
30+
<textarea
31+
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'}
32+
style={{
33+
transition: 'border-color 150ms linear, box-shadow 150ms ease-in',
34+
}}
35+
></textarea>
36+
<div className={'mt-6'}/>
37+
<button className={'tracking-wide bg-primary-500 spacing-wide text-xs text-primary-50 rounded p-3 uppercase border border-primary-600'}>
38+
Button
39+
</button>
40+
<button className={'ml-2 tracking-wide bg-neutral-500 spacing-wide text-xs text-neutral-50 rounded p-3 uppercase border border-neutral-600'}>
41+
Secondary
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
);
48+
}
49+
}

‎resources/scripts/routers/AccountRouter.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import { BrowserRouter, Route, Switch } from 'react-router-dom';
3+
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4+
import FlashMessageRender from '@/components/FlashMessageRender';
5+
import DesignElements from '@/components/account/DesignElements';
6+
7+
export default class AccountRouter extends React.PureComponent {
8+
render () {
9+
return (
10+
<BrowserRouter basename={'/account'}>
11+
<Route
12+
render={({ location }) => (
13+
<TransitionGroup className={'route-transition-group'}>
14+
<CSSTransition key={location.key} timeout={150} classNames={'fade'}>
15+
<section>
16+
<FlashMessageRender/>
17+
<Switch location={location}>
18+
<Route path={'/'} component={DesignElements} exact/>
19+
<Route path={'/design'} component={DesignElements} exact/>
20+
</Switch>
21+
<p className={'text-right text-neutral-500 text-xs'}>
22+
&copy; 2015 - 2019&nbsp;
23+
<a
24+
href={'https://pterodactyl.io'}
25+
className={'no-underline text-neutral-500 hover:text-neutral-300'}
26+
>
27+
Pterodactyl Software
28+
</a>
29+
</p>
30+
</section>
31+
</CSSTransition>
32+
</TransitionGroup>
33+
)}
34+
/>
35+
</BrowserRouter>
36+
);
37+
}
38+
}

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
@extends('templates/wrapper')
1+
@extends('templates/wrapper', [
2+
'css' => ['body' => 'bg-neutral-800'],
3+
])
24

35
@section('container')
46
<div id="app"></div>
57
@endsection
6-
7-
@section('below-container')
8-
<div class="flex-grow"></div>
9-
<div class="w-full m-auto mt-0 mb-6 container">
10-
<p class="text-center sm:text-right text-neutral-300 text-xs">
11-
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
12-
</p>
13-
</div>
14-
@endsection

‎tailwind.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ we've done our very best to explain each section.
1212
1313
View the full documentation at https://tailwindcss.com.
1414
15-
1615
|-------------------------------------------------------------------------------
1716
| The default config
1817
|-------------------------------------------------------------------------------
@@ -60,7 +59,7 @@ let colors = {
6059
'primary-600': 'hsl(214, 95%, 36%)', // dark
6160
'primary-700': 'hsl(215, 96%, 32%)',
6261
'primary-800': 'hsl(216, 98%, 25%)', // darker
63-
'primary-900': 'hsl(218, 100%, 17%)', //darkest
62+
'primary-900': 'hsl(218, 100%, 17%)', // darkest
6463

6564
// Color used the most in the design and make up the majority of the UI.
6665
'neutral-50': 'hsl(216, 33%, 97%)',
@@ -163,10 +162,10 @@ module.exports = {
163162
'lg': '992px',
164163
'xl': '1200px',
165164

166-
'xsx': {'max': '575px'},
167-
'smx': {'max': '767px'},
168-
'mdx': {'max': '991px'},
169-
'lgx': {'max': '1999px'},
165+
'xsx': { 'max': '575px' },
166+
'smx': { 'max': '767px' },
167+
'mdx': { 'max': '991px' },
168+
'lgx': { 'max': '1999px' },
170169
},
171170

172171
/*
@@ -189,6 +188,7 @@ module.exports = {
189188

190189
fonts: {
191190
'sans': [
191+
'Rubik',
192192
'-apple-system',
193193
'BlinkMacSystemFont',
194194
'"Helvetica Neue"',
@@ -209,7 +209,7 @@ module.exports = {
209209
'Monaco',
210210
'Consolas',
211211
'monospace',
212-
]
212+
],
213213
},
214214

215215
/*
@@ -394,7 +394,7 @@ module.exports = {
394394
|
395395
*/
396396

397-
borderColors: global.Object.assign({default: colors['neutral-400']}, colors),
397+
borderColors: global.Object.assign({ default: colors['neutral-400'] }, colors),
398398

399399
/*
400400
|-----------------------------------------------------------------------------
@@ -469,7 +469,7 @@ module.exports = {
469469
'1/6': '16.66667%',
470470
'5/6': '83.33333%',
471471
'full': '100%',
472-
'screen': '100vw'
472+
'screen': '100vw',
473473
},
474474

475475
/*
@@ -504,7 +504,7 @@ module.exports = {
504504
'48': '12rem',
505505
'64': '16rem',
506506
'full': '100%',
507-
'screen': '100vh'
507+
'screen': '100vh',
508508
},
509509

510510
/*
@@ -543,7 +543,7 @@ module.exports = {
543543
minHeight: {
544544
'0': '0',
545545
'full': '100%',
546-
'screen': '100vh'
546+
'screen': '100vh',
547547
},
548548

549549
/*

0 commit comments

Comments
 (0)