diff --git a/.babel-plugin-macrosrc.js b/.babel-plugin-macrosrc.js index fad1194f8..4bcdbb88b 100644 --- a/.babel-plugin-macrosrc.js +++ b/.babel-plugin-macrosrc.js @@ -2,7 +2,6 @@ module.exports = { twin: { preset: 'styled-components', autoCssProp: true, - config: './tailwind.config.js', }, styledComponents: { pure: true, diff --git a/package.json b/package.json index 174c2d0ce..7fdd06fbd 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "react-transition-group": "^4.4.1", "reaptcha": "^1.7.2", "sockette": "^2.0.6", - "styled-components": "^5.1.1", + "styled-components": "^5.2.1", "styled-components-breakpoint": "^3.0.0-preview.20", "swr": "^0.2.3", "tailwindcss": "^2.0.2", @@ -75,14 +75,15 @@ "@types/react-router": "^5.1.3", "@types/react-router-dom": "^5.1.3", "@types/react-transition-group": "^4.4.0", - "@types/styled-components": "^5.1.0", + "@types/styled-components": "^5.1.7", "@types/uuid": "^3.4.5", "@types/webpack-env": "^1.15.2", "@types/yup": "^0.29.3", "@typescript-eslint/eslint-plugin": "^3.5.0", "@typescript-eslint/parser": "^3.5.0", + "autoprefixer": "^10.1.0", "babel-loader": "^8.0.6", - "babel-plugin-styled-components": "^1.10.7", + "babel-plugin-styled-components": "^1.12.0", "cross-env": "^7.0.2", "css-loader": "^3.2.1", "eslint": "^7.4.0", @@ -94,6 +95,7 @@ "eslint-plugin-react-hooks": "^4.0.5", "eslint-plugin-standard": "^4.0.1", "fork-ts-checker-webpack-plugin": "^5.0.6", + "postcss": "^8.2.1", "redux-devtools-extension": "^2.13.8", "source-map-loader": "^1.0.1", "style-loader": "^1.2.1", @@ -115,7 +117,7 @@ "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress", "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress", "build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production", - "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" + "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" }, "browserslist": [ "> 0.5%", diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx index 1bc934ccb..64845591a 100644 --- a/resources/scripts/components/NavigationBar.tsx +++ b/resources/scripts/components/NavigationBar.tsx @@ -5,10 +5,8 @@ import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/f import { useStoreState } from 'easy-peasy'; import { ApplicationStore } from '@/state'; import SearchContainer from '@/components/dashboard/search/SearchContainer'; -import tw from 'twin.macro'; +import tw, { theme } from 'twin.macro'; import styled from 'styled-components/macro'; -// @ts-ignore -import * as config from '@/../../tailwind.config.js'; const Navigation = styled.div` ${tw`w-full bg-neutral-900 shadow-md overflow-x-auto`}; @@ -37,7 +35,7 @@ const RightNavigation = styled.div` } &:active, &:hover, &.active { - box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']}; + box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()}; } } `; diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx index cf5d660c0..eb9701004 100644 --- a/resources/scripts/components/elements/DropdownMenu.tsx +++ b/resources/scripts/components/elements/DropdownMenu.tsx @@ -94,7 +94,7 @@ class DropdownMenu extends React.PureComponent { e.stopPropagation(); this.setState({ visible: false }); }} - css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48 z-50`} + css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 z-50`} > {this.props.children} diff --git a/resources/scripts/components/elements/SubNavigation.tsx b/resources/scripts/components/elements/SubNavigation.tsx index f3a6eeca8..ea6754944 100644 --- a/resources/scripts/components/elements/SubNavigation.tsx +++ b/resources/scripts/components/elements/SubNavigation.tsx @@ -1,7 +1,5 @@ import styled from 'styled-components/macro'; -import tw from 'twin.macro'; -// @ts-ignore -import config from '../../../../tailwind.config'; +import tw, { theme } from 'twin.macro'; const SubNavigation = styled.div` ${tw`w-full bg-neutral-700 shadow overflow-x-auto`}; @@ -23,7 +21,7 @@ const SubNavigation = styled.div` &:active, &.active { ${tw`text-neutral-100`}; - box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']}; + box-shadow: inset 0 -2px ${theme`colors.cyan.700`.toString()}; } } } diff --git a/tailwind.config.js b/tailwind.config.js index e39336636..275777ada 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require('tailwindcss/colors'); + module.exports = { theme: { fontFamily: { @@ -8,79 +10,13 @@ module.exports = { colors: { transparent: 'transparent', black: 'hsl(210, 27%, 10%)', - white: '#ffffff', - primary: { - 50: 'hsl(202, 100%, 95%)', // lightest - 100: 'hsl(204, 100%, 86%)', // lighter - 200: 'hsl(206, 93%, 73%)', - 300: 'hsl(208, 88%, 62%)', - 400: 'hsl(210, 83%, 53%)', // light - 500: 'hsl(212, 92%, 43%)', // base - 600: 'hsl(214, 95%, 36%)', // dark - 700: 'hsl(215, 96%, 32%)', - 800: 'hsl(216, 98%, 25%)', // darker - 900: 'hsl(218, 100%, 17%)', // darkest - }, - neutral: { - 50: 'hsl(216, 33%, 97%)', - 100: 'hsl(214, 15%, 91%)', - 200: 'hsl(210, 16%, 82%)', - 300: 'hsl(211, 13%, 65%)', - 400: 'hsl(211, 10%, 53%)', - 500: 'hsl(211, 12%, 43%)', - 600: 'hsl(209, 14%, 37%)', - 700: 'hsl(209, 18%, 30%)', - 800: 'hsl(209, 20%, 25%)', - 900: 'hsl(210, 24%, 16%)', - }, - red: { - 50: 'hsl(360, 100%, 95%)', - 100: 'hsl(360, 100%, 87%)', - 200: 'hsl(360, 100%, 80%)', - 300: 'hsl(360, 91%, 69%)', - 400: 'hsl(360, 83%, 62%)', - 500: 'hsl(356, 75%, 53%)', - 600: 'hsl(354, 85%, 44%)', - 700: 'hsl(352, 90%, 35%)', - 800: 'hsl(350, 94%, 28%)', - 900: 'hsl(348, 94%, 20%)', - }, - yellow: { - 50: 'hsl(49, 100%, 96%)', - 100: 'hsl(48, 100%, 88%)', - 200: 'hsl(48, 95%, 76%)', - 300: 'hsl(48, 94%, 68%)', - 400: 'hsl(44, 92%, 63%)', - 500: 'hsl(42, 87%, 55%)', - 600: 'hsl(36, 77%, 49%)', - 700: 'hsl(29, 80%, 44%)', - 800: 'hsl(22, 82%, 39%)', - 900: 'hsl(15, 86%, 30%)', - }, - cyan: { - 50: 'hsl(171, 82%, 94%)', - 100: 'hsl(172, 97%, 88%)', - 200: 'hsl(174, 96%, 78%)', - 300: 'hsl(176, 87%, 67%)', - 400: 'hsl(178, 78%, 57%)', - 500: 'hsl(180, 77%, 47%)', - 600: 'hsl(182, 85%, 39%)', - 700: 'hsl(184, 90%, 34%)', - 800: 'hsl(186, 91%, 29%)', - 900: 'hsl(188, 91%, 23%)', - }, - green: { - 50: 'hsl(125, 65%, 93%)', - 100: 'hsl(127, 65%, 85%)', - 200: 'hsl(124, 63%, 74%)', - 300: 'hsl(123, 53%, 55%)', - 400: 'hsl(123, 57%, 45%)', - 500: 'hsl(122, 73%, 35%)', - 600: 'hsl(122, 80%, 29%)', - 700: 'hsl(125, 79%, 26%)', - 800: 'hsl(125, 86%, 20%)', - 900: 'hsl(125, 97%, 14%)', - }, + white: '#fff', + primary: colors.blue, + neutral: colors.coolGray, + cyan: colors.cyan, + green: colors.green, + yellow: colors.amber, + red: colors.red, }, extend: { fontSize: { @@ -94,4 +30,7 @@ module.exports = { }), }, }, + plugins: [ + require('@tailwindcss/forms'), + ] }; diff --git a/webpack.config.js b/webpack.config.js index ec81a8860..e1cd0c951 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,9 +28,6 @@ module.exports = { test: /\.tsx?$/, exclude: /node_modules/, loader: 'babel-loader', - options: { - cacheDirectory: !isProduction, - }, }, { test: /\.css$/, @@ -92,7 +89,7 @@ module.exports = { minimize: isProduction, minimizer: [ new TerserPlugin({ - cache: true, + cache: isProduction, parallel: true, extractComments: false, terserOptions: { diff --git a/yarn.lock b/yarn.lock index 86b99595c..18f41fe19 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1233,13 +1233,6 @@ dependencies: "@types/react" "*" -"@types/react-native@*": - version "0.60.2" - resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.2.tgz#2dca78481a904419c2a5907288dd97d1090c6e3c" - dependencies: - "@types/prop-types" "*" - "@types/react" "*" - "@types/react-redux@^7.1.1": version "7.1.1" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.1.tgz#eb01e89cf71cad77df9f442b819d5db692b997cb" @@ -1286,15 +1279,14 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/styled-components@^5.1.0": - version "5.1.0" - resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.0.tgz#24d3412ba5395aa06e14fbc93c52f9454cebd0d6" - integrity sha512-ZFlLCuwF5r+4Vb7JUmd+Yr2S0UBdBGmI7ctFTgJMypIp3xOHI4LCFVn2dKMvpk6xDB2hLRykrEWMBwJEpUAUIQ== +"@types/styled-components@^5.1.7": + version "5.1.7" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710" + integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA== dependencies: "@types/hoist-non-react-statics" "*" "@types/react" "*" - "@types/react-native" "*" - csstype "^2.2.0" + csstype "^3.0.2" "@types/tern@*": version "0.23.3" @@ -1797,6 +1789,18 @@ atob@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a" +autoprefixer@^10.1.0: + version "10.1.0" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.1.0.tgz#b19fd8524edef8c85c9db3bdb0c998de84e172fb" + integrity sha512-0/lBNwN+ZUnb5su18NZo5MBIjDaq6boQKZcxwy86Gip/CmXA2zZqUoFQLCNAGI5P25ZWSP2RWdhDJ8osfKEjoQ== + dependencies: + browserslist "^4.15.0" + caniuse-lite "^1.0.30001165" + colorette "^1.2.1" + fraction.js "^4.0.12" + normalize-range "^0.1.2" + postcss-value-parser "^4.1.0" + axios@^0.19.2: version "0.19.2" resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27" @@ -1838,10 +1842,10 @@ babel-plugin-macros@^2.8.0: babel-plugin-syntax-jsx "^6.18.0" lodash "^4.17.11" -babel-plugin-styled-components@^1.10.7: - version "1.10.7" - resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz#3494e77914e9989b33cc2d7b3b29527a949d635c" - integrity sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg== +babel-plugin-styled-components@^1.12.0: + version "1.12.0" + resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz#1dec1676512177de6b827211e9eda5a30db4f9b9" + integrity sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA== dependencies: "@babel/helper-annotate-as-pure" "^7.0.0" "@babel/helper-module-imports" "^7.0.0" @@ -2035,6 +2039,17 @@ browserslist@^4.12.0: escalade "^3.0.1" node-releases "^1.1.58" +browserslist@^4.15.0: + version "4.16.0" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.0.tgz#410277627500be3cb28a1bfe037586fbedf9488b" + integrity sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ== + dependencies: + caniuse-lite "^1.0.30001165" + colorette "^1.2.1" + electron-to-chromium "^1.3.621" + escalade "^3.1.1" + node-releases "^1.1.67" + browserslist@^4.8.5: version "4.14.5" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.5.tgz#1c751461a102ddc60e40993639b709be7f2c4015" @@ -2161,6 +2176,11 @@ caniuse-lite@^1.0.30001135: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001148.tgz#dc97c7ed918ab33bf8706ddd5e387287e015d637" integrity sha512-E66qcd0KMKZHNJQt9hiLZGE3J4zuTqE1OnU53miEVtylFbwOEmeA5OsRu90noZful+XGSQOni1aT2tiqu/9yYw== +caniuse-lite@^1.0.30001165: + version "1.0.30001170" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7" + integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA== + chalk@^2.0, chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" @@ -2617,6 +2637,11 @@ csstype@^2.2.0, csstype@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5" +csstype@^3.0.2: + version "3.0.5" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8" + integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ== + cyclist@~0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640" @@ -2913,6 +2938,11 @@ electron-to-chromium@^1.3.571: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz#1adfac5affce84d85b3d7b3dfbc4ade293a6ffc4" integrity sha512-0nCJ7cSqnkMC+kUuPs0YgklFHraWGl/xHqtZWWtOeVtyi+YqkoAOMGuZQad43DscXCQI/yizcTa3u6B5r+BLww== +electron-to-chromium@^1.3.621: + version "1.3.633" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz#16dd5aec9de03894e8d14a1db4cda8a369b9b7fe" + integrity sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA== + elliptic@^6.0.0: version "6.4.0" resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df" @@ -3015,7 +3045,7 @@ escalade@^3.0.1: resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.1.tgz#52568a77443f6927cd0ab9c73129137533c965ed" integrity sha512-DR6NO3h9niOT+MZs7bjxlj2a1k+POu5RN8CLTPX2+i78bRi9eLe7+0zXgUHMnGXWybYcL61E9hGhPKqedy8tQA== -escalade@^3.1.0: +escalade@^3.1.0, escalade@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== @@ -3562,6 +3592,11 @@ forwarded@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84" +fraction.js@^4.0.12: + version "4.0.13" + resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe" + integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA== + fragment-cache@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19" @@ -5047,6 +5082,11 @@ node-releases@^1.1.61: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.63.tgz#db6dbb388544c31e888216304e8fd170efee3ff5" integrity sha512-ukW3iCfQaoxJkSPN+iK7KznTeqDGVJatAEuXsJERYHa9tn/KaT5lBdIyxQjLEVTzSkyjJEuQ17/vaEjrOauDkg== +node-releases@^1.1.67: + version "1.1.67" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12" + integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg== + nopt@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" @@ -5074,6 +5114,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" +normalize-range@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" + integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= + npm-bundled@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308" @@ -6816,10 +6861,10 @@ styled-components-breakpoint@^3.0.0-preview.20: version "3.0.0-preview.20" resolved "https://registry.yarnpkg.com/styled-components-breakpoint/-/styled-components-breakpoint-3.0.0-preview.20.tgz#877e88a00c0cf66976f610a1d347839a1a0b6d70" -styled-components@^5.1.1: - version "5.1.1" - resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.1.tgz#96dfb02a8025794960863b9e8e365e3b6be5518d" - integrity sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg== +styled-components@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a" + integrity sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ== dependencies: "@babel/helper-module-imports" "^7.0.0" "@babel/traverse" "^7.4.5"