Skip to content

Commit 4719124

Browse files
DaneEverittDaneEveritt
committed
Merge branch 'dane/tailwind-2' into develop
2 parents 1ba0f4f + bb2d3e4 commit 4719124

File tree

15 files changed

+259
-238
lines changed

15 files changed

+259
-238
lines changed

‎.babel-plugin-macrosrc.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ module.exports = {
22
twin: {
33
preset: 'styled-components',
44
autoCssProp: true,
5-
config: './tailwind.config.js',
65
},
76
styledComponents: {
87
pure: true,

‎package.json‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"@fortawesome/fontawesome-svg-core": "^1.2.32",
55
"@fortawesome/free-solid-svg-icons": "^5.15.1",
66
"@fortawesome/react-fontawesome": "^0.1.11",
7-
"@types/react-copy-to-clipboard": "^4.3.0",
7+
"@tailwindcss/forms": "^0.2.1",
88
"axios": "^0.19.2",
99
"chart.js": "^2.8.0",
1010
"codemirror": "^5.57.0",
@@ -35,9 +35,10 @@
3535
"react-transition-group": "^4.4.1",
3636
"reaptcha": "^1.7.2",
3737
"sockette": "^2.0.6",
38-
"styled-components": "^5.1.1",
38+
"styled-components": "^5.2.1",
3939
"styled-components-breakpoint": "^3.0.0-preview.20",
4040
"swr": "^0.2.3",
41+
"tailwindcss": "^2.0.2",
4142
"uuid": "^3.3.2",
4243
"xterm": "^4.9.0",
4344
"xterm-addon-attach": "^0.6.0",
@@ -67,20 +68,22 @@
6768
"@types/node": "^14.11.10",
6869
"@types/query-string": "^6.3.0",
6970
"@types/react": "^16.9.41",
71+
"@types/react-copy-to-clipboard": "^4.3.0",
7072
"@types/react-dom": "^16.9.8",
7173
"@types/react-helmet": "^6.0.0",
7274
"@types/react-redux": "^7.1.1",
7375
"@types/react-router": "^5.1.3",
7476
"@types/react-router-dom": "^5.1.3",
7577
"@types/react-transition-group": "^4.4.0",
76-
"@types/styled-components": "^5.1.0",
78+
"@types/styled-components": "^5.1.7",
7779
"@types/uuid": "^3.4.5",
7880
"@types/webpack-env": "^1.15.2",
7981
"@types/yup": "^0.29.3",
8082
"@typescript-eslint/eslint-plugin": "^3.5.0",
8183
"@typescript-eslint/parser": "^3.5.0",
84+
"autoprefixer": "^10.1.0",
8285
"babel-loader": "^8.0.6",
83-
"babel-plugin-styled-components": "^1.10.7",
86+
"babel-plugin-styled-components": "^1.12.0",
8487
"cross-env": "^7.0.2",
8588
"css-loader": "^3.2.1",
8689
"eslint": "^7.4.0",
@@ -92,13 +95,13 @@
9295
"eslint-plugin-react-hooks": "^4.0.5",
9396
"eslint-plugin-standard": "^4.0.1",
9497
"fork-ts-checker-webpack-plugin": "^5.0.6",
98+
"postcss": "^8.2.1",
9599
"redux-devtools-extension": "^2.13.8",
96100
"source-map-loader": "^1.0.1",
97101
"style-loader": "^1.2.1",
98102
"svg-url-loader": "^6.0.0",
99-
"tailwindcss": "^1.9.4",
100103
"terser-webpack-plugin": "^3.0.6",
101-
"twin.macro": "^1.10.0",
104+
"twin.macro": "^2.0.7",
102105
"typescript": "^3.9.6",
103106
"typescript-plugin-tw-template": "^2.0.1",
104107
"webpack": "^4.43.0",
@@ -114,7 +117,7 @@
114117
"watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
115118
"build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",
116119
"build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production",
117-
"serve": "yarn run clean && cross-env PUBLIC_PATH=https://pterodactyl.test:8080 NODE_ENV=development TSC_WATCHFILE=UseFsEventsWithFallbackDynamicPolling webpack-dev-server --host 0.0.0.0 --hot --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
120+
"serve": "yarn run clean && cross-env PUBLIC_PATH=https://pterodactyl.test:8080 NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot --https --key /etc/ssl/private/pterodactyl.test-key.pem --cert /etc/ssl/private/pterodactyl.test.pem"
118121
},
119122
"browserslist": [
120123
"> 0.5%",

‎resources/scripts/components/App.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Provider } from 'react-redux';
1111
import { SiteSettings } from '@/state/settings';
1212
import ProgressBar from '@/components/elements/ProgressBar';
1313
import NotFound from '@/components/screens/NotFound';
14-
import tw from 'twin.macro';
14+
import tw, { GlobalStyles as TailwindGlobalStyles } from 'twin.macro';
1515
import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
1616
import { createBrowserHistory } from 'history';
1717
import { setupInterceptors } from '@/api/interceptors';
@@ -74,6 +74,7 @@ const App = () => {
7474
return (
7575
<>
7676
<GlobalStylesheet/>
77+
<TailwindGlobalStyles/>
7778
<StoreProvider store={store}>
7879
<Provider store={store}>
7980
<ProgressBar/>

‎resources/scripts/components/NavigationBar.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,8 @@ import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/f
55
import { useStoreState } from 'easy-peasy';
66
import { ApplicationStore } from '@/state';
77
import SearchContainer from '@/components/dashboard/search/SearchContainer';
8-
import tw from 'twin.macro';
8+
import tw, { theme } from 'twin.macro';
99
import styled from 'styled-components/macro';
10-
// @ts-ignore
11-
import * as config from '@/../../tailwind.config.js';
1210

1311
const Navigation = styled.div`
1412
${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`};
@@ -37,7 +35,7 @@ const RightNavigation = styled.div`
3735
}
3836
3937
&:active, &:hover, &.active {
40-
box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};
38+
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
4139
}
4240
}
4341
`;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default () => {
5050
return (
5151
<PageContentBlock title={'Account API'}>
5252
<FlashMessageRender byKey={'account'}/>
53-
<div css={tw`md:flex flex-no-wrap my-10`}>
53+
<div css={tw`md:flex flex-nowrap my-10`}>
5454
<ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
5555
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
5656
</ContentBox>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {
9494
e.stopPropagation();
9595
this.setState({ visible: false });
9696
}}
97-
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48 z-50`}
97+
css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 z-50`}
9898
>
9999
{this.props.children}
100100
</div>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,28 +38,28 @@ const inputStyle = css<Props>`
3838
// Reset to normal styling.
3939
resize: none;
4040
${tw`appearance-none outline-none w-full min-w-0`};
41-
${tw`p-3 border rounded text-sm transition-all duration-150`};
41+
${tw`p-3 border-2 rounded text-sm transition-all duration-150`};
4242
${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
4343
4444
& + .input-help {
4545
${tw`mt-1 text-xs`};
46-
${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
46+
${props => props.hasError ? tw`text-red-200` : tw`text-neutral-200`};
4747
}
4848
4949
&:required, &:invalid {
5050
${tw`shadow-none`};
5151
}
5252
5353
&:not(:disabled):not(:read-only):focus {
54-
${tw`shadow-md border-primary-400`};
54+
${tw`shadow-md border-primary-300 ring-2 ring-primary-400 ring-opacity-50`};
5555
}
5656
5757
&:disabled {
5858
${tw`opacity-75`};
5959
}
6060
6161
${props => props.isLight && light};
62-
${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
62+
${props => props.hasError && tw`text-red-100 border-red-400 hover:border-red-300 focus:border-red-300! focus:ring-red-200!`};
6363
`;
6464

6565
const Input = styled.input<Props>`

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import styled from 'styled-components/macro';
2-
import tw from 'twin.macro';
3-
// @ts-ignore
4-
import config from '../../../../tailwind.config';
2+
import tw, { theme } from 'twin.macro';
53

64
const SubNavigation = styled.div`
75
${tw`w-full bg-neutral-700 shadow overflow-x-auto`};
@@ -11,7 +9,7 @@ const SubNavigation = styled.div`
119
max-width: 1200px;
1210
1311
& > a, & > div {
14-
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-no-wrap transition-all duration-150`};
12+
${tw`inline-block py-3 px-4 text-neutral-300 no-underline whitespace-nowrap transition-all duration-150`};
1513
1614
&:not(:first-of-type) {
1715
${tw`ml-2`};
@@ -23,7 +21,7 @@ const SubNavigation = styled.div`
2321
2422
&:active, &.active {
2523
${tw`text-neutral-100`};
26-
box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
24+
box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()};
2725
}
2826
}
2927
}

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@ const TerminalDiv = styled.div`
5656
}
5757
`;
5858

59+
const CommandInput = styled.input`
60+
${tw`text-sm transition-colors duration-150 px-2 bg-transparent border-0 border-b-2 border-transparent text-neutral-100 p-2 pl-0 w-full focus:ring-0`}
61+
&:focus {
62+
${tw`border-cyan-700`};
63+
}
64+
`;
65+
5966
export default () => {
6067
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m';
6168
const ref = useRef<HTMLDivElement>(null);
@@ -209,13 +216,15 @@ export default () => {
209216
<TerminalDiv id={'terminal'} ref={ref}/>
210217
</div>
211218
{canSendCommands &&
212-
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
219+
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
213220
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
214221
<div css={tw`w-full`}>
215-
<input
222+
<CommandInput
216223
type={'text'}
224+
placeholder={'Type a command...'}
225+
aria-label={'Console command input.'}
226+
aria-description={'Type a command and press enter to send to server.'}
217227
disabled={!instance || !connected}
218-
css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
219228
onKeyDown={handleCommandKeyDown}
220229
/>
221230
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default ({ backup, className }: Props) => {
4040
});
4141

4242
return (
43-
<GreyRowBox css={tw`flex-wrap md:flex-no-wrap items-center`} className={className}>
43+
<GreyRowBox css={tw`flex-wrap md:flex-nowrap items-center`} className={className}>
4444
<div css={tw`flex items-center truncate w-full md:flex-1`}>
4545
<div css={tw`mr-4`}>
4646
{backup.completedAt ?
@@ -60,7 +60,7 @@ export default ({ backup, className }: Props) => {
6060
{backup.name}
6161
</p>
6262
{(backup.completedAt && backup.isSuccessful) &&
63-
<span css={tw`ml-3 text-neutral-300 text-xs font-thin hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
63+
<span css={tw`ml-3 text-neutral-300 text-xs font-extralight hidden sm:inline`}>{bytesToHuman(backup.bytes)}</span>
6464
}
6565
</div>
6666
<p css={tw`mt-1 md:mt-0 text-xs text-neutral-400 font-mono truncate`}>

0 commit comments

Comments
 (0)