StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Some adjustments to begin working on a dark theme

Browse source
This commit is contained in:
Dane Everitt 2019-06-22 15:23:02 -07:00
parent ad61774171
commit aabf9b8a70
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
9 changed files with 134 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

9
resources/scripts/components/App.tsx
View file

@ -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>

7
resources/scripts/components/ServerOverviewContainer.tsx Normal file
View file

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

7
resources/scripts/components/account/AccountOverview.tsx Normal file
View file

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

49
resources/scripts/components/account/DesignElements.tsx Normal file
View file

@ -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>
);
}
}