Skip to content

Commit 46c338d

Browse files
DaneEverittDaneEveritt
committed
Basic design concept for a nav bar
1 parent cbd050e commit 46c338d

File tree

5 files changed

+121
-69
lines changed

5 files changed

+121
-69
lines changed

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,17 @@ export default ({ basename, children }: Props) => (
1818
<Switch location={location}>
1919
{children}
2020
</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>
21+
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
22+
<p className={'text-right text-neutral-500 text-xs'}>
23+
&copy; 2015 - 2019&nbsp;
24+
<a
25+
href={'https://pterodactyl.io'}
26+
className={'no-underline text-neutral-500 hover:text-neutral-300'}
27+
>
28+
Pterodactyl Software
29+
</a>
30+
</p>
31+
</div>
3032
</section>
3133
</CSSTransition>
3234
</TransitionGroup>

‎resources/scripts/components/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const App = () => {
3939
return (
4040
<StoreProvider store={store}>
4141
<Router basename={'/'}>
42-
<div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
42+
<div className={'mx-auto w-auto'}>
4343
<TransitionRouter basename={'/'}>
4444
<Route exact path="/" component={ServerOverviewContainer}/>
4545
<Route path="/auth" component={AuthenticationRouter}/>

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

Lines changed: 61 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,65 +5,71 @@ import ContentBox from '@/components/elements/ContentBox';
55
export default class DesignElementsContainer extends React.PureComponent {
66
render () {
77
return (
8-
<div className={'my-10'}>
9-
<div className={'flex'}>
10-
<ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'border-primary-400'}>
11-
<p className={'text-neutral-200 text-sm'}>
12-
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
13-
</p>
14-
<p><Link to={'/'}>Back</Link></p>
15-
</ContentBox>
16-
<div className={'ml-4 flex-1'}>
17-
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
18-
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
19-
<label className={'uppercase text-neutral-200'}>Email</label>
20-
<input type={'text'} className={'input-dark'}/>
21-
<p className={'input-help'}>
22-
This is some descriptive helper text to explain how things work.
8+
<React.Fragment>
9+
<div className={'my-10'}>
10+
<div className={'flex'}>
11+
<ContentBox
12+
className={'flex-1 mr-4'}
13+
title={'A Special Announcement'}
14+
borderColor={'border-primary-400'}
15+
>
16+
<p className={'text-neutral-200 text-sm'}>
17+
Your demands have been received: Dark Mode will be default in Pterodactyl 0.8!
2318
</p>
24-
<div className={'mt-6'}/>
25-
<label className={'uppercase text-neutral-200'}>Username</label>
26-
<input type={'text'} className={'input-dark error'}/>
27-
<p className={'input-help'}>
28-
This field has an error.
29-
</p>
30-
<div className={'mt-6'}/>
31-
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
32-
<input type={'text'} className={'input-dark'} disabled={true}/>
33-
<div className={'mt-6'}/>
34-
<label className={'uppercase text-neutral-200'}>Textarea</label>
35-
<textarea className={'input-dark h-32'}></textarea>
36-
<div className={'mt-6'}/>
37-
<button className={'btn btn-primary btn-sm'}>
38-
Blue
39-
</button>
40-
<button className={'btn btn-grey btn-sm ml-2'}>
41-
Grey
42-
</button>
43-
<button className={'btn btn-green btn-sm ml-2'}>
44-
Green
45-
</button>
46-
<button className={'btn btn-red btn-sm ml-2'}>
47-
Red
48-
</button>
49-
<div className={'mt-6'}/>
50-
<button className={'btn btn-secondary btn-sm'}>
51-
Secondary
52-
</button>
53-
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
54-
Secondary Danger
55-
</button>
56-
<div className={'mt-6'}/>
57-
<button className={'btn btn-primary btn-lg'}>
58-
Large
59-
</button>
60-
<button className={'btn btn-primary btn-xs ml-2'}>
61-
Tiny
62-
</button>
19+
<p><Link to={'/'}>Back</Link></p>
20+
</ContentBox>
21+
<div className={'ml-4 flex-1'}>
22+
<h2 className={'text-neutral-300 mb-2 px-4'}>Form Elements</h2>
23+
<div className={'bg-neutral-700 p-4 rounded shadow-lg border-t-4 border-primary-400'}>
24+
<label className={'uppercase text-neutral-200'}>Email</label>
25+
<input type={'text'} className={'input-dark'}/>
26+
<p className={'input-help'}>
27+
This is some descriptive helper text to explain how things work.
28+
</p>
29+
<div className={'mt-6'}/>
30+
<label className={'uppercase text-neutral-200'}>Username</label>
31+
<input type={'text'} className={'input-dark error'}/>
32+
<p className={'input-help'}>
33+
This field has an error.
34+
</p>
35+
<div className={'mt-6'}/>
36+
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
37+
<input type={'text'} className={'input-dark'} disabled={true}/>
38+
<div className={'mt-6'}/>
39+
<label className={'uppercase text-neutral-200'}>Textarea</label>
40+
<textarea className={'input-dark h-32'}></textarea>
41+
<div className={'mt-6'}/>
42+
<button className={'btn btn-primary btn-sm'}>
43+
Blue
44+
</button>
45+
<button className={'btn btn-grey btn-sm ml-2'}>
46+
Grey
47+
</button>
48+
<button className={'btn btn-green btn-sm ml-2'}>
49+
Green
50+
</button>
51+
<button className={'btn btn-red btn-sm ml-2'}>
52+
Red
53+
</button>
54+
<div className={'mt-6'}/>
55+
<button className={'btn btn-secondary btn-sm'}>
56+
Secondary
57+
</button>
58+
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
59+
Secondary Danger
60+
</button>
61+
<div className={'mt-6'}/>
62+
<button className={'btn btn-primary btn-lg'}>
63+
Large
64+
</button>
65+
<button className={'btn btn-primary btn-xs ml-2'}>
66+
Tiny
67+
</button>
68+
</div>
6369
</div>
6470
</div>
6571
</div>
66-
</div>
72+
</React.Fragment>
6773
);
6874
}
6975
}

‎resources/scripts/routers/AccountRouter.tsx‎

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,49 @@
11
import * as React from 'react';
2-
import { Route, RouteComponentProps } from 'react-router-dom';
2+
import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
33
import DesignElementsContainer from '@/components/account/DesignElementsContainer';
44
import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
55

66
export default ({ match }: RouteComponentProps) => (
77
<div>
8-
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
9-
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
8+
<div className={'w-full bg-neutral-900 shadow-md'}>
9+
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
10+
<div className={'flex-1'}>
11+
<Link
12+
to={'/'}
13+
className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
14+
style={{
15+
transition: 'color 150ms linear',
16+
}}
17+
>
18+
Pterodactyl
19+
</Link>
20+
</div>
21+
<div className={'flex h-full items-center justify-center'}>
22+
<NavLink
23+
to={'/'}
24+
exact={true}
25+
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
26+
style={{
27+
transition: 'background-color 150ms linear, color 150ms linear',
28+
}}
29+
>
30+
Dashboard
31+
</NavLink>
32+
<NavLink
33+
to={'/account'}
34+
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
35+
style={{
36+
transition: 'background-color 150ms linear, color 150ms linear',
37+
}}
38+
>
39+
Account
40+
</NavLink>
41+
</div>
42+
</div>
43+
</div>
44+
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
45+
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
46+
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
47+
</div>
1048
</div>
1149
);

‎tailwind.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ View the full documentation at https://tailwindcss.com.
4444
let colors = {
4545
'transparent': 'transparent',
4646

47-
'black': '#1F2933',
47+
'black': 'hsl(210, 27%, 10%)',
4848
'white': '#ffffff',
4949
'basically-white': '#fafafb',
5050

@@ -196,6 +196,12 @@ module.exports = {
196196
'system-ui',
197197
'sans-serif',
198198
],
199+
'header': [
200+
'"IBM Plex Sans"',
201+
'"Roboto"',
202+
'system-ui',
203+
'sans-serif',
204+
],
199205
'serif': [
200206
'Constantia',
201207
'"Lucida Bright"',

0 commit comments

Comments
 (0)