Skip to content

Commit e6a61fb

Browse files
DaneEverittDaneEveritt
committed
Update views to support a more logical container
1 parent e044e8d commit e6a61fb

20 files changed

+85
-39
lines changed

‎public/assets/svgs/not_found.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎resources/scripts/TransitionRouter.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import { Route } from 'react-router';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4-
import PageContentBlock from '@/components/elements/PageContentBlock';
54

65
type Props = Readonly<{
76
children: React.ReactNode;
@@ -13,9 +12,7 @@ export default ({ children }: Props) => (
1312
<TransitionGroup className={'route-transition-group'}>
1413
<CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
1514
<section>
16-
<PageContentBlock>
17-
{children}
18-
</PageContentBlock>
15+
{children}
1916
</section>
2017
</CSSTransition>
2118
</TransitionGroup>

‎resources/scripts/components/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Provider } from 'react-redux';
1010
import { SiteSettings } from '@/state/settings';
1111
import { DefaultTheme, ThemeProvider } from 'styled-components';
1212
import ProgressBar from '@/components/elements/ProgressBar';
13+
import NotFound from '@/components/screens/NotFound';
1314

1415
interface ExtendedWindow extends Window {
1516
SiteConfiguration?: SiteSettings;
@@ -65,6 +66,7 @@ const App = () => {
6566
<Route path="/server/:id" component={ServerRouter}/>
6667
<Route path="/auth" component={AuthenticationRouter}/>
6768
<Route path="/" component={DashboardRouter}/>
69+
<Route path={'*'} component={NotFound}/>
6870
</Switch>
6971
</BrowserRouter>
7072
</div>

‎resources/scripts/components/dashboard/AccountApiContainer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ApplicationStore } from '@/state';
1313
import FlashMessageRender from '@/components/FlashMessageRender';
1414
import { httpErrorToHuman } from '@/api/http';
1515
import format from 'date-fns/format';
16+
import PageContentBlock from '@/components/elements/PageContentBlock';
1617

1718
export default () => {
1819
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
@@ -46,7 +47,7 @@ export default () => {
4647
};
4748

4849
return (
49-
<div className={'my-10'}>
50+
<PageContentBlock>
5051
<FlashMessageRender byKey={'account'} className={'mb-4'}/>
5152
<div className={'flex'}>
5253
<ContentBox title={'Create API Key'} className={'flex-1'}>
@@ -107,6 +108,6 @@ export default () => {
107108
}
108109
</ContentBox>
109110
</div>
110-
</div>
111+
</PageContentBlock>
111112
);
112113
};

‎resources/scripts/components/dashboard/AccountOverviewContainer.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddr
55
import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
66
import styled from 'styled-components';
77
import { breakpoint } from 'styled-components-breakpoint';
8+
import PageContentBlock from '@/components/elements/PageContentBlock';
89

910
const Container = styled.div`
1011
${tw`flex flex-wrap my-10`};
@@ -24,16 +25,22 @@ const Container = styled.div`
2425

2526
export default () => {
2627
return (
27-
<Container>
28-
<ContentBox title={'Update Password'} showFlashes={'account:password'}>
29-
<UpdatePasswordForm/>
30-
</ContentBox>
31-
<ContentBox className={'mt-8 md:mt-0 md:ml-8'} title={'Update Email Address'} showFlashes={'account:email'}>
32-
<UpdateEmailAddressForm/>
33-
</ContentBox>
34-
<ContentBox className={'xl:ml-8 mt-8 xl:mt-0'} title={'Configure Two Factor'}>
35-
<ConfigureTwoFactorForm/>
36-
</ContentBox>
37-
</Container>
28+
<PageContentBlock>
29+
<Container>
30+
<ContentBox title={'Update Password'} showFlashes={'account:password'}>
31+
<UpdatePasswordForm/>
32+
</ContentBox>
33+
<ContentBox
34+
className={'mt-8 md:mt-0 md:ml-8'}
35+
title={'Update Email Address'}
36+
showFlashes={'account:email'}
37+
>
38+
<UpdateEmailAddressForm/>
39+
</ContentBox>
40+
<ContentBox className={'xl:ml-8 mt-8 xl:mt-0'} title={'Configure Two Factor'}>
41+
<ConfigureTwoFactorForm/>
42+
</ContentBox>
43+
</Container>
44+
</PageContentBlock>
3845
);
3946
};

‎resources/scripts/components/dashboard/DashboardContainer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Server } from '@/api/server/getServer';
33
import getServers from '@/api/getServers';
44
import ServerRow from '@/components/dashboard/ServerRow';
55
import Spinner from '@/components/elements/Spinner';
6+
import PageContentBlock from '@/components/elements/PageContentBlock';
67

78
export default () => {
89
const [ servers, setServers ] = useState<null | Server[]>(null);
@@ -18,7 +19,7 @@ export default () => {
1819
}
1920

2021
return (
21-
<div className={'my-10'}>
22+
<PageContentBlock>
2223
{servers.length > 0 ?
2324
servers.map(server => (
2425
<ServerRow key={server.uuid} server={server} className={'mt-2'}/>
@@ -28,6 +29,6 @@ export default () => {
2829
It looks like you have no servers.
2930
</p>
3031
}
31-
</div>
32+
</PageContentBlock>
3233
);
3334
};

‎resources/scripts/components/elements/PageContentBlock.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import { CSSTransition } from 'react-transition-group';
44

55
interface Props {
66
children: React.ReactNode;
7+
className?: string;
78
}
89

9-
export default ({ children }: Props) => (
10+
export default ({ className, children }: Props) => (
1011
<CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
1112
<>
12-
<ContentContainer className={'my-10'}>
13+
<ContentContainer className={`my-10 ${className}`}>
1314
{children}
1415
</ContentContainer>
1516
<ContentContainer className={'mb-4'}>

‎resources/scripts/components/screens/NotFound.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import PageContentBlock from '@/components/elements/PageContentBlock';
3+
4+
interface Props {
5+
title?: string;
6+
message: string;
7+
}
8+
9+
export default ({ title, message }: Props) => (
10+
<PageContentBlock>
11+
<div className={'flex justify-center'}>
12+
<div className={'w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center'}>
13+
<img src={'/assets/svgs/not_found.svg'} className={'w-2/3 h-auto select-none'}/>
14+
<h2 className={'mt-6 text-neutral-900 font-bold'}>404</h2>
15+
<p className={'text-sm text-neutral-700 mt-2'}>
16+
The requested resource was not found.
17+
</p>
18+
</div>
19+
</div>
20+
</PageContentBlock>
21+
);

‎resources/scripts/components/server/ServerConsole.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { bytesToHuman } from '@/helpers';
1111
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
1212
import TitledGreyBox from '@/components/elements/TitledGreyBox';
1313
import Can from '@/components/elements/Can';
14+
import PageContentBlock from '@/components/elements/PageContentBlock';
1415

1516
type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
1617

@@ -80,7 +81,7 @@ export default () => {
8081
}, [ instance, connected ]);
8182

8283
return (
83-
<div className={'my-10 flex'}>
84+
<PageContentBlock className={'flex'}>
8485
<div className={'w-1/4'}>
8586
<TitledGreyBox title={server.name} icon={faServer}>
8687
<p className={'text-xs uppercase'}>
@@ -159,6 +160,6 @@ export default () => {
159160
<ChunkedStatGraphs/>
160161
</SuspenseSpinner>
161162
</div>
162-
</div>
163+
</PageContentBlock>
163164
);
164165
};

‎resources/scripts/components/server/backups/BackupContainer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CreateBackupButton from '@/components/server/backups/CreateBackupButton';
99
import FlashMessageRender from '@/components/FlashMessageRender';
1010
import BackupRow from '@/components/server/backups/BackupRow';
1111
import { ServerContext } from '@/state/server';
12+
import PageContentBlock from '@/components/elements/PageContentBlock';
1213

1314
export default () => {
1415
const { uuid } = useServer();
@@ -34,7 +35,7 @@ export default () => {
3435
}
3536

3637
return (
37-
<div className={'mt-10 mb-6'}>
38+
<PageContentBlock>
3839
<FlashMessageRender byKey={'backups'} className={'mb-4'}/>
3940
{!backups.length ?
4041
<p className="text-center text-sm text-neutral-400">
@@ -54,6 +55,6 @@ export default () => {
5455
<CreateBackupButton/>
5556
</div>
5657
</Can>
57-
</div>
58+
</PageContentBlock>
5859
);
5960
};

0 commit comments

Comments
 (0)