Skip to content

Commit d93e804

Browse files
DaneEverittDaneEveritt
committed
Get server listing design working mostly correct
1 parent 94e3acb commit d93e804

File tree

9 files changed

+170
-188
lines changed

9 files changed

+170
-188
lines changed

‎resources/scripts/assets/css/GlobalStylesheet.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import tw from 'twin.macro';
2+
import { createGlobalStyle } from 'styled-components/macro';
3+
4+
export default createGlobalStyle`
5+
@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
6+
@import url('//fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
7+
8+
body {
9+
${tw`font-sans bg-neutral-800 text-neutral-200`};
10+
letter-spacing: 0.015em;
11+
}
12+
13+
h1, h2, h3, h4, h5, h6 {
14+
${tw`font-medium tracking-normal font-header`};
15+
}
16+
17+
p {
18+
${tw`text-neutral-200 leading-snug font-sans`};
19+
}
20+
`;

‎resources/scripts/components/App.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { SiteSettings } from '@/state/settings';
1111
import ProgressBar from '@/components/elements/ProgressBar';
1212
import NotFound from '@/components/screens/NotFound';
1313
import tw from 'twin.macro';
14+
import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
1415

1516
interface ExtendedWindow extends Window {
1617
SiteConfiguration?: SiteSettings;
@@ -48,21 +49,24 @@ const App = () => {
4849
}
4950

5051
return (
51-
<StoreProvider store={store}>
52-
<Provider store={store}>
53-
<ProgressBar/>
54-
<div css={tw`mx-auto w-auto`}>
55-
<BrowserRouter basename={'/'} key={'root-router'}>
56-
<Switch>
57-
<Route path="/server/:id" component={ServerRouter}/>
58-
<Route path="/auth" component={AuthenticationRouter}/>
59-
<Route path="/" component={DashboardRouter}/>
60-
<Route path={'*'} component={NotFound}/>
61-
</Switch>
62-
</BrowserRouter>
63-
</div>
64-
</Provider>
65-
</StoreProvider>
52+
<>
53+
<GlobalStylesheet/>
54+
<StoreProvider store={store}>
55+
<Provider store={store}>
56+
<ProgressBar/>
57+
<div css={tw`mx-auto w-auto`}>
58+
<BrowserRouter basename={'/'} key={'root-router'}>
59+
<Switch>
60+
<Route path="/server/:id" component={ServerRouter}/>
61+
<Route path="/auth" component={AuthenticationRouter}/>
62+
<Route path="/" component={DashboardRouter}/>
63+
<Route path={'*'} component={NotFound}/>
64+
</Switch>
65+
</BrowserRouter>
66+
</div>
67+
</Provider>
68+
</StoreProvider>
69+
</>
6670
);
6771
};
6872

‎resources/scripts/components/NavigationBar.tsx‎

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,76 @@
11
import * as React from 'react';
22
import { Link, NavLink } from 'react-router-dom';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4-
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
5-
import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
6-
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
7-
import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
8-
import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
4+
import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
95
import { useStoreState } from 'easy-peasy';
106
import { ApplicationStore } from '@/state';
11-
import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
127
import SearchContainer from '@/components/dashboard/search/SearchContainer';
8+
import tw from 'twin.macro';
9+
import styled from 'styled-components/macro';
10+
import * as config from '@/../../tailwind.config.js';
11+
12+
const Navigation = styled.div`
13+
${tw`w-full bg-neutral-900 shadow-md`};
14+
15+
& > div {
16+
${tw`mx-auto w-full flex items-center`};
17+
}
18+
19+
& #logo {
20+
${tw`flex-1`};
21+
22+
& > a {
23+
${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
24+
}
25+
}
26+
`;
27+
28+
const RightNavigation = styled.div`
29+
${tw`flex h-full items-center justify-center`};
30+
31+
& > a, & > .navigation-link {
32+
${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
33+
34+
&:active, &:hover {
35+
${tw`text-neutral-100 bg-black`};
36+
}
37+
38+
&:active, &:hover, &.active {
39+
box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};
40+
}
41+
}
42+
`;
1343

1444
export default () => {
1545
const user = useStoreState((state: ApplicationStore) => state.user.data!);
1646
const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
1747

1848
return (
19-
<div id={'navigation'}>
20-
<div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
49+
<Navigation>
50+
<div css={tw`mx-auto w-full flex items-center`} style={{ maxWidth: '1200px', height: '3.5rem' }}>
2151
<div id={'logo'}>
2252
<Link to={'/'}>
2353
{name}
2454
</Link>
2555
</div>
26-
<div className={'right-navigation'}>
56+
<RightNavigation>
2757
<SearchContainer/>
28-
<NavLink to={'/'} exact={true}>
58+
<NavLink to={'/'} exact>
2959
<FontAwesomeIcon icon={faLayerGroup}/>
3060
</NavLink>
3161
<NavLink to={'/account'}>
3262
<FontAwesomeIcon icon={faUserCircle}/>
3363
</NavLink>
3464
{user.rootAdmin &&
35-
<a href={'/admin'} target={'_blank'}>
65+
<a href={'/admin'} target={'_blank'} rel={'noreferrer'}>
3666
<FontAwesomeIcon icon={faCogs}/>
3767
</a>
3868
}
39-
{process.env.NODE_ENV !== 'production' &&
40-
<NavLink to={'/design'}>
41-
<FontAwesomeIcon icon={faSwatchbook}/>
42-
</NavLink>
43-
}
4469
<a href={'/auth/logout'}>
4570
<FontAwesomeIcon icon={faSignOutAlt}/>
4671
</a>
47-
</div>
72+
</RightNavigation>
4873
</div>
49-
</div>
74+
</Navigation>
5075
);
5176
};

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
1010
import { useStoreState } from 'easy-peasy';
1111
import { usePersistedState } from '@/plugins/usePersistedState';
1212
import Switch from '@/components/elements/Switch';
13+
import tw from 'twin.macro';
1314

1415
export default () => {
1516
const { addError, clearFlashes } = useFlash();
@@ -37,10 +38,10 @@ export default () => {
3738

3839
return (
3940
<PageContentBlock>
40-
<FlashMessageRender className={'mb-4'}/>
41+
<FlashMessageRender css={tw`mb-4`}/>
4142
{rootAdmin &&
42-
<div className={'mb-2 flex justify-end items-center'}>
43-
<p className={'uppercase text-xs text-neutral-400 mr-2'}>
43+
<div css={tw`mb-2 flex justify-end items-center`}>
44+
<p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
4445
{showAdmin ? 'Showing all servers' : 'Showing your servers'}
4546
</p>
4647
<Switch
@@ -51,14 +52,16 @@ export default () => {
5152
</div>
5253
}
5354
{loading ?
54-
<Spinner centered={true} size={'large'}/>
55+
<Spinner centered size={'large'}/>
5556
:
5657
servers.length > 0 ?
57-
servers.map(server => (
58-
<ServerRow key={server.uuid} server={server} className={'mt-2'}/>
58+
servers.map((server, index) => (
59+
<div key={server.uuid} css={index > 0 ? tw`mt-2` : undefined}>
60+
<ServerRow server={server}/>
61+
</div>
5962
))
6063
:
61-
<p className={'text-center text-sm text-neutral-400'}>
64+
<p css={tw`text-center text-sm text-neutral-400`}>
6265
There are no servers associated with your account.
6366
</p>
6467
}

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

Lines changed: 0 additions & 82 deletions
This file was deleted.

0 commit comments

Comments
 (0)