Basic design concept for a nav bar
This commit is contained in:
Dane Everitt
parent
cbd050edda
commit
46c338dc1b
5 changed files with 121 additions and 69 deletions
|
|
@ -18,15 +18,17 @@ export default ({ basename, children }: Props) => (
|
|||
<Switch location={location}>
|
||||
{children}
|
||||
</Switch>
|
||||
<p className={'text-right text-neutral-500 text-xs'}>
|
||||
© 2015 - 2019
|
||||
<a
|
||||
href={'https://pterodactyl.io'}
|
||||
className={'no-underline text-neutral-500 hover:text-neutral-300'}
|
||||
>
|
||||
Pterodactyl Software
|
||||
</a>
|
||||
</p>
|
||||
<div className={'mx-auto w-full'} style={{ maxWidth: '1200px' }}>
|
||||
<p className={'text-right text-neutral-500 text-xs'}>
|
||||
© 2015 - 2019
|
||||
<a
|
||||
href={'https://pterodactyl.io'}
|
||||
className={'no-underline text-neutral-500 hover:text-neutral-300'}
|
||||
>
|
||||
Pterodactyl Software
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</CSSTransition>
|
||||
</TransitionGroup>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ const App = () => {
|
|||
return (
|
||||
<StoreProvider store={store}>
|
||||
<Router basename={'/'}>
|
||||
<div className={'mx-auto w-auto'} style={{ maxWidth: '1000px' }}>
|
||||
<div className={'mx-auto w-auto'}>
|
||||
<TransitionRouter basename={'/'}>
|
||||
<Route exact path="/" component={ServerOverviewContainer}/>
|
||||
<Route path="/auth" component={AuthenticationRouter}/>
|
||||
|
|
|
|||
|
|
@ -5,65 +5,71 @@ import ContentBox from '@/components/elements/ContentBox';
|
|||
export default class DesignElementsContainer extends React.PureComponent {
|
||||
render () {
|
||||
return (
|
||||
<div className={'my-10'}>
|
||||
<div className={'flex'}>
|
||||
<ContentBox className={'flex-1 mr-4'} title={'A Special Announcement'} borderColor={'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>
|
||||
<p><Link to={'/'}>Back</Link></p>
|
||||
</ContentBox>
|
||||
<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={'input-dark'}/>
|
||||
<p className={'input-help'}>
|
||||
This is some descriptive helper text to explain how things work.
|
||||
<React.Fragment>
|
||||
<div className={'my-10'}>
|
||||
<div className={'flex'}>
|
||||
<ContentBox
|
||||
className={'flex-1 mr-4'}
|
||||
title={'A Special Announcement'}
|
||||
borderColor={'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 className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Username</label>
|
||||
<input type={'text'} className={'input-dark error'}/>
|
||||
<p className={'input-help'}>
|
||||
This field has an error.
|
||||
</p>
|
||||
<div className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
|
||||
<input type={'text'} className={'input-dark'} disabled={true}/>
|
||||
<div className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Textarea</label>
|
||||
<textarea className={'input-dark h-32'}></textarea>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-primary btn-sm'}>
|
||||
Blue
|
||||
</button>
|
||||
<button className={'btn btn-grey btn-sm ml-2'}>
|
||||
Grey
|
||||
</button>
|
||||
<button className={'btn btn-green btn-sm ml-2'}>
|
||||
Green
|
||||
</button>
|
||||
<button className={'btn btn-red btn-sm ml-2'}>
|
||||
Red
|
||||
</button>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-secondary btn-sm'}>
|
||||
Secondary
|
||||
</button>
|
||||
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
|
||||
Secondary Danger
|
||||
</button>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-primary btn-lg'}>
|
||||
Large
|
||||
</button>
|
||||
<button className={'btn btn-primary btn-xs ml-2'}>
|
||||
Tiny
|
||||
</button>
|
||||
<p><Link to={'/'}>Back</Link></p>
|
||||
</ContentBox>
|
||||
<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={'input-dark'}/>
|
||||
<p className={'input-help'}>
|
||||
This is some descriptive helper text to explain how things work.
|
||||
</p>
|
||||
<div className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Username</label>
|
||||
<input type={'text'} className={'input-dark error'}/>
|
||||
<p className={'input-help'}>
|
||||
This field has an error.
|
||||
</p>
|
||||
<div className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Disabled Field</label>
|
||||
<input type={'text'} className={'input-dark'} disabled={true}/>
|
||||
<div className={'mt-6'}/>
|
||||
<label className={'uppercase text-neutral-200'}>Textarea</label>
|
||||
<textarea className={'input-dark h-32'}></textarea>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-primary btn-sm'}>
|
||||
Blue
|
||||
</button>
|
||||
<button className={'btn btn-grey btn-sm ml-2'}>
|
||||
Grey
|
||||
</button>
|
||||
<button className={'btn btn-green btn-sm ml-2'}>
|
||||
Green
|
||||
</button>
|
||||
<button className={'btn btn-red btn-sm ml-2'}>
|
||||
Red
|
||||
</button>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-secondary btn-sm'}>
|
||||
Secondary
|
||||
</button>
|
||||
<button className={'btn btn-secondary btn-red btn-sm ml-2'}>
|
||||
Secondary Danger
|
||||
</button>
|
||||
<div className={'mt-6'}/>
|
||||
<button className={'btn btn-primary btn-lg'}>
|
||||
Large
|
||||
</button>
|
||||
<button className={'btn btn-primary btn-xs ml-2'}>
|
||||
Tiny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,49 @@
|
|||
import * as React from 'react';
|
||||
import { Route, RouteComponentProps } from 'react-router-dom';
|
||||
import { Link, NavLink, Route, RouteComponentProps } from 'react-router-dom';
|
||||
import DesignElementsContainer from '@/components/account/DesignElementsContainer';
|
||||
import AccountOverviewContainer from '@/components/account/AccountOverviewContainer';
|
||||
|
||||
export default ({ match }: RouteComponentProps) => (
|
||||
<div>
|
||||
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
|
||||
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
|
||||
<div className={'w-full bg-neutral-900 shadow-md'}>
|
||||
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
|
||||
<div className={'flex-1'}>
|
||||
<Link
|
||||
to={'/'}
|
||||
className={'text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100'}
|
||||
style={{
|
||||
transition: 'color 150ms linear',
|
||||
}}
|
||||
>
|
||||
Pterodactyl
|
||||
</Link>
|
||||
</div>
|
||||
<div className={'flex h-full items-center justify-center'}>
|
||||
<NavLink
|
||||
to={'/'}
|
||||
exact={true}
|
||||
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
|
||||
style={{
|
||||
transition: 'background-color 150ms linear, color 150ms linear',
|
||||
}}
|
||||
>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to={'/account'}
|
||||
className={'flex items-center h-full no-underline text-neutral-300 hover:text-neutral-100 hover:bg-black px-4'}
|
||||
style={{
|
||||
transition: 'background-color 150ms linear, color 150ms linear',
|
||||
}}
|
||||
>
|
||||
Account
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'w-full mx-auto'} style={{ maxWidth: '1200px' }}>
|
||||
<Route path={`${match.path}/`} component={AccountOverviewContainer} exact/>
|
||||
<Route path={`${match.path}/design`} component={DesignElementsContainer} exact/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ View the full documentation at https://tailwindcss.com.
|
|||
let colors = {
|
||||
'transparent': 'transparent',
|
||||
|
||||
'black': '#1F2933',
|
||||
'black': 'hsl(210, 27%, 10%)',
|
||||
'white': '#ffffff',
|
||||
'basically-white': '#fafafb',
|
||||
|
||||
|
|
@ -196,6 +196,12 @@ module.exports = {
|
|||
'system-ui',
|
||||
'sans-serif',
|
||||
],
|
||||
'header': [
|
||||
'"IBM Plex Sans"',
|
||||
'"Roboto"',
|
||||
'system-ui',
|
||||
'sans-serif',
|
||||
],
|
||||
'serif': [
|
||||
'Constantia',
|
||||
'"Lucida Bright"',
|
||||
|
|
|
|||
Loading…
Reference in a new issue