From 2193916fe41a0e491afebc1c41cff40b01611430 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Jul 2020 13:55:33 -0700
Subject: [PATCH 01/55] Get basic compiling working with new CSS setup

---
 .babel-plugin-macrosrc.js                     |   12 +
 babel.config.js                               |   23 +
 package.json                                  |   64 +-
 resources/scripts/.eslintrc.yml               |   37 +-
 resources/scripts/components/App.tsx          |    2 +
 .../components/elements/ContentContainer.tsx  |    6 +-
 .../components/server/backups/BackupRow.tsx   |   13 +-
 .../components/server/files/FileObjectRow.tsx |    6 +-
 resources/scripts/gloabl.d.ts                 |    1 -
 resources/scripts/index.tsx                   |    2 +
 resources/scripts/macros.d.ts                 |    4 +
 resources/scripts/style.d.ts                  |   17 -
 resources/scripts/theme.ts                    |   10 +
 resources/views/templates/wrapper.blade.php   |    2 +-
 tailwind.config.js                            |  114 +
 tsconfig.json                                 |   14 +-
 webpack.config.js                             |  109 +-
 yarn.lock                                     | 2682 ++++++++++++-----
 18 files changed, 2159 insertions(+), 959 deletions(-)
 create mode 100644 .babel-plugin-macrosrc.js
 create mode 100644 babel.config.js
 delete mode 100644 resources/scripts/gloabl.d.ts
 create mode 100644 resources/scripts/macros.d.ts
 delete mode 100644 resources/scripts/style.d.ts
 create mode 100644 resources/scripts/theme.ts
 create mode 100644 tailwind.config.js

diff --git a/.babel-plugin-macrosrc.js b/.babel-plugin-macrosrc.js
new file mode 100644
index 000000000..fad1194f8
--- /dev/null
+++ b/.babel-plugin-macrosrc.js
@@ -0,0 +1,12 @@
+module.exports = {
+    twin: {
+        preset: 'styled-components',
+        autoCssProp: true,
+        config: './tailwind.config.js',
+    },
+    styledComponents: {
+        pure: true,
+        displayName: false,
+        fileName: false,
+    },
+};
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 000000000..a0ead0290
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+    presets: [
+        '@babel/typescript',
+        ['@babel/env', {
+            modules: false,
+            useBuiltIns: 'entry',
+            corejs: 3,
+        }],
+        '@babel/react',
+    ],
+    plugins: [
+        'babel-plugin-macros',
+        'styled-components',
+        'react-hot-loader/babel',
+        '@babel/transform-runtime',
+        '@babel/transform-react-jsx',
+        '@babel/proposal-class-properties',
+        '@babel/proposal-object-rest-spread',
+        '@babel/proposal-optional-chaining',
+        '@babel/proposal-nullish-coalescing-operator',
+        '@babel/syntax-dynamic-import',
+    ],
+};
diff --git a/package.json b/package.json
index f66bd9a60..b5afadc25 100644
--- a/package.json
+++ b/package.json
@@ -5,13 +5,13 @@
         "@fortawesome/free-solid-svg-icons": "^5.9.0",
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@types/react-google-recaptcha": "^1.1.1",
-        "axios": "^0.19.0",
+        "axios": "^0.19.2",
         "ayu-ace": "^2.0.4",
         "brace": "^0.11.1",
         "chart.js": "^2.8.0",
         "classnames": "^2.2.6",
-        "date-fns": "^1.29.0",
-        "easy-peasy": "^3.2.3",
+        "date-fns": "^2.14.0",
+        "easy-peasy": "^3.3.1",
         "events": "^3.0.0",
         "formik": "^2.1.4",
         "i18next": "^19.0.0",
@@ -22,23 +22,23 @@
         "lodash-es": "^4.17.15",
         "path": "^0.12.7",
         "query-string": "^6.7.0",
-        "react": "^16.12.0",
+        "react": "^16.13.1",
         "react-dom": "npm:@hot-loader/react-dom",
         "react-google-recaptcha": "^2.0.1",
-        "react-hot-loader": "^4.12.18",
+        "react-hot-loader": "^4.12.21",
         "react-i18next": "^11.2.1",
         "react-redux": "^7.1.0",
         "react-router-dom": "^5.1.2",
         "react-transition-group": "^4.3.0",
         "sockette": "^2.0.6",
-        "styled-components": "^4.4.1",
+        "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
         "use-react-router": "^1.0.7",
         "uuid": "^3.3.2",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
         "xterm-addon-fit": "^0.1.0",
-        "yup": "^0.27.0"
+        "yup": "^0.29.1"
     },
     "devDependencies": {
         "@babel/core": "^7.7.5",
@@ -47,6 +47,7 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-dynamic-import": "^7.7.4",
+        "@babel/plugin-transform-react-jsx": "^7.10.4",
         "@babel/plugin-transform-runtime": "^7.7.5",
         "@babel/preset-env": "^7.7.5",
         "@babel/preset-react": "^7.7.4",
@@ -60,32 +61,33 @@
         "@types/lodash-es": "^4.17.3",
         "@types/node": "^12.6.9",
         "@types/query-string": "^6.3.0",
-        "@types/react": "^16.9.15",
-        "@types/react-dom": "^16.9.4",
+        "@types/react": "^16.9.41",
+        "@types/react-dom": "^16.9.8",
         "@types/react-redux": "^7.1.1",
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^2.9.2",
         "@types/styled-components": "^4.4.0",
         "@types/uuid": "^3.4.5",
-        "@types/webpack-env": "^1.13.6",
-        "@types/yup": "^0.26.17",
-        "@typescript-eslint/eslint-plugin": "^2.19.0",
-        "@typescript-eslint/parser": "^2.19.0",
+        "@types/webpack-env": "^1.15.2",
+        "@types/yup": "^0.29.3",
+        "@typescript-eslint/eslint-plugin": "^3.5.0",
+        "@typescript-eslint/parser": "^3.5.0",
         "babel-loader": "^8.0.6",
-        "babel-plugin-styled-components": "^1.10.6",
+        "babel-plugin-styled-components": "^1.10.7",
         "babel-plugin-tailwind-components": "^0.5.10",
         "cross-env": "^7.0.2",
         "css-loader": "^3.2.1",
         "cssnano": "^4.1.10",
-        "eslint": "^5.16.0",
-        "eslint-config-standard": "^12.0.0",
-        "eslint-plugin-import": "^2.17.3",
+        "eslint": "^7.4.0",
+        "eslint-config-standard": "^14.1.1",
+        "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-node": "^9.1.0",
-        "eslint-plugin-promise": "^4.1.1",
-        "eslint-plugin-react-hooks": "^2.1.2",
-        "eslint-plugin-standard": "^4.0.0",
-        "fork-ts-checker-webpack-plugin": "^1.5.0",
+        "eslint-plugin-promise": "^4.2.1",
+        "eslint-plugin-react": "^7.20.3",
+        "eslint-plugin-react-hooks": "^4.0.5",
+        "eslint-plugin-standard": "^4.0.1",
+        "fork-ts-checker-webpack-plugin": "^5.0.6",
         "glob-all": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
         "mini-css-extract-plugin": "^0.8.0",
@@ -97,17 +99,19 @@
         "purgecss-webpack-plugin": "^1.6.0",
         "redux-devtools-extension": "^2.13.8",
         "resolve-url-loader": "^3.0.0",
-        "source-map-loader": "^0.2.4",
-        "style-loader": "^0.23.1",
-        "tailwindcss": "^0.7.4",
-        "terser-webpack-plugin": "^1.3.0",
+        "source-map-loader": "^1.0.1",
+        "style-loader": "^1.2.1",
+        "tailwindcss": "^1.4.6",
+        "terser-webpack-plugin": "^3.0.6",
         "ts-loader": "^6.2.1",
-        "typescript": "^3.7.5",
-        "webpack": "^4.41.2",
+        "twin.macro": "^1.4.1",
+        "typescript": "^3.9.6",
+        "typescript-plugin-tw-template": "^2.0.1",
+        "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
-        "webpack-cli": "^3.3.10",
-        "webpack-dev-server": "^3.9.0",
-        "webpack-manifest-plugin": "^2.0.3",
+        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^3.11.0",
+        "webpack-manifest-plugin": "^2.2.0",
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {
diff --git a/resources/scripts/.eslintrc.yml b/resources/scripts/.eslintrc.yml
index 564306640..b95cb2916 100644
--- a/resources/scripts/.eslintrc.yml
+++ b/resources/scripts/.eslintrc.yml
@@ -1,23 +1,35 @@
 parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 6
+  ecmaFeatures:
+    jsx: true
   project: "./tsconfig.json"
   tsconfigRootDir: "./"
+settings:
+  react:
+    pragma: "React"
+    version: "detect"
+  linkComponents:
+    - name: Link
+      linkAttribute: to
+    - name: NavLink
+      linkAttribute: to
 env:
   browser: true
   es6: true
 plugins:
-  - "@typescript-eslint"
+  - "react"
   - "react-hooks"
+  - "@typescript-eslint"
 extends:
   - "standard"
+  - "plugin:react/recommended"
   - "plugin:@typescript-eslint/recommended"
-globals:
-  tw: "readonly"
 rules:
   indent:
     - error
     - 4
+    - SwitchCase: 1
   semi:
     - error
     - always
@@ -33,6 +45,25 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  no-restricted-imports:
+    - error
+    - paths:
+        - name: styled-components
+          message: Please import from styled-components/macro.
+      patterns:
+        - "!styled-components/macro"
+  "react/prop-types": 0
+  "react/display-name": 0
+  "react/jsx-indent-props":
+    - warn
+    - 4
+  "react/jsx-boolean-value":
+    - warn
+    - never
+  "react/jsx-closing-bracket-location":
+    - 1
+    - "line-aligned"
+  "react/jsx-closing-tag-location": 1
 overrides:
   - files:
       - "**/*.tsx"
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 99507fc13..6a726fda3 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -18,11 +18,13 @@ interface ExtendedWindow extends Window {
         uuid: string;
         username: string;
         email: string;
+        /* eslint-disable camelcase */
         root_admin: boolean;
         use_totp: boolean;
         language: string;
         updated_at: string;
         created_at: string;
+        /* eslint-enable camelcase */
     };
 }
 
diff --git a/resources/scripts/components/elements/ContentContainer.tsx b/resources/scripts/components/elements/ContentContainer.tsx
index c26cd9d8a..799f512d2 100644
--- a/resources/scripts/components/elements/ContentContainer.tsx
+++ b/resources/scripts/components/elements/ContentContainer.tsx
@@ -1,5 +1,6 @@
-import styled from 'styled-components';
-import { breakpoint } from 'styled-components-breakpoint';
+import styled from 'styled-components/macro';
+import { breakpoint } from '@/theme';
+import tw from 'twin.macro';
 
 const ContentContainer = styled.div`
     max-width: 1200px;
@@ -9,5 +10,6 @@ const ContentContainer = styled.div`
         ${tw`mx-auto`};
     `};
 `;
+ContentContainer.displayName = 'ContentContainer';
 
 export default ContentContainer;
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 41183504a..5c2e1a61f 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -1,18 +1,11 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { bytesToHuman } from '@/helpers';
 import Can from '@/components/elements/Can';
-import useServer from '@/plugins/useServer';
-import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
@@ -65,7 +58,7 @@ export default ({ backup, className }: Props) => {
                     title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
                     className={'text-sm'}
                 >
-                    {distanceInWordsToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
+                    {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
                 </p>
                 <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
             </div>
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index c393ae35f..dc583a196 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -3,9 +3,7 @@ import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
 import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
-import differenceInHours from 'date-fns/difference_in_hours';
-import format from 'date-fns/format';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
 import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
@@ -65,7 +63,7 @@ export default ({ file }: { file: FileObject }) => {
                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
                         format(file.modifiedAt, 'MMM Do, YYYY h:mma')
                         :
-                        distanceInWordsToNow(file.modifiedAt, { addSuffix: true })
+                        formatDistanceToNow(file.modifiedAt, { addSuffix: true })
                     }
                 </div>
             </NavLink>
diff --git a/resources/scripts/gloabl.d.ts b/resources/scripts/gloabl.d.ts
deleted file mode 100644
index b0dfa478c..000000000
--- a/resources/scripts/gloabl.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare function tw (a: TemplateStringsArray | string): any;
diff --git a/resources/scripts/index.tsx b/resources/scripts/index.tsx
index 5b7643242..4b1060022 100644
--- a/resources/scripts/index.tsx
+++ b/resources/scripts/index.tsx
@@ -4,6 +4,8 @@ import App from '@/components/App';
 import './i18n';
 import { setConfig } from 'react-hot-loader';
 
+import 'tailwindcss/dist/base.min.css';
+
 // Prevents page reloads while making component changes which
 // also avoids triggering constant loading indicators all over
 // the place in development.
diff --git a/resources/scripts/macros.d.ts b/resources/scripts/macros.d.ts
new file mode 100644
index 000000000..ed1d170d9
--- /dev/null
+++ b/resources/scripts/macros.d.ts
@@ -0,0 +1,4 @@
+// This allows the use of css={} on JSX elements.
+//
+// @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
+import {} from 'styled-components/cssprop';
diff --git a/resources/scripts/style.d.ts b/resources/scripts/style.d.ts
deleted file mode 100644
index b60e8039b..000000000
--- a/resources/scripts/style.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Breakpoints, css, DefaultTheme, StyledProps } from 'styled-components';
-
-declare module 'styled-components' {
-    type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-    export interface DefaultTheme {
-        breakpoints: {
-            [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
-        };
-    }
-}
-
-declare module 'styled-components-breakpoint' {
-    type CSSFunction = (...params: Parameters<typeof css>) => <P extends object>({ theme }: StyledProps<P>) => ReturnType<typeof css>;
-
-    export const breakpoint: (breakpointA: Breakpoints, breakpointB?: Breakpoints) => CSSFunction;
-}
diff --git a/resources/scripts/theme.ts b/resources/scripts/theme.ts
new file mode 100644
index 000000000..8679ebaa7
--- /dev/null
+++ b/resources/scripts/theme.ts
@@ -0,0 +1,10 @@
+import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoint';
+
+type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+});
diff --git a/resources/views/templates/wrapper.blade.php b/resources/views/templates/wrapper.blade.php
index d49a2b9e8..b8d10e506 100644
--- a/resources/views/templates/wrapper.blade.php
+++ b/resources/views/templates/wrapper.blade.php
@@ -32,7 +32,7 @@
         @show
 
         @section('assets')
-            {!! $asset->css('main.css') !!}
+{{--            {!! $asset->css('main.css') !!}--}}
         @show
 
         @include('layouts.scripts')
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..ddce8410c
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,114 @@
+module.exports = {
+    theme: {
+        fontFamily: {
+            sans: [
+                'Rubik',
+                '-apple-system',
+                'BlinkMacSystemFont',
+                '"Helvetica Neue"',
+                '"Roboto"',
+                'system-ui',
+                'sans-serif',
+            ],
+            header: [
+                '"IBM Plex Sans"',
+                '"Roboto"',
+                'system-ui',
+                'sans-serif',
+            ],
+            serif: [
+                'Constantia',
+                '"Lucida Bright"',
+                'Lucidabright',
+                '"Lucida Serif"',
+                'Lucida',
+                'serif',
+            ],
+            mono: [
+                '"IBM Plex Mono"',
+                '"Source Code Pro"',
+                'SourceCodePro',
+                'Menlo',
+                'Monaco',
+                'Consolas',
+                'monospace',
+            ],
+        },
+    },
+    extend: {
+        colors: {
+            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%)',
+            },
+        },
+    },
+};
diff --git a/tsconfig.json b/tsconfig.json
index 27f5324d6..1d48fc78b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
+    "target": "es2015",
+    "module": "es2015",
     "jsx": "react",
     "strict": true,
+    "noEmit": true,
     "noImplicitReturns": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "baseUrl": ".",
     "lib": ["es2015", "dom"],
@@ -14,7 +16,13 @@
       "@/*": [
         "./resources/scripts/*"
       ]
-    }
+    },
+    "plugins": [
+      {
+        "name": "typescript-plugin-tw-template"
+      }
+    ],
+    "typeRoots": ["node_modules/@types"]
   },
   "include": [
     "./resources/scripts/**/*"
diff --git a/webpack.config.js b/webpack.config.js
index de8671705..0770fb7b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,7 +12,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const isProduction = process.env.NODE_ENV === 'production';
 
 let plugins = [
-    new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
+    // new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
     new AssetsManifestPlugin({
         writeToDisk: true,
         publicPath: true,
@@ -22,25 +22,25 @@ let plugins = [
 ];
 
 if (isProduction) {
-    plugins = plugins.concat([
-        new PurgeCssPlugin({
-            paths: glob.sync([
-                path.join(__dirname, 'resources/scripts/**/*.tsx'),
-                path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
-            ]),
-            whitelistPatterns: [/^xterm/],
-            extractors: [
-                {
-                    extractor: class {
-                        static extract (content) {
-                            return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
-                        }
-                    },
-                    extensions: ['html', 'ts', 'tsx', 'js', 'php'],
-                },
-            ],
-        }),
-    ]);
+    // plugins = plugins.concat([
+    //     new PurgeCssPlugin({
+    //         paths: glob.sync([
+    //             path.join(__dirname, 'resources/scripts/**/*.tsx'),
+    //             path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
+    //         ]),
+    //         whitelistPatterns: [/^xterm/],
+    //         extractors: [
+    //             {
+    //                 extractor: class {
+    //                     static extract (content) {
+    //                         return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
+    //                     }
+    //                 },
+    //                 extensions: ['html', 'ts', 'tsx', 'js', 'php'],
+    //             },
+    //         ],
+    //     }),
+    // ]);
 } else {
     plugins.concat([new ForkTsCheckerWebpackPlugin()]);
 }
@@ -55,7 +55,6 @@ module.exports = {
     },
     entry: [
         'react-hot-loader/patch',
-        './resources/styles/main.css',
         './resources/scripts/index.tsx',
     ],
     output: {
@@ -70,65 +69,20 @@ module.exports = {
             {
                 test: /\.tsx?$/,
                 exclude: /node_modules/,
-                use: [
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            cacheDirectory: !isProduction,
-                            presets: [
-                                '@babel/typescript',
-                                '@babel/env',
-                                '@babel/react',
-                            ],
-                            plugins: [
-                                'tailwind-components',
-                                'react-hot-loader/babel',
-                                '@babel/transform-runtime',
-                                '@babel/proposal-class-properties',
-                                '@babel/proposal-object-rest-spread',
-                                '@babel/proposal-optional-chaining',
-                                '@babel/proposal-nullish-coalescing-operator',
-                                '@babel/syntax-dynamic-import',
-                            ],
-                        },
-                    },
-                ],
+                loader: 'babel-loader',
+                options: {
+                    cacheDirectory: !isProduction,
+                },
             },
             {
                 test: /\.css$/,
-                include: [
-                    path.resolve(__dirname, 'resources'),
-                ],
+                // include: [
+                //     path.resolve(__dirname, 'resources'),
+                // ],
                 use: [
-                    {
-                        loader: MiniCssExtractPlugin.loader,
-                        options: {
-                            hmr: !isProduction,
-                        },
-                    },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: !isProduction,
-                            importLoaders: 1,
-                        },
-                    },
+                    { loader: 'style-loader' },
+                    { loader: 'css-loader' },
                     { loader: 'resolve-url-loader' },
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            ident: 'postcss',
-                            sourceMap: true,
-                            plugins: [
-                                require('postcss-import'),
-                                tailwind('./tailwind.js'),
-                                require('postcss-preset-env')({
-                                    stage: 2,
-                                }),
-                                require('precss'),
-                            ].concat(isProduction ? require('cssnano') : []),
-                        },
-                    },
                 ],
             },
             {
@@ -138,6 +92,11 @@ module.exports = {
                     name: '[name].[ext]?[hash:8]',
                 },
             },
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                loader: 'source-map-loader',
+            }
         ],
     },
     resolve: {
diff --git a/yarn.lock b/yarn.lock
index 29f40dd60..544a1cabf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8,6 +8,13 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.10.4", "@babel/code-frame@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
 "@babel/core@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.5.tgz#ae1323cd035b5160293307f50647e83f8ba62f7e"
@@ -36,12 +43,29 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.4.tgz#e49eeed9fe114b62fa5b181856a43a5e32f5f243"
+  integrity sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==
+  dependencies:
+    "@babel/types" "^7.10.4"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz#5f73f2b28580e224b5b9bd03146a4015d6217f5f"
@@ -49,6 +73,23 @@
     "@babel/helper-explode-assignable-expression" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-builder-react-jsx-experimental@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.4.tgz#d0ffb875184d749c63ffe1f4f65be15143ec322d"
+  integrity sha512-LyacH/kgQPgLAuaWrvvq1+E7f5bLyT8jXCh7nM67sRsy2cpIGfgWJ+FCnAKQXfY+F0tXUaN6FqLkp4JiCzdK8Q==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-builder-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66"
@@ -97,6 +138,15 @@
     "@babel/traverse" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-function-name@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
@@ -105,6 +155,13 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-get-function-arity@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
@@ -129,6 +186,13 @@
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-module-transforms@^7.7.4", "@babel/helper-module-transforms@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz#d044da7ffd91ec967db25cd6748f704b6b244835"
@@ -150,6 +214,11 @@
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -186,12 +255,24 @@
     "@babel/template" "^7.7.4"
     "@babel/types" "^7.7.4"
 
+"@babel/helper-split-export-declaration@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz#2c70576eaa3b5609b24cb99db2888cc3fc4251d1"
+  integrity sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
 "@babel/helper-split-export-declaration@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
   dependencies:
     "@babel/types" "^7.7.4"
 
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
 "@babel/helper-wrap-function@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
@@ -217,10 +298,24 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
 
+"@babel/parser@^7.10.2", "@babel/parser@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.4.tgz#9eedf27e1998d87739fb5028a5120557c06a1a64"
+  integrity sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -304,6 +399,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec"
@@ -529,6 +631,16 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.7.4"
 
+"@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.4.tgz#d91205717fae4e2f84d020cd3057ec02a10f11da"
@@ -678,12 +790,28 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.7.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.5":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.5.tgz#4b087f183f5d83647744d4157f66199081d17a00"
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.7.2", "@babel/runtime@^7.9.6":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.4.tgz#a6724f1a6b8d2f6ea5236dbfe58c7d7ea9c5eb99"
+  integrity sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
 "@babel/template@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -692,7 +820,22 @@
     "@babel/parser" "^7.7.4"
     "@babel/types" "^7.7.4"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.7.4":
+"@babel/traverse@^7.4.5":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.10.4.tgz#e642e5395a3b09cc95c8e74a27432b484b697818"
+  integrity sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.10.4"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
+"@babel/traverse@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
   dependencies:
@@ -706,6 +849,15 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/types@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.10.4.tgz#369517188352e18219981efd156bfdb199fff1ee"
+  integrity sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
@@ -722,19 +874,27 @@
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz#32c3cdb2f7af3cd8f0dca357b592e7271f3831b5"
 
-"@emotion/is-prop-valid@^0.8.1":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
+"@emotion/is-prop-valid@^0.8.8":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
   dependencies:
-    "@emotion/memoize" "0.7.2"
+    "@emotion/memoize" "0.7.4"
 
-"@emotion/memoize@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
-
-"@emotion/unitless@^0.7.0":
+"@emotion/memoize@0.7.4":
   version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/stylis@^0.8.4":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
 
 "@fortawesome/fontawesome-common-types@^0.2.19":
   version "0.2.19"
@@ -759,6 +919,21 @@
     humps "^2.0.1"
     prop-types "^15.5.10"
 
+"@fullhuman/postcss-purgecss@^2.1.2":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz#50a954757ec78696615d3e118e3fee2d9291882e"
+  integrity sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==
+  dependencies:
+    postcss "7.0.32"
+    purgecss "^2.3.0"
+
+"@npmcli/move-file@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
+  integrity sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==
+  dependencies:
+    mkdirp "^1.0.4"
+
 "@types/chart.js@^2.8.5":
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.8.5.tgz#7d47cfd36f0a1c2c4ad6a585749bc68e8659492a"
@@ -767,6 +942,11 @@
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.8.tgz#17139e1e1104203572caa4368f6796f6225b70b4"
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -802,6 +982,16 @@
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
 
+"@types/json-schema@^7.0.4":
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.5.tgz#dcce4430e64b443ba8945f0290fb564ad5bac6dd"
+  integrity sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
 "@types/lodash-es@^4.17.3":
   version "4.17.3"
   resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.3.tgz#87eb0b3673b076b8ee655f1890260a136af09a2d"
@@ -820,6 +1010,11 @@
   version "12.6.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.9.tgz#ffeee23afdc19ab16e979338e7b536fdebbbaeaf"
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/prop-types@*":
   version "15.7.1"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.1.tgz#f1a11e7babb0c3cad68100be381d1e064c68f1f6"
@@ -830,9 +1025,10 @@
   dependencies:
     query-string "*"
 
-"@types/react-dom@^16.9.4":
-  version "16.9.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
+"@types/react-dom@^16.9.8":
+  version "16.9.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
+  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
   dependencies:
     "@types/react" "*"
 
@@ -879,13 +1075,21 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.15":
+"@types/react@*":
   version "16.9.15"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.15.tgz#aeabb7a50f96c9e31a16079ada20ede9ed602977"
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/react@^16.9.41":
+  version "16.9.41"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.41.tgz#925137ee4d2ff406a0ecf29e8e9237390844002e"
+  integrity sha512-6cFei7F7L4wwuM+IND/Q2cV1koQUvJ8iSV+Gwn0c3kvABZ691g7sp3hfEQHOUBJtccl1gPi+EyNjMIl9nGA0ug==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/styled-components@^4.4.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.0.tgz#15a3d59533fd3a5bd013db4a7c4422ec542c59d2"
@@ -900,179 +1104,219 @@
   dependencies:
     "@types/node" "*"
 
-"@types/webpack-env@^1.13.6":
-  version "1.13.6"
-  resolved "http://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.13.6.tgz#128d1685a7c34d31ed17010fc87d6a12c1de6976"
+"@types/webpack-env@^1.15.2":
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.2.tgz#927997342bb9f4a5185a86e6579a0a18afc33b0a"
+  integrity sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==
 
-"@types/yup@^0.26.17":
-  version "0.26.17"
-  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.17.tgz#5cb7cfc211d8e985b21d88289542591c92cad9dc"
+"@types/yup@^0.29.3":
+  version "0.29.3"
+  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.3.tgz#5a85024796bffe0eb01601bfc180fe218356dba4"
+  integrity sha512-XxZFKnxzTfm+DR8MMBA35UUXfUPmjPpi8HJ90VZg7q/LIbtiOhVGJ26gNnATcflcpnIyf2Qm9A+oEhswaqoDpA==
 
-"@typescript-eslint/eslint-plugin@^2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.19.0.tgz#bf743448a4633e4b52bee0c40148ba072ab3adbd"
+"@typescript-eslint/eslint-plugin@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.5.0.tgz#e7736e0808b5fb947a5f9dd949ae6736a7226b84"
+  integrity sha512-m4erZ8AkSjoIUOf8s4k2V1xdL2c1Vy0D3dN6/jC9d7+nEqjY3gxXCkgi3gW/GAxPaA4hV8biaCoTVdQmfAeTCQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.19.0"
-    eslint-utils "^1.4.3"
+    "@typescript-eslint/experimental-utils" "3.5.0"
+    debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.19.0.tgz#d5ca732f22c009e515ba09fcceb5f2127d841568"
+"@typescript-eslint/experimental-utils@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-3.5.0.tgz#d09f9ffb890d1b15a7ffa9975fae92eee05597c4"
+  integrity sha512-zGNOrVi5Wz0jcjUnFZ6QUD0MCox5hBuVwemGCew2qJzUX5xPoyR+0EzS5qD5qQXL/vnQ8Eu+nv03tpeFRwLrDg==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.19.0"
+    "@typescript-eslint/types" "3.5.0"
+    "@typescript-eslint/typescript-estree" "3.5.0"
     eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.19.0.tgz#912160d9425395d09857dcd5382352bc98be11ae"
+"@typescript-eslint/parser@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-3.5.0.tgz#9ff8c11877c48df24e10e19d7bf542ee0359500d"
+  integrity sha512-sU07VbYB70WZHtgOjH/qfAp1+OwaWgrvD1Km1VXqRpcVxt971PMTU7gJtlrCje0M+Sdz7xKAbtiyIu+Y6QdnVA==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.19.0"
-    "@typescript-eslint/typescript-estree" "2.19.0"
+    "@typescript-eslint/experimental-utils" "3.5.0"
+    "@typescript-eslint/types" "3.5.0"
+    "@typescript-eslint/typescript-estree" "3.5.0"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/typescript-estree@2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.19.0.tgz#6bd7310b9827e04756fe712909f26956aac4b196"
+"@typescript-eslint/types@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.5.0.tgz#4e3d2a2272268d8ec3e3e4a37152a64956682639"
+  integrity sha512-Dreqb5idi66VVs1QkbAwVeDmdJG+sDtofJtKwKCZXIaBsINuCN7Jv5eDIHrS0hFMMiOvPH9UuOs4splW0iZe4Q==
+
+"@typescript-eslint/typescript-estree@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-3.5.0.tgz#dfc895db21a381b84f24c2a719f5bf9c600dcfdc"
+  integrity sha512-Na71ezI6QP5WVR4EHxwcBJgYiD+Sre9BZO5iJK2QhrmRPo/42+b0no/HZIrdD1sjghzlYv7t+7Jis05M1uMxQg==
   dependencies:
+    "@typescript-eslint/types" "3.5.0"
+    "@typescript-eslint/visitor-keys" "3.5.0"
     debug "^4.1.1"
-    eslint-visitor-keys "^1.1.0"
     glob "^7.1.6"
     is-glob "^4.0.1"
     lodash "^4.17.15"
-    semver "^6.3.0"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@webassemblyjs/ast@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+"@typescript-eslint/visitor-keys@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-3.5.0.tgz#73c1ea2582f814735e4afdc1cf6f5e3af78db60a"
+  integrity sha512-7cTp9rcX2sz9Z+zua9MCOX4cqp5rYyFD5o8LlbSpXrMTXoRdngTtotRZEkm8+FNMHPWYFhitFK+qt/brK8BVJQ==
   dependencies:
-    "@webassemblyjs/helper-module-context" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/wast-parser" "1.8.5"
+    eslint-visitor-keys "^1.1.0"
 
-"@webassemblyjs/floating-point-hex-parser@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
-
-"@webassemblyjs/helper-api-error@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
-
-"@webassemblyjs/helper-buffer@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
-
-"@webassemblyjs/helper-code-frame@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+"@webassemblyjs/ast@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+  integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
   dependencies:
-    "@webassemblyjs/wast-printer" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
 
-"@webassemblyjs/helper-fsm@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+  integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
 
-"@webassemblyjs/helper-module-context@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+"@webassemblyjs/helper-api-error@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+  integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+  integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+  integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    mamacro "^0.0.3"
+    "@webassemblyjs/wast-printer" "1.9.0"
 
-"@webassemblyjs/helper-wasm-bytecode@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+"@webassemblyjs/helper-fsm@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+  integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
 
-"@webassemblyjs/helper-wasm-section@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+"@webassemblyjs/helper-module-context@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+  integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
 
-"@webassemblyjs/ieee754@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+  integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+  integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+  integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+"@webassemblyjs/leb128@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+  integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/utf8@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
+"@webassemblyjs/utf8@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+  integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
 
-"@webassemblyjs/wasm-edit@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
+"@webassemblyjs/wasm-edit@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+  integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/helper-wasm-section" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
-    "@webassemblyjs/wasm-opt" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    "@webassemblyjs/wast-printer" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/helper-wasm-section" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-opt" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@webassemblyjs/wast-printer" "1.9.0"
 
-"@webassemblyjs/wasm-gen@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
+"@webassemblyjs/wasm-gen@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+  integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/ieee754" "1.8.5"
-    "@webassemblyjs/leb128" "1.8.5"
-    "@webassemblyjs/utf8" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
 
-"@webassemblyjs/wasm-opt@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
+"@webassemblyjs/wasm-opt@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+  integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-buffer" "1.9.0"
+    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
 
-"@webassemblyjs/wasm-parser@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
+"@webassemblyjs/wasm-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+  integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-api-error" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/ieee754" "1.8.5"
-    "@webassemblyjs/leb128" "1.8.5"
-    "@webassemblyjs/utf8" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+    "@webassemblyjs/ieee754" "1.9.0"
+    "@webassemblyjs/leb128" "1.9.0"
+    "@webassemblyjs/utf8" "1.9.0"
 
-"@webassemblyjs/wast-parser@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
+"@webassemblyjs/wast-parser@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+  integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/floating-point-hex-parser" "1.8.5"
-    "@webassemblyjs/helper-api-error" "1.8.5"
-    "@webassemblyjs/helper-code-frame" "1.8.5"
-    "@webassemblyjs/helper-fsm" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+    "@webassemblyjs/helper-api-error" "1.9.0"
+    "@webassemblyjs/helper-code-frame" "1.9.0"
+    "@webassemblyjs/helper-fsm" "1.9.0"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/wast-printer@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+"@webassemblyjs/wast-printer@1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+  integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/wast-parser" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
@@ -1087,6 +1331,11 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
 
+abab@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
+  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -1098,13 +1347,34 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-jsx@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
+acorn-jsx@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
+  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
 
-acorn@^6.0.7, acorn@^6.2.1:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
+acorn-node@^1.6.1:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
+  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
+
+acorn@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
+  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
+
+acorn@^7.0.0, acorn@^7.2.0:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
+  integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
 
 adjust-sourcemap-loader@^1.1.0:
   version "1.2.0"
@@ -1118,6 +1388,14 @@ adjust-sourcemap-loader@^1.1.0:
     object-path "^0.9.2"
     regex-parser "^2.2.9"
 
+aggregate-error@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
+  integrity sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -1135,6 +1413,16 @@ ajv@^6.1.0, ajv@^6.10.2, ajv@^6.9.1:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.10.0, ajv@^6.12.2:
+  version "6.12.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.2.tgz#c629c5eced17baf314437918d2da88c99d5958cd"
+  integrity sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -1143,9 +1431,10 @@ ansi-colors@^3.0.0:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
 
-ansi-escapes@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
 ansi-html@0.0.7:
   version "0.0.7"
@@ -1163,6 +1452,11 @@ ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -1173,6 +1467,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -1180,6 +1482,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1221,12 +1531,14 @@ array-flatten@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
 
-array-includes@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    is-string "^1.0.5"
 
 array-union@^1.0.1:
   version "1.0.2"
@@ -1242,6 +1554,23 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
+array.prototype.flat@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.3.tgz#0de82b426b0318dbfdb940089e38b043d37f6c7b"
+  integrity sha512-gBlRZV0VSmfPIeWfuuy56XZMvbVfbEUnOXUvt3F/eUUUSyzlgLxhEX4YAEpxNAogRGehPSnfXyPtYyKAhkzQhQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+array.prototype.flatmap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz#1c13f84a178566042dd63de4414440db9222e443"
+  integrity sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+
 asn1.js@^4.0.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@@ -1272,12 +1601,17 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@^2.5.0, async@^2.6.2:
+async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   dependencies:
     lodash "^4.17.14"
 
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
 atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
@@ -1294,31 +1628,17 @@ autoprefixer@^9.4.5, autoprefixer@^9.6.1:
     postcss "^7.0.21"
     postcss-value-parser "^4.0.2"
 
-axios@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
   dependencies:
     follow-redirects "1.5.10"
-    is-buffer "^2.0.2"
 
 ayu-ace@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/ayu-ace/-/ayu-ace-2.0.4.tgz#3877d4cbf8668e639de6f67e34c2a88c1589b082"
 
-babel-code-frame@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
-
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  dependencies:
-    babylon "^6.18.0"
-
 babel-loader@^8.0.6:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
@@ -1342,7 +1662,16 @@ babel-plugin-macros@^2.1.0:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6:
+babel-plugin-macros@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
+"babel-plugin-styled-components@>= 1":
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
   dependencies:
@@ -1351,14 +1680,20 @@ babel-plugin-macros@^2.1.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==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-module-imports" "^7.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-syntax-object-rest-spread@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
-
 babel-plugin-tailwind-components@^0.5.10:
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/babel-plugin-tailwind-components/-/babel-plugin-tailwind-components-0.5.10.tgz#33e3574e7a5ec80d108c7d3d7c424ccd018e390c"
@@ -1367,24 +1702,6 @@ babel-plugin-tailwind-components@^0.5.10:
     "@babel/parser" "^7.0.0"
     babel-plugin-macros "^2.1.0"
 
-babel-plugin-transform-object-rest-spread@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1421,6 +1738,11 @@ binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
 
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
 bluebird@^3.5.5:
   version "3.5.5"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
@@ -1485,7 +1807,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   dependencies:
@@ -1555,6 +1877,16 @@ browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.6.4, browserslist@^4.7
     electron-to-chromium "^1.3.322"
     node-releases "^1.1.42"
 
+browserslist@^4.12.0:
+  version "4.12.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.2.tgz#76653d7e4c57caa8a1a28513e2f4e197dc11a711"
+  integrity sha512-MfZaeYqR8StRZdstAK9hCKDd2StvePCYp5rHzQCPicUjfFliDgmuaBNPHYUTpAywBN8+Wc/d7NYVFkO0aqaBUw==
+  dependencies:
+    caniuse-lite "^1.0.30001088"
+    electron-to-chromium "^1.3.483"
+    escalade "^3.0.1"
+    node-releases "^1.1.58"
+
 buffer-from@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
@@ -1607,6 +1939,29 @@ cacache@^12.0.2:
     unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^15.0.4:
+  version "15.0.4"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.4.tgz#b2c23cf4ac4f5ead004fb15a0efb0a20340741f1"
+  integrity sha512-YlnKQqTbD/6iyoJvEY3KJftjrdBYroCbxxYXzhOzsFLWlp6KX4BOlEf4mTx0cMUfVaTS3ENL2QtDWeRYoGLkkw==
+  dependencies:
+    "@npmcli/move-file" "^1.0.1"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    infer-owner "^1.0.4"
+    lru-cache "^5.1.1"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.0"
+    tar "^6.0.2"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -1681,13 +2036,10 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001006, can
   version "1.0.30001015"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz#15a7ddf66aba786a71d99626bc8f2b91c6f0f5f0"
 
-chalk@2.4.2, chalk@^2.0, chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.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"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
+caniuse-lite@^1.0.30001088:
+  version "1.0.30001093"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001093.tgz#833e80f64b1a0455cbceed2a4a3baf19e4abd312"
+  integrity sha512-0+ODNoOjtWD5eS9aaIpf4K0gQqZfILNY4WSNuYzeT1sXni+lMrrVjc0odEobJt6wrODofDZUX8XYi/5y7+xl8g==
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -1699,9 +2051,21 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+chalk@^2.0, chalk@^2.0.0, chalk@^2.3.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"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
 
 chart.js@^2.8.0:
   version "2.8.0"
@@ -1723,7 +2087,7 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.6.0"
     color-convert "^0.5.3"
 
-chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
+chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
   dependencies:
@@ -1741,10 +2105,30 @@ chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
+  integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.0.1, chownr@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
@@ -1777,23 +2161,15 @@ clean-css@4.1.x:
   dependencies:
     source-map "0.5.x"
 
-cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  dependencies:
-    restore-cursor "^2.0.0"
+clean-set@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
 
-cli-width@^2.0.0:
+clean-stack@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
-
-cliui@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
-  dependencies:
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
-    wrap-ansi "^2.0.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
 cliui@^5.0.0:
   version "5.0.0"
@@ -1830,6 +2206,13 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.1"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
@@ -1838,6 +2221,11 @@ color-name@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 color-string@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
@@ -1852,6 +2240,14 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+color@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -1864,9 +2260,10 @@ commander@^2.10.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
-comment-regex@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565"
+commander@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
 commondir@^1.0.1:
   version "1.0.1"
@@ -1985,10 +2382,6 @@ core-js-compat@^3.4.7:
     browserslist "^4.8.0"
     semver "^6.3.0"
 
-core-js@^2.4.0:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2011,6 +2404,17 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.2.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 create-ecdh@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
@@ -2046,7 +2450,7 @@ cross-env@^7.0.2:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   dependencies:
@@ -2065,6 +2469,15 @@ cross-spawn@^7.0.1:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -2154,13 +2567,14 @@ css-select@~1.3.0-rc0:
     domutils "1.5.1"
     nth-check "^1.0.1"
 
-css-to-react-native@^2.2.2:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.1.tgz#cf0f61e0514846e2d4dc188b0886e29d8bef64a2"
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
   dependencies:
     camelize "^1.0.0"
     css-color-keywords "^1.0.0"
-    postcss-value-parser "^3.3.0"
+    postcss-value-parser "^4.0.2"
 
 css-tree@1.0.0-alpha.29:
   version "1.0.0-alpha.29"
@@ -2188,10 +2602,6 @@ css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -2295,9 +2705,19 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-date-fns@^1.29.0:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
+date-fns@^2.14.0:
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
+  integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
 
 date-now@^0.1.4:
   version "0.1.4"
@@ -2307,7 +2727,7 @@ debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
 
-debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -2347,14 +2767,20 @@ deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
 
-deep-is@~0.1.3:
+deep-is@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
 deepmerge@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -2369,6 +2795,13 @@ define-properties@^1.1.2:
     foreach "^2.0.5"
     object-keys "^1.0.8"
 
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -2435,6 +2868,15 @@ detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
 
+detective@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
+  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
+  dependencies:
+    acorn-node "^1.6.1"
+    defined "^1.0.0"
+    minimist "^1.1.1"
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -2443,6 +2885,11 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -2467,6 +2914,13 @@ doctrine@1.5.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -2534,6 +2988,11 @@ dot-prop@^4.1.1:
   dependencies:
     is-obj "^1.0.0"
 
+dset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/dset/-/dset-2.0.1.tgz#a15fff3d1e4d60ac0c95634625cbd5441a76deb1"
+  integrity sha512-nI29OZMRYq36hOcifB6HTjajNAAiBKSXsyWZrq+VniusseuP2OpNlTiYgsaNRSGvpyq5Wjbc2gQLyBdTyWqhnQ==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
@@ -2543,20 +3002,20 @@ duplexify@^3.4.2, duplexify@^3.6.0:
     readable-stream "^2.0.0"
     stream-shift "^1.0.0"
 
-easy-peasy@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/easy-peasy/-/easy-peasy-3.2.3.tgz#63e49ae1ba1583c3ca727d800f334c49addfaf72"
+easy-peasy@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/easy-peasy/-/easy-peasy-3.3.1.tgz#46525c31d75e7b4bac2c48e4a09f340df5ff524f"
+  integrity sha512-c1M6xrMQyOl3JCwUdZCMcAMAuKQAxG76n2OydBTpvCPS7OSK7ZVseJL96KeCB3fpvKEvIQC8h8nShObtVPrzaA==
   dependencies:
     debounce "^1.2.0"
     immer-peasy "3.1.3"
     is-plain-object "^3.0.0"
     memoizerific "^1.11.3"
     prop-types "^15.6.2"
-    redux "^4.0.4"
+    redux "^4.0.5"
     redux-thunk "^2.3.0"
-    shallowequal "^1.1.0"
     symbol-observable "^1.2.0"
-    ts-toolbelt "^4.10.0"
+    ts-toolbelt "^6.1.6"
 
 ee-first@1.1.1:
   version "1.1.1"
@@ -2566,6 +3025,11 @@ electron-to-chromium@^1.3.322:
   version "1.3.322"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz#a6f7e1c79025c2b05838e8e344f6e89eb83213a8"
 
+electron-to-chromium@^1.3.483:
+  version "1.3.487"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.487.tgz#8075e6ea33ee2e79a2dfb2a2467033f014017258"
+  integrity sha512-m4QS3IDShxauFfYFpnEzRCcUI55oKB9acEnHCuY/hSCZMz9Pz2KJj+UBnGHxRxS/mS1aphqOQ5wI6gc3yDZ7ew==
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -2586,6 +3050,11 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -2596,7 +3065,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@4.1.0, enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
+enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
   dependencies:
@@ -2604,6 +3073,22 @@ enhanced-resolve@4.1.0, enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
     memory-fs "^0.4.0"
     tapable "^1.0.0"
 
+enhanced-resolve@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz#5d43bda4a0fd447cb0ebbe71bef8deff8805ad0d"
+  integrity sha512-S7eiFb/erugyd1rLb6mQ3Vuq+EXHv5cpCkNqqIkYkBgN2QdFnyCZzFBleqwGEx4lgNGYij81BWnCrFNK7vxvjQ==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
+enquirer@^2.3.5:
+  version "2.3.6"
+  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
+  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
+  dependencies:
+    ansi-colors "^4.1.1"
+
 entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -2620,7 +3105,24 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
+  version "1.17.6"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
+  integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-regex "^1.1.0"
+    object-inspect "^1.7.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.5.1, es-abstract@^1.6.1:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
   dependencies:
@@ -2639,6 +3141,15 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
 es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
   version "0.10.45"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.45.tgz#0bfdf7b473da5919d5adf3bd25ceb754fccc3653"
@@ -2662,6 +3173,11 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.1:
     d "1"
     es5-ext "~0.10.14"
 
+escalade@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.1.tgz#52568a77443f6927cd0ab9c73129137533c965ed"
+  integrity sha512-DR6NO3h9niOT+MZs7bjxlj2a1k+POu5RN8CLTPX2+i78bRi9eLe7+0zXgUHMnGXWybYcL61E9hGhPKqedy8tQA==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -2670,22 +3186,25 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-eslint-config-standard@^12.0.0:
-  version "12.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz#638b4c65db0bd5a41319f96bba1f15ddad2107d9"
+eslint-config-standard@^14.1.1:
+  version "14.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-14.1.1.tgz#830a8e44e7aef7de67464979ad06b406026c56ea"
+  integrity sha512-Z9B+VR+JIXRxz21udPTL9HpFMyoMUEeX1G251EQ6e05WD9aPVtVBn09XUmZ259wCMlCDmYDSZG62Hhm+ZTJcUg==
 
-eslint-import-resolver-node@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+eslint-import-resolver-node@^0.3.3:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
   dependencies:
     debug "^2.6.9"
-    resolve "^1.5.0"
+    resolve "^1.13.1"
 
-eslint-module-utils@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.4.0.tgz#8b93499e9b00eab80ccb6614e69f03678e84e09a"
+eslint-module-utils@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
   dependencies:
-    debug "^2.6.8"
+    debug "^2.6.9"
     pkg-dir "^2.0.0"
 
 eslint-plugin-es@^1.4.0:
@@ -2695,21 +3214,24 @@ eslint-plugin-es@^1.4.0:
     eslint-utils "^1.3.0"
     regexpp "^2.0.1"
 
-eslint-plugin-import@^2.17.3:
-  version "2.17.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.17.3.tgz#00548b4434c18faebaba04b24ae6198f280de189"
+eslint-plugin-import@^2.22.0:
+  version "2.22.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e"
+  integrity sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
+    array.prototype.flat "^1.2.3"
     contains-path "^0.1.0"
     debug "^2.6.9"
     doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.2"
-    eslint-module-utils "^2.4.0"
+    eslint-import-resolver-node "^0.3.3"
+    eslint-module-utils "^2.6.0"
     has "^1.0.3"
-    lodash "^4.17.11"
     minimatch "^3.0.4"
+    object.values "^1.1.1"
     read-pkg-up "^2.0.0"
-    resolve "^1.11.0"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
 
 eslint-plugin-node@^9.1.0:
   version "9.1.0"
@@ -2722,17 +3244,37 @@ eslint-plugin-node@^9.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
-eslint-plugin-promise@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.1.1.tgz#1e08cb68b5b2cd8839f8d5864c796f56d82746db"
+eslint-plugin-promise@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz#845fd8b2260ad8f82564c1222fce44ad71d9418a"
+  integrity sha512-VoM09vT7bfA7D+upt+FjeBO5eHIJQBUWki1aPvB+vbNiHS3+oGIJGIeyBtKQTME6UPXXy3vV07OL1tHd3ANuDw==
 
-eslint-plugin-react-hooks@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7"
+eslint-plugin-react-hooks@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.0.5.tgz#4879003aa38e5d05d0312175beb6e4a1f617bfcf"
+  integrity sha512-3YLSjoArsE2rUwL8li4Yxx1SUg3DQWp+78N3bcJQGWVZckcp+yeQGsap/MSq05+thJk57o+Ww4PtZukXGL02TQ==
 
-eslint-plugin-standard@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.0.tgz#f845b45109c99cd90e77796940a344546c8f6b5c"
+eslint-plugin-react@^7.20.3:
+  version "7.20.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.20.3.tgz#0590525e7eb83890ce71f73c2cf836284ad8c2f1"
+  integrity sha512-txbo090buDeyV0ugF3YMWrzLIUqpYTsWSDZV9xLSmExE1P/Kmgg9++PD931r+KEWS66O1c9R4srLVVHmeHpoAg==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
+    doctrine "^2.1.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
+    prop-types "^15.7.2"
+    resolve "^1.17.0"
+    string.prototype.matchall "^4.0.2"
+
+eslint-plugin-standard@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.1.tgz#ff0519f7ffaff114f76d1bd7c3996eef0f6e20b4"
+  integrity sha512-v/KBnfyaOMPmZc/dmc6ozOdWqekGp7bBGq4jLAecEfPGmfKiWS4sA8sC0LqiV9w5qmXAtXVn4M3p1jSyhY85SQ==
 
 eslint-scope@^4.0.3:
   version "4.0.3"
@@ -2748,82 +3290,95 @@ eslint-scope@^5.0.0:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
+eslint-scope@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
+  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
+  dependencies:
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 eslint-utils@^1.3.0, eslint-utils@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
 
-eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+eslint-utils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
-eslint-visitor-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
-
 eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
 
-eslint@^5.16.0:
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
+eslint-visitor-keys@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@^7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.4.0.tgz#4e35a2697e6c1972f9d6ef2b690ad319f80f206f"
+  integrity sha512-gU+lxhlPHu45H3JkEGgYhWhkR9wLHHEXC9FbWFnTlEkbKyZKWgWRLgf61E8zWmBuI6g5xKBph9ltg3NtZMVF8g==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    ajv "^6.9.1"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
     debug "^4.0.1"
     doctrine "^3.0.0"
-    eslint-scope "^4.0.3"
-    eslint-utils "^1.3.1"
-    eslint-visitor-keys "^1.0.0"
-    espree "^5.0.1"
-    esquery "^1.0.1"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.0"
+    eslint-utils "^2.0.0"
+    eslint-visitor-keys "^1.2.0"
+    espree "^7.1.0"
+    esquery "^1.2.0"
     esutils "^2.0.2"
     file-entry-cache "^5.0.1"
     functional-red-black-tree "^1.0.1"
-    glob "^7.1.2"
-    globals "^11.7.0"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
     ignore "^4.0.6"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
-    inquirer "^6.2.2"
-    js-yaml "^3.13.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
     json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.11"
+    levn "^0.4.1"
+    lodash "^4.17.14"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    optionator "^0.8.2"
-    path-is-inside "^1.0.2"
+    optionator "^0.9.1"
     progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^5.5.1"
-    strip-ansi "^4.0.0"
-    strip-json-comments "^2.0.1"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
     table "^5.2.3"
     text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
 
-espree@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+espree@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-7.1.0.tgz#a9c7f18a752056735bf1ba14cb1b70adc3a5ce1c"
+  integrity sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==
   dependencies:
-    acorn "^6.0.7"
-    acorn-jsx "^5.0.0"
-    eslint-visitor-keys "^1.0.0"
+    acorn "^7.2.0"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.2.0"
 
 esprima@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
 
-esquery@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+esquery@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
   version "4.2.1"
@@ -2831,10 +3386,15 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
+estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
+estraverse@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.1.0.tgz#374309d39fd935ae500e7b92e8a6b4c720e59642"
+  integrity sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==
+
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
@@ -2942,14 +3502,6 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-external-editor@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -2967,11 +3519,16 @@ fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
 
-fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
@@ -2991,12 +3548,6 @@ figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
 
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
@@ -3038,6 +3589,15 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
+find-cache-dir@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+  integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -3050,9 +3610,18 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-findup-sync@3.0.0:
+find-up@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
+findup-sync@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
+  integrity sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==
   dependencies:
     detect-file "^1.0.0"
     is-glob "^4.0.0"
@@ -3082,9 +3651,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-fn-name@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
+fn-name@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-3.0.0.tgz#0596707f635929634d791f452309ab41558e3c5c"
+  integrity sha512-eNMNr5exLoavuAMhIUVsOKF79SWd/zG104ef6sxBTSw+cZc6BXdQXDvYcGvp0VbxVVSp1XDUNoz7mg1xMtSznA==
 
 follow-redirects@1.5.10:
   version "1.5.10"
@@ -3106,18 +3676,21 @@ foreach@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
 
-fork-ts-checker-webpack-plugin@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.6.0.tgz#a81fd1c6bf5258fa5318cf3e9a7e9bac006f7917"
+fork-ts-checker-webpack-plugin@^5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.0.6.tgz#02af713af02e47b338a3992279209bc65d34c773"
+  integrity sha512-8h4S7WANr69Resw+tMd5U23xdbVPsT+VOeMKQhUaKhkGeMm0fNf7ObJPP81WG+tsmy4LK4ayIf0JXBY+hy6vMw==
   dependencies:
-    babel-code-frame "^6.22.0"
+    "@babel/code-frame" "^7.8.3"
     chalk "^2.4.1"
-    chokidar "^2.0.4"
-    micromatch "^3.1.10"
+    cosmiconfig "^6.0.0"
+    deepmerge "^4.2.2"
+    fs-extra "^9.0.0"
+    memfs "^3.1.2"
     minimatch "^3.0.4"
+    schema-utils "1.0.0"
     semver "^5.6.0"
     tapable "^1.0.0"
-    worker-rpc "^0.1.0"
 
 formik@^2.1.4:
   version "2.1.4"
@@ -3154,30 +3727,52 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
-fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+fs-extra@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
+  integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^1.0.0"
+
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
   dependencies:
     minipass "^2.2.1"
 
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.0.0"
+
+fs-monkey@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.1.tgz#4a82f36944365e619f4454d9fff106553067b781"
+  integrity sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==
+
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
@@ -3198,6 +3793,11 @@ fsevents@^1.2.7:
     nan "^2.9.2"
     node-pre-gyp "^0.10.0"
 
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -3206,10 +3806,6 @@ functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
-gather-stream@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b"
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -3223,10 +3819,6 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-get-caller-file@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
-
 get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -3255,6 +3847,25 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^5.0.0, glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^7.0.0, glob@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
@@ -3266,23 +3877,6 @@ glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-global-modules@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
-  dependencies:
-    global-prefix "^3.0.0"
-
 global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -3291,6 +3885,13 @@ global-modules@^1.0.0:
     is-windows "^1.0.1"
     resolve-dir "^1.0.0"
 
+global-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
+  dependencies:
+    global-prefix "^3.0.0"
+
 global-prefix@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
@@ -3316,10 +3917,17 @@ global@^4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
-globals@^11.1.0, globals@^11.7.0:
+globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
 
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -3330,10 +3938,15 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
 
+graceful-fs@^4.2.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
 gud@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
@@ -3356,10 +3969,20 @@ has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
 
+has-symbols@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -3438,6 +4061,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.0.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
@@ -3475,9 +4105,10 @@ html-comment-regex@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
 
-html-entities@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+html-entities@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
 html-minifier@^3.2.3:
   version "3.5.16"
@@ -3604,12 +4235,19 @@ i18next@^19.0.0:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.2.tgz#af6d628dccfb463b7364d97f715e4b74b8c8c2b8"
+  integrity sha512-kERHXvpSaB4aU3eANwidg79K8FlrN77m8G9V+0vOR3HYaRifrlwMEpT7ZBJqLSEIHnEgJTHcWK82wwLwwKwtag==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -3662,13 +4300,21 @@ import-fresh@^3.0.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-fresh@^3.1.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
   dependencies:
     resolve-from "^3.0.0"
 
-import-local@2.0.0, import-local@^2.0.0:
+import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
   dependencies:
@@ -3679,13 +4325,19 @@ imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
 
-infer-owner@^1.0.3:
+infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
+  integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
 
 inflight@^1.0.4:
   version "1.0.6"
@@ -3710,24 +4362,6 @@ ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-inquirer@^6.2.2:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.3.1.tgz#7a413b5e7950811013a3db491c61d1f3b776e8e7"
-  dependencies:
-    ansi-escapes "^3.2.0"
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^2.0.0"
-    lodash "^4.17.11"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^2.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -3735,9 +4369,19 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-interpret@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
+internal-slot@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
+  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    has "^1.0.3"
+    side-channel "^1.0.2"
+
+interpret@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
@@ -3745,10 +4389,6 @@ invariant@^2.2.2, invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-invert-kv@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
-
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -3799,18 +4439,26 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 
-is-buffer@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
-
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
 
+is-callable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
+  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
@@ -3894,7 +4542,7 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
-is-glob@^4.0.1:
+is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
   dependencies:
@@ -3956,16 +4604,19 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
   dependencies:
     has "^1.0.1"
 
+is-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
+  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
+  dependencies:
+    has-symbols "^1.0.1"
+
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
@@ -3974,6 +4625,11 @@ is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-svg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
@@ -3986,10 +4642,6 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.0"
 
-is-what@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.2.4.tgz#da528659017bdd4b07892dfe4fd60da6ac500e98"
-
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4024,6 +4676,14 @@ isobject@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
 
+jest-worker@^26.0.0:
+  version "26.1.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.1.0.tgz#65d5641af74e08ccd561c240e7db61284f82f33d"
+  integrity sha512-Z9P5pZ6UC+kakMbNJn+tA2RdVdNX5WH1x+5UCBZ9MxIK24pjYtFt96fK+UwBTrjLYm232g1xz0L3eTh51OW+yQ==
+  dependencies:
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
@@ -4040,11 +4700,7 @@ js-levenshtein@^1.1.3:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
-js-tokens@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
-js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.9.0:
+js-yaml@^3.13.1, js-yaml@^3.9.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   dependencies:
@@ -4098,11 +4754,12 @@ json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
 
 jsonfile@^4.0.0:
   version "4.0.0"
@@ -4110,6 +4767,23 @@ jsonfile@^4.0.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.0.1.tgz#98966cba214378c8c84b82e085907b40bf614179"
+  integrity sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==
+  dependencies:
+    universalify "^1.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsx-ast-utils@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
+  dependencies:
+    array-includes "^3.1.1"
+    object.assign "^4.1.0"
+
 killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -4134,24 +4808,18 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
-lcid@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
-    invert-kv "^2.0.0"
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
 
-levn@^0.3.0, levn@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  dependencies:
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
 load-json-file@^2.0.0:
   version "2.0.0"
@@ -4166,14 +4834,6 @@ loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
 
-loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
 loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
@@ -4183,6 +4843,32 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -4197,7 +4883,14 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.14, lodash-es@^4.17.15:
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
+lodash-es@^4.17.11, lodash-es@^4.17.14, lodash-es@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
 
@@ -4287,10 +4980,20 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
 lodash.template@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
@@ -4312,13 +5015,14 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.5:
+"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
-loglevel@^1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.4.tgz#f408f4f006db8354d0577dcf6d33485b3cb90d56"
+loglevel@^1.6.8:
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
+  integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
@@ -4343,15 +5047,12 @@ make-dir@^2.0.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-mamacro@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
-
-map-age-cleaner@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+make-dir@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
-    p-defer "^1.0.0"
+    semver "^6.0.0"
 
 map-cache@^0.2.2:
   version "0.2.2"
@@ -4382,17 +5083,12 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-mem@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-4.1.0.tgz#aeb9be2d21f47e78af29e4ac5978e8afa2ca5b8a"
+memfs@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.2.0.tgz#f9438e622b5acd1daa8a4ae160c496fdd1325b26"
+  integrity sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==
   dependencies:
-    map-age-cleaner "^0.1.1"
-    mimic-fn "^1.0.0"
-    p-is-promise "^2.0.0"
-
-memoize-one@^5.0.0:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
+    fs-monkey "1.0.1"
 
 memoizerific@^1.11.3:
   version "1.11.3"
@@ -4407,24 +5103,27 @@ memory-fs@^0.4.0, memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-merge-anything@^2.2.4:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.0.tgz#86959caf02bb8969d1ae5e1b652862bc5fe54e44"
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
   dependencies:
-    is-what "^3.2.4"
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
 
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
 
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
-microevent.ts@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
-
 micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -4479,10 +5178,6 @@ mime@^2.4.4:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
 
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -4528,10 +5223,36 @@ minimist@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
 
+minimist@^1.1.1, minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
 minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz#55f7839307d74859d6e8ada9c3ebe72cec216a34"
+  integrity sha512-cFOknTvng5vqnwOpDsZTWhNll6Jf8o2x+/diplafmxpuIymAjzoOolZG0VvQf3V2HgqzJNhnuKHYp2BqDgz8IQ==
+  dependencies:
+    minipass "^3.0.0"
+
 minipass@^2.2.1, minipass@^2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
@@ -4539,12 +5260,27 @@ minipass@^2.2.1, minipass@^2.3.3:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
+minipass@^3.0.0, minipass@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  dependencies:
+    yallist "^4.0.0"
+
 minizlib@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
   dependencies:
     minipass "^2.2.1"
 
+minizlib@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3"
+  integrity sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -4573,6 +5309,18 @@ mkdirp@^0.5, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^0.5.3:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+mkdirp@^1.0.3, mkdirp@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 moment@^2.10.2:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
@@ -4607,10 +5355,6 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-
 nan@^2.9.2:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
@@ -4725,6 +5469,11 @@ node-releases@^1.1.42:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.58:
+  version "1.1.58"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
+  integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -4747,7 +5496,7 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+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"
 
@@ -4768,6 +5517,11 @@ normalize-url@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.2.0.tgz#98d0948afc82829f374320f405fe9ca55a5f8567"
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-bundled@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
@@ -4820,7 +5574,12 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.8:
+object-inspect@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
+  integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
+
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.8, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
 
@@ -4843,6 +5602,25 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.entries@^1.1.0, object.entries@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
+  integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+    has "^1.0.3"
+
+object.fromentries@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -4865,6 +5643,16 @@ object.values@^1.0.4:
     function-bind "^1.1.0"
     has "^1.0.1"
 
+object.values@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -4885,28 +5673,23 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  dependencies:
-    mimic-fn "^1.0.0"
-
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
   dependencies:
     is-wsl "^1.1.0"
 
-optionator@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
   dependencies:
-    deep-is "~0.1.3"
-    fast-levenshtein "~2.0.4"
-    levn "~0.3.0"
-    prelude-ls "~1.1.2"
-    type-check "~0.3.2"
-    wordwrap "~1.0.0"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
 
 original@^1.0.0:
   version "1.0.2"
@@ -4922,15 +5705,7 @@ os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
 
-os-locale@^3.0.0, os-locale@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
-  dependencies:
-    execa "^1.0.0"
-    lcid "^2.0.0"
-    mem "^4.0.0"
-
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -4941,18 +5716,10 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-p-defer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
 
-p-is-promise@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.0.0.tgz#7554e3d572109a87e1f3f53f6a7d85d1b194f4c5"
-
 p-limit@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
@@ -4965,6 +5732,20 @@ p-limit@^2.0.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
+  dependencies:
+    p-try "^2.0.0"
+
+p-limit@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.0.1.tgz#584784ac0722d1aed09f19f90ed2999af6ce2839"
+  integrity sha512-mw/p92EyOzl2MhauKodw54Rx5ZK4624rNfgNaBguFZkHzyUG9WsDzFF5/yQVEJinbJDdP4jEfMN+uBquiGnaLg==
+  dependencies:
+    p-try "^2.0.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -4977,10 +5758,24 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
 
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-retry@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
@@ -5042,6 +5837,16 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
+  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+    lines-and-columns "^1.1.6"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -5066,6 +5871,11 @@ path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -5103,6 +5913,11 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 path@^0.12.7:
   version "0.12.7"
   resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
@@ -5120,20 +5935,10 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-perfectionist@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/perfectionist/-/perfectionist-2.4.0.tgz#c147ad3714e126467f1764129ee72df861d47ea0"
-  dependencies:
-    comment-regex "^1.0.0"
-    defined "^1.0.0"
-    minimist "^1.2.0"
-    postcss "^5.0.8"
-    postcss-scss "^0.3.0"
-    postcss-value-parser "^3.3.0"
-    read-file-stdin "^0.2.0"
-    string.prototype.repeat "^0.2.0"
-    vendors "^1.0.0"
-    write-file-stdout "0.0.2"
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
 picomatch@^2.0.5:
   version "2.2.1"
@@ -5169,9 +5974,17 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-portfinder@^1.0.25:
-  version "1.0.25"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
+pkg-dir@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
+portfinder@^1.0.26:
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
+  integrity sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==
   dependencies:
     async "^2.6.2"
     debug "^3.1.1"
@@ -5719,12 +6532,6 @@ postcss-replace-overflow-wrap@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-scss@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.3.1.tgz#65c610d8e2a7ee0e62b1835b71b8870734816e4b"
-  dependencies:
-    postcss "^5.2.4"
-
 postcss-selector-matches@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
@@ -5796,7 +6603,16 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.4:
+postcss@7.0.32, postcss@^7.0.27:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^5.0.5:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
   dependencies:
@@ -5833,9 +6649,10 @@ precss@^4.0.0:
     postcss-preset-env "^6.4.0"
     postcss-property-lookup "^2.0.0"
 
-prelude-ls@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prepend-http@^1.0.0:
   version "1.0.4"
@@ -5876,7 +6693,7 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
-prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -5884,9 +6701,10 @@ prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
-property-expr@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
+property-expr@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.2.tgz#fff2a43919135553a3bc2fdd94bdb841965b2330"
+  integrity sha512-bc/5ggaYZxNkFKj374aLbEDqVADdYaLcFo8XBkishUWbaAdjlphaBFns9TvRA2pUseVL/wMFmui9X3IdNDU37g==
 
 proxy-addr@~2.0.5:
   version "2.0.5"
@@ -5939,7 +6757,7 @@ punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
@@ -5959,6 +6777,16 @@ purgecss@^1.4.0:
     postcss-selector-parser "^6.0.0"
     yargs "^14.0.0"
 
+purgecss@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
+  integrity sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==
+  dependencies:
+    commander "^5.0.0"
+    glob "^7.0.0"
+    postcss "7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -6000,6 +6828,13 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.1.0"
 
+randombytes@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
+  dependencies:
+    safe-buffer "^5.1.0"
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
@@ -6056,9 +6891,10 @@ react-google-recaptcha@^2.0.1:
     prop-types "^15.5.0"
     react-async-script "^1.1.1"
 
-react-hot-loader@^4.12.18:
-  version "4.12.18"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.18.tgz#a9029e34af2690d76208f9a35189d73c2dfea6a7"
+react-hot-loader@^4.12.21:
+  version "4.12.21"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"
+  integrity sha512-Ynxa6ROfWUeKWsTHxsrL2KMzujxJVPjs385lmB2t5cHUxdoRPGind9F00tOkdc1l5WBleOF4XEAMILY1KPIIDA==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
@@ -6131,9 +6967,10 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^16.12.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
+react@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -6145,12 +6982,6 @@ read-cache@^1.0.0:
   dependencies:
     pify "^2.3.0"
 
-read-file-stdin@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
-  dependencies:
-    gather-stream "^1.0.0"
-
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -6203,6 +7034,21 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+reduce-css-calc@^2.1.6:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 redux-devtools-extension@^2.13.8:
   version "2.13.8"
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
@@ -6211,13 +7057,21 @@ redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.0.0:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796"
   dependencies:
     loose-envify "^1.4.0"
     symbol-observable "^1.2.0"
 
+redux@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -6228,14 +7082,15 @@ regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-
 regenerator-runtime@^0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.5"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
+  integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -6253,6 +7108,14 @@ regex-parser@^2.2.9:
   version "2.2.10"
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -6261,6 +7124,11 @@ regexpp@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.0.0.tgz#dd63982ee3300e67b41c1956f850aa680d9d330e"
 
+regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+
 regexpu-core@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
@@ -6316,10 +7184,6 @@ require-from-string@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
 
-require-main-filename@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
-
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -6373,18 +7237,18 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.3.2, resolve@^1.8.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   dependencies:
     path-parse "^1.0.6"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
   dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
+    path-parse "^1.0.6"
 
 ret@~0.1.10:
   version "0.1.15"
@@ -6419,12 +7283,19 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   dependencies:
     glob "^7.1.3"
 
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -6432,24 +7303,12 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  dependencies:
-    is-promise "^2.1.0"
-
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^6.4.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
-  dependencies:
-    tslib "^1.9.0"
-
 safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -6483,7 +7342,7 @@ scheduler@^0.18.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-schema-utils@^1.0.0:
+schema-utils@1.0.0, schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
   dependencies:
@@ -6498,6 +7357,15 @@ schema-utils@^2.6.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+schema-utils@^2.6.6:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
+  integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
+  dependencies:
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -6516,6 +7384,11 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
 
+semver@^7.2.1, semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -6534,9 +7407,19 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
+serialize-javascript@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
+  integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==
+  dependencies:
+    randombytes "^2.1.0"
+
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
 
 serve-index@^1.9.1:
   version "1.9.1"
@@ -6626,7 +7509,15 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
+side-channel@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.2.tgz#df5d1abadb4e4bf4af1cd8852bf132d2f7876947"
+  integrity sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    object-inspect "^1.7.0"
+
+signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
@@ -6686,12 +7577,14 @@ sockjs-client@1.4.0:
     json3 "^3.3.2"
     url-parse "^1.4.3"
 
-sockjs@0.3.19:
-  version "0.3.19"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+sockjs@0.3.20:
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.20.tgz#b26a283ec562ef8b2687b44033a4eeceac75d855"
+  integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
   dependencies:
     faye-websocket "^0.10.0"
-    uuid "^3.0.1"
+    uuid "^3.4.0"
+    websocket-driver "0.6.5"
 
 sort-keys@^1.0.0:
   version "1.1.2"
@@ -6703,12 +7596,16 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
-source-map-loader@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
+source-map-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.0.1.tgz#703df5345b0816734f0336c1ccee8af66e082061"
+  integrity sha512-DE4CJyfCVoxFLsHyuVE9Sjcib8cs5qdmOq3wcev1Un/r6F2AfQJDhag4rzpPPA48A2QZyV3CTbc+NGoFMfKIOQ==
   dependencies:
-    async "^2.5.0"
-    loader-utils "^1.1.0"
+    data-urls "^2.0.0"
+    iconv-lite "^0.5.1"
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+    source-map "^0.6.0"
 
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
@@ -6776,9 +7673,10 @@ spdy-transport@^3.0.0:
     readable-stream "^3.0.6"
     wbuf "^1.7.3"
 
-spdy@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
+spdy@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
   dependencies:
     debug "^4.1.0"
     handle-thing "^2.0.0"
@@ -6806,6 +7704,13 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
+ssri@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
+  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@~0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -6857,6 +7762,11 @@ strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
 
+string-similarity@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/string-similarity/-/string-similarity-4.0.1.tgz#ea7c11f0093cb3088cdcc5eb16cfd90cb54962f7"
+  integrity sha512-v36MJzloekKVvKAsYi6O/qpn2mIuvwEFIT9Gx3yg4spkNjXYsk7yxc37g4ZTyMVIBvt/9PZGxnqEtme8XHK+Mw==
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -6865,7 +7775,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+"string-width@^1.0.2 || 2":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   dependencies:
@@ -6880,9 +7790,33 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string.prototype.repeat@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
+string.prototype.matchall@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
+  integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    has-symbols "^1.0.1"
+    internal-slot "^1.0.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.2"
+
+string.prototype.trimend@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
+  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trimstart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
+  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
 
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.2.0"
@@ -6918,52 +7852,56 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
-strip-comments@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
 
-strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
+strip-json-comments@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
+  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==
+
+strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@^0.23.1:
-  version "0.23.1"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+style-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.2.1.tgz#c5cbbfbf1170d076cfdd86e0109c5bba114baa1a"
+  integrity sha512-ByHSTQvHLkWE9Ir5+lGbVOXhxX10fbprhLvdg96wedFZb4NDekDPxVKv5Fwmio+QcMlkkNfuK+5W1peQ5CUhZg==
   dependencies:
-    loader-utils "^1.1.0"
-    schema-utils "^1.0.0"
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
 
 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@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
+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==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/unitless" "^0.7.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
     babel-plugin-styled-components ">= 1"
-    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
 stylehacks@^4.0.0:
@@ -6974,20 +7912,6 @@ stylehacks@^4.0.0:
     postcss "^6.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-
-supports-color@6.1.0, supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7004,6 +7928,19 @@ supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.0.0, supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 svgo@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.0.5.tgz#7040364c062a0538abacff4401cea6a26a7a389a"
@@ -7027,9 +7964,10 @@ symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
 
-synchronous-promise@^2.0.6:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.9.tgz#b83db98e9e7ae826bf9c8261fd8ac859126c780a"
+synchronous-promise@^2.0.10:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.13.tgz#9d8c165ddee69c5a6542862b405bc50095926702"
+  integrity sha512-R9N6uDkVsghHePKh1TEqbnLddO2IY25OcsksyFp/qBe7XYd0PVbKEWxhcdMhpLzE1I6skj5l4aEZ3CRxcbArlA==
 
 table@^5.2.3:
   version "5.4.0"
@@ -7040,25 +7978,30 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tailwindcss@^0.7.4:
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.4.tgz#fb7926821d42eacdc12e6621a49d21f37a3ff9e9"
+tailwindcss@^1.4.4, tailwindcss@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.4.6.tgz#17b37166ccda08d7e7f9ca995ea48ce1e0089700"
+  integrity sha512-qV0qInUq1FWih39Bc5CWECdgObSzRrbjGD4ke4kAPSIq6WXrPhv0wwOcUWJgJ66ltT9j+XnSRYikG8WNRU/fTQ==
   dependencies:
+    "@fullhuman/postcss-purgecss" "^2.1.2"
     autoprefixer "^9.4.5"
+    browserslist "^4.12.0"
     bytes "^3.0.0"
-    chalk "^2.4.1"
-    css.escape "^1.5.1"
-    fs-extra "^4.0.2"
-    lodash "^4.17.5"
+    chalk "^4.0.0"
+    color "^3.1.2"
+    detective "^5.2.0"
+    fs-extra "^8.0.0"
+    lodash "^4.17.15"
     node-emoji "^1.8.1"
-    perfectionist "^2.4.0"
+    normalize.css "^8.0.1"
     postcss "^7.0.11"
     postcss-functions "^3.0.0"
     postcss-js "^2.0.0"
     postcss-nested "^4.1.1"
-    postcss-selector-parser "^5.0.0"
+    postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
-    strip-comments "^1.0.2"
+    reduce-css-calc "^2.1.6"
+    resolve "^1.14.2"
 
 tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
@@ -7076,24 +8019,52 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
+tar@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.2.tgz#5df17813468a6264ff14f766886c622b84ae2f39"
+  integrity sha512-Glo3jkRtPcvpDlAs/0+hozav78yoXKFr+c4wgw62NNMO3oo4AaJdCo21Uu7lcwr55h39W2XD1LMERc64wtbItg==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.0"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
 tcomb@^3.2.21:
   version "3.2.27"
   resolved "https://registry.yarnpkg.com/tcomb/-/tcomb-3.2.27.tgz#f4928bfc536b959d21a47e5f5f1ca2b2e4b7188a"
 
-terser-webpack-plugin@^1.3.0, terser-webpack-plugin@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+terser-webpack-plugin@^1.4.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.4.tgz#2c63544347324baafa9a56baaddf1634c8abfc2f"
+  integrity sha512-U4mACBHIegmfoEe5fdongHESNJWqsGU+W0S/9+BmYGVQDw1+c2Ow05TpMhxjPK1sRb7cuYq1BPl1e5YHJMTCqA==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^1.7.0"
+    serialize-javascript "^3.1.0"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+terser-webpack-plugin@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-3.0.6.tgz#db0a108bbdd3680d72c9b491fbabad09ba207b99"
+  integrity sha512-z3HLOOPUHkCNGkeEHqqiMAIy1pjpHwS1o+i6Zn0Ws3EAvHJj46737efNNEvJ0Vx9BdDQM83d56qySDJOSORA0A==
+  dependencies:
+    cacache "^15.0.4"
+    find-cache-dir "^3.3.1"
+    jest-worker "^26.0.0"
+    p-limit "^3.0.1"
+    schema-utils "^2.6.6"
+    serialize-javascript "^4.0.0"
+    source-map "^0.6.1"
+    terser "^4.8.0"
+    webpack-sources "^1.4.3"
+
 terser@^4.1.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.1.tgz#09820bcb3398299c4b48d9a86aefc65127d0ed65"
@@ -7102,6 +8073,15 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -7113,10 +8093,6 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-
 thunky@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.3.tgz#f5df732453407b09191dae73e2a8cc73f381a826"
@@ -7139,12 +8115,6 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
 
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
@@ -7193,6 +8163,13 @@ toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
 
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
 ts-loader@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
@@ -7203,9 +8180,20 @@ ts-loader@^6.2.1:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
-ts-toolbelt@^4.10.0:
-  version "4.12.13"
-  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-4.12.13.tgz#a2fb92f16ef6e5828c16a8f403e1eaf87703160b"
+ts-toolbelt@^6.1.6:
+  version "6.9.9"
+  resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.9.9.tgz#e6cfd8ec7d425d2a06bda3b4fe9577ceaf2abda8"
+  integrity sha512-5a8k6qfbrL54N4Dw+i7M6kldrbjgDWb5Vit8DnT+gwThhvqMg8KtxLE5Vmnft+geIgaSOfNJyAcnmmlflS+Vdg==
+
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
 
 tslib@^1.10.0:
   version "1.11.1"
@@ -7226,11 +8214,34 @@ tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
 
-type-check@~0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+twin.macro@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/twin.macro/-/twin.macro-1.4.1.tgz#48de95e52c34d068486610889a68d44c766bac1a"
+  integrity sha512-/hUXvyQepce26FvgfZmMl7IEgwxKy57te99FuECxeRUVjrX31A1F27lt+SSrtFNivoCN4Dk7FimUx5jqjth2jQ==
   dependencies:
-    prelude-ls "~1.1.2"
+    "@babel/parser" "^7.10.2"
+    babel-plugin-macros "^2.8.0"
+    chalk "^4.1.0"
+    clean-set "^1.1.1"
+    color "^3.1.2"
+    dlv "^1.1.3"
+    dset "^2.0.1"
+    lodash.merge "^4.6.2"
+    string-similarity "^4.0.1"
+    tailwindcss "^1.4.4"
+    timsort "^0.3.0"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
@@ -7243,9 +8254,23 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript@^3.7.5:
-  version "3.7.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
+typescript-plugin-tw-template@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/typescript-plugin-tw-template/-/typescript-plugin-tw-template-2.0.1.tgz#9cebbebacd8dfce2ba718a8251ba9f6acf8e73e1"
+  integrity sha512-tSBw0sxRbeznPZSS69jKeVA9juaDs9tgFcp3ORvdvavm08+x8vnay04cH2U31f7F/Woy80XekbfLc8gDLrVqdw==
+  dependencies:
+    postcss "^7.0.27"
+    typescript-template-language-service-decorator "^2.2.0"
+
+typescript-template-language-service-decorator@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-2.2.0.tgz#4ee6d580f307fb9239978e69626f2775b8a59b2a"
+  integrity sha512-xiolqt1i7e22rpqMaprPgSFVgU64u3b9n6EJlAaUYE61jumipKAdI1+O5khPlWslpTUj80YzjUKjJ2jxT0D74w==
+
+typescript@^3.9.6:
+  version "3.9.6"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.6.tgz#8f3e0198a34c3ae17091b35571d3afd31999365a"
+  integrity sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==
 
 uglify-js@3.3.x:
   version "3.3.28"
@@ -7306,6 +8331,11 @@ universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
 
+universalify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
+  integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -7410,13 +8440,19 @@ utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
 
-v8-compile-cache@2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
+uuid@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
+  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
 
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
@@ -7445,13 +8481,23 @@ void-elements@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
-watchpack@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+watchpack-chokidar2@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
+  integrity sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==
+  dependencies:
+    chokidar "^2.1.8"
+
+watchpack@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.2.tgz#c02e4d4d49913c3e7e122c3325365af9d331e9aa"
+  integrity sha512-ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0g==
   dependencies:
-    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.0"
+    watchpack-chokidar2 "^2.0.0"
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
@@ -7459,9 +8505,15 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
 webpack-assets-manifest@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-3.1.1.tgz#39bbc3bf2ee57fcd8ba07cda51c9ba4a3c6ae1de"
+  integrity sha512-JV9V2QKc5wEWQptdIjvXDUL1ucbPLH2f27toAY3SNdGZp+xSaStAgpoMcvMZmqtFrBc9a5pTS1058vxyMPOzRQ==
   dependencies:
     chalk "^2.0"
     lodash.get "^4.0"
@@ -7471,21 +8523,22 @@ webpack-assets-manifest@^3.1.1:
     tapable "^1.0.0"
     webpack-sources "^1.0.0"
 
-webpack-cli@^3.3.10:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
+webpack-cli@^3.3.12:
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
+  integrity sha512-NVWBaz9k839ZH/sinurM+HcDvJOTXwSjYp1ku+5XKeOC03z8v5QitnK/x+lAxGXFyhdayoIf/GOpv85z3/xPag==
   dependencies:
-    chalk "2.4.2"
-    cross-spawn "6.0.5"
-    enhanced-resolve "4.1.0"
-    findup-sync "3.0.0"
-    global-modules "2.0.0"
-    import-local "2.0.0"
-    interpret "1.2.0"
-    loader-utils "1.2.3"
-    supports-color "6.1.0"
-    v8-compile-cache "2.0.3"
-    yargs "13.2.4"
+    chalk "^2.4.2"
+    cross-spawn "^6.0.5"
+    enhanced-resolve "^4.1.1"
+    findup-sync "^3.0.0"
+    global-modules "^2.0.0"
+    import-local "^2.0.0"
+    interpret "^1.4.0"
+    loader-utils "^1.4.0"
+    supports-color "^6.1.0"
+    v8-compile-cache "^2.1.1"
+    yargs "^13.3.2"
 
 webpack-dev-middleware@^3.7.2:
   version "3.7.2"
@@ -7497,9 +8550,10 @@ webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
+webpack-dev-server@^3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
+  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -7509,31 +8563,31 @@ webpack-dev-server@^3.9.0:
     debug "^4.1.1"
     del "^4.1.1"
     express "^4.17.1"
-    html-entities "^1.2.1"
+    html-entities "^1.3.1"
     http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
     internal-ip "^4.3.0"
     ip "^1.1.5"
     is-absolute-url "^3.0.3"
     killable "^1.0.1"
-    loglevel "^1.6.4"
+    loglevel "^1.6.8"
     opn "^5.5.0"
     p-retry "^3.0.1"
-    portfinder "^1.0.25"
+    portfinder "^1.0.26"
     schema-utils "^1.0.0"
     selfsigned "^1.10.7"
     semver "^6.3.0"
     serve-index "^1.9.1"
-    sockjs "0.3.19"
+    sockjs "0.3.20"
     sockjs-client "1.4.0"
-    spdy "^4.0.1"
+    spdy "^4.0.2"
     strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
     webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
     ws "^6.2.1"
-    yargs "12.0.5"
+    yargs "^13.3.2"
 
 webpack-log@^2.0.0:
   version "2.0.0"
@@ -7542,12 +8596,14 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-manifest-plugin@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.0.3.tgz#b42c5b08a0319cedb3ec45d9375a9ecee0acf5eb"
+webpack-manifest-plugin@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
+  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
   dependencies:
-    fs-extra "^0.30.0"
+    fs-extra "^7.0.0"
     lodash ">=3.5 <5"
+    object.entries "^1.1.0"
     tapable "^1.0.0"
 
 webpack-sources@^1.0.0, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
@@ -7557,15 +8613,16 @@ webpack-sources@^1.0.0, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.41.2:
-  version "4.41.2"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.2.tgz#c34ec76daa3a8468c9b61a50336d8e3303dce74e"
+webpack@^4.43.0:
+  version "4.43.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
+  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
   dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-module-context" "1.8.5"
-    "@webassemblyjs/wasm-edit" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    acorn "^6.2.1"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
     chrome-trace-event "^1.0.2"
@@ -7576,15 +8633,22 @@ webpack@^4.41.2:
     loader-utils "^1.2.3"
     memory-fs "^0.4.1"
     micromatch "^3.1.10"
-    mkdirp "^0.5.1"
+    mkdirp "^0.5.3"
     neo-async "^2.6.1"
     node-libs-browser "^2.2.1"
     schema-utils "^1.0.0"
     tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.1"
-    watchpack "^1.6.0"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.6.1"
     webpack-sources "^1.4.1"
 
+websocket-driver@0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
+  dependencies:
+    websocket-extensions ">=0.1.1"
+
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
@@ -7596,6 +8660,20 @@ websocket-extensions@>=0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
+whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.1.0.tgz#c628acdcf45b82274ce7281ee31dd3c839791771"
+  integrity sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^5.0.0"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -7619,9 +8697,10 @@ wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
 worker-farm@^1.7.0:
   version "1.7.0"
@@ -7629,19 +8708,6 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-worker-rpc@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
-  dependencies:
-    microevent.ts "~0.1.1"
-
-wrap-ansi@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
-  dependencies:
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
-
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
@@ -7654,10 +8720,6 @@ wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
-write-file-stdout@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
-
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
@@ -7674,6 +8736,11 @@ xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 xterm-addon-attach@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/xterm-addon-attach/-/xterm-addon-attach-0.1.0.tgz#e0daa8188e9bb830def9ccad015fc62bc07e3abe"
@@ -7686,7 +8753,7 @@ xterm@^3.14.4:
   version "3.14.4"
   resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.14.4.tgz#68a474fd0628e6027e420f6c8b0df136f6281ff8"
 
-"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
+y18n@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
 
@@ -7694,16 +8761,20 @@ yallist@^3.0.0, yallist@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
 
-yargs-parser@^11.1.1:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yargs-parser@^13.1.0:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+yaml@^1.7.2:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
+yargs-parser@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+  integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
   dependencies:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
@@ -7715,38 +8786,21 @@ yargs-parser@^15.0.0:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs@12.0.5:
-  version "12.0.5"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
-  dependencies:
-    cliui "^4.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^1.0.1"
-    os-locale "^3.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^11.1.1"
-
-yargs@13.2.4:
-  version "13.2.4"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.2.4.tgz#0b562b794016eb9651b98bd37acf364aa5d6dc83"
+yargs@^13.3.2:
+  version "13.3.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+  integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
   dependencies:
     cliui "^5.0.0"
     find-up "^3.0.0"
     get-caller-file "^2.0.1"
-    os-locale "^3.1.0"
     require-directory "^2.1.1"
     require-main-filename "^2.0.0"
     set-blocking "^2.0.0"
     string-width "^3.0.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^13.1.0"
+    yargs-parser "^13.1.2"
 
 yargs@^14.0.0:
   version "14.2.2"
@@ -7778,13 +8832,15 @@ yarn-deduplicate@^1.1.1:
     commander "^2.10.0"
     semver "^5.3.0"
 
-yup@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.27.0.tgz#f8cb198c8e7dd2124beddc2457571329096b06e7"
+yup@^0.29.1:
+  version "0.29.1"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.29.1.tgz#35d25aab470a0c3950f66040ba0ff4b1b6efe0d9"
+  integrity sha512-U7mPIbgfQWI6M3hZCJdGFrr+U0laG28FxMAKIgNvgl7OtyYuUoc4uy9qCWYHZjh49b8T7Ug8NNDdiMIEytcXrQ==
   dependencies:
-    "@babel/runtime" "^7.0.0"
-    fn-name "~2.0.1"
-    lodash "^4.17.11"
-    property-expr "^1.5.0"
-    synchronous-promise "^2.0.6"
+    "@babel/runtime" "^7.9.6"
+    fn-name "~3.0.0"
+    lodash "^4.17.15"
+    lodash-es "^4.17.11"
+    property-expr "^2.0.2"
+    synchronous-promise "^2.0.10"
     toposort "^2.0.2"

From 94e3acb9c4c1e839a070b26bad72c95ff04e7ebc Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Jul 2020 14:19:05 -0700
Subject: [PATCH 02/55] Get compilation back to working

---
 resources/scripts/.eslintrc.yml               |  5 +++
 resources/scripts/TransitionRouter.tsx        | 10 ++---
 resources/scripts/components/App.tsx          | 44 +++++++------------
 .../scripts/components/FlashMessageRender.tsx |  7 ++-
 .../components/auth/LoginFormContainer.tsx    |  3 +-
 .../dashboard/AccountOverviewContainer.tsx    |  9 ++--
 .../dashboard/search/SearchModal.tsx          | 13 +++---
 .../scripts/components/elements/AceEditor.tsx |  4 +-
 .../components/elements/DropdownMenu.tsx      |  8 ++--
 .../components/elements/InputSpinner.tsx      |  2 +-
 .../components/elements/ProgressBar.tsx       |  3 +-
 .../components/elements/SpinnerOverlay.tsx    |  2 +-
 .../scripts/components/elements/Switch.tsx    | 17 ++++---
 .../components/screens/ScreenBlock.tsx        | 15 ++++---
 .../components/screens/ServerError.tsx        |  2 +-
 .../scripts/components/server/Console.tsx     |  3 +-
 .../server/users/EditSubuserModal.tsx         | 31 ++++++-------
 resources/scripts/theme.ts                    |  6 +--
 resources/styles/components/animations.css    |  2 +-
 resources/styles/components/modal.css         |  2 +-
 tailwind.config.js                            |  6 ++-
 21 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/resources/scripts/.eslintrc.yml b/resources/scripts/.eslintrc.yml
index b95cb2916..3d5a324c1 100644
--- a/resources/scripts/.eslintrc.yml
+++ b/resources/scripts/.eslintrc.yml
@@ -36,6 +36,9 @@ rules:
   comma-dangle:
     - error
     - always-multiline
+  array-bracket-spacing:
+    - warn
+    - always
   "react-hooks/rules-of-hooks":
     - error
   "react-hooks/exhaustive-deps": 0
@@ -45,6 +48,8 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  # @todo this would be nice to have, but don't want to deal with the warning spam at the moment.
+  "@typescript-eslint/explicit-module-boundary-types": 0
   no-restricted-imports:
     - error
     - paths:
diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index 78fd164d1..abe421d41 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/resources/scripts/TransitionRouter.tsx
@@ -2,15 +2,11 @@ import React from 'react';
 import { Route } from 'react-router';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
-type Props = Readonly<{
-    children: React.ReactNode;
-}>;
-
-export default ({ children }: Props) => (
+const TransitionRouter: React.FC = ({ children }) => (
     <Route
         render={({ location }) => (
             <TransitionGroup className={'route-transition-group'}>
-                <CSSTransition key={location.key} timeout={250} in={true} appear={true} classNames={'fade'}>
+                <CSSTransition key={location.key} timeout={250} in appear classNames={'fade'}>
                     <section>
                         {children}
                     </section>
@@ -19,3 +15,5 @@ export default ({ children }: Props) => (
         )}
     />
 );
+
+export default TransitionRouter;
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 6a726fda3..a90786ae0 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -8,9 +8,9 @@ import ServerRouter from '@/routers/ServerRouter';
 import AuthenticationRouter from '@/routers/AuthenticationRouter';
 import { Provider } from 'react-redux';
 import { SiteSettings } from '@/state/settings';
-import { DefaultTheme, ThemeProvider } from 'styled-components';
 import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
+import tw from 'twin.macro';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -28,16 +28,6 @@ interface ExtendedWindow extends Window {
     };
 }
 
-const theme: DefaultTheme = {
-    breakpoints: {
-        xs: 0,
-        sm: 576,
-        md: 768,
-        lg: 992,
-        xl: 1200,
-    },
-};
-
 const App = () => {
     const { PterodactylUser, SiteConfiguration } = (window as ExtendedWindow);
     if (PterodactylUser && !store.getState().user.data) {
@@ -58,23 +48,21 @@ const App = () => {
     }
 
     return (
-        <ThemeProvider theme={theme}>
-            <StoreProvider store={store}>
-                <Provider store={store}>
-                    <ProgressBar/>
-                    <div className={'mx-auto w-auto'}>
-                        <BrowserRouter basename={'/'} key={'root-router'}>
-                            <Switch>
-                                <Route path="/server/:id" component={ServerRouter}/>
-                                <Route path="/auth" component={AuthenticationRouter}/>
-                                <Route path="/" component={DashboardRouter}/>
-                                <Route path={'*'} component={NotFound}/>
-                            </Switch>
-                        </BrowserRouter>
-                    </div>
-                </Provider>
-            </StoreProvider>
-        </ThemeProvider>
+        <StoreProvider store={store}>
+            <Provider store={store}>
+                <ProgressBar/>
+                <div css={tw`mx-auto w-auto`}>
+                    <BrowserRouter basename={'/'} key={'root-router'}>
+                        <Switch>
+                            <Route path="/server/:id" component={ServerRouter}/>
+                            <Route path="/auth" component={AuthenticationRouter}/>
+                            <Route path="/" component={DashboardRouter}/>
+                            <Route path={'*'} component={NotFound}/>
+                        </Switch>
+                    </BrowserRouter>
+                </div>
+            </Provider>
+        </StoreProvider>
     );
 };
 
diff --git a/resources/scripts/components/FlashMessageRender.tsx b/resources/scripts/components/FlashMessageRender.tsx
index cb0b37026..0af9d47e8 100644
--- a/resources/scripts/components/FlashMessageRender.tsx
+++ b/resources/scripts/components/FlashMessageRender.tsx
@@ -6,10 +6,9 @@ import { ApplicationStore } from '@/state';
 type Props = Readonly<{
     byKey?: string;
     spacerClass?: string;
-    className?: string;
 }>;
 
-export default ({ className, spacerClass, byKey }: Props) => {
+export default ({ spacerClass, byKey }: Props) => {
     const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
 
     let filtered = flashes;
@@ -22,11 +21,11 @@ export default ({ className, spacerClass, byKey }: Props) => {
     }
 
     return (
-        <div className={className}>
+        <div>
             {
                 filtered.map((flash, index) => (
                     <React.Fragment key={flash.id || flash.type + flash.message}>
-                        {index > 0 && <div className={spacerClass || 'mt-2'}></div>}
+                        {index > 0 && <div css={tw`${spacerClass || 'mt-2'}`}></div>}
                         <MessageBox type={flash.type} title={flash.title}>
                             {flash.message}
                         </MessageBox>
diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx
index afc8093fc..541763dc0 100644
--- a/resources/scripts/components/auth/LoginFormContainer.tsx
+++ b/resources/scripts/components/auth/LoginFormContainer.tsx
@@ -1,8 +1,9 @@
 import React, { forwardRef } from 'react';
 import { Form } from 'formik';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { breakpoint } from 'styled-components-breakpoint';
 import FlashMessageRender from '@/components/FlashMessageRender';
+import tw from 'twin.macro';
 
 type Props = React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> & {
     title?: string;
diff --git a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
index 4b052e850..e98ddd4a6 100644
--- a/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountOverviewContainer.tsx
@@ -3,9 +3,10 @@ import ContentBox from '@/components/elements/ContentBox';
 import UpdatePasswordForm from '@/components/dashboard/forms/UpdatePasswordForm';
 import UpdateEmailAddressForm from '@/components/dashboard/forms/UpdateEmailAddressForm';
 import ConfigureTwoFactorForm from '@/components/dashboard/forms/ConfigureTwoFactorForm';
-import styled from 'styled-components';
-import { breakpoint } from 'styled-components-breakpoint';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import { breakpoint } from '@/theme';
+import styled from 'styled-components/macro';
 
 const Container = styled.div`
     ${tw`flex flex-wrap my-10`};
@@ -31,13 +32,13 @@ export default () => {
                     <UpdatePasswordForm/>
                 </ContentBox>
                 <ContentBox
-                    className={'mt-8 md:mt-0 md:ml-8'}
+                    css={tw`mt-8 md:mt-0 md:ml-8`}
                     title={'Update Email Address'}
                     showFlashes={'account:email'}
                 >
                     <UpdateEmailAddressForm/>
                 </ContentBox>
-                <ContentBox className={'xl:ml-8 mt-8 xl:mt-0'} title={'Configure Two Factor'}>
+                <ContentBox css={tw`xl:ml-8 mt-8 xl:mt-0`} title={'Configure Two Factor'}>
                     <ConfigureTwoFactorForm/>
                 </ContentBox>
             </Container>
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index 9c2a4eb9c..9c1777df3 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/resources/scripts/components/dashboard/search/SearchModal.tsx
@@ -11,7 +11,8 @@ import { Server } from '@/api/server/getServer';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
 
 type Props = RequiredModalProps;
 
@@ -102,7 +103,7 @@ export default ({ ...props }: Props) => {
                     </FormikFieldWrapper>
                 </Form>
                 {servers.length > 0 &&
-                <div className={'mt-6'}>
+                <div css={tw`mt-6`}>
                     {
                         servers.map(server => (
                             <ServerResult
@@ -111,8 +112,8 @@ export default ({ ...props }: Props) => {
                                 onClick={() => props.onDismissed()}
                             >
                                 <div>
-                                    <p className={'text-sm'}>{server.name}</p>
-                                    <p className={'mt-1 text-xs text-neutral-400'}>
+                                    <p css={tw`text-sm`}>{server.name}</p>
+                                    <p css={tw`mt-1 text-xs text-neutral-400`}>
                                         {
                                             server.allocations.filter(alloc => alloc.default).map(allocation => (
                                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
@@ -120,8 +121,8 @@ export default ({ ...props }: Props) => {
                                         }
                                     </p>
                                 </div>
-                                <div className={'flex-1 text-right'}>
-                                    <span className={'text-xs py-1 px-2 bg-cyan-800 text-cyan-100 rounded'}>
+                                <div css={tw`flex-1 text-right`}>
+                                    <span css={tw`text-xs py-1 px-2 bg-cyan-800 text-cyan-100 rounded`}>
                                         {server.node}
                                     </span>
                                 </div>
diff --git a/resources/scripts/components/elements/AceEditor.tsx b/resources/scripts/components/elements/AceEditor.tsx
index 3b01307fa..4fc71cb3f 100644
--- a/resources/scripts/components/elements/AceEditor.tsx
+++ b/resources/scripts/components/elements/AceEditor.tsx
@@ -3,7 +3,7 @@ import useRouter from 'use-react-router';
 import { ServerContext } from '@/state/server';
 import ace, { Editor } from 'brace';
 import getFileContents from '@/api/server/files/getFileContents';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 // @ts-ignore
 require('brace/ext/modelist');
@@ -113,7 +113,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
     return (
         <EditorContainer style={style}>
             <div id={'editor'} ref={ref}/>
-            <div className={'absolute pin-r pin-b z-50'}>
+            <div className={'absolute right-0 bottom-0 z-50'}>
                 <div className={'m-3 rounded bg-neutral-900 border border-black'}>
                     <select
                         className={'input-dark'}
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index e9a326f77..035442c31 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
 
 interface Props {
     children: React.ReactNode;
@@ -12,10 +13,7 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
     transition: 150ms all ease;
 
     &:hover {
-        ${props => props.danger
-            ? tw`text-red-700 bg-red-100`
-            : tw`text-neutral-700 bg-neutral-100`
-        };
+        ${props => props.danger ? tw`text-red-700 bg-red-100` : tw`text-neutral-700 bg-neutral-100`};
     }
 `;
 
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index 1dbc3c84a..e4640fa21 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/resources/scripts/components/elements/InputSpinner.tsx
@@ -11,7 +11,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
             appear={true}
             classNames={'fade'}
         >
-            <div className={'absolute pin-r h-full flex items-center justify-end pr-3'}>
+            <div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
                 <Spinner size={'tiny'}/>
             </div>
         </CSSTransition>
diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx
index c4b867928..448815414 100644
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/resources/scripts/components/elements/ProgressBar.tsx
@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { useStoreActions, useStoreState } from 'easy-peasy';
 import { randomInt } from '@/helpers';
 import { CSSTransition } from 'react-transition-group';
+import tw from 'twin.macro';
 
 const BarFill = styled.div`
     ${tw`h-full bg-cyan-400`};
diff --git a/resources/scripts/components/elements/SpinnerOverlay.tsx b/resources/scripts/components/elements/SpinnerOverlay.tsx
index 87f66bc66..946afad87 100644
--- a/resources/scripts/components/elements/SpinnerOverlay.tsx
+++ b/resources/scripts/components/elements/SpinnerOverlay.tsx
@@ -13,7 +13,7 @@ interface Props {
 const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
     <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
         <div
-            className={classNames('pin-t pin-l flex items-center justify-center w-full h-full rounded', {
+            className={classNames('top-0 left-0 flex items-center justify-center w-full h-full rounded', {
                 absolute: !fixed,
                 fixed: fixed,
             })}
diff --git a/resources/scripts/components/elements/Switch.tsx b/resources/scripts/components/elements/Switch.tsx
index 606cc2281..f1ee5812f 100644
--- a/resources/scripts/components/elements/Switch.tsx
+++ b/resources/scripts/components/elements/Switch.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import v4 from 'uuid/v4';
-import classNames from 'classnames';
+import tw from 'twin.macro';
 
 const ToggleContainer = styled.div`
     ${tw`relative select-none w-12 leading-normal`};
@@ -47,8 +47,8 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
     const uuid = useMemo(() => v4(), []);
 
     return (
-        <div className={'flex items-center'}>
-            <ToggleContainer className={'flex-none'}>
+        <div css={tw`flex items-center`}>
+            <ToggleContainer css={tw`flex-none`}>
                 {children
                 || <input
                     id={uuid}
@@ -61,12 +61,15 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                 <label htmlFor={uuid}/>
             </ToggleContainer>
             {(label || description) &&
-            <div className={'ml-4 w-full'}>
+            <div css={tw`ml-4 w-full`}>
                 {label &&
                 <label
-                    className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
+                    css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
+                    className={'input-dark-label'}
                     htmlFor={uuid}
-                >{label}</label>
+                >
+                    {label}
+                </label>
                 }
                 {description &&
                 <p className={'input-help'}>
diff --git a/resources/scripts/components/screens/ScreenBlock.tsx b/resources/scripts/components/screens/ScreenBlock.tsx
index cff1c5501..f20836493 100644
--- a/resources/scripts/components/screens/ScreenBlock.tsx
+++ b/resources/scripts/components/screens/ScreenBlock.tsx
@@ -4,7 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
 import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
 import classNames from 'classnames';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
 
 interface BaseProps {
     title: string;
@@ -42,10 +43,10 @@ const ActionButton = styled.button`
 
 export default ({ title, image, message, onBack, onRetry }: Props) => (
     <PageContentBlock>
-        <div className={'flex justify-center'}>
-            <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 relative'}>
+        <div css={tw`flex justify-center`}>
+            <div css={tw`w-full sm:w-3/4 md:w-1/2 p-12 md:p-20 bg-neutral-100 rounded-lg shadow-lg text-center relative`}>
                 {(typeof onBack === 'function' || typeof onRetry === 'function') &&
-                <div className={'absolute pin-l pin-t ml-4 mt-4'}>
+                <div css={tw`absolute left-0 top-0 ml-4 mt-4`}>
                     <ActionButton
                         onClick={() => onRetry ? onRetry() : (onBack ? onBack() : null)}
                         className={classNames('btn btn-primary', { 'hover:spin': !!onRetry })}
@@ -54,9 +55,9 @@ export default ({ title, image, message, onBack, onRetry }: Props) => (
                     </ActionButton>
                 </div>
                 }
-                <img src={image} className={'w-2/3 h-auto select-none'}/>
-                <h2 className={'mt-6 text-neutral-900 font-bold'}>{title}</h2>
-                <p className={'text-sm text-neutral-700 mt-2'}>
+                <img src={image} css={tw`w-2/3 h-auto select-none`}/>
+                <h2 css={tw`mt-6 text-neutral-900 font-bold`}>{title}</h2>
+                <p css={tw`text-sm text-neutral-700 mt-2`}>
                     {message}
                 </p>
             </div>
diff --git a/resources/scripts/components/screens/ServerError.tsx b/resources/scripts/components/screens/ServerError.tsx
index 42e82e5a5..7851cf72f 100644
--- a/resources/scripts/components/screens/ServerError.tsx
+++ b/resources/scripts/components/screens/ServerError.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import ScreenBlock from '@/components/screens/ScreenBlock';
 
 interface Props {
diff --git a/resources/scripts/components/server/Console.tsx b/resources/scripts/components/server/Console.tsx
index 54d6e9620..5deb90a6d 100644
--- a/resources/scripts/components/server/Console.tsx
+++ b/resources/scripts/components/server/Console.tsx
@@ -3,10 +3,11 @@ import { ITerminalOptions, Terminal } from 'xterm';
 import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
 import classNames from 'classnames';
+import tw from 'twin.macro';
 
 const theme = {
     background: 'transparent',
diff --git a/resources/scripts/components/server/users/EditSubuserModal.tsx b/resources/scripts/components/server/users/EditSubuserModal.tsx
index 104684f23..e37ca42d6 100644
--- a/resources/scripts/components/server/users/EditSubuserModal.tsx
+++ b/resources/scripts/components/server/users/EditSubuserModal.tsx
@@ -8,7 +8,7 @@ import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Checkbox from '@/components/elements/Checkbox';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import classNames from 'classnames';
 import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
 import { ServerContext } from '@/state/server';
@@ -17,6 +17,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
 import { useDeepMemo } from '@/plugins/useDeepMemo';
+import tw from 'twin.macro';
 
 type Props = {
     subuser?: Subuser;
@@ -82,17 +83,17 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                     'Create new subuser'
                 }
             </h3>
-            <FlashMessageRender byKey={'user:edit'} className={'mt-4'}/>
+            <FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
             {(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
-            <div className={'mt-4 pl-4 py-2 border-l-4 border-cyan-400'}>
-                <p className={'text-sm text-neutral-300'}>
+            <div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
+                <p css={tw`text-sm text-neutral-300`}>
                     Only permissions which your account is currently assigned may be selected when creating or
                     modifying other users.
                 </p>
             </div>
             }
             {!subuser &&
-            <div className={'mt-6'}>
+            <div css={tw`mt-6`}>
                 <Field
                     name={'email'}
                     label={'User Email'}
@@ -100,13 +101,13 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                 />
             </div>
             }
-            <div className={'my-6'}>
+            <div css={tw`my-6`}>
                 {Object.keys(permissions).filter(key => key !== 'websocket').map((key, index) => (
                     <TitledGreyBox
                         key={key}
                         title={
-                            <div className={'flex items-center'}>
-                                <p className={'text-sm uppercase flex-1'}>{key}</p>
+                            <div css={tw`flex items-center`}>
+                                <p css={tw`text-sm uppercase flex-1`}>{key}</p>
                                 {canEditUser && editablePermissions.indexOf(key) >= 0 &&
                                 <input
                                     type={'checkbox'}
@@ -134,7 +135,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                         }
                         className={index !== 0 ? 'mt-4' : undefined}
                     >
-                        <p className={'text-sm text-neutral-400 mb-4'}>
+                        <p css={tw`text-sm text-neutral-400 mb-4`}>
                             {permissions[key].description}
                         </p>
                         {Object.keys(permissions[key].keys).map((pkey, index) => (
@@ -146,21 +147,21 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                     disabled: !canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0,
                                 })}
                             >
-                                <div className={'p-2'}>
+                                <div css={tw`p-2`}>
                                     <Checkbox
                                         id={`permission_${key}_${pkey}`}
                                         name={'permissions'}
                                         value={`${key}.${pkey}`}
-                                        className={'w-5 h-5 mr-2'}
+                                        css={tw`w-5 h-5 mr-2`}
                                         disabled={!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0}
                                     />
                                 </div>
-                                <div className={'flex-1'}>
-                                    <span className={'input-dark-label font-medium'}>
+                                <div css={tw`flex-1`}>
+                                    <span css={tw`font-medium`} className={'input-dark-label'}>
                                         {pkey}
                                     </span>
                                     {permissions[key].keys[pkey].length > 0 &&
-                                    <p className={'text-xs text-neutral-400 mt-1'}>
+                                    <p css={tw`text-xs text-neutral-400 mt-1`}>
                                         {permissions[key].keys[pkey]}
                                     </p>
                                     }
@@ -171,7 +172,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                 ))}
             </div>
             <Can action={subuser ? 'user.update' : 'user.create'}>
-                <div className={'pb-6 flex justify-end'}>
+                <div css={tw`pb-6 flex justify-end`}>
                     <button className={'btn btn-primary btn-sm'} type={'submit'}>
                         {subuser ? 'Save' : 'Invite User'}
                     </button>
diff --git a/resources/scripts/theme.ts b/resources/scripts/theme.ts
index 8679ebaa7..9dd0b467d 100644
--- a/resources/scripts/theme.ts
+++ b/resources/scripts/theme.ts
@@ -3,8 +3,8 @@ import { BreakpointFunction, createBreakpoint } from 'styled-components-breakpoi
 type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export const breakpoint: BreakpointFunction<Breakpoints> = createBreakpoint<Breakpoints>({
     xs: 0,
-    sm: 640,
+    sm: 576,
     md: 768,
-    lg: 1024,
-    xl: 1280,
+    lg: 992,
+    xl: 1200,
 });
diff --git a/resources/styles/components/animations.css b/resources/styles/components/animations.css
index bcbd60e40..3c3689198 100644
--- a/resources/styles/components/animations.css
+++ b/resources/styles/components/animations.css
@@ -22,7 +22,7 @@ div.route-transition-group {
   @apply .relative;
 
   & section {
-    @apply .absolute .w-full .pin-t .pin-l;
+    @apply .absolute .w-full .top-0 .left-0;
   }
 }
 /*! purgecss end ignore */
diff --git a/resources/styles/components/modal.css b/resources/styles/components/modal.css
index 550191c6b..0919d9ba1 100644
--- a/resources/styles/components/modal.css
+++ b/resources/styles/components/modal.css
@@ -11,7 +11,7 @@
     }
 
     & > .modal-close-icon {
-      @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
+      @apply .absolute .right-0 .p-2 .text-white .cursor-pointer .opacity-50;
       transition: opacity 150ms linear, transform 150ms ease-in;
       top: -2rem;
 
diff --git a/tailwind.config.js b/tailwind.config.js
index ddce8410c..775ecbd27 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,9 +34,11 @@ module.exports = {
                 'monospace',
             ],
         },
-    },
-    extend: {
         colors: {
+            transparent: 'transparent',
+            black: 'hsl(210, 27%, 10%)',
+            white: '#ffffff',
+            'basically-white': '#fafafb',
             primary: {
                 50: 'hsl(202, 100%, 95%)', // lightest
                 100: 'hsl(204, 100%, 86%)', // lighter

From d93e804a3188397aa272796c868491f163a92d8a Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Jul 2020 14:50:37 -0700
Subject: [PATCH 03/55] Get server listing design working mostly correct

---
 .../scripts/assets/css/GlobalStylesheet.ts    |  20 ++++
 resources/scripts/components/App.tsx          |  34 +++---
 .../scripts/components/NavigationBar.tsx      |  61 +++++++----
 .../dashboard/DashboardContainer.tsx          |  17 +--
 .../dashboard/DesignElementsContainer.tsx     |  82 --------------
 .../components/dashboard/ServerRow.tsx        | 100 +++++++++---------
 .../components/elements/GreyRowBox.tsx        |  14 +++
 .../components/elements/PageContentBlock.tsx  |  20 ++--
 resources/scripts/routers/DashboardRouter.tsx |  10 +-
 9 files changed, 170 insertions(+), 188 deletions(-)
 create mode 100644 resources/scripts/assets/css/GlobalStylesheet.ts
 delete mode 100644 resources/scripts/components/dashboard/DesignElementsContainer.tsx
 create mode 100644 resources/scripts/components/elements/GreyRowBox.tsx

diff --git a/resources/scripts/assets/css/GlobalStylesheet.ts b/resources/scripts/assets/css/GlobalStylesheet.ts
new file mode 100644
index 000000000..72d80f583
--- /dev/null
+++ b/resources/scripts/assets/css/GlobalStylesheet.ts
@@ -0,0 +1,20 @@
+import tw from 'twin.macro';
+import { createGlobalStyle } from 'styled-components/macro';
+
+export default createGlobalStyle`
+    @import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
+    @import url('//fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
+
+    body {
+        ${tw`font-sans bg-neutral-800 text-neutral-200`};
+        letter-spacing: 0.015em;
+    }
+   
+    h1, h2, h3, h4, h5, h6 {
+        ${tw`font-medium tracking-normal font-header`};
+    }
+    
+    p {
+        ${tw`text-neutral-200 leading-snug font-sans`};
+    }
+`;
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index a90786ae0..dac7fd102 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -11,6 +11,7 @@ import { SiteSettings } from '@/state/settings';
 import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
+import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
@@ -48,21 +49,24 @@ const App = () => {
     }
 
     return (
-        <StoreProvider store={store}>
-            <Provider store={store}>
-                <ProgressBar/>
-                <div css={tw`mx-auto w-auto`}>
-                    <BrowserRouter basename={'/'} key={'root-router'}>
-                        <Switch>
-                            <Route path="/server/:id" component={ServerRouter}/>
-                            <Route path="/auth" component={AuthenticationRouter}/>
-                            <Route path="/" component={DashboardRouter}/>
-                            <Route path={'*'} component={NotFound}/>
-                        </Switch>
-                    </BrowserRouter>
-                </div>
-            </Provider>
-        </StoreProvider>
+        <>
+            <GlobalStylesheet/>
+            <StoreProvider store={store}>
+                <Provider store={store}>
+                    <ProgressBar/>
+                    <div css={tw`mx-auto w-auto`}>
+                        <BrowserRouter basename={'/'} key={'root-router'}>
+                            <Switch>
+                                <Route path="/server/:id" component={ServerRouter}/>
+                                <Route path="/auth" component={AuthenticationRouter}/>
+                                <Route path="/" component={DashboardRouter}/>
+                                <Route path={'*'} component={NotFound}/>
+                            </Switch>
+                        </BrowserRouter>
+                    </div>
+                </Provider>
+            </StoreProvider>
+        </>
     );
 };
 
diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx
index 7ff60bef0..f8213a34b 100644
--- a/resources/scripts/components/NavigationBar.tsx
+++ b/resources/scripts/components/NavigationBar.tsx
@@ -1,51 +1,76 @@
 import * as React from 'react';
 import { Link, NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLayerGroup } from '@fortawesome/free-solid-svg-icons/faLayerGroup';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons/faUserCircle';
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
-import { faSwatchbook } from '@fortawesome/free-solid-svg-icons/faSwatchbook';
-import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
+import { faCogs, faLayerGroup, faSignOutAlt, faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import * as config from '@/../../tailwind.config.js';
+
+const Navigation = styled.div`
+    ${tw`w-full bg-neutral-900 shadow-md`};
+    
+    & > div {
+        ${tw`mx-auto w-full flex items-center`};
+    }
+    
+    & #logo {
+        ${tw`flex-1`};
+        
+        & > a {
+            ${tw`text-2xl font-header px-4 no-underline text-neutral-200 hover:text-neutral-100 transition-colors duration-150`};
+        }
+    }
+`;
+
+const RightNavigation = styled.div`
+    ${tw`flex h-full items-center justify-center`};
+    
+    & > a, & > .navigation-link {
+        ${tw`flex items-center h-full no-underline text-neutral-300 px-6 cursor-pointer transition-all duration-150`};
+        
+        &:active, &:hover {
+            ${tw`text-neutral-100 bg-black`};
+        }
+        
+        &:active, &:hover, &.active {
+            box-shadow: inset 0 -2px ${config.theme.colors.cyan['700']};
+        }
+    }
+`;
 
 export default () => {
     const user = useStoreState((state: ApplicationStore) => state.user.data!);
     const name = useStoreState((state: ApplicationStore) => state.settings.data!.name);
 
     return (
-        <div id={'navigation'}>
-            <div className={'mx-auto w-full flex items-center'} style={{ maxWidth: '1200px', height: '3.5rem' }}>
+        <Navigation>
+            <div css={tw`mx-auto w-full flex items-center`} style={{ maxWidth: '1200px', height: '3.5rem' }}>
                 <div id={'logo'}>
                     <Link to={'/'}>
                         {name}
                     </Link>
                 </div>
-                <div className={'right-navigation'}>
+                <RightNavigation>
                     <SearchContainer/>
-                    <NavLink to={'/'} exact={true}>
+                    <NavLink to={'/'} exact>
                         <FontAwesomeIcon icon={faLayerGroup}/>
                     </NavLink>
                     <NavLink to={'/account'}>
                         <FontAwesomeIcon icon={faUserCircle}/>
                     </NavLink>
                     {user.rootAdmin &&
-                    <a href={'/admin'} target={'_blank'}>
+                    <a href={'/admin'} target={'_blank'} rel={'noreferrer'}>
                         <FontAwesomeIcon icon={faCogs}/>
                     </a>
                     }
-                    {process.env.NODE_ENV !== 'production' &&
-                    <NavLink to={'/design'}>
-                        <FontAwesomeIcon icon={faSwatchbook}/>
-                    </NavLink>
-                    }
                     <a href={'/auth/logout'}>
                         <FontAwesomeIcon icon={faSignOutAlt}/>
                     </a>
-                </div>
+                </RightNavigation>
             </div>
-        </div>
+        </Navigation>
     );
 };
diff --git a/resources/scripts/components/dashboard/DashboardContainer.tsx b/resources/scripts/components/dashboard/DashboardContainer.tsx
index ad8f30d6f..6daf78f0d 100644
--- a/resources/scripts/components/dashboard/DashboardContainer.tsx
+++ b/resources/scripts/components/dashboard/DashboardContainer.tsx
@@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import { useStoreState } from 'easy-peasy';
 import { usePersistedState } from '@/plugins/usePersistedState';
 import Switch from '@/components/elements/Switch';
+import tw from 'twin.macro';
 
 export default () => {
     const { addError, clearFlashes } = useFlash();
@@ -37,10 +38,10 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender className={'mb-4'}/>
+            <FlashMessageRender css={tw`mb-4`}/>
             {rootAdmin &&
-            <div className={'mb-2 flex justify-end items-center'}>
-                <p className={'uppercase text-xs text-neutral-400 mr-2'}>
+            <div css={tw`mb-2 flex justify-end items-center`}>
+                <p css={tw`uppercase text-xs text-neutral-400 mr-2`}>
                     {showAdmin ? 'Showing all servers' : 'Showing your servers'}
                 </p>
                 <Switch
@@ -51,14 +52,16 @@ export default () => {
             </div>
             }
             {loading ?
-                <Spinner centered={true} size={'large'}/>
+                <Spinner centered size={'large'}/>
                 :
                 servers.length > 0 ?
-                    servers.map(server => (
-                        <ServerRow key={server.uuid} server={server} className={'mt-2'}/>
+                    servers.map((server, index) => (
+                        <div key={server.uuid} css={index > 0 ? tw`mt-2` : undefined}>
+                            <ServerRow server={server}/>
+                        </div>
                     ))
                     :
-                    <p className={'text-center text-sm text-neutral-400'}>
+                    <p css={tw`text-center text-sm text-neutral-400`}>
                         There are no servers associated with your account.
                     </p>
             }
diff --git a/resources/scripts/components/dashboard/DesignElementsContainer.tsx b/resources/scripts/components/dashboard/DesignElementsContainer.tsx
deleted file mode 100644
index 1e9747868..000000000
--- a/resources/scripts/components/dashboard/DesignElementsContainer.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import ContentBox from '@/components/elements/ContentBox';
-
-export default class DesignElementsContainer extends React.PureComponent {
-    render () {
-        return (
-            <React.Fragment>
-                <div className={'my-10'}>
-                    <div className={'flex'}>
-                        <ContentBox
-                            className={'flex-1 mr-4'}
-                            title={'A Special Announcement'}
-                            borderColor={'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>
-                            <p><Link to={'/'}>Back</Link></p>
-                        </ContentBox>
-                        <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={'input-dark'}/>
-                                <p className={'input-help'}>
-                                    This is some descriptive helper text to explain how things work.
-                                </p>
-                                <div className={'mt-6'}/>
-                                <label className={'uppercase text-neutral-200'}>Username</label>
-                                <input type={'text'} className={'input-dark error'}/>
-                                <p className={'input-help'}>
-                                    This field has an error.
-                                </p>
-                                <div className={'mt-6'}/>
-                                <label className={'uppercase text-neutral-200'}>Disabled Field</label>
-                                <input type={'text'} className={'input-dark'} disabled={true}/>
-                                <div className={'mt-6'}/>
-                                <label className={'uppercase text-neutral-200'}>Select</label>
-                                <select className={'input-dark'}>
-                                    <option>Option 1</option>
-                                    <option>Option 2</option>
-                                    <option>Option 3</option>
-                                </select>
-                                <div className={'mt-6'}/>
-                                <label className={'uppercase text-neutral-200'}>Textarea</label>
-                                <textarea className={'input-dark h-32'}></textarea>
-                                <div className={'mt-6'}/>
-                                <button className={'btn btn-primary btn-sm'}>
-                                    Blue
-                                </button>
-                                <button className={'btn btn-grey btn-sm ml-2'}>
-                                    Grey
-                                </button>
-                                <button className={'btn btn-green btn-sm ml-2'}>
-                                    Green
-                                </button>
-                                <button className={'btn btn-red btn-sm ml-2'}>
-                                    Red
-                                </button>
-                                <div className={'mt-6'}/>
-                                <button className={'btn btn-secondary btn-sm'}>
-                                    Secondary
-                                </button>
-                                <button className={'btn btn-secondary btn-red btn-sm ml-2'}>
-                                    Secondary Danger
-                                </button>
-                                <div className={'mt-6'}/>
-                                <button className={'btn btn-primary btn-lg'}>
-                                    Large
-                                </button>
-                                <button className={'btn btn-primary btn-xs ml-2'}>
-                                    Tiny
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </React.Fragment>
-        );
-    }
-}
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index a212bce0c..89233728a 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -11,6 +11,8 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage';
 import { bytesToHuman } from '@/helpers';
 import classNames from 'classnames';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 // Determines if the current value is in an alarm threshold so we can show it in red rather
 // than the more faded default style.
@@ -20,7 +22,7 @@ const isAlarmState = (current: number, limit: number): boolean => {
     return current / limitInBytes >= 0.90;
 };
 
-export default ({ server, className }: { server: Server; className: string | undefined }) => {
+export default ({ server }: { server: Server }) => {
     const interval = useRef<number>(null);
     const [ stats, setStats ] = useState<ServerStats | null>(null);
     const [ statsError, setStatsError ] = useState(false);
@@ -37,7 +39,6 @@ export default ({ server, className }: { server: Server; className: string | und
 
     useEffect(() => {
         getStats().then(() => {
-            // @ts-ignore
             interval.current = setInterval(() => getStats(), 20000);
         });
 
@@ -52,21 +53,21 @@ export default ({ server, className }: { server: Server; className: string | und
         alarms.memory = isAlarmState(stats.memoryUsageInBytes, server.limits.memory);
         alarms.disk = server.limits.disk === 0 ? false : isAlarmState(stats.diskUsageInBytes, server.limits.disk);
     }
-    const disklimit = server.limits.disk != 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : "Unlimited";
-    const memorylimit = server.limits.memory != 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : "Unlimited";
+    const disklimit = server.limits.disk !== 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited';
+    const memorylimit = server.limits.memory !== 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited';
 
     return (
-        <Link to={`/server/${server.id}`} className={`grey-row-box cursor-pointer ${className}`}>
+        <GreyRowBox as={Link} to={`/server/${server.id}`}>
             <div className={'icon'}>
                 <FontAwesomeIcon icon={faServer}/>
             </div>
-            <div className={'flex-1 ml-4'}>
-                <p className={'text-lg'}>{server.name}</p>
+            <div css={tw`flex-1 ml-4`}>
+                <p css={tw`text-lg`}>{server.name}</p>
             </div>
-            <div className={'w-1/4 overflow-hidden'}>
-                <div className={'flex ml-4'}>
-                    <FontAwesomeIcon icon={faEthernet} className={'text-neutral-500'}/>
-                    <p className={'text-sm text-neutral-400 ml-2'}>
+            <div css={tw`w-1/4 overflow-hidden`}>
+                <div css={tw`flex ml-4`}>
+                    <FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
+                    <p css={tw`text-sm text-neutral-400 ml-2`}>
                         {
                             server.allocations.filter(alloc => alloc.default).map(allocation => (
                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
@@ -75,85 +76,88 @@ export default ({ server, className }: { server: Server; className: string | und
                     </p>
                 </div>
             </div>
-            <div className={'w-1/3 flex items-baseline relative'}>
+            <div css={tw`w-1/3 flex items-baseline relative`}>
                 {!stats ?
                     !statsError ?
                         <SpinnerOverlay size={'tiny'} visible={true} backgroundOpacity={0.25}/>
                         :
                         server.isInstalling ?
-                            <div className={'flex-1 text-center'}>
-                                <span className={'bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs'}>
+                            <div css={tw`flex-1 text-center`}>
+                                <span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
                                     Installing
                                 </span>
                             </div>
                             :
-                            <div className={'flex-1 text-center'}>
-                                <span className={'bg-red-500 rounded px-2 py-1 text-red-100 text-xs'}>
+                            <div css={tw`flex-1 text-center`}>
+                                <span css={tw`bg-red-500 rounded px-2 py-1 text-red-100 text-xs`}>
                                     {server.isSuspended ? 'Suspended' : 'Connection Error'}
                                 </span>
                             </div>
                     :
                     <React.Fragment>
-                        <div className={'flex-1 flex ml-4 justify-center'}>
+                        <div css={tw`flex-1 flex ml-4 justify-center`}>
                             <FontAwesomeIcon
                                 icon={faMicrochip}
-                                className={classNames({
-                                    'text-neutral-500': !alarms.cpu,
-                                    'text-red-400': alarms.cpu,
-                                })}
+                                css={[
+                                    !alarms.cpu && tw`text-neutral-500`,
+                                    alarms.cpu && tw`text-red-400`,
+                                ]}
                             />
                             <p
-                                className={classNames('text-sm ml-2', {
-                                    'text-neutral-400': !alarms.cpu,
-                                    'text-white': alarms.cpu,
-                                })}
+                                css={[
+                                    tw`text-sm ml-2`,
+                                    !alarms.cpu && tw`text-neutral-400`,
+                                    alarms.cpu && tw`text-white`,
+                                ]}
                             >
                                 {stats.cpuUsagePercent} %
                             </p>
                         </div>
-                        <div className={'flex-1 ml-4'}>
-                            <div className={'flex justify-center'}>
+                        <div css={tw`flex-1 ml-4`}>
+                            <div css={tw`flex justify-center`}>
                                 <FontAwesomeIcon
                                     icon={faMemory}
-                                    className={classNames({
-                                        'text-neutral-500': !alarms.memory,
-                                        'text-red-400': alarms.memory,
-                                    })}
+                                    css={[
+                                        !alarms.memory && tw`text-neutral-500`,
+                                        alarms.memory && tw`text-red-400`,
+                                    ]}
                                 />
                                 <p
-                                    className={classNames('text-sm ml-2', {
-                                        'text-neutral-400': !alarms.memory,
-                                        'text-white': alarms.memory,
-                                    })}
+                                    css={[
+                                        tw`text-sm ml-2`,
+                                        !alarms.memory && tw`text-neutral-400`,
+                                        alarms.memory && tw`text-white`,
+                                    ]}
                                 >
                                     {bytesToHuman(stats.memoryUsageInBytes)}
                                 </p>
                             </div>
-                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {memorylimit}</p>
+                            <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {memorylimit}</p>
                         </div>
-                        <div className={'flex-1 ml-4'}>
-                            <div className={'flex justify-center'}>
+                        <div css={tw`flex-1 ml-4`}>
+                            <div css={tw`flex justify-center`}>
                                 <FontAwesomeIcon
                                     icon={faHdd}
-                                    className={classNames({
-                                        'text-neutral-500': !alarms.disk,
-                                        'text-red-400': alarms.disk,
-                                    })}
+                                    css={[
+                                        !alarms.disk && tw`text-neutral-500`,
+                                        alarms.disk && tw`text-red-400`,
+                                    ]}
                                 />
                                 <p
-                                    className={classNames('text-sm ml-2', {
-                                        'text-neutral-400': !alarms.disk,
-                                        'text-white': alarms.disk,
-                                    })}
+                                    css={[
+                                        tw`text-sm ml-2`,
+                                        !alarms.disk && tw`text-neutral-400`,
+                                        alarms.disk && tw`text-white`,
+                                    ]}
                                 >
                                     {bytesToHuman(stats.diskUsageInBytes)}
                                 </p>
                             </div>
-                            <p className={'text-xs text-neutral-600 text-center mt-1'}>of {disklimit}</p>
+                            <p css={tw`text-xs text-neutral-600 text-center mt-1`}>of {disklimit}</p>
                         </div>
                     </React.Fragment>
                 }
             </div>
-        </Link>
+        </GreyRowBox>
     );
 };
diff --git a/resources/scripts/components/elements/GreyRowBox.tsx b/resources/scripts/components/elements/GreyRowBox.tsx
new file mode 100644
index 000000000..e33dae6ca
--- /dev/null
+++ b/resources/scripts/components/elements/GreyRowBox.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+
+export default styled.div`
+    ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
+    
+    &:not(.no-hover):hover {
+        ${tw`border-neutral-500`};
+    }
+
+    & > div.icon {
+        ${tw`rounded-full bg-neutral-500 p-3`};
+    }
+`;
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 87d9d3d34..656facf95 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -1,26 +1,22 @@
 import React from 'react';
 import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
+import tw from 'twin.macro';
 
-interface Props {
-    children: React.ReactNode;
-    className?: string;
-}
-
-export default ({ className, children }: Props) => (
-    <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
+export default ({ children }): React.FC => (
+    <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
-            <ContentContainer className={`my-10 ${className}`}>
+            <ContentContainer css={tw`my-10`}>
                 {children}
             </ContentContainer>
-            <ContentContainer className={'mb-4'}>
-                <p className={'text-center text-neutral-500 text-xs'}>
+            <ContentContainer css={tw`mb-4`}>
+                <p css={tw`text-center text-neutral-500 text-xs`}>
                     &copy; 2015 - 2020&nbsp;
                     <a
-                        rel={'noopener nofollow'}
+                        rel={'noopener nofollow noreferrer'}
                         href={'https://pterodactyl.io'}
                         target={'_blank'}
-                        className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                        css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
                     >
                         Pterodactyl Software
                     </a>
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index 1e1de404d..f0a78a183 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
-import DesignElementsContainer from '@/components/dashboard/DesignElementsContainer';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
@@ -9,13 +8,13 @@ import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
 
 export default ({ location }: RouteComponentProps) => (
-    <React.Fragment>
+    <>
         <NavigationBar/>
         {location.pathname.startsWith('/account') &&
         <div id={'sub-navigation'}>
             <div className={'items'}>
-                <NavLink to={`/account`} exact>Settings</NavLink>
-                <NavLink to={`/account/api`}>API Credentials</NavLink>
+                <NavLink to={'/account'} exact>Settings</NavLink>
+                <NavLink to={'/account/api'}>API Credentials</NavLink>
             </div>
         </div>
         }
@@ -24,9 +23,8 @@ export default ({ location }: RouteComponentProps) => (
                 <Route path={'/'} component={DashboardContainer} exact/>
                 <Route path={'/account'} component={AccountOverviewContainer} exact/>
                 <Route path={'/account/api'} component={AccountApiContainer} exact/>
-                <Route path={'/design'} component={DesignElementsContainer}/>
                 <Route path={'*'} component={NotFound}/>
             </Switch>
         </TransitionRouter>
-    </React.Fragment>
+    </>
 );

From 7cea5e630cf20c52ac776a28a476eff734ca0554 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Jul 2020 14:51:40 -0700
Subject: [PATCH 04/55] Temporary hack to get fonts working

---
 resources/scripts/assets/css/GlobalStylesheet.ts | 3 ---
 resources/views/templates/wrapper.blade.php      | 4 ++++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/scripts/assets/css/GlobalStylesheet.ts b/resources/scripts/assets/css/GlobalStylesheet.ts
index 72d80f583..9cdfecfe6 100644
--- a/resources/scripts/assets/css/GlobalStylesheet.ts
+++ b/resources/scripts/assets/css/GlobalStylesheet.ts
@@ -2,9 +2,6 @@ import tw from 'twin.macro';
 import { createGlobalStyle } from 'styled-components/macro';
 
 export default createGlobalStyle`
-    @import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
-    @import url('//fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
-
     body {
         ${tw`font-sans bg-neutral-800 text-neutral-200`};
         letter-spacing: 0.015em;
diff --git a/resources/views/templates/wrapper.blade.php b/resources/views/templates/wrapper.blade.php
index b8d10e506..333a0f986 100644
--- a/resources/views/templates/wrapper.blade.php
+++ b/resources/views/templates/wrapper.blade.php
@@ -30,6 +30,10 @@
                 </script>
             @endif
         @show
+        <style>
+            @import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
+            @import url('//fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
+        </style>
 
         @section('assets')
 {{--            {!! $asset->css('main.css') !!}--}}

From e8755ac5985aecc35d8d94c579c45642f91cb1d8 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 3 Jul 2020 15:37:26 -0700
Subject: [PATCH 05/55] Kind of get account stuff working; IDE is throwing a
 fit right now

---
 .../scripts/assets/css/GlobalStylesheet.ts    | 18 ++++
 .../forms/ConfigureTwoFactorForm.tsx          | 26 ++---
 .../forms/UpdateEmailAddressForm.tsx          | 12 ++-
 .../dashboard/forms/UpdatePasswordForm.tsx    | 15 +--
 .../scripts/components/elements/Button.tsx    | 97 +++++++++++++++++--
 .../components/elements/ContentBox.tsx        | 17 ++--
 resources/scripts/routers/DashboardRouter.tsx | 34 ++++++-
 7 files changed, 176 insertions(+), 43 deletions(-)

diff --git a/resources/scripts/assets/css/GlobalStylesheet.ts b/resources/scripts/assets/css/GlobalStylesheet.ts
index 9cdfecfe6..5cc44cea6 100644
--- a/resources/scripts/assets/css/GlobalStylesheet.ts
+++ b/resources/scripts/assets/css/GlobalStylesheet.ts
@@ -14,4 +14,22 @@ export default createGlobalStyle`
     p {
         ${tw`text-neutral-200 leading-snug font-sans`};
     }
+    
+    form {
+        ${tw`m-0`};
+    }
+        
+    textarea, select, input, button, button:focus, button:focus-visible {
+        ${tw`outline-none`};
+    }
+
+    input[type=number]::-webkit-outer-spin-button,
+    input[type=number]::-webkit-inner-spin-button {
+        -webkit-appearance: none !important;
+        margin: 0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield !important;
+    }
 `;
diff --git a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
index dc6b467a6..f848b633d 100644
--- a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
+++ b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
@@ -3,6 +3,8 @@ import { useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import SetupTwoFactorModal from '@/components/dashboard/forms/SetupTwoFactorModal';
 import DisableTwoFactorModal from '@/components/dashboard/forms/DisableTwoFactorModal';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 export default () => {
     const user = useStoreState((state: ApplicationStore) => state.user.data!);
@@ -17,38 +19,40 @@ export default () => {
                 onDismissed={() => setVisible(false)}
             />
             }
-            <p className={'text-sm'}>
+            <p css={tw`text-sm`}>
                 Two-factor authentication is currently enabled on your account.
             </p>
-            <div className={'mt-6'}>
-                <button
+            <div css={tw`mt-6`}>
+                <Button
+                    color={'red'}
+                    isSecondary
                     onClick={() => setVisible(true)}
-                    className={'btn btn-red btn-secondary btn-sm'}
                 >
                     Disable
-                </button>
+                </Button>
             </div>
         </div>
         :
         <div>
             {visible &&
             <SetupTwoFactorModal
-                appear={true}
+                appear
                 visible={visible}
                 onDismissed={() => setVisible(false)}
             />
             }
-            <p className={'text-sm'}>
+            <p css={tw`text-sm`}>
                 You do not currently have two-factor authentication enabled on your account. Click
                 the button below to begin configuring it.
             </p>
-            <div className={'mt-6'}>
-                <button
+            <div css={tw`mt-6`}>
+                <Button
+                    color={'green'}
+                    isSecondary
                     onClick={() => setVisible(true)}
-                    className={'btn btn-green btn-secondary btn-sm'}
                 >
                     Begin Setup
-                </button>
+                </Button>
             </div>
         </div>
     ;
diff --git a/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx b/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
index 2563e1386..547cb26ce 100644
--- a/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdateEmailAddressForm.tsx
@@ -6,6 +6,8 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
 import { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     email: string;
@@ -54,14 +56,14 @@ export default () => {
                 ({ isSubmitting, isValid }) => (
                     <React.Fragment>
                         <SpinnerOverlay size={'large'} visible={isSubmitting}/>
-                        <Form className={'m-0'}>
+                        <Form css={tw`m-0`}>
                             <Field
                                 id={'current_email'}
                                 type={'email'}
                                 name={'email'}
                                 label={'Email'}
                             />
-                            <div className={'mt-6'}>
+                            <div css={tw`mt-6`}>
                                 <Field
                                     id={'confirm_password'}
                                     type={'password'}
@@ -69,10 +71,10 @@ export default () => {
                                     label={'Confirm Password'}
                                 />
                             </div>
-                            <div className={'mt-6'}>
-                                <button className={'btn btn-sm btn-primary'} disabled={isSubmitting || !isValid}>
+                            <div css={tw`mt-6`}>
+                                <Button size={'small'} disabled={isSubmitting || !isValid}>
                                     Update Email
-                                </button>
+                                </Button>
                             </div>
                         </Form>
                     </React.Fragment>
diff --git a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
index 17809b496..e8fe075e2 100644
--- a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
@@ -7,6 +7,8 @@ import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import updateAccountPassword from '@/api/account/updateAccountPassword';
 import { httpErrorToHuman } from '@/api/http';
 import { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     current: string;
@@ -34,7 +36,6 @@ export default () => {
         clearFlashes('account:password');
         updateAccountPassword({ ...values })
             .then(() => {
-                // @ts-ignore
                 window.location = '/auth/login';
             })
             .catch(error => addFlash({
@@ -57,14 +58,14 @@ export default () => {
                     ({ isSubmitting, isValid }) => (
                         <React.Fragment>
                             <SpinnerOverlay size={'large'} visible={isSubmitting}/>
-                            <Form className={'m-0'}>
+                            <Form css={tw`m-0`}>
                                 <Field
                                     id={'current_password'}
                                     type={'password'}
                                     name={'current'}
                                     label={'Current Password'}
                                 />
-                                <div className={'mt-6'}>
+                                <div css={tw`mt-6`}>
                                     <Field
                                         id={'new_password'}
                                         type={'password'}
@@ -73,7 +74,7 @@ export default () => {
                                         description={'Your new password should be at least 8 characters in length and unique to this website.'}
                                     />
                                 </div>
-                                <div className={'mt-6'}>
+                                <div css={tw`mt-6`}>
                                     <Field
                                         id={'confirm_password'}
                                         type={'password'}
@@ -81,10 +82,10 @@ export default () => {
                                         label={'Confirm New Password'}
                                     />
                                 </div>
-                                <div className={'mt-6'}>
-                                    <button className={'btn btn-primary btn-sm'} disabled={isSubmitting || !isValid}>
+                                <div css={tw`mt-6`}>
+                                    <Button size={'small'} disabled={isSubmitting || !isValid}>
                                         Update Password
-                                    </button>
+                                    </Button>
                                 </div>
                             </Form>
                         </React.Fragment>
diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index 04bb13a81..1450e2e91 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -1,20 +1,97 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
 
-type Props = { isLoading?: boolean } & React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+interface Props {
+    isLoading?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+    color?: 'green' | 'red' | 'primary' | 'grey';
+    isSecondary?: boolean;
+    disabled?: boolean;
+}
 
-export default ({ isLoading, children, className, ...props }: Props) => (
-    <button
-        {...props}
-        className={classNames('btn btn-sm relative', className)}
-    >
+const StyledButton = styled.button<Props>`
+    ${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
+    
+        ${props => props.isSecondary && css<Props>`
+        ${tw`border border-neutral-600 bg-transparent text-neutral-200`};
+        
+        &:hover:not(:disabled) {
+            ${tw`border-neutral-500 text-neutral-100`};
+            ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
+            ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
+        }
+    `};
+    
+    ${props => (!props.color || props.color === 'primary') && css<Props>`
+        ${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-primary-600 border-primary-700`};
+        }
+    `};
+    
+    ${props => props.color === 'grey' && css`
+        ${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-neutral-600 border-neutral-700`};
+        }
+    `};
+    
+    ${props => props.color === 'green' && css<Props>`
+        ${tw`border border-green-600 bg-green-500 text-green-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-green-600 border-green-700`};
+        }
+        
+        ${props => props.isSecondary && css`
+            &:active:not(:disabled) {
+                ${tw`bg-green-600 border-green-700`};
+            }
+        `};
+    `};
+    
+    ${props => props.color === 'red' && css<Props>`
+        ${tw`border border-red-600 bg-red-500 text-red-50`};
+        
+        &:hover:not(:disabled) {
+            ${tw`bg-red-600 border-red-700`};
+        }
+        
+        ${props => props.isSecondary && css`
+            &:active:not(:disabled) {
+                ${tw`bg-red-600 border-red-700`};
+            }
+        `};
+    `};
+    
+    ${props => props.size === 'xsmall' && tw`p-2 text-xs`};
+    ${props => (!props.size || props.size === 'small') && tw`p-3`};
+    ${props => props.size === 'large' && tw`p-4 text-sm`};
+    ${props => props.size === 'xlarge' && tw`p-4 w-full`};
+    
+    &:disabled { opacity: 0.55; cursor: default }
+    
+    ${props => props.disabled && css`opacity: 0.55; cursor: default`};
+
+`;
+
+type ComponentProps = Props &
+    Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof Props>;
+
+const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
+    <StyledButton {...props}>
         {isLoading &&
-        <div className={'w-full flex absolute justify-center'} style={{ marginLeft: '-0.75rem' }}>
+        <div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
             <div className={'spinner-circle spinner-white spinner-sm'}/>
         </div>
         }
-        <span className={isLoading ? 'text-transparent' : undefined}>
+        <span css={isLoading && tw`text-transparent`}>
             {children}
         </span>
-    </button>
+    </StyledButton>
 );
+
+export default Button;
diff --git a/resources/scripts/components/elements/ContentBox.tsx b/resources/scripts/components/elements/ContentBox.tsx
index 94c9ad629..4eb777c03 100644
--- a/resources/scripts/components/elements/ContentBox.tsx
+++ b/resources/scripts/components/elements/ContentBox.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import React from 'react';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import tw from 'twin.macro';
 
 type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     title?: string;
@@ -12,16 +12,19 @@ type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElemen
 
 const ContentBox = ({ title, borderColor, showFlashes, showLoadingOverlay, children, ...props }: Props) => (
     <div {...props}>
-        {title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
+        {title && <h2 css={tw`text-neutral-300 mb-4 px-4 text-2xl`}>{title}</h2>}
         {showFlashes &&
         <FlashMessageRender
             byKey={typeof showFlashes === 'string' ? showFlashes : undefined}
-            className={'mb-4'}
+            css={tw`mb-4`}
         />
         }
-        <div className={classNames('bg-neutral-700 p-4 rounded shadow-lg relative', borderColor, {
-            'border-t-4': !!borderColor,
-        })}>
+        <div
+            css={[
+                tw`bg-neutral-700 p-4 rounded shadow-lg relative`,
+                !!borderColor && tw`border-t-4`,
+            ]}
+        >
             <SpinnerOverlay visible={showLoadingOverlay || false}/>
             {children}
         </div>
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index f0a78a183..7e8f476a2 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -6,17 +6,45 @@ import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import TransitionRouter from '@/TransitionRouter';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import config from '@/../../tailwind.config.js';
+
+const SubNavigation = styled.div`
+    ${tw`w-full bg-neutral-700 shadow`};
+    
+    & > div {
+        ${tw`flex items-center text-sm mx-auto px-2`};
+        max-width: 1200px;
+        
+        & > a, & > div {
+            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
+            
+            &:not(:first-of-type) {
+                ${tw`ml-2`};
+            }
+            
+            &:active, &:hover {
+                ${tw`text-neutral-100`};
+            }
+            
+            &:active, &:hover, &.active {
+                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
+            }
+        }
+    }
+`;
 
 export default ({ location }: RouteComponentProps) => (
     <>
         <NavigationBar/>
         {location.pathname.startsWith('/account') &&
-        <div id={'sub-navigation'}>
-            <div className={'items'}>
+        <SubNavigation>
+            <div>
                 <NavLink to={'/account'} exact>Settings</NavLink>
                 <NavLink to={'/account/api'}>API Credentials</NavLink>
             </div>
-        </div>
+        </SubNavigation>
         }
         <TransitionRouter>
             <Switch location={location}>

From baf35be8e8a98a455653d58bc313487c9fc249cf Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 09:13:41 -0700
Subject: [PATCH 06/55] Update fields to have a custom component

---
 package.json                                  |  2 +-
 resources/scripts/.eslintrc.yml               |  1 +
 .../dashboard/forms/UpdatePasswordForm.tsx    |  1 +
 .../scripts/components/elements/Field.tsx     |  8 ++--
 .../scripts/components/elements/Input.tsx     | 46 +++++++++++++++++++
 resources/scripts/macros.d.ts                 | 26 ++++++++++-
 tsconfig.json                                 |  3 ++
 yarn.lock                                     | 10 ++--
 8 files changed, 87 insertions(+), 10 deletions(-)
 create mode 100644 resources/scripts/components/elements/Input.tsx

diff --git a/package.json b/package.json
index b5afadc25..e836b2dd4 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
         "@types/react-transition-group": "^2.9.2",
-        "@types/styled-components": "^4.4.0",
+        "@types/styled-components": "^5.1.0",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
         "@types/yup": "^0.29.3",
diff --git a/resources/scripts/.eslintrc.yml b/resources/scripts/.eslintrc.yml
index 3d5a324c1..2d77a9d90 100644
--- a/resources/scripts/.eslintrc.yml
+++ b/resources/scripts/.eslintrc.yml
@@ -48,6 +48,7 @@ rules:
   "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
+  "@typescript-eslint/ban-ts-comment": 0
   # @todo this would be nice to have, but don't want to deal with the warning spam at the moment.
   "@typescript-eslint/explicit-module-boundary-types": 0
   no-restricted-imports:
diff --git a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
index e8fe075e2..72a95b200 100644
--- a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
@@ -36,6 +36,7 @@ export default () => {
         clearFlashes('account:password');
         updateAccountPassword({ ...values })
             .then(() => {
+                // @ts-ignore
                 window.location = '/auth/login';
             })
             .catch(error => addFlash({
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index feb819b47..cb329d981 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/resources/scripts/components/elements/Field.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import classNames from 'classnames';
+import Input from '@/components/elements/Input';
 
 interface OwnProps {
     name: string;
@@ -20,13 +21,12 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
                     {label &&
                     <label htmlFor={id} className={light ? undefined : 'input-dark-label'}>{label}</label>
                     }
-                    <input
+                    <Input
                         id={id}
                         {...field}
                         {...props}
-                        className={classNames((className || (light ? 'input' : 'input-dark')), {
-                            error: touched[field.name] && errors[field.name],
-                        })}
+                        isLight={light}
+                        hasError={!!(touched[field.name] && errors[field.name])}
                     />
                     {touched[field.name] && errors[field.name] ?
                         <p className={'input-help error'}>
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
new file mode 100644
index 000000000..a0f412c7e
--- /dev/null
+++ b/resources/scripts/components/elements/Input.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
+
+export interface Props {
+    isLight?: boolean;
+    hasError?: boolean;
+}
+
+const light = css<Props>`
+    ${tw`bg-white border-neutral-200 text-neutral-800`};    
+    &:focus { ${tw`border-primary-400`} }
+        
+    &:disabled {
+        ${tw`bg-neutral-100 border-neutral-200`};
+    }
+`;
+
+const Input = styled.input<Props>`
+    // Reset to normal styling.
+    ${tw`appearance-none w-full min-w-0`};
+    ${tw`p-3 border rounded text-sm transition-all duration-150`};
+    ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
+    
+    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
+    & + .input-help {
+        ${tw`mt-1 text-xs`};
+        ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
+    }
+    
+    &:required, &:invalid {
+        ${tw`shadow-none`};
+    }
+    
+    &:focus {
+        ${tw`shadow-md border-neutral-400`};
+    }
+
+    &:disabled {
+        ${tw`opacity-75`};
+    }
+    
+    ${props => props.isLight && light};
+`;
+
+export default Input;
diff --git a/resources/scripts/macros.d.ts b/resources/scripts/macros.d.ts
index ed1d170d9..720aa9d29 100644
--- a/resources/scripts/macros.d.ts
+++ b/resources/scripts/macros.d.ts
@@ -1,4 +1,28 @@
 // This allows the use of css={} on JSX elements.
 //
 // @see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245
-import {} from 'styled-components/cssprop';
+//
+// This is just the contents of the @types/styled-components/cssprop.d.ts file
+// since using the other method of just importing the one file did not work
+// correctly for some reason.
+// noinspection ES6UnusedImports
+import {} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { CSSProp } from 'styled-components';
+
+declare module 'react' {
+    interface Attributes {
+        // NOTE: unlike the plain javascript version, it is not possible to get access
+        // to the element's own attributes inside function interpolations.
+        // Only theme will be accessible, and only with the DefaultTheme due to the global
+        // nature of this declaration.
+        // If you are writing this inline you already have access to all the attributes anyway,
+        // no need for the extra indirection.
+        /**
+         * If present, this React element will be converted by
+         * `babel-plugin-styled-components` into a styled component
+         * with the given css as its styles.
+         */
+        css?: CSSProp;
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 1d48fc78b..3c8edb202 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,5 +26,8 @@
   },
   "include": [
     "./resources/scripts/**/*"
+  ],
+  "exclude": [
+    "/node_modules/"
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index 544a1cabf..54098ef2a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -971,7 +971,7 @@
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
   dependencies:
@@ -1090,10 +1090,12 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/styled-components@^4.4.0":
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.4.0.tgz#15a3d59533fd3a5bd013db4a7c4422ec542c59d2"
+"@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==
   dependencies:
+    "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
     "@types/react-native" "*"
     csstype "^2.2.0"

From bcf0a0586d206fa8707916d62c01db3238a186d3 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 09:28:03 -0700
Subject: [PATCH 07/55] Support textareas and cleanup API page

---
 .../dashboard/AccountApiContainer.tsx         | 42 ++++++++++---------
 .../dashboard/forms/CreateApiKeyForm.tsx      | 34 +++++++--------
 .../scripts/components/elements/Input.tsx     |  6 ++-
 .../components/elements/PageContentBlock.tsx  |  4 +-
 tailwind.config.js                            |  8 ++++
 5 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index 3d952ac2f..d478f26ac 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -14,6 +14,8 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import { httpErrorToHuman } from '@/api/http';
 import format from 'date-fns/format';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 export default () => {
     const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
@@ -48,18 +50,18 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'account'} className={'mb-4'}/>
-            <div className={'flex'}>
-                <ContentBox title={'Create API Key'} className={'flex-1'}>
+            <FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
+            <div css={tw`flex`}>
+                <ContentBox title={'Create API Key'} css={tw`flex-1`}>
                     <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
                 </ContentBox>
-                <ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
+                <ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
                     <SpinnerOverlay visible={loading}/>
                     {deleteIdentifier &&
                     <ConfirmationModal
+                        visible
                         title={'Confirm key deletion'}
                         buttonText={'Yes, delete key'}
-                        visible={true}
                         onConfirmed={() => {
                             doDeletion(deleteIdentifier);
                             setDeleteIdentifier('');
@@ -72,38 +74,38 @@ export default () => {
                     }
                     {
                         keys.length === 0 ?
-                            <p className={'text-center text-sm'}>
+                            <p css={tw`text-center text-sm`}>
                                 {loading ? 'Loading...' : 'No API keys exist for this account.'}
                             </p>
                             :
-                            keys.map(key => (
-                                <div
+                            keys.map((key, index) => (
+                                <GreyRowBox
                                     key={key.identifier}
-                                    className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}
+                                    css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
                                 >
-                                    <FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
-                                    <div className={'ml-4 flex-1'}>
-                                        <p className={'text-sm'}>{key.description}</p>
-                                        <p className={'text-2xs text-neutral-300 uppercase'}>
-                                            Last
-                                            used: {key.lastUsedAt ? format(key.lastUsedAt, 'MMM Do, YYYY HH:mm') : 'Never'}
+                                    <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
+                                    <div css={tw`ml-4 flex-1`}>
+                                        <p css={tw`text-sm`}>{key.description}</p>
+                                        <p css={tw`text-2xs text-neutral-300 uppercase`}>
+                                            Last used:&nbsp;
+                                            {key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
                                         </p>
                                     </div>
-                                    <p className={'text-sm ml-4'}>
-                                        <code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
+                                    <p css={tw`text-sm ml-4`}>
+                                        <code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
                                             {key.identifier}
                                         </code>
                                     </p>
                                     <button
-                                        className={'ml-4 p-2 text-sm'}
+                                        css={tw`ml-4 p-2 text-sm`}
                                         onClick={() => setDeleteIdentifier(key.identifier)}
                                     >
                                         <FontAwesomeIcon
                                             icon={faTrashAlt}
-                                            className={'text-neutral-400 hover:text-red-400 transition-colors duration-150'}
+                                            css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
                                         />
                                     </button>
-                                </div>
+                                </GreyRowBox>
                             ))
                     }
                 </ContentBox>
diff --git a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
index cf1a596bf..4e8fae1d5 100644
--- a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
+++ b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
@@ -9,6 +9,9 @@ import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ApiKey } from '@/api/account/getApiKeys';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import Input, { Textarea } from '@/components/elements/Input';
 
 interface Values {
     description: string;
@@ -44,22 +47,21 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
                 closeOnEscape={false}
                 closeOnBackground={false}
             >
-                <h3 className={'mb-6'}>Your API Key</h3>
-                <p className={'text-sm mb-6'}>
+                <h3 css={tw`mb-6`}>Your API Key</h3>
+                <p css={tw`text-sm mb-6`}>
                     The API key you have requested is shown below. Please store this in a safe location, it will not be
                     shown again.
                 </p>
-                <pre className={'text-sm bg-neutral-900 rounded py-2 px-4 font-mono'}>
-                    <code className={'font-mono'}>{apiKey}</code>
+                <pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
+                    <code css={tw`font-mono`}>{apiKey}</code>
                 </pre>
-                <div className={'flex justify-end mt-6'}>
-                    <button
+                <div css={tw`flex justify-end mt-6`}>
+                    <Button
                         type={'button'}
-                        className={'btn btn-secondary btn-sm'}
                         onClick={() => setApiKey('')}
                     >
                         Close
-                    </button>
+                    </Button>
                 </div>
             </Modal>
             <Formik
@@ -80,25 +82,19 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
                             label={'Description'}
                             name={'description'}
                             description={'A description of this API key.'}
-                            className={'mb-6'}
+                            css={tw`mb-6`}
                         >
-                            <Field name={'description'} className={'input-dark'}/>
+                            <Field name={'description'} as={Input}/>
                         </FormikFieldWrapper>
                         <FormikFieldWrapper
                             label={'Allowed IPs'}
                             name={'allowedIps'}
                             description={'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'}
                         >
-                            <Field
-                                as={'textarea'}
-                                name={'allowedIps'}
-                                className={'input-dark h-32'}
-                            />
+                            <Field as={Textarea} name={'allowedIps'} css={tw`h-32`}/>
                         </FormikFieldWrapper>
-                        <div className={'flex justify-end mt-6'}>
-                            <button className={'btn btn-primary btn-sm'}>
-                                Create
-                            </button>
+                        <div css={tw`flex justify-end mt-6`}>
+                            <Button>Create</Button>
                         </div>
                     </Form>
                 )}
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index a0f412c7e..066d980a0 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -16,7 +16,7 @@ const light = css<Props>`
     }
 `;
 
-const Input = styled.input<Props>`
+const inputStyle = css<Props>`
     // Reset to normal styling.
     ${tw`appearance-none w-full min-w-0`};
     ${tw`p-3 border rounded text-sm transition-all duration-150`};
@@ -43,4 +43,8 @@ const Input = styled.input<Props>`
     ${props => props.isLight && light};
 `;
 
+const Input = styled.input<Props>`${inputStyle}`;
+const Textarea = styled.textarea<Props>`${inputStyle}`;
+
+export { Textarea };
 export default Input;
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 656facf95..c9a7018f9 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -3,7 +3,7 @@ import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
-export default ({ children }): React.FC => (
+const PageContentBlock: React.FC = ({ children }) => (
     <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
             <ContentContainer css={tw`my-10`}>
@@ -25,3 +25,5 @@ export default ({ children }): React.FC => (
         </>
     </CSSTransition>
 );
+
+export default PageContentBlock;
diff --git a/tailwind.config.js b/tailwind.config.js
index 775ecbd27..ce51fe6f7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -112,5 +112,13 @@ module.exports = {
                 900: 'hsl(125, 97%, 14%)',
             },
         },
+        extend: {
+            fontSize: {
+                '2xs': '0.625rem',
+            },
+            borderColor: theme => ({
+                default: theme('colors.neutral.400', 'cuurrentColor'),
+            }),
+        },
     },
 };

From ebe588718c87942ba8efc8cb902aa5a122c1ff98 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 09:46:26 -0700
Subject: [PATCH 08/55] Fix route transitioning

---
 package.json                                  |  4 +-
 resources/scripts/TransitionRouter.tsx        | 21 ++++++---
 resources/scripts/components/App.tsx          |  1 +
 .../scripts/components/elements/Fade.tsx      | 43 +++++++++++++++++++
 resources/scripts/routers/DashboardRouter.tsx |  2 +-
 yarn.lock                                     | 14 +++---
 6 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 resources/scripts/components/elements/Fade.tsx

diff --git a/package.json b/package.json
index e836b2dd4..4023446df 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
         "react-i18next": "^11.2.1",
         "react-redux": "^7.1.0",
         "react-router-dom": "^5.1.2",
-        "react-transition-group": "^4.3.0",
+        "react-transition-group": "^4.4.1",
         "sockette": "^2.0.6",
         "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
@@ -66,7 +66,7 @@
         "@types/react-redux": "^7.1.1",
         "@types/react-router": "^5.1.3",
         "@types/react-router-dom": "^5.1.3",
-        "@types/react-transition-group": "^2.9.2",
+        "@types/react-transition-group": "^4.4.0",
         "@types/styled-components": "^5.1.0",
         "@types/uuid": "^3.4.5",
         "@types/webpack-env": "^1.15.2",
diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index abe421d41..19c06d43a 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/resources/scripts/TransitionRouter.tsx
@@ -1,17 +1,28 @@
 import React from 'react';
 import { Route } from 'react-router';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { SwitchTransition } from 'react-transition-group';
+import Fade from '@/components/elements/Fade';
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+
+const StyledSwitchTransition = styled(SwitchTransition)`
+    ${tw`relative`};
+    
+    & section {
+        ${tw`absolute w-full top-0 left-0`};
+    }
+`;
 
 const TransitionRouter: React.FC = ({ children }) => (
     <Route
         render={({ location }) => (
-            <TransitionGroup className={'route-transition-group'}>
-                <CSSTransition key={location.key} timeout={250} in appear classNames={'fade'}>
+            <StyledSwitchTransition>
+                <Fade timeout={250} key={location.key} in appear unmountOnExit>
                     <section>
                         {children}
                     </section>
-                </CSSTransition>
-            </TransitionGroup>
+                </Fade>
+            </StyledSwitchTransition>
         )}
     />
 );
diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index dac7fd102..286261742 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -12,6 +12,7 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
+import TransitionRouter from '@/TransitionRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
diff --git a/resources/scripts/components/elements/Fade.tsx b/resources/scripts/components/elements/Fade.tsx
new file mode 100644
index 000000000..62850283e
--- /dev/null
+++ b/resources/scripts/components/elements/Fade.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import CSSTransition, { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+
+interface Props extends Omit<CSSTransitionProps, 'timeout' | 'classNames'> {
+    timeout: number;
+}
+
+const Container = styled.div<{ timeout: number }>`
+    .fade-enter, .fade-exit {
+        will-change: opacity;
+    }
+    
+    .fade-enter {
+        ${tw`opacity-0`};
+        
+        &.fade-enter-active {
+            ${tw`opacity-100 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
+    }
+    
+    .fade-exit {
+        ${tw`opacity-100`};
+        
+        &.fade-exit-active {
+            ${tw`opacity-0 transition-opacity ease-in`};
+            transition-duration: ${props => props.timeout}ms;
+        }
+    }
+`;
+
+const Fade: React.FC<Props> = ({ timeout, children, ...props }) => (
+    <Container timeout={timeout}>
+        <CSSTransition timeout={timeout} classNames={'fade'} {...props}>
+            {children}
+        </CSSTransition>
+    </Container>
+);
+Fade.displayName = 'Fade';
+
+export default Fade;
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index 7e8f476a2..c3abf3176 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -3,12 +3,12 @@ import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import AccountOverviewContainer from '@/components/dashboard/AccountOverviewContainer';
 import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
-import TransitionRouter from '@/TransitionRouter';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import config from '@/../../tailwind.config.js';
+import TransitionRouter from '@/TransitionRouter';
 
 const SubNavigation = styled.div`
     ${tw`w-full bg-neutral-700 shadow`};
diff --git a/yarn.lock b/yarn.lock
index 54098ef2a..f814aec3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1069,9 +1069,10 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-transition-group@^2.9.2":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
+"@types/react-transition-group@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
   dependencies:
     "@types/react" "*"
 
@@ -6960,9 +6961,10 @@ react-router@5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-transition-group@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
+react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
   dependencies:
     "@babel/runtime" "^7.5.5"
     dom-helpers "^5.0.1"

From d2602009472a22840565b92e0c28a75737c1a128 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 10:15:06 -0700
Subject: [PATCH 09/55] Make the modal work again

---
 .../scripts/components/elements/Modal.tsx     | 80 +++++++++++--------
 tailwind.config.js                            |  3 +
 2 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index c37669b02..0ef756d3c 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
-import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
-import classNames from 'classnames';
+import tw from 'twin.macro';
+import styled from 'styled-components/macro';
+import Fade from '@/components/elements/Fade';
 
 export interface RequiredModalProps {
     visible: boolean;
@@ -12,20 +13,38 @@ export interface RequiredModalProps {
     top?: boolean;
 }
 
-type Props = RequiredModalProps & {
+interface Props extends RequiredModalProps {
     dismissable?: boolean;
     closeOnEscape?: boolean;
     closeOnBackground?: boolean;
     showSpinnerOverlay?: boolean;
-    children: React.ReactNode;
 }
 
-export default ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children  }: Props) => {
-    const [render, setRender] = useState(visible);
+const ModalMask = styled.div`
+    ${tw`fixed z-50 overflow-auto flex w-full inset-0`};
+    background: rgba(0, 0, 0, 0.70);
+`;
+
+const ModalContainer = styled.div<{ alignTop?: boolean }>`
+    ${tw`relative flex flex-col w-full m-auto`};
+    max-width: 50%;
+    // @todo max-w-screen-lg perhaps?
+    ${props => props.alignTop && 'margin-top: 10%'};
+    
+    & > .close-icon {
+        ${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
+        top: -2rem;
+        
+        &:hover {${tw`transform rotate-90`}}
+    }
+`;
+
+const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
+    const [ render, setRender ] = useState(visible);
 
     const isDismissable = useMemo(() => {
         return (dismissable || true) && !(showSpinnerOverlay || false);
-    }, [dismissable, showSpinnerOverlay]);
+    }, [ dismissable, showSpinnerOverlay ]);
 
     const handleEscapeEvent = (e: KeyboardEvent) => {
         if (isDismissable && closeOnEscape && e.key === 'Escape') {
@@ -33,52 +52,47 @@ export default ({ visible, appear, dismissable, showSpinnerOverlay, top = true,
         }
     };
 
-    useEffect(() => {
-        setRender(visible);
-    }, [visible]);
+    useEffect(() => setRender(visible), [ visible ]);
 
     useEffect(() => {
         window.addEventListener('keydown', handleEscapeEvent);
 
         return () => window.removeEventListener('keydown', handleEscapeEvent);
-    }, [render]);
+    }, [ render ]);
 
     return (
-        <CSSTransition
-            timeout={250}
-            classNames={'fade'}
-            appear={appear}
-            in={render}
-            unmountOnExit={true}
-            onExited={() => onDismissed()}
-        >
-            <div className={'modal-mask'} onClick={e => {
-                if (isDismissable && closeOnBackground) {
-                    e.stopPropagation();
-                    if (e.target === e.currentTarget) {
-                        setRender(false);
+        <Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
+            <ModalMask
+                onClick={e => {
+                    if (isDismissable && closeOnBackground) {
+                        e.stopPropagation();
+                        if (e.target === e.currentTarget) {
+                            setRender(false);
+                        }
                     }
-                }
-            }}>
-                <div className={classNames('modal-container', { top })}>
+                }}
+            >
+                <ModalContainer alignTop={top}>
                     {isDismissable &&
-                    <div className={'modal-close-icon'} onClick={() => setRender(false)}>
+                    <div className={'close-icon'} onClick={() => setRender(false)}>
                         <FontAwesomeIcon icon={faTimes}/>
                     </div>
                     }
                     {showSpinnerOverlay &&
                     <div
-                        className={'absolute w-full h-full rounded flex items-center justify-center'}
+                        css={tw`absolute w-full h-full rounded flex items-center justify-center`}
                         style={{ background: 'hsla(211, 10%, 53%, 0.25)' }}
                     >
                         <Spinner/>
                     </div>
                     }
-                    <div className={'modal-content p-6'}>
+                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
                         {children}
                     </div>
-                </div>
-            </div>
-        </CSSTransition>
+                </ModalContainer>
+            </ModalMask>
+        </Fade>
     );
 };
+
+export default Modal;
diff --git a/tailwind.config.js b/tailwind.config.js
index ce51fe6f7..6ed79cdd9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -116,6 +116,9 @@ module.exports = {
             fontSize: {
                 '2xs': '0.625rem',
             },
+            transitionDuration: {
+                250: '250ms',
+            },
             borderColor: theme => ({
                 default: theme('colors.neutral.400', 'cuurrentColor'),
             }),

From 5473edc006144c001269e0cd76005e5688b173c6 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 12:39:55 -0700
Subject: [PATCH 10/55] Get spinners back in working order

---
 .../scripts/components/FlashMessageRender.tsx |  6 +--
 .../auth/LoginCheckpointContainer.tsx         |  2 +-
 .../components/auth/LoginContainer.tsx        |  2 +-
 .../auth/ResetPasswordContainer.tsx           |  2 +-
 .../components/dashboard/ServerRow.tsx        |  2 +-
 .../dashboard/forms/DisableTwoFactorModal.tsx | 12 +++--
 .../scripts/components/elements/Button.tsx    |  8 +--
 .../scripts/components/elements/Field.tsx     |  4 +-
 .../components/elements/InputSpinner.tsx      |  2 +-
 .../scripts/components/elements/Label.tsx     |  9 ++++
 .../scripts/components/elements/Spinner.tsx   | 51 ++++++++++++-------
 .../components/elements/SpinnerOverlay.tsx    | 16 +++---
 .../components/elements/SuspenseSpinner.tsx   |  2 +-
 .../components/server/WebsocketHandler.tsx    |  2 +-
 .../components/server/backups/BackupRow.tsx   |  2 +-
 .../server/settings/RenameServerBox.tsx       |  2 +-
 16 files changed, 74 insertions(+), 50 deletions(-)
 create mode 100644 resources/scripts/components/elements/Label.tsx

diff --git a/resources/scripts/components/FlashMessageRender.tsx b/resources/scripts/components/FlashMessageRender.tsx
index 0af9d47e8..ed6671e80 100644
--- a/resources/scripts/components/FlashMessageRender.tsx
+++ b/resources/scripts/components/FlashMessageRender.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import MessageBox from '@/components/MessageBox';
 import { State, useStoreState } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
 
 type Props = Readonly<{
     byKey?: string;
-    spacerClass?: string;
 }>;
 
-export default ({ spacerClass, byKey }: Props) => {
+export default ({ byKey }: Props) => {
     const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
 
     let filtered = flashes;
@@ -25,7 +25,7 @@ export default ({ spacerClass, byKey }: Props) => {
             {
                 filtered.map((flash, index) => (
                     <React.Fragment key={flash.id || flash.type + flash.message}>
-                        {index > 0 && <div css={tw`${spacerClass || 'mt-2'}`}></div>}
+                        {index > 0 && <div css={tw`mt-2`}></div>}
                         <MessageBox type={flash.type} title={flash.title}>
                             {flash.message}
                         </MessageBox>
diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index dddcd0c1c..006ccc06b 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
@@ -54,7 +54,7 @@ const LoginCheckpointContainer = () => {
                     disabled={isSubmitting}
                 >
                     {isSubmitting ?
-                        <Spinner size={'tiny'} className={'mx-auto'}/>
+                        <Spinner size={'small'} className={'mx-auto'}/>
                         :
                         'Continue'
                     }
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index bebc6a059..e3eda3fc2 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -61,7 +61,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
                         className={'btn btn-primary btn-jumbo'}
                     >
                         {isSubmitting ?
-                            <Spinner size={'tiny'} className={'mx-auto'}/>
+                            <Spinner size={'small'} className={'mx-auto'}/>
                             :
                             'Login'
                         }
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index 7350e725a..67ee3dd24 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx
@@ -92,7 +92,7 @@ export default ({ match, history, location }: Props) => {
                             disabled={isSubmitting}
                         >
                             {isSubmitting ?
-                                <Spinner size={'tiny'} className={'mx-auto'}/>
+                                <Spinner size={'small'} className={'mx-auto'}/>
                                 :
                                 'Reset Password'
                             }
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 89233728a..1cfe87d87 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -79,7 +79,7 @@ export default ({ server }: { server: Server }) => {
             <div css={tw`w-1/3 flex items-baseline relative`}>
                 {!stats ?
                     !statsError ?
-                        <SpinnerOverlay size={'tiny'} visible={true} backgroundOpacity={0.25}/>
+                        <SpinnerOverlay size={'small'} visible={true} backgroundOpacity={0.25}/>
                         :
                         server.isInstalling ?
                             <div css={tw`flex-1 text-center`}>
diff --git a/resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx b/resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
index 6cadc595b..e0b52415a 100644
--- a/resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
+++ b/resources/scripts/components/dashboard/forms/DisableTwoFactorModal.tsx
@@ -8,6 +8,8 @@ import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import disableAccountTwoFactor from '@/api/account/disableAccountTwoFactor';
 import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     password: string;
@@ -45,19 +47,19 @@ export default ({ ...props }: RequiredModalProps) => {
             {({ isSubmitting, isValid }) => (
                 <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
                     <Form className={'mb-0'}>
-                        <FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
+                        <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
                         <Field
                             id={'password'}
                             name={'password'}
                             type={'password'}
                             label={'Current Password'}
                             description={'In order to disable two-factor authentication you will need to provide your account password.'}
-                            autoFocus={true}
+                            autoFocus
                         />
-                        <div className={'mt-6 text-right'}>
-                            <button className={'btn btn-red btn-sm'} disabled={!isValid}>
+                        <div css={tw`mt-6 text-right`}>
+                            <Button disabled={!isValid}>
                                 Disable Two-Factor
-                            </button>
+                            </Button>
                         </div>
                     </Form>
                 </Modal>
diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index 1450e2e91..6b70d315c 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -7,10 +7,9 @@ interface Props {
     size?: 'xsmall' | 'small' | 'large' | 'xlarge';
     color?: 'green' | 'red' | 'primary' | 'grey';
     isSecondary?: boolean;
-    disabled?: boolean;
 }
 
-const StyledButton = styled.button<Props>`
+const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     ${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
     
         ${props => props.isSecondary && css<Props>`
@@ -73,9 +72,6 @@ const StyledButton = styled.button<Props>`
     ${props => props.size === 'xlarge' && tw`p-4 w-full`};
     
     &:disabled { opacity: 0.55; cursor: default }
-    
-    ${props => props.disabled && css`opacity: 0.55; cursor: default`};
-
 `;
 
 type ComponentProps = Props &
@@ -88,7 +84,7 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
             <div className={'spinner-circle spinner-white spinner-sm'}/>
         </div>
         }
-        <span css={isLoading && tw`text-transparent`}>
+        <span css={isLoading ? tw`text-transparent` : undefined}>
             {children}
         </span>
     </StyledButton>
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index cb329d981..c6941cc4d 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/resources/scripts/components/elements/Field.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
-import classNames from 'classnames';
 import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
 
 interface OwnProps {
     name: string;
@@ -19,7 +19,7 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <React.Fragment>
                     {label &&
-                    <label htmlFor={id} className={light ? undefined : 'input-dark-label'}>{label}</label>
+                    <Label htmlFor={id} isLight={light}>{label}</Label>
                     }
                     <Input
                         id={id}
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index e4640fa21..dabd4f8ff 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/resources/scripts/components/elements/InputSpinner.tsx
@@ -12,7 +12,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
             classNames={'fade'}
         >
             <div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
-                <Spinner size={'tiny'}/>
+                <Spinner size={'small'}/>
             </div>
         </CSSTransition>
         {children}
diff --git a/resources/scripts/components/elements/Label.tsx b/resources/scripts/components/elements/Label.tsx
new file mode 100644
index 000000000..cfe16550b
--- /dev/null
+++ b/resources/scripts/components/elements/Label.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+
+const Label = styled.label<{ isLight?: boolean }>`
+    ${tw`block text-xs uppercase text-neutral-200 mb-2`};
+    ${props => props.isLight && tw`text-neutral-700`};
+`;
+
+export default Label;
diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx
index cc4476abf..316062960 100644
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/resources/scripts/components/elements/Spinner.tsx
@@ -1,31 +1,48 @@
 import React from 'react';
-import classNames from 'classnames';
+import styled, { css, keyframes } from 'styled-components/macro';
+import tw from 'twin.macro';
 
-export type SpinnerSize = 'large' | 'normal' | 'tiny';
+export type SpinnerSize = 'small' | 'base' | 'large';
 
 interface Props {
     size?: SpinnerSize;
     centered?: boolean;
-    className?: string;
+    isBlue?: boolean;
 }
 
-const Spinner = ({ size, centered, className }: Props) => (
+const spin = keyframes`
+    to { transform: rotate(360deg); }
+`;
+
+// noinspection CssOverwrittenProperties
+const SpinnerComponent = styled.div<Props>`
+    ${tw`w-8 h-8`};
+    border-width: 3px;
+    border-radius: 50%;
+    animation: ${spin} 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
+    
+    ${props => props.size === 'small' ? tw`w-4 h-4 border-2` : (props.size === 'large' ? css`
+        ${tw`w-16 h-16`};
+        border-width: 6px;
+    ` : null)};
+    
+    border-color: ${props => !props.isBlue ? 'rgba(255, 255, 255, 0.2)' : 'hsla(212, 92%, 43%, 0.2)'};
+    border-top-color: ${props => !props.isBlue ? 'rgb(255, 255, 255)' : 'hsl(212, 92%, 43%)'};
+`;
+
+const Spinner = ({ centered, ...props }: Props) => (
     centered ?
-        <div className={classNames(`flex justify-center ${className}`, { 'm-20': size === 'large', 'm-6': size !== 'large' })}>
-            <div
-                className={classNames('spinner-circle spinner-white', {
-                    'spinner-lg': size === 'large',
-                    'spinner-sm': size === 'tiny',
-                })}
-            />
+        <div
+            css={[
+                tw`flex justify-center`,
+                props.size === 'large' ? tw`m-20` : tw`m-6`,
+            ]}
+        >
+            <SpinnerComponent {...props}/>
         </div>
         :
-        <div
-            className={classNames(`spinner-circle spinner-white ${className}`, {
-                'spinner-lg': size === 'large',
-                'spinner-sm': size === 'tiny',
-            })}
-        />
+        <SpinnerComponent {...props}/>
 );
+Spinner.DisplayName = 'Spinner';
 
 export default Spinner;
diff --git a/resources/scripts/components/elements/SpinnerOverlay.tsx b/resources/scripts/components/elements/SpinnerOverlay.tsx
index 946afad87..58d17757e 100644
--- a/resources/scripts/components/elements/SpinnerOverlay.tsx
+++ b/resources/scripts/components/elements/SpinnerOverlay.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
 import Spinner, { SpinnerSize } from '@/components/elements/Spinner';
+import Fade from '@/components/elements/Fade';
+import tw from 'twin.macro';
 
 interface Props {
     visible: boolean;
@@ -11,17 +11,17 @@ interface Props {
 }
 
 const SpinnerOverlay = ({ size, fixed, visible, backgroundOpacity }: Props) => (
-    <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
+    <Fade timeout={150} in={visible} unmountOnExit>
         <div
-            className={classNames('top-0 left-0 flex items-center justify-center w-full h-full rounded', {
-                absolute: !fixed,
-                fixed: fixed,
-            })}
+            css={[
+                tw`top-0 left-0 flex items-center justify-center w-full h-full rounded`,
+                !fixed ? tw`absolute` : tw`fixed`,
+            ]}
             style={{ zIndex: 9999, background: `rgba(0, 0, 0, ${backgroundOpacity || 0.45})` }}
         >
             <Spinner size={size}/>
         </div>
-    </CSSTransition>
+    </Fade>
 );
 
 export default SpinnerOverlay;
diff --git a/resources/scripts/components/elements/SuspenseSpinner.tsx b/resources/scripts/components/elements/SuspenseSpinner.tsx
index 3c2c42623..870ebc536 100644
--- a/resources/scripts/components/elements/SuspenseSpinner.tsx
+++ b/resources/scripts/components/elements/SuspenseSpinner.tsx
@@ -5,7 +5,7 @@ const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
     <Suspense
         fallback={
             <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
-                <Spinner centered={true} size={'normal'}/>
+                <Spinner centered/>
             </div>
         }
     >
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index 479304d37..dc7ffa3c3 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/resources/scripts/components/server/WebsocketHandler.tsx
@@ -69,7 +69,7 @@ export default () => {
             <CSSTransition timeout={250} in={true} appear={true} classNames={'fade'}>
                 <div className={'bg-red-500 py-2'}>
                     <ContentContainer className={'flex items-center justify-center'}>
-                        <Spinner size={'tiny'}/>
+                        <Spinner size={'small'}/>
                         <p className={'ml-2 text-sm text-red-100'}>
                             We're having some trouble connecting to your server, please wait...
                         </p>
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 5c2e1a61f..8a4f4f623 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -39,7 +39,7 @@ export default ({ backup, className }: Props) => {
                 {backup.completedAt ?
                     <FontAwesomeIcon icon={faArchive} className={'text-neutral-300'}/>
                     :
-                    <Spinner size={'tiny'}/>
+                    <Spinner size={'small'}/>
                 }
             </div>
             <div className={'flex-1'}>
diff --git a/resources/scripts/components/server/settings/RenameServerBox.tsx b/resources/scripts/components/server/settings/RenameServerBox.tsx
index 83c0b2f6b..2904362e3 100644
--- a/resources/scripts/components/server/settings/RenameServerBox.tsx
+++ b/resources/scripts/components/server/settings/RenameServerBox.tsx
@@ -19,7 +19,7 @@ const RenameServerBox = () => {
 
     return (
         <TitledGreyBox title={'Change Server Name'} className={'relative'}>
-            <SpinnerOverlay size={'normal'} visible={isSubmitting}/>
+            <SpinnerOverlay visible={isSubmitting}/>
             <Form className={'mb-0'}>
                 <Field
                     id={'name'}

From 02f83c58f56776e3d26f2c1021e025e5b28e7e3e Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 13:31:00 -0700
Subject: [PATCH 11/55] Fix unhappy typescript

---
 resources/scripts/components/elements/Button.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index 6b70d315c..787bb877b 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -74,8 +74,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     &:disabled { opacity: 0.55; cursor: default }
 `;
 
-type ComponentProps = Props &
-    Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof Props>;
+type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props> & Props;
 
 const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
     <StyledButton {...props}>

From 8c20158e589e29bf3ddc15b9075343619bb5ed80 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 14:21:28 -0700
Subject: [PATCH 12/55] Fix login form

---
 .../scripts/components/FlashMessageRender.tsx | 25 +++-----
 resources/scripts/components/MessageBox.tsx   | 61 +++++++++++++++++--
 .../auth/ForgotPasswordContainer.tsx          | 25 ++++----
 .../components/auth/LoginContainer.tsx        | 33 +++++-----
 .../components/auth/LoginFormContainer.tsx    | 24 ++++----
 .../scripts/components/elements/Input.tsx     |  2 +-
 6 files changed, 106 insertions(+), 64 deletions(-)

diff --git a/resources/scripts/components/FlashMessageRender.tsx b/resources/scripts/components/FlashMessageRender.tsx
index ed6671e80..1b449ecbf 100644
--- a/resources/scripts/components/FlashMessageRender.tsx
+++ b/resources/scripts/components/FlashMessageRender.tsx
@@ -1,29 +1,22 @@
 import React from 'react';
 import MessageBox from '@/components/MessageBox';
-import { State, useStoreState } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
+import { useStoreState } from 'easy-peasy';
 import tw from 'twin.macro';
 
 type Props = Readonly<{
     byKey?: string;
+    className?: string;
 }>;
 
-export default ({ byKey }: Props) => {
-    const flashes = useStoreState((state: State<ApplicationStore>) => state.flashes.items);
-
-    let filtered = flashes;
-    if (byKey) {
-        filtered = flashes.filter(flash => flash.key === byKey);
-    }
-
-    if (filtered.length === 0) {
-        return null;
-    }
+const FlashMessageRender = ({ byKey, className }: Props) => {
+    const flashes = useStoreState(state => state.flashes.items.filter(
+        flash => byKey ? flash.key === byKey : true,
+    ));
 
     return (
-        <div>
+        <div className={className}>
             {
-                filtered.map((flash, index) => (
+                flashes.map((flash, index) => (
                     <React.Fragment key={flash.id || flash.type + flash.message}>
                         {index > 0 && <div css={tw`mt-2`}></div>}
                         <MessageBox type={flash.type} title={flash.title}>
@@ -35,3 +28,5 @@ export default ({ byKey }: Props) => {
         </div>
     );
 };
+
+export default FlashMessageRender;
diff --git a/resources/scripts/components/MessageBox.tsx b/resources/scripts/components/MessageBox.tsx
index a962afb88..e16986ed5 100644
--- a/resources/scripts/components/MessageBox.tsx
+++ b/resources/scripts/components/MessageBox.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import tw, { TwStyle } from 'twin.macro';
+import styled from 'styled-components/macro';
 
 export type FlashMessageType = 'success' | 'info' | 'warning' | 'error';
 
@@ -8,11 +10,60 @@ interface Props {
     type?: FlashMessageType;
 }
 
-export default ({ title, children, type }: Props) => (
-    <div className={`lg:inline-flex alert ${type}`} role={'alert'}>
-        {title && <span className={'title'}>{title}</span>}
-        <span className={'message'}>
+const styling = (type?: FlashMessageType): TwStyle | string => {
+    switch (type) {
+        case 'error':
+            return tw`bg-red-600 border-red-800`;
+        case 'info':
+            return tw`bg-primary-600 border-primary-800`;
+        case 'success':
+            return tw`bg-green-600 border-green-800`;
+        case 'warning':
+            return tw`bg-yellow-600 border-yellow-800`;
+        default:
+            return '';
+    }
+};
+
+const getBackground = (type?: FlashMessageType): TwStyle | string => {
+    switch (type) {
+        case 'error':
+            return tw`bg-red-500`;
+        case 'info':
+            return tw`bg-primary-500`;
+        case 'success':
+            return tw`bg-green-500`;
+        case 'warning':
+            return tw`bg-yellow-500`;
+        default:
+            return '';
+    }
+};
+
+const Container = styled.div<{ $type?: FlashMessageType }>`
+    ${tw`p-2 border items-center leading-normal rounded flex w-full text-sm text-white`};
+    ${props => styling(props.$type)};
+`;
+Container.displayName = 'MessageBox.Container';
+
+const MessageBox = ({ title, children, type }: Props) => (
+    <Container css={tw`lg:inline-flex`} $type={type} role={'alert'}>
+        {title &&
+        <span
+            className={'title'}
+            css={[
+                tw`flex rounded-full uppercase px-2 py-1 text-xs font-bold mr-3 leading-none`,
+                getBackground(type),
+            ]}
+        >
+            {title}
+        </span>
+        }
+        <span css={tw`mr-2 text-left flex-auto`}>
             {children}
         </span>
-    </div>
+    </Container>
 );
+MessageBox.displayName = 'MessageBox';
+
+export default MessageBox;
diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
index 0f923eb38..dbd4ed469 100644
--- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
@@ -8,6 +8,8 @@ import { ApplicationStore } from '@/state';
 import Field from '@/components/elements/Field';
 import { Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     email: string;
@@ -43,33 +45,30 @@ export default () => {
             {({ isSubmitting }) => (
                 <LoginFormContainer
                     title={'Request Password Reset'}
-                    className={'w-full flex'}
+                    css={tw`w-full flex`}
                 >
                     <Field
-                        light={true}
+                        light
                         label={'Email'}
                         description={'Enter your account email address to receive instructions on resetting your password.'}
                         name={'email'}
                         type={'email'}
                     />
-                    <div className={'mt-6'}>
-                        <button
+                    <div css={tw`mt-6`}>
+                        <Button
                             type={'submit'}
-                            className={'btn btn-primary btn-jumbo flex justify-center'}
+                            size={'xlarge'}
                             disabled={isSubmitting}
+                            isLoading={isSubmitting}
                         >
-                            {isSubmitting ?
-                                <div className={'spinner-circle spinner-sm spinner-white'}></div>
-                                :
-                                'Send Email'
-                            }
-                        </button>
+                            Send Email
+                        </Button>
                     </div>
-                    <div className={'mt-6 text-center'}>
+                    <div css={tw`mt-6 text-center`}>
                         <Link
                             type={'button'}
                             to={'/auth/login'}
-                            className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                            css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                         >
                             Return to Login
                         </Link>
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index e3eda3fc2..b38f23a93 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -11,6 +11,8 @@ import { httpErrorToHuman } from '@/api/http';
 import { FlashMessage } from '@/state/flashes';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 type OwnProps = RouteComponentProps & {
     clearFlashes: ActionCreator<void>;
@@ -36,36 +38,29 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
             {ref.current && ref.current.render()}
             <LoginFormContainer
                 title={'Login to Continue'}
-                className={'w-full flex'}
+                css={tw`w-full flex`}
                 onSubmit={submit}
             >
-                <label htmlFor={'username'}>Username or Email</label>
                 <Field
                     type={'text'}
+                    label={'Username or Email'}
                     id={'username'}
                     name={'username'}
-                    className={'input'}
+                    light
                 />
-                <div className={'mt-6'}>
-                    <label htmlFor={'password'}>Password</label>
+                <div css={tw`mt-6`}>
                     <Field
                         type={'password'}
+                        label={'Password'}
                         id={'password'}
                         name={'password'}
-                        className={'input'}
+                        light
                     />
                 </div>
-                <div className={'mt-6'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-jumbo'}
-                    >
-                        {isSubmitting ?
-                            <Spinner size={'small'} className={'mx-auto'}/>
-                            :
-                            'Login'
-                        }
-                    </button>
+                <div css={tw`mt-6`}>
+                    <Button type={'submit'} size={'xlarge'} isLoading={isSubmitting}>
+                        Login
+                    </Button>
                 </div>
                 {recaptchaEnabled &&
                 <ReCAPTCHA
@@ -80,10 +75,10 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
                     onExpired={() => setFieldValue('recaptchaData', null)}
                 />
                 }
-                <div className={'mt-6 text-center'}>
+                <div css={tw`mt-6 text-center`}>
                     <Link
                         to={'/auth/password'}
-                        className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        css={tw`text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600`}
                     >
                         Forgot password?
                     </Link>
diff --git a/resources/scripts/components/auth/LoginFormContainer.tsx b/resources/scripts/components/auth/LoginFormContainer.tsx
index 541763dc0..2423e0251 100644
--- a/resources/scripts/components/auth/LoginFormContainer.tsx
+++ b/resources/scripts/components/auth/LoginFormContainer.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { Form } from 'formik';
 import styled from 'styled-components/macro';
-import { breakpoint } from 'styled-components-breakpoint';
+import { breakpoint } from '@/theme';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import tw from 'twin.macro';
 
@@ -30,27 +30,29 @@ const Container = styled.div`
 
 export default forwardRef<HTMLFormElement, Props>(({ title, ...props }, ref) => (
     <Container>
-        {title && <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+        {title &&
+        <h2 css={tw`text-3xl text-center text-neutral-100 font-medium py-4`}>
             {title}
-        </h2>}
-        <FlashMessageRender className={'mb-2 px-1'}/>
+        </h2>
+        }
+        <FlashMessageRender css={tw`mb-2 px-1`}/>
         <Form {...props} ref={ref}>
-            <div className={'md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1'}>
-                <div className={'flex-none select-none mb-6 md:mb-0 self-center'}>
-                    <img src={'/assets/svgs/pterodactyl.svg'} className={'block w-48 md:w-64 mx-auto'}/>
+            <div css={tw`md:flex w-full bg-white shadow-lg rounded-lg p-6 md:pl-0 mx-1`}>
+                <div css={tw`flex-none select-none mb-6 md:mb-0 self-center`}>
+                    <img src={'/assets/svgs/pterodactyl.svg'} css={tw`block w-48 md:w-64 mx-auto`}/>
                 </div>
-                <div className={'flex-1'}>
+                <div css={tw`flex-1`}>
                     {props.children}
                 </div>
             </div>
         </Form>
-        <p className={'text-center text-neutral-500 text-xs mt-4'}>
+        <p css={tw`text-center text-neutral-500 text-xs mt-4`}>
             &copy; 2015 - 2020&nbsp;
             <a
-                rel={'noopener nofollow'}
+                rel={'noopener nofollow noreferrer'}
                 href={'https://pterodactyl.io'}
                 target={'_blank'}
-                className={'no-underline text-neutral-500 hover:text-neutral-300'}
+                css={tw`no-underline text-neutral-500 hover:text-neutral-300`}
             >
                 Pterodactyl Software
             </a>
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index 066d980a0..129249ba9 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -22,7 +22,6 @@ const inputStyle = css<Props>`
     ${tw`p-3 border rounded text-sm transition-all duration-150`};
     ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
     
-    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
     & + .input-help {
         ${tw`mt-1 text-xs`};
         ${props => props.hasError ? tw`text-red-400` : tw`text-neutral-400`};
@@ -41,6 +40,7 @@ const inputStyle = css<Props>`
     }
     
     ${props => props.isLight && light};
+    ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
 `;
 
 const Input = styled.input<Props>`${inputStyle}`;

From 1c97dd4e2483d6a25ecfe19000fa19d686aac31a Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 14:34:43 -0700
Subject: [PATCH 13/55] Correctly center the spinner in buttons

---
 .../auth/LoginCheckpointContainer.tsx         | 38 ++++++++-----------
 .../components/auth/LoginContainer.tsx        |  6 +--
 .../auth/ResetPasswordContainer.tsx           | 38 +++++++++----------
 .../scripts/components/elements/Button.tsx    |  9 +++--
 4 files changed, 40 insertions(+), 51 deletions(-)

diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index 006ccc06b..41af2ac20 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
@@ -5,12 +5,12 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { ActionCreator } from 'easy-peasy';
 import { StaticContext } from 'react-router';
-import Spinner from '@/components/elements/Spinner';
 import { useFormikContext, withFormik } from 'formik';
-import { object, string } from 'yup';
 import useFlash from '@/plugins/useFlash';
 import { FlashStore } from '@/state/flashes';
 import Field from '@/components/elements/Field';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     code: string;
@@ -29,13 +29,10 @@ const LoginCheckpointContainer = () => {
     const [ isMissingDevice, setIsMissingDevice ] = useState(false);
 
     return (
-        <LoginFormContainer
-            title={'Device Checkpoint'}
-            className={'w-full flex'}
-        >
-            <div className={'mt-6'}>
+        <LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
+            <div css={tw`mt-6`}>
                 <Field
-                    light={true}
+                    light
                     name={isMissingDevice ? 'recoveryCode' : 'code'}
                     title={isMissingDevice ? 'Recovery Code' : 'Authentication Code'}
                     description={
@@ -44,38 +41,35 @@ const LoginCheckpointContainer = () => {
                             : 'Enter the two-factor token generated by your device.'
                     }
                     type={isMissingDevice ? 'text' : 'number'}
-                    autoFocus={true}
+                    autoFocus
                 />
             </div>
-            <div className={'mt-6'}>
-                <button
+            <div css={tw`mt-6`}>
+                <Button
+                    size={'xlarge'}
                     type={'submit'}
-                    className={'btn btn-primary btn-jumbo'}
                     disabled={isSubmitting}
+                    isLoading={isSubmitting}
                 >
-                    {isSubmitting ?
-                        <Spinner size={'small'} className={'mx-auto'}/>
-                        :
-                        'Continue'
-                    }
-                </button>
+                    Continue
+                </Button>
             </div>
-            <div className={'mt-6 text-center'}>
+            <div css={tw`mt-6 text-center`}>
                 <span
                     onClick={() => {
                         setFieldValue('code', '');
                         setFieldValue('recoveryCode', '');
                         setIsMissingDevice(s => !s);
                     }}
-                    className={'cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                    css={tw`cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                 >
                     {!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
                 </span>
             </div>
-            <div className={'mt-6 text-center'}>
+            <div css={tw`mt-6 text-center`}>
                 <Link
                     to={'/auth/login'}
-                    className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                    css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                 >
                     Return to Login
                 </Link>
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index b38f23a93..7b25c36d7 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -36,11 +36,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
     return (
         <React.Fragment>
             {ref.current && ref.current.render()}
-            <LoginFormContainer
-                title={'Login to Continue'}
-                css={tw`w-full flex`}
-                onSubmit={submit}
-            >
+            <LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} onSubmit={submit}>
                 <Field
                     type={'text'}
                     label={'Username or Email'}
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index 67ee3dd24..6535d9d20 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx
@@ -11,15 +11,16 @@ import Spinner from '@/components/elements/Spinner';
 import { Formik, FormikHelpers } from 'formik';
 import { object, ref, string } from 'yup';
 import Field from '@/components/elements/Field';
-
-type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
+import Input from '@/components/elements/Input';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     password: string;
     passwordConfirmation: string;
 }
 
-export default ({ match, history, location }: Props) => {
+export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
     const [ email, setEmail ] = useState('');
 
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -62,46 +63,43 @@ export default ({ match, history, location }: Props) => {
             {({ isSubmitting }) => (
                 <LoginFormContainer
                     title={'Reset Password'}
-                    className={'w-full flex'}
+                    css={tw`w-full flex`}
                 >
                     <div>
                         <label>Email</label>
-                        <input className={'input'} value={email} disabled={true}/>
+                        <Input value={email} light disabled/>
                     </div>
-                    <div className={'mt-6'}>
+                    <div css={tw`mt-6`}>
                         <Field
-                            light={true}
+                            light
                             label={'New Password'}
                             name={'password'}
                             type={'password'}
                             description={'Passwords must be at least 8 characters in length.'}
                         />
                     </div>
-                    <div className={'mt-6'}>
+                    <div css={tw`mt-6`}>
                         <Field
-                            light={true}
+                            light
                             label={'Confirm New Password'}
                             name={'passwordConfirmation'}
                             type={'password'}
                         />
                     </div>
-                    <div className={'mt-6'}>
-                        <button
+                    <div css={tw`mt-6`}>
+                        <Button
+                            size={'xlarge'}
                             type={'submit'}
-                            className={'btn btn-primary btn-jumbo'}
                             disabled={isSubmitting}
+                            isLoading={isSubmitting}
                         >
-                            {isSubmitting ?
-                                <Spinner size={'small'} className={'mx-auto'}/>
-                                :
-                                'Reset Password'
-                            }
-                        </button>
+                            Reset Password
+                        </Button>
                     </div>
-                    <div className={'mt-6 text-center'}>
+                    <div css={tw`mt-6 text-center`}>
                         <Link
                             to={'/auth/login'}
-                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                            css={tw`text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600`}
                         >
                             Return to Login
                         </Link>
diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index 787bb877b..276ad1b6b 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
 import tw from 'twin.macro';
+import Spinner from '@/components/elements/Spinner';
 
 interface Props {
     isLoading?: boolean;
@@ -10,9 +11,9 @@ interface Props {
 }
 
 const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
-    ${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
+    ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
     
-        ${props => props.isSecondary && css<Props>`
+    ${props => props.isSecondary && css<Props>`
         ${tw`border border-neutral-600 bg-transparent text-neutral-200`};
         
         &:hover:not(:disabled) {
@@ -79,8 +80,8 @@ type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props>
 const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
     <StyledButton {...props}>
         {isLoading &&
-        <div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
-            <div className={'spinner-circle spinner-white spinner-sm'}/>
+        <div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
+            <Spinner size={'small'}/>
         </div>
         }
         <span css={isLoading ? tw`text-transparent` : undefined}>

From 82cf070c06c33797b3d81b78440439859ad85e43 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 15:05:44 -0700
Subject: [PATCH 14/55] Fix styling on 2fa codes modal

---
 .../dashboard/forms/SetupTwoFactorModal.tsx   | 46 ++++++++++---------
 .../components/elements/ConfirmationModal.tsx | 16 ++++---
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx b/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
index ff5eeec7f..d647bc407 100644
--- a/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
+++ b/resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx
@@ -9,6 +9,8 @@ import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import Field from '@/components/elements/Field';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     code: string;
@@ -64,7 +66,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                     .matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
             })}
         >
-            {({ isSubmitting, isValid }) => (
+            {({ isSubmitting }) => (
                 <Modal
                     {...props}
                     onDismissed={dismiss}
@@ -75,47 +77,47 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                 >
                     {recoveryTokens.length > 0 ?
                         <>
-                            <h2 className={'mb-4'}>Two-factor authentication enabled</h2>
-                            <p className={'text-neutral-300'}>
+                            <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
+                            <p css={tw`text-neutral-300`}>
                                 Two-factor authentication has been enabled on your account. Should you loose access to
-                                this device you'll need to use on of the codes displayed below in order to access your
+                                this device you&apos;ll need to use on of the codes displayed below in order to access your
                                 account.
                             </p>
-                            <p className={'text-neutral-300 mt-4'}>
+                            <p css={tw`text-neutral-300 mt-4`}>
                                 <strong>These codes will not be displayed again.</strong> Please take note of them now
                                 by storing them in a secure repository such as a password manager.
                             </p>
-                            <pre className={'mt-4 rounded font-mono bg-neutral-900 p-4'}>
-                                {recoveryTokens.map(token => <code key={token} className={'block mb-1'}>{token}</code>)}
+                            <pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
+                                {recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
                             </pre>
-                            <div className={'text-right'}>
-                                <button className={'mt-6 btn btn-lg btn-primary'} onClick={dismiss}>
+                            <div css={tw`text-right`}>
+                                <Button css={tw`mt-6`} size={'large'} onClick={dismiss}>
                                     Close
-                                </button>
+                                </Button>
                             </div>
                         </>
                         :
-                        <Form className={'mb-0'}>
-                            <FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
-                            <div className={'flex flex-wrap'}>
-                                <div className={'w-full md:flex-1'}>
-                                    <div className={'w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto'}>
+                        <Form css={tw`mb-0`}>
+                            <FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
+                            <div css={tw`flex flex-wrap`}>
+                                <div css={tw`w-full md:flex-1`}>
+                                    <div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
                                         {!token || !token.length ?
                                             <img
                                                 src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
-                                                className={'w-64 h-64 rounded'}
+                                                css={tw`w-64 h-64 rounded`}
                                             />
                                             :
                                             <img
                                                 src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
                                                 onLoad={() => setLoading(false)}
-                                                className={'w-full h-full shadow-none rounded-0'}
+                                                css={tw`w-full h-full shadow-none rounded-none`}
                                             />
                                         }
                                     </div>
                                 </div>
-                                <div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}>
-                                    <div className={'flex-1'}>
+                                <div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
+                                    <div css={tw`flex-1`}>
                                         <Field
                                             id={'code'}
                                             name={'code'}
@@ -125,10 +127,10 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                                             autoFocus={!loading}
                                         />
                                     </div>
-                                    <div className={'mt-6 md:mt-0 text-right'}>
-                                        <button className={'btn btn-primary btn-sm'} disabled={!isValid}>
+                                    <div css={tw`mt-6 md:mt-0 text-right`}>
+                                        <Button>
                                             Setup
-                                        </button>
+                                        </Button>
                                     </div>
                                 </div>
                             </div>
diff --git a/resources/scripts/components/elements/ConfirmationModal.tsx b/resources/scripts/components/elements/ConfirmationModal.tsx
index 127a43faa..050ceab73 100644
--- a/resources/scripts/components/elements/ConfirmationModal.tsx
+++ b/resources/scripts/components/elements/ConfirmationModal.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 type Props = {
     title: string;
@@ -16,15 +18,15 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
         showSpinnerOverlay={showSpinnerOverlay}
         onDismissed={() => onDismissed()}
     >
-        <h3 className={'mb-6'}>{title}</h3>
-        <p className={'text-sm'}>{children}</p>
-        <div className={'flex items-center justify-end mt-8'}>
-            <button className={'btn btn-secondary btn-sm'} onClick={() => onDismissed()}>
+        <h3 css={tw`mb-6`}>{title}</h3>
+        <p css={tw`text-sm`}>{children}</p>
+        <div css={tw`flex items-center justify-end mt-8`}>
+            <Button isSecondary onClick={() => onDismissed()}>
                 Cancel
-            </button>
-            <button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}>
+            </Button>
+            <Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
                 {buttonText}
-            </button>
+            </Button>
         </div>
     </Modal>
 );

From 43ff67238cd388f99bf4850872d2c9a3a565ab9d Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 15:19:46 -0700
Subject: [PATCH 15/55] Fix search modal

---
 .../dashboard/search/SearchContainer.tsx        |  2 +-
 .../components/dashboard/search/SearchModal.tsx |  7 ++-----
 resources/scripts/components/elements/Field.tsx |  9 +++++----
 .../components/elements/FormikFieldWrapper.tsx  |  6 ++++--
 .../scripts/components/elements/InputError.tsx  | 11 ++++++-----
 .../components/elements/InputSpinner.tsx        | 17 +++++++++--------
 6 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/resources/scripts/components/dashboard/search/SearchContainer.tsx b/resources/scripts/components/dashboard/search/SearchContainer.tsx
index 475d65510..ef3ae48db 100644
--- a/resources/scripts/components/dashboard/search/SearchContainer.tsx
+++ b/resources/scripts/components/dashboard/search/SearchContainer.tsx
@@ -19,7 +19,7 @@ export default () => {
         <>
             {visible &&
             <SearchModal
-                appear={true}
+                appear
                 visible={visible}
                 onDismissed={() => setVisible(false)}
             />
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index 9c1777df3..ac4c2b1bd 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/resources/scripts/components/dashboard/search/SearchModal.tsx
@@ -13,6 +13,7 @@ import { httpErrorToHuman } from '@/api/http';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
 
 type Props = RequiredModalProps;
 
@@ -94,11 +95,7 @@ export default ({ ...props }: Props) => {
                     >
                         <SearchWatcher/>
                         <InputSpinner visible={loading}>
-                            <Field
-                                innerRef={ref}
-                                name={'term'}
-                                className={'input-dark'}
-                            />
+                            <Field as={Input} innerRef={ref} name={'term'}/>
                         </InputSpinner>
                     </FormikFieldWrapper>
                 </Form>
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index c6941cc4d..f89b01343 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/resources/scripts/components/elements/Field.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Field as FormikField, FieldProps } from 'formik';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
@@ -13,8 +13,8 @@ interface OwnProps {
 
 type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
 
-const Field = ({ id, name, light = false, label, description, validate, className, ...props }: Props) => (
-    <FormikField name={name} validate={validate}>
+const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, className, ...props }, ref) => (
+    <FormikField innerRef={ref} name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <React.Fragment>
@@ -39,6 +39,7 @@ const Field = ({ id, name, light = false, label, description, validate, classNam
             )
         }
     </FormikField>
-);
+));
+Field.displayName = 'Field';
 
 export default Field;
diff --git a/resources/scripts/components/elements/FormikFieldWrapper.tsx b/resources/scripts/components/elements/FormikFieldWrapper.tsx
index ec6a0fb13..aeaf1b6d0 100644
--- a/resources/scripts/components/elements/FormikFieldWrapper.tsx
+++ b/resources/scripts/components/elements/FormikFieldWrapper.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Field, FieldProps } from 'formik';
 import classNames from 'classnames';
 import InputError from '@/components/elements/InputError';
+import Label from '@/components/elements/Label';
+import tw from 'twin.macro';
 
 interface Props {
     id?: string;
@@ -18,10 +20,10 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
                 <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
-                    {label && <label htmlFor={id} className={'input-dark-label'}>{label}</label>}
+                    {label && <Label htmlFor={id}>{label}</Label>}
                     {children}
                     <InputError errors={errors} touched={touched} name={field.name}>
-                        {description ? <p className={'input-help'}>{description}</p> : null}
+                        {description || null}
                     </InputError>
                 </div>
             )
diff --git a/resources/scripts/components/elements/InputError.tsx b/resources/scripts/components/elements/InputError.tsx
index df5bc7369..02758350e 100644
--- a/resources/scripts/components/elements/InputError.tsx
+++ b/resources/scripts/components/elements/InputError.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import capitalize from 'lodash-es/capitalize';
 import { FormikErrors, FormikTouched } from 'formik';
+import tw from 'twin.macro';
 
 interface Props {
     errors: FormikErrors<any>;
     touched: FormikTouched<any>;
     name: string;
-    children?: React.ReactNode;
+    children?: string | number | null | undefined;
 }
 
 const InputError = ({ errors, touched, name, children }: Props) => (
     touched[name] && errors[name] ?
-        <p className={'input-help error'}>
+        <p css={tw`text-xs text-red-400 pt-2`}>
             {typeof errors[name] === 'string' ?
                 capitalize(errors[name] as string)
                 :
@@ -19,9 +20,9 @@ const InputError = ({ errors, touched, name, children }: Props) => (
             }
         </p>
         :
-        <React.Fragment>
-            {children}
-        </React.Fragment>
+        <>
+            {children ? <p css={tw`text-xs text-neutral-400 pt-2`}>{children}</p> : null}
+        </>
 );
 
 export default InputError;
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index dabd4f8ff..32f1b18d9 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/resources/scripts/components/elements/InputSpinner.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
 import Spinner from '@/components/elements/Spinner';
 import { CSSTransition } from 'react-transition-group';
+import Fade from '@/components/elements/Fade';
+import tw from 'twin.macro';
 
 const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
-    <div className={'relative'}>
-        <CSSTransition
-            timeout={250}
+    <div css={tw`relative`}>
+        <Fade
+            appear
+            unmountOnExit
             in={visible}
-            unmountOnExit={true}
-            appear={true}
-            classNames={'fade'}
+            timeout={250}
         >
-            <div className={'absolute right-0 h-full flex items-center justify-end pr-3'}>
+            <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                 <Spinner size={'small'}/>
             </div>
-        </CSSTransition>
+        </Fade>
         {children}
     </div>
 );

From 1e163aa7923b79391dc52a9ac58f23b72a67a58b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 15:40:41 -0700
Subject: [PATCH 16/55] Get server console page rendering (mostly) correctly

---
 resources/scripts/components/App.tsx          |   1 -
 .../scripts/components/NavigationBar.tsx      |   1 +
 .../components/NetworkErrorMessage.tsx        |  13 ---
 .../components/ServerOverviewContainer.tsx    |  13 ---
 .../components/dashboard/ServerRow.tsx        |   3 +-
 .../components/elements/PageContentBlock.tsx  |   4 +-
 .../components/elements/SubNavigation.tsx     |  31 ++++++
 .../components/elements/SuspenseSpinner.tsx   |   3 +-
 .../components/elements/TitledGreyBox.tsx     |  11 +-
 .../components/screens/ScreenBlock.tsx        |  17 ++-
 .../scripts/components/server/Console.tsx     |  21 ++--
 .../components/server/ServerConsole.tsx       | 100 ++++++------------
 .../scripts/components/server/StatGraphs.tsx  |  11 +-
 .../components/server/StopOrKillButton.tsx    |  31 ++++++
 .../components/server/WebsocketHandler.tsx    |   2 +-
 resources/scripts/routers/DashboardRouter.tsx |  29 +----
 resources/scripts/routers/ServerRouter.tsx    |   7 +-
 tsconfig.json                                 |   2 +-
 18 files changed, 140 insertions(+), 160 deletions(-)
 delete mode 100644 resources/scripts/components/NetworkErrorMessage.tsx
 delete mode 100644 resources/scripts/components/ServerOverviewContainer.tsx
 create mode 100644 resources/scripts/components/elements/SubNavigation.tsx
 create mode 100644 resources/scripts/components/server/StopOrKillButton.tsx

diff --git a/resources/scripts/components/App.tsx b/resources/scripts/components/App.tsx
index 286261742..dac7fd102 100644
--- a/resources/scripts/components/App.tsx
+++ b/resources/scripts/components/App.tsx
@@ -12,7 +12,6 @@ import ProgressBar from '@/components/elements/ProgressBar';
 import NotFound from '@/components/screens/NotFound';
 import tw from 'twin.macro';
 import GlobalStylesheet from '@/assets/css/GlobalStylesheet';
-import TransitionRouter from '@/TransitionRouter';
 
 interface ExtendedWindow extends Window {
     SiteConfiguration?: SiteSettings;
diff --git a/resources/scripts/components/NavigationBar.tsx b/resources/scripts/components/NavigationBar.tsx
index f8213a34b..206e035c3 100644
--- a/resources/scripts/components/NavigationBar.tsx
+++ b/resources/scripts/components/NavigationBar.tsx
@@ -7,6 +7,7 @@ import { ApplicationStore } from '@/state';
 import SearchContainer from '@/components/dashboard/search/SearchContainer';
 import tw from 'twin.macro';
 import styled from 'styled-components/macro';
+// @ts-ignore
 import * as config from '@/../../tailwind.config.js';
 
 const Navigation = styled.div`
diff --git a/resources/scripts/components/NetworkErrorMessage.tsx b/resources/scripts/components/NetworkErrorMessage.tsx
deleted file mode 100644
index 8d4150f2c..000000000
--- a/resources/scripts/components/NetworkErrorMessage.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import MessageBox from '@/components/MessageBox';
-
-export default ({ message }: { message: string | undefined | null }) => (
-    !message ?
-        null
-        :
-        <div className={'mb-4'}>
-            <MessageBox type={'error'} title={'Error'}>
-                {message}
-            </MessageBox>
-        </div>
-);
diff --git a/resources/scripts/components/ServerOverviewContainer.tsx b/resources/scripts/components/ServerOverviewContainer.tsx
deleted file mode 100644
index 8cc5cf7cb..000000000
--- a/resources/scripts/components/ServerOverviewContainer.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-
-export default class ServerOverviewContainer extends React.PureComponent {
-    render () {
-        return (
-            <div className={'mt-10'}>
-                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account'}>Account</NavLink>
-                <NavLink className={'text-neutral-100 text-sm block mb-2 no-underline hover:underline'} to={'/account/design'}>Design</NavLink>
-            </div>
-        );
-    }
-}
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 1cfe87d87..63866467c 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -39,6 +39,7 @@ export default ({ server }: { server: Server }) => {
 
     useEffect(() => {
         getStats().then(() => {
+            // @ts-ignore
             interval.current = setInterval(() => getStats(), 20000);
         });
 
@@ -79,7 +80,7 @@ export default ({ server }: { server: Server }) => {
             <div css={tw`w-1/3 flex items-baseline relative`}>
                 {!stats ?
                     !statsError ?
-                        <SpinnerOverlay size={'small'} visible={true} backgroundOpacity={0.25}/>
+                        <SpinnerOverlay size={'small'} visible backgroundOpacity={0.25}/>
                         :
                         server.isInstalling ?
                             <div css={tw`flex-1 text-center`}>
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index c9a7018f9..6613b6e51 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -3,10 +3,10 @@ import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
-const PageContentBlock: React.FC = ({ children }) => (
+const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
     <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
-            <ContentContainer css={tw`my-10`}>
+            <ContentContainer css={tw`my-10`} className={className}>
                 {children}
             </ContentContainer>
             <ContentContainer css={tw`mb-4`}>
diff --git a/resources/scripts/components/elements/SubNavigation.tsx b/resources/scripts/components/elements/SubNavigation.tsx
new file mode 100644
index 000000000..83221e935
--- /dev/null
+++ b/resources/scripts/components/elements/SubNavigation.tsx
@@ -0,0 +1,31 @@
+import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+// @ts-ignore
+import config from '../../../../tailwind.config';
+
+const SubNavigation = styled.div`
+    ${tw`w-full bg-neutral-700 shadow`};
+    
+    & > div {
+        ${tw`flex items-center text-sm mx-auto px-2`};
+        max-width: 1200px;
+        
+        & > a, & > div {
+            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
+            
+            &:not(:first-of-type) {
+                ${tw`ml-2`};
+            }
+            
+            &:active, &:hover {
+                ${tw`text-neutral-100`};
+            }
+            
+            &:active, &:hover, &.active {
+                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
+            }
+        }
+    }
+`;
+
+export default SubNavigation;
diff --git a/resources/scripts/components/elements/SuspenseSpinner.tsx b/resources/scripts/components/elements/SuspenseSpinner.tsx
index 870ebc536..fca1e91b2 100644
--- a/resources/scripts/components/elements/SuspenseSpinner.tsx
+++ b/resources/scripts/components/elements/SuspenseSpinner.tsx
@@ -1,10 +1,11 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
 
 const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
     <Suspense
         fallback={
-            <div className={'mx-4 w-3/4 mr-4 flex items-center justify-center'}>
+            <div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
                 <Spinner centered/>
             </div>
         }
diff --git a/resources/scripts/components/elements/TitledGreyBox.tsx b/resources/scripts/components/elements/TitledGreyBox.tsx
index 7e5bb1619..3e83f8689 100644
--- a/resources/scripts/components/elements/TitledGreyBox.tsx
+++ b/resources/scripts/components/elements/TitledGreyBox.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import tw from 'twin.macro';
 
 interface Props {
     icon?: IconProp;
@@ -10,17 +11,17 @@ interface Props {
 }
 
 const TitledGreyBox = ({ icon, title, children, className }: Props) => (
-    <div className={`rounded shadow-md bg-neutral-700 ${className}`}>
-        <div className={'bg-neutral-900 rounded-t p-3 border-b border-black'}>
+    <div css={tw`rounded shadow-md bg-neutral-700`} className={className}>
+        <div css={tw`bg-neutral-900 rounded-t p-3 border-b border-black`}>
             {typeof title === 'string' ?
-                <p className={'text-sm uppercase'}>
-                    {icon && <FontAwesomeIcon icon={icon} className={'mr-2 text-neutral-300'}/>}{title}
+                <p css={tw`text-sm uppercase`}>
+                    {icon && <FontAwesomeIcon icon={icon} css={tw`mr-2 text-neutral-300`}/>}{title}
                 </p>
                 :
                 title
             }
         </div>
-        <div className={'p-3'}>
+        <div css={tw`p-3`}>
             {children}
         </div>
     </div>
diff --git a/resources/scripts/components/screens/ScreenBlock.tsx b/resources/scripts/components/screens/ScreenBlock.tsx
index f20836493..90a39e4dd 100644
--- a/resources/scripts/components/screens/ScreenBlock.tsx
+++ b/resources/scripts/components/screens/ScreenBlock.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
-import { faSyncAlt } from '@fortawesome/free-solid-svg-icons/faSyncAlt';
+import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import styled from 'styled-components/macro';
+import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
 
 interface BaseProps {
@@ -27,17 +26,15 @@ interface PropsWithBack extends BaseProps {
 
 type Props = PropsWithBack | PropsWithRetry;
 
+const spin = keyframes`
+    to { transform: rotate(360deg) }
+`;
+
 const ActionButton = styled.button`
     ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
 
     &.hover\\:spin:hover {
-        animation: spin 2s linear infinite;
-    }
-
-    @keyframes spin {
-        to {
-            transform: rotate(360deg);
-        }
+        animation: ${spin} 2s linear infinite;
     }
 `;
 
diff --git a/resources/scripts/components/server/Console.tsx b/resources/scripts/components/server/Console.tsx
index 5deb90a6d..4ab66f960 100644
--- a/resources/scripts/components/server/Console.tsx
+++ b/resources/scripts/components/server/Console.tsx
@@ -4,9 +4,7 @@ import * as TerminalFit from 'xterm/lib/addons/fit/fit';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ServerContext } from '@/state/server';
 import styled from 'styled-components/macro';
-import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
-import classNames from 'classnames';
 import tw from 'twin.macro';
 
 const theme = {
@@ -56,7 +54,7 @@ export default () => {
     const useRef = useCallback(node => setTerminalElement(node), []);
     const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
     const { connected, instance } = ServerContext.useStoreState(state => state.socket);
-    const [ canSendCommands ] = usePermissions([ 'control.console']);
+    const [ canSendCommands ] = usePermissions([ 'control.console' ]);
 
     const handleConsoleOutput = (line: string, prelude = false) => terminal.writeln(
         (prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
@@ -123,12 +121,13 @@ export default () => {
     }, [ connected, instance ]);
 
     return (
-        <div className={'text-xs font-mono relative'}>
+        <div css={tw`text-xs font-mono relative`}>
             <SpinnerOverlay visible={!connected} size={'large'}/>
             <div
-                className={classNames('rounded-t p-2 bg-black w-full', {
-                    'rounded-b': !canSendCommands,
-                })}
+                css={[
+                    tw`rounded-t p-2 bg-black w-full`,
+                    !canSendCommands && tw`rounded-b`,
+                ]}
                 style={{
                     minHeight: '16rem',
                     maxHeight: '32rem',
@@ -137,13 +136,13 @@ export default () => {
                 <TerminalDiv id={'terminal'} ref={useRef}/>
             </div>
             {canSendCommands &&
-            <div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
-                <div className={'flex-no-shrink p-2 font-bold'}>$</div>
-                <div className={'w-full'}>
+            <div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
+                <div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
+                <div css={tw`w-full`}>
                     <input
                         type={'text'}
                         disabled={!instance || !connected}
-                        className={'bg-transparent text-neutral-100 p-2 pl-0 w-full'}
+                        css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
                         onKeyDown={e => handleCommandKeydown(e)}
                     />
                 </div>
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index 16675b35e..d2f7d5f95 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -13,35 +13,15 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import ContentContainer from '@/components/elements/ContentContainer';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import StopOrKillButton from '@/components/server/StopOrKillButton';
 
-type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
+export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
 const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
 const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
 
-const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
-    const [ clicked, setClicked ] = useState(false);
-    const status = ServerContext.useStoreState(state => state.status.value);
-
-    useEffect(() => {
-        setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
-    }, [ status ]);
-
-    return (
-        <button
-            className={'btn btn-red btn-xs'}
-            disabled={status === 'offline'}
-            onClick={e => {
-                e.preventDefault();
-                onPress(clicked ? 'kill' : 'stop');
-                setClicked(true);
-            }}
-        >
-            {clicked ? 'Kill' : 'Stop'}
-        </button>
-    );
-};
-
 export default () => {
     const [ memory, setMemory ] = useState(0);
     const [ cpu, setCpu ] = useState(0);
@@ -81,17 +61,17 @@ export default () => {
         };
     }, [ instance, connected ]);
 
-    const disklimit = server.limits.disk != 0 ? bytesToHuman(server.limits.disk * 1000 * 1000) : "Unlimited";
-    const memorylimit = server.limits.memory != 0 ? bytesToHuman(server.limits.memory * 1000 * 1000) : "Unlimited";
+    const disklimit = server.limits.disk ? bytesToHuman(server.limits.disk * 1000 * 1000) : 'Unlimited';
+    const memorylimit = server.limits.memory ? bytesToHuman(server.limits.memory * 1000 * 1000) : 'Unlimited';
 
     return (
-        <PageContentBlock className={'flex'}>
-            <div className={'w-1/4'}>
+        <PageContentBlock css={tw`flex`}>
+            <div css={tw`w-1/4`}>
                 <TitledGreyBox title={server.name} icon={faServer}>
-                    <p className={'text-xs uppercase'}>
+                    <p css={tw`text-xs uppercase`}>
                         <FontAwesomeIcon
                             icon={faCircle}
-                            fixedWidth={true}
+                            fixedWidth
                             className={classNames('mr-1', {
                                 'text-red-500': status === 'offline',
                                 'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
@@ -100,39 +80,27 @@ export default () => {
                         />
                         &nbsp;{status}
                     </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faMicrochip}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{cpu.toFixed(2)} %
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faMicrochip} fixedWidth css={tw`mr-1`}/> {cpu.toFixed(2)}%
                     </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faMemory}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{bytesToHuman(memory)}
-                        <span className={'text-neutral-500'}> / {memorylimit}</span>
-                        </p>
-                    <p className={'text-xs mt-2'}>
-                        <FontAwesomeIcon
-                            icon={faHdd}
-                            fixedWidth={true}
-                            className={'mr-1'}
-                        />
-                        &nbsp;{bytesToHuman(disk)}
-                        <span className={'text-neutral-500'}> / {disklimit}</span>
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faMemory} fixedWidth css={tw`mr-1`}/> {bytesToHuman(memory)}
+                        <span css={tw`text-neutral-500`}> / {memorylimit}</span>
+                    </p>
+                    <p css={tw`text-xs mt-2`}>
+                        <FontAwesomeIcon icon={faHdd} fixedWidth css={tw`mr-1`}/>&nbsp;{bytesToHuman(disk)}
+                        <span css={tw`text-neutral-500`}> / {disklimit}</span>
                     </p>
                 </TitledGreyBox>
                 {!server.isInstalling ?
-                    <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny={true}>
-                        <div className={'grey-box justify-center'}>
+                    <Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
+                        <div css={tw`shadow-md bg-neutral-700 rounded p-3 flex text-xs mt-4 justify-center`}>
                             <Can action={'control.start'}>
-                                <button
-                                    className={'btn btn-secondary btn-green btn-xs mr-2'}
+                                <Button
+                                    size={'xsmall'}
+                                    color={'green'}
+                                    isSecondary
+                                    css={tw`mr-2`}
                                     disabled={status !== 'offline'}
                                     onClick={e => {
                                         e.preventDefault();
@@ -140,18 +108,20 @@ export default () => {
                                     }}
                                 >
                                     Start
-                                </button>
+                                </Button>
                             </Can>
                             <Can action={'control.restart'}>
-                                <button
-                                    className={'btn btn-secondary btn-primary btn-xs mr-2'}
+                                <Button
+                                    size={'xsmall'}
+                                    isSecondary
+                                    css={tw`mr-2`}
                                     onClick={e => {
                                         e.preventDefault();
                                         sendPowerCommand('restart');
                                     }}
                                 >
                                     Restart
-                                </button>
+                                </Button>
                             </Can>
                             <Can action={'control.stop'}>
                                 <StopOrKillButton onPress={action => sendPowerCommand(action)}/>
@@ -159,9 +129,9 @@ export default () => {
                         </div>
                     </Can>
                     :
-                    <div className={'mt-4 rounded bg-yellow-500 p-3'}>
+                    <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
                         <ContentContainer>
-                            <p className={'text-sm text-yellow-900'}>
+                            <p css={tw`text-sm text-yellow-900`}>
                                 This server is currently running its installation process and most actions are
                                 unavailable.
                             </p>
@@ -169,7 +139,7 @@ export default () => {
                     </div>
                 }
             </div>
-            <div className={'flex-1 ml-4'}>
+            <div css={tw`flex-1 ml-4`}>
                 <SuspenseSpinner>
                     <ChunkedConsole/>
                     <ChunkedStatGraphs/>
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index a7595b947..e404a8475 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -6,6 +6,7 @@ import merge from 'lodash-es/merge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
 import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
+import tw from 'twin.macro';
 
 const chartDefaults: ChartConfiguration = {
     type: 'line',
@@ -157,21 +158,21 @@ export default () => {
     }, [ instance, connected, memory, cpu ]);
 
     return (
-        <div className={'flex mt-4'}>
-            <TitledGreyBox title={'Memory usage'} icon={faMemory} className={'flex-1 mr-2'}>
+        <div css={tw`flex mt-4`}>
+            <TitledGreyBox title={'Memory usage'} icon={faMemory} css={tw`flex-1 mr-2`}>
                 {status !== 'offline' ?
                     <canvas id={'memory_chart'} ref={memoryRef} aria-label={'Server Memory Usage Graph'} role={'img'}/>
                     :
-                    <p className={'text-xs text-neutral-400 text-center p-3'}>
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
                         Server is offline.
                     </p>
                 }
             </TitledGreyBox>
-            <TitledGreyBox title={'CPU usage'} icon={faMicrochip} className={'flex-1 ml-2'}>
+            <TitledGreyBox title={'CPU usage'} icon={faMicrochip} css={tw`flex-1 ml-2`}>
                 {status !== 'offline' ?
                     <canvas id={'cpu_chart'} ref={cpuRef} aria-label={'Server CPU Usage Graph'} role={'img'}/>
                     :
-                    <p className={'text-xs text-neutral-400 text-center p-3'}>
+                    <p css={tw`text-xs text-neutral-400 text-center p-3`}>
                         Server is offline.
                     </p>
                 }
diff --git a/resources/scripts/components/server/StopOrKillButton.tsx b/resources/scripts/components/server/StopOrKillButton.tsx
new file mode 100644
index 000000000..0d8b3db2e
--- /dev/null
+++ b/resources/scripts/components/server/StopOrKillButton.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { ServerContext } from '@/state/server';
+import tw from 'twin.macro';
+import { PowerAction } from '@/components/server/ServerConsole';
+import Button from '@/components/elements/Button';
+
+const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
+    const [ clicked, setClicked ] = useState(false);
+    const status = ServerContext.useStoreState(state => state.status.value);
+
+    useEffect(() => {
+        setClicked(state => [ 'stopping' ].indexOf(status) < 0 ? false : state);
+    }, [ status ]);
+
+    return (
+        <Button
+            color={'red'}
+            size={'xsmall'}
+            disabled={status === 'offline'}
+            onClick={e => {
+                e.preventDefault();
+                onPress(clicked ? 'kill' : 'stop');
+                setClicked(true);
+            }}
+        >
+            {clicked ? 'Kill' : 'Stop'}
+        </Button>
+    );
+};
+
+export default StopOrKillButton;
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index dc7ffa3c3..ae6d8c165 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/resources/scripts/components/server/WebsocketHandler.tsx
@@ -71,7 +71,7 @@ export default () => {
                     <ContentContainer className={'flex items-center justify-center'}>
                         <Spinner size={'small'}/>
                         <p className={'ml-2 text-sm text-red-100'}>
-                            We're having some trouble connecting to your server, please wait...
+                            We&apos;re having some trouble connecting to your server, please wait...
                         </p>
                     </ContentContainer>
                 </div>
diff --git a/resources/scripts/routers/DashboardRouter.tsx b/resources/scripts/routers/DashboardRouter.tsx
index c3abf3176..79ebbe4a1 100644
--- a/resources/scripts/routers/DashboardRouter.tsx
+++ b/resources/scripts/routers/DashboardRouter.tsx
@@ -5,35 +5,8 @@ import NavigationBar from '@/components/NavigationBar';
 import DashboardContainer from '@/components/dashboard/DashboardContainer';
 import AccountApiContainer from '@/components/dashboard/AccountApiContainer';
 import NotFound from '@/components/screens/NotFound';
-import styled from 'styled-components/macro';
-import tw from 'twin.macro';
-import config from '@/../../tailwind.config.js';
 import TransitionRouter from '@/TransitionRouter';
-
-const SubNavigation = styled.div`
-    ${tw`w-full bg-neutral-700 shadow`};
-    
-    & > div {
-        ${tw`flex items-center text-sm mx-auto px-2`};
-        max-width: 1200px;
-        
-        & > a, & > div {
-            ${tw`inline-block py-3 px-4 text-neutral-300 no-underline transition-all duration-150`};
-            
-            &:not(:first-of-type) {
-                ${tw`ml-2`};
-            }
-            
-            &:active, &:hover {
-                ${tw`text-neutral-100`};
-            }
-            
-            &:active, &:hover, &.active {
-                box-shadow: inset 0 -2px ${config.theme.colors.cyan['500']};
-            }
-        }
-    }
-`;
+import SubNavigation from '@/components/elements/SubNavigation';
 
 export default ({ location }: RouteComponentProps) => (
     <>
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index 82f6d0c77..a053262d6 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -23,6 +23,7 @@ import NotFound from '@/components/screens/NotFound';
 import { useStoreState } from 'easy-peasy';
 import useServer from '@/plugins/useServer';
 import ScreenBlock from '@/components/screens/ScreenBlock';
+import SubNavigation from '@/components/elements/SubNavigation';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const { rootAdmin } = useStoreState(state => state.user.data!);
@@ -71,8 +72,8 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                 :
                 <>
                     <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
-                        <div id={'sub-navigation'}>
-                            <div className={'items'}>
+                        <SubNavigation>
+                            <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>
                                 <Can action={'file.*'}>
                                     <NavLink to={`${match.url}/files`}>File Manager</NavLink>
@@ -93,7 +94,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                     <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                                 </Can>
                             </div>
-                        </div>
+                        </SubNavigation>
                     </CSSTransition>
                     {(installing && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${server.id}`)))) ?
                         <ScreenBlock
diff --git a/tsconfig.json b/tsconfig.json
index 3c8edb202..7bae0683d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2015",
-    "module": "es2015",
+    "module": "es2020",
     "jsx": "react",
     "strict": true,
     "noEmit": true,

From d27bda1c746fbd3130a2c1a57e1388e40899f055 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 15:58:14 -0700
Subject: [PATCH 17/55] Get settings page in working order

---
 .../scripts/components/elements/Button.tsx    | 41 +++++++++--------
 .../components/server/WebsocketHandler.tsx    |  7 +--
 .../server/settings/ReinstallServerBox.tsx    | 34 +++++++++-----
 .../server/settings/RenameServerBox.tsx       | 12 +++--
 .../server/settings/SettingsContainer.tsx     | 46 ++++++++++---------
 5 files changed, 80 insertions(+), 60 deletions(-)

diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index 276ad1b6b..b9ac57c4e 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -10,20 +10,10 @@ interface Props {
     isSecondary?: boolean;
 }
 
-const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
-    ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
+const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
+    ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150 border`};
     
-    ${props => props.isSecondary && css<Props>`
-        ${tw`border border-neutral-600 bg-transparent text-neutral-200`};
-        
-        &:hover:not(:disabled) {
-            ${tw`border-neutral-500 text-neutral-100`};
-            ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
-            ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
-        }
-    `};
-    
-    ${props => (!props.color || props.color === 'primary') && css<Props>`
+    ${props => ((!props.isSecondary && !props.color) || props.color === 'primary') && css<Props>`
         ${props => !props.isSecondary && tw`bg-primary-500 border-primary-600 border text-primary-50`};
         
         &:hover:not(:disabled) {
@@ -32,7 +22,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     `};
     
     ${props => props.color === 'grey' && css`
-        ${tw`border border-neutral-600 bg-neutral-500 text-neutral-50`};
+        ${tw`border-neutral-600 bg-neutral-500 text-neutral-50`};
         
         &:hover:not(:disabled) {
             ${tw`bg-neutral-600 border-neutral-700`};
@@ -40,7 +30,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     `};
     
     ${props => props.color === 'green' && css<Props>`
-        ${tw`border border-green-600 bg-green-500 text-green-50`};
+        ${tw`border-green-600 bg-green-500 text-green-50`};
         
         &:hover:not(:disabled) {
             ${tw`bg-green-600 border-green-700`};
@@ -54,7 +44,7 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     `};
     
     ${props => props.color === 'red' && css<Props>`
-        ${tw`border border-red-600 bg-red-500 text-red-50`};
+        ${tw`border-red-600 bg-red-500 text-red-50`};
         
         &:hover:not(:disabled) {
             ${tw`bg-red-600 border-red-700`};
@@ -72,13 +62,23 @@ const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
     ${props => props.size === 'large' && tw`p-4 text-sm`};
     ${props => props.size === 'xlarge' && tw`p-4 w-full`};
     
+    ${props => props.isSecondary && css<Props>`
+        ${tw`border-neutral-600 bg-transparent text-neutral-200`};
+        
+        &:hover:not(:disabled) {
+            ${tw`border-neutral-500 text-neutral-100`};
+            ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
+            ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
+        }
+    `};
+    
     &:disabled { opacity: 0.55; cursor: default }
 `;
 
 type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props> & Props;
 
 const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
-    <StyledButton {...props}>
+    <ButtonStyle {...props}>
         {isLoading &&
         <div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
             <Spinner size={'small'}/>
@@ -87,7 +87,12 @@ const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) =>
         <span css={isLoading ? tw`text-transparent` : undefined}>
             {children}
         </span>
-    </StyledButton>
+    </ButtonStyle>
 );
 
+type LinkProps = Omit<JSX.IntrinsicElements['a'], 'ref' | keyof Props> & Props;
+
+const LinkButton: React.FC<LinkProps> = props => <ButtonStyle as={'a'} {...props}/>;
+
+export { LinkButton, ButtonStyle };
 export default Button;
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index ae6d8c165..174626f4d 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/resources/scripts/components/server/WebsocketHandler.tsx
@@ -5,6 +5,7 @@ import getWebsocketToken from '@/api/server/getWebsocketToken';
 import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
+import tw from 'twin.macro';
 
 export default () => {
     const server = ServerContext.useStoreState(state => state.server.data);
@@ -67,10 +68,10 @@ export default () => {
     return (
         error ?
             <CSSTransition timeout={250} in={true} appear={true} classNames={'fade'}>
-                <div className={'bg-red-500 py-2'}>
-                    <ContentContainer className={'flex items-center justify-center'}>
+                <div css={tw`bg-red-500 py-2`}>
+                    <ContentContainer css={tw`flex items-center justify-center`}>
                         <Spinner size={'small'}/>
-                        <p className={'ml-2 text-sm text-red-100'}>
+                        <p css={tw`ml-2 text-sm text-red-100`}>
                             We&apos;re having some trouble connecting to your server, please wait...
                         </p>
                     </ContentContainer>
diff --git a/resources/scripts/components/server/settings/ReinstallServerBox.tsx b/resources/scripts/components/server/settings/ReinstallServerBox.tsx
index f958f04ec..eef96c16c 100644
--- a/resources/scripts/components/server/settings/ReinstallServerBox.tsx
+++ b/resources/scripts/components/server/settings/ReinstallServerBox.tsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react';
 import { ServerContext } from '@/state/server';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import reinstallServer from '@/api/server/reinstallServer';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 export default () => {
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
@@ -19,7 +20,11 @@ export default () => {
         setIsSubmitting(true);
         reinstallServer(uuid)
             .then(() => {
-                addFlash({ key: 'settings', type: 'success', message: 'Your server has begun the reinstallation process.' });
+                addFlash({
+                    key: 'settings',
+                    type: 'success',
+                    message: 'Your server has begun the reinstallation process.',
+                });
             })
             .catch(error => {
                 console.error(error);
@@ -30,10 +35,10 @@ export default () => {
                 setIsSubmitting(false);
                 setModalVisible(false);
             });
-    }
+    };
 
     return (
-        <TitledGreyBox title={'Reinstall Server'} className={'relative'}>
+        <TitledGreyBox title={'Reinstall Server'} css={tw`relative`}>
             <ConfirmationModal
                 title={'Confirm server reinstallation'}
                 buttonText={'Yes, reinstall server'}
@@ -42,21 +47,26 @@ export default () => {
                 visible={modalVisible}
                 onDismissed={() => setModalVisible(false)}
             >
-                Your server will be stopped and some files may be deleted or modified during this process, are you sure you wish to continue?
+                Your server will be stopped and some files may be deleted or modified during this process, are you sure
+                you wish to continue?
             </ConfirmationModal>
-            <p className={'text-sm'}>
+            <p css={tw`text-sm`}>
                 Reinstalling your server will stop it, and then re-run the installation script that initially
-                set it up. <strong className={'font-bold'}>Some files may be deleted or modified during this process,
-                please back up your data before continuing.</strong>
+                set it up.&nbsp;
+                <strong css={tw`font-medium`}>
+                    Some files may be deleted or modified during this process, please back up your data before
+                    continuing.
+                </strong>
             </p>
-            <div className={'mt-6 text-right'}>
-                <button
+            <div css={tw`mt-6 text-right`}>
+                <Button
                     type={'button'}
-                    className={'btn btn-sm btn-secondary btn-red'}
+                    color={'red'}
+                    isSecondary
                     onClick={() => setModalVisible(true)}
                 >
                     Reinstall Server
-                </button>
+                </Button>
             </div>
         </TitledGreyBox>
     );
diff --git a/resources/scripts/components/server/settings/RenameServerBox.tsx b/resources/scripts/components/server/settings/RenameServerBox.tsx
index 2904362e3..7e6832c6f 100644
--- a/resources/scripts/components/server/settings/RenameServerBox.tsx
+++ b/resources/scripts/components/server/settings/RenameServerBox.tsx
@@ -9,6 +9,8 @@ import { object, string } from 'yup';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 interface Values {
     name: string;
@@ -18,19 +20,19 @@ const RenameServerBox = () => {
     const { isSubmitting } = useFormikContext<Values>();
 
     return (
-        <TitledGreyBox title={'Change Server Name'} className={'relative'}>
+        <TitledGreyBox title={'Change Server Name'} css={tw`relative`}>
             <SpinnerOverlay visible={isSubmitting}/>
-            <Form className={'mb-0'}>
+            <Form css={tw`mb-0`}>
                 <Field
                     id={'name'}
                     name={'name'}
                     label={'Server Name'}
                     type={'text'}
                 />
-                <div className={'mt-6 text-right'}>
-                    <button type={'submit'} className={'btn btn-sm btn-primary'}>
+                <div css={tw`mt-6 text-right`}>
+                    <Button type={'submit'}>
                         Save
-                    </button>
+                    </Button>
                 </div>
             </Form>
         </TitledGreyBox>
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index 98d399e8f..5697ca824 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -9,6 +9,10 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import Can from '@/components/elements/Can';
 import ReinstallServerBox from '@/components/server/settings/ReinstallServerBox';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import Input from '@/components/elements/Input';
+import Label from '@/components/elements/Label';
+import Button, { LinkButton } from '@/components/elements/Button';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@@ -16,52 +20,50 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'settings'} className={'mb-4'}/>
-            <div className={'md:flex'}>
+            <FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
+            <div css={tw`md:flex`}>
                 <Can action={'file.sftp'}>
-                    <div className={'w-full md:flex-1 md:max-w-1/2 md:mr-10'}>
+                    <div css={tw`w-full md:flex-1 md:mr-10`}>
                         <TitledGreyBox title={'SFTP Details'}>
                             <div>
-                                <label className={'input-dark-label'}>Server Address</label>
-                                <input
+                                <Label>Server Address</Label>
+                                <Input
                                     type={'text'}
-                                    className={'input-dark'}
                                     value={`sftp://${server.sftpDetails.ip}:${server.sftpDetails.port}`}
-                                    readOnly={true}
+                                    readOnly
                                 />
                             </div>
-                            <div className={'mt-6'}>
-                                <label className={'input-dark-label'}>Username</label>
-                                <input
+                            <div css={tw`mt-6`}>
+                                <Label>Username</Label>
+                                <Input
                                     type={'text'}
-                                    className={'input-dark'}
                                     value={`${user.username}.${server.id}`}
-                                    readOnly={true}
+                                    readOnly
                                 />
                             </div>
-                            <div className={'mt-6 flex items-center'}>
-                                <div className={'flex-1'}>
-                                    <div className={'border-l-4 border-cyan-500 p-3'}>
-                                        <p className={'text-xs text-neutral-200'}>
+                            <div css={tw`mt-6 flex items-center`}>
+                                <div css={tw`flex-1`}>
+                                    <div css={tw`border-l-4 border-cyan-500 p-3`}>
+                                        <p css={tw`text-xs text-neutral-200`}>
                                             Your SFTP password is the same as the password you use to access this panel.
                                         </p>
                                     </div>
                                 </div>
-                                <div className={'ml-4'}>
-                                    <a
+                                <div css={tw`ml-4`}>
+                                    <LinkButton
+                                        isSecondary
                                         href={`sftp://${user.username}.${server.id}@${server.sftpDetails.ip}:${server.sftpDetails.port}`}
-                                        className={'btn btn-sm btn-secondary'}
                                     >
                                         Launch SFTP
-                                    </a>
+                                    </LinkButton>
                                 </div>
                             </div>
                         </TitledGreyBox>
                     </div>
                 </Can>
-                <div className={'w-full mt-6 md:flex-1 md:max-w-1/2 md:mt-0'}>
+                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
                     <Can action={'settings.rename'}>
-                        <div className={'mb-6 md:mb-10'}>
+                        <div css={tw`mb-6 md:mb-10`}>
                             <RenameServerBox/>
                         </div>
                     </Can>

From f3586056f42f9df2c5aa3a5c94f87e18603c0abc Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 16:26:07 -0700
Subject: [PATCH 18/55] Update users screens

---
 .../scripts/components/FlashMessageRender.tsx | 27 ++++++++------
 .../scripts/components/elements/Checkbox.tsx  |  7 ++--
 .../components/elements/DropdownMenu.tsx      | 15 +++-----
 .../scripts/components/elements/Input.tsx     | 33 ++++++++++++++++-
 .../scripts/components/elements/Modal.tsx     |  1 +
 .../server/backups/BackupContainer.tsx        | 13 ++++---
 .../server/backups/BackupContextMenu.tsx      | 21 ++++++-----
 .../components/server/backups/BackupRow.tsx   | 30 ++++++++-------
 .../server/backups/ChecksumModal.tsx          |  9 +++--
 .../server/backups/CreateBackupButton.tsx     | 37 ++++++++-----------
 .../server/users/AddSubuserButton.tsx         | 14 +++----
 .../server/users/EditSubuserModal.tsx         | 23 ++++++------
 .../server/users/RemoveSubuserButton.tsx      |  5 ++-
 .../components/server/users/UserRow.tsx       | 30 ++++++++-------
 .../server/users/UsersContainer.tsx           | 11 +++---
 15 files changed, 155 insertions(+), 121 deletions(-)

diff --git a/resources/scripts/components/FlashMessageRender.tsx b/resources/scripts/components/FlashMessageRender.tsx
index 1b449ecbf..6bd22f891 100644
--- a/resources/scripts/components/FlashMessageRender.tsx
+++ b/resources/scripts/components/FlashMessageRender.tsx
@@ -14,18 +14,21 @@ const FlashMessageRender = ({ byKey, className }: Props) => {
     ));
 
     return (
-        <div className={className}>
-            {
-                flashes.map((flash, index) => (
-                    <React.Fragment key={flash.id || flash.type + flash.message}>
-                        {index > 0 && <div css={tw`mt-2`}></div>}
-                        <MessageBox type={flash.type} title={flash.title}>
-                            {flash.message}
-                        </MessageBox>
-                    </React.Fragment>
-                ))
-            }
-        </div>
+        flashes.length ?
+            <div className={className}>
+                {
+                    flashes.map((flash, index) => (
+                        <React.Fragment key={flash.id || flash.type + flash.message}>
+                            {index > 0 && <div css={tw`mt-2`}></div>}
+                            <MessageBox type={flash.type} title={flash.title}>
+                                {flash.message}
+                            </MessageBox>
+                        </React.Fragment>
+                    ))
+                }
+            </div>
+            :
+            null
     );
 };
 
diff --git a/resources/scripts/components/elements/Checkbox.tsx b/resources/scripts/components/elements/Checkbox.tsx
index bd7b7a708..ae7548dcf 100644
--- a/resources/scripts/components/elements/Checkbox.tsx
+++ b/resources/scripts/components/elements/Checkbox.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
+import Input from '@/components/elements/Input';
 
 interface Props {
     name: string;
     value: string;
 }
 
-type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
+type OmitFields = 'ref' | 'name' | 'value' | 'type' | 'checked' | 'onClick' | 'onChange';
 
-type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
+type InputProps = Omit<JSX.IntrinsicElements['input'], OmitFields>;
 
 const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
     <Field name={name}>
@@ -20,7 +21,7 @@ const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
             }
 
             return (
-                <input
+                <Input
                     {...field}
                     {...props}
                     type={'checkbox'}
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 035442c31..11e70889f 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
+import Fade from '@/components/elements/Fade';
 
 interface Props {
     children: React.ReactNode;
@@ -55,29 +56,25 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
 
         return () => {
             document.removeEventListener('click', windowListener);
-        }
+        };
     }, [ visible ]);
 
     return (
         <div>
             {renderToggle(onClickHandler)}
-            <CSSTransition
-                timeout={250}
-                in={visible}
-                unmountOnExit={true}
-                classNames={'fade'}
-            >
+            <Fade timeout={250} in={visible} unmountOnExit>
                 <div
                     ref={menu}
                     onClick={e => {
                         e.stopPropagation();
                         setVisible(false);
                     }}
-                    className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
+                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
+                    style={{ minWidth: '12rem' }}
                 >
                     {children}
                 </div>
-            </CSSTransition>
+            </Fade>
         </div>
     );
 };
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index 129249ba9..4615ab14b 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -16,6 +16,25 @@ const light = css<Props>`
     }
 `;
 
+const checkboxStyle = css<Props>`
+    ${tw`cursor-pointer appearance-none inline-block align-middle select-none flex-shrink-0 w-4 h-4 text-primary-400 border border-neutral-300 rounded-sm`};
+    color-adjust: exact;
+    background-origin: border-box;
+    transition: all 75ms linear, box-shadow 25ms linear;
+
+    &:checked {
+        ${tw`border-transparent bg-no-repeat bg-center`};
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+        background-color: currentColor;
+        background-size: 100% 100%;
+    }
+
+    &:focus {
+        ${tw`outline-none border-primary-300`};
+        box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
+    }
+`;
+
 const inputStyle = css<Props>`
     // Reset to normal styling.
     ${tw`appearance-none w-full min-w-0`};
@@ -43,7 +62,19 @@ const inputStyle = css<Props>`
     ${props => props.hasError && tw`text-red-600 border-red-500 hover:border-red-600`};
 `;
 
-const Input = styled.input<Props>`${inputStyle}`;
+const Input = styled.input<Props>`
+    &:not([type="checkbox"]):not([type="radio"]) {
+        ${inputStyle};
+    }
+    
+    &[type="checkbox"], &[type="radio"] {
+        ${checkboxStyle};
+        
+        &[type="radio"] {
+            ${tw`rounded-full`};
+        }
+    }
+`;
 const Textarea = styled.textarea<Props>`${inputStyle}`;
 
 export { Textarea };
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 0ef756d3c..9e968b0db 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -27,6 +27,7 @@ const ModalMask = styled.div`
 
 const ModalContainer = styled.div<{ alignTop?: boolean }>`
     ${tw`relative flex flex-col w-full m-auto`};
+    max-height: calc(100vh - 8rem);
     max-width: 50%;
     // @todo max-w-screen-lg perhaps?
     ${props => props.alignTop && 'margin-top: 10%'};
diff --git a/resources/scripts/components/server/backups/BackupContainer.tsx b/resources/scripts/components/server/backups/BackupContainer.tsx
index 1dbe3070e..669f04e84 100644
--- a/resources/scripts/components/server/backups/BackupContainer.tsx
+++ b/resources/scripts/components/server/backups/BackupContainer.tsx
@@ -10,6 +10,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import BackupRow from '@/components/server/backups/BackupRow';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
 
 export default () => {
     const { uuid, featureLimits } = useServer();
@@ -31,14 +32,14 @@ export default () => {
     }, []);
 
     if (backups.length === 0 && loading) {
-        return <Spinner size={'large'} centered={true}/>;
+        return <Spinner size={'large'} centered/>;
     }
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'backups'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'backups'} css={tw`mb-4`}/>
             {!backups.length ?
-                <p className="text-center text-sm text-neutral-400">
+                <p css={tw`text-center text-sm text-neutral-400`}>
                     There are no backups stored for this server.
                 </p>
                 :
@@ -46,7 +47,7 @@ export default () => {
                     {backups.map((backup, index) => <BackupRow
                         key={backup.uuid}
                         backup={backup}
-                        className={index !== (backups.length - 1) ? 'mb-2' : undefined}
+                        css={index > 0 ? tw`mt-2` : undefined}
                     />)}
                 </div>
             }
@@ -57,12 +58,12 @@ export default () => {
             }
             <Can action={'backup.create'}>
                 {(featureLimits.backups > 0 && backups.length > 0) &&
-                <p className="text-center text-xs text-neutral-400 mt-2">
+                <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
                     {backups.length} of {featureLimits.backups} backups have been created for this server.
                 </p>
                 }
                 {featureLimits.backups > 0 && featureLimits.backups !== backups.length &&
-                <div className={'mt-6 flex justify-end'}>
+                <div css={tw`mt-6 flex justify-end`}>
                     <CreateBackupButton/>
                 </div>
                 }
diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx
index 16b636e51..7d2def09f 100644
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/resources/scripts/components/server/backups/BackupContextMenu.tsx
@@ -16,6 +16,7 @@ import deleteBackup from '@/api/server/backups/deleteBackup';
 import { ServerContext } from '@/state/server';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import Can from '@/components/elements/Can';
+import tw from 'twin.macro';
 
 interface Props {
     backup: ServerBackup;
@@ -61,8 +62,8 @@ export default ({ backup }: Props) => {
         <>
             {visible &&
             <ChecksumModal
+                appear
                 visible={visible}
-                appear={true}
                 onDismissed={() => setVisible(false)}
                 checksum={backup.sha256Hash}
             />
@@ -84,27 +85,27 @@ export default ({ backup }: Props) => {
                 renderToggle={onClick => (
                     <button
                         onClick={onClick}
-                        className={'text-neutral-200 transition-color duration-150 hover:text-neutral-100 p-2'}
+                        css={tw`text-neutral-200 transition-colors duration-150 hover:text-neutral-100 p-2`}
                     >
                         <FontAwesomeIcon icon={faEllipsisH}/>
                     </button>
                 )}
             >
-                <div className={'text-sm'}>
+                <div css={tw`text-sm`}>
                     <Can action={'backup.download'}>
                         <DropdownButtonRow onClick={() => doDownload()}>
-                            <FontAwesomeIcon fixedWidth={true} icon={faCloudDownloadAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Download</span>
+                            <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Download</span>
                         </DropdownButtonRow>
                     </Can>
                     <DropdownButtonRow onClick={() => setVisible(true)}>
-                        <FontAwesomeIcon fixedWidth={true} icon={faLock} className={'text-xs'}/>
-                        <span className={'ml-2'}>Checksum</span>
+                        <FontAwesomeIcon fixedWidth icon={faLock} css={tw`text-xs`}/>
+                        <span css={tw`ml-2`}>Checksum</span>
                     </DropdownButtonRow>
                     <Can action={'backup.delete'}>
-                        <DropdownButtonRow danger={true} onClick={() => setDeleteVisible(true)}>
-                            <FontAwesomeIcon fixedWidth={true} icon={faTrashAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Delete</span>
+                        <DropdownButtonRow danger onClick={() => setDeleteVisible(true)}>
+                            <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Delete</span>
                         </DropdownButtonRow>
                     </Can>
                 </div>
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 8a4f4f623..3f96a7c7f 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -10,6 +10,8 @@ import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     backup: ServerBackup;
@@ -34,38 +36,38 @@ export default ({ backup, className }: Props) => {
     });
 
     return (
-        <div className={`grey-row-box flex items-center ${className}`}>
-            <div className={'mr-4'}>
+        <GreyRowBox css={tw`flex items-center`} className={className}>
+            <div css={tw`mr-4`}>
                 {backup.completedAt ?
-                    <FontAwesomeIcon icon={faArchive} className={'text-neutral-300'}/>
+                    <FontAwesomeIcon icon={faArchive} css={tw`text-neutral-300`}/>
                     :
                     <Spinner size={'small'}/>
                 }
             </div>
-            <div className={'flex-1'}>
-                <p className={'text-sm mb-1'}>
+            <div css={tw`flex-1`}>
+                <p css={tw`text-sm mb-1`}>
                     {backup.name}
                     {backup.completedAt &&
-                    <span className={'ml-3 text-neutral-300 text-xs font-thin'}>{bytesToHuman(backup.bytes)}</span>
+                    <span css={tw`ml-3 text-neutral-300 text-xs font-thin`}>{bytesToHuman(backup.bytes)}</span>
                     }
                 </p>
-                <p className={'text-xs text-neutral-400 font-mono'}>
+                <p css={tw`text-xs text-neutral-400 font-mono`}>
                     {backup.uuid}
                 </p>
             </div>
-            <div className={'ml-8 text-center'}>
+            <div css={tw`ml-8 text-center`}>
                 <p
-                    title={format(backup.createdAt, 'ddd, MMMM Do, YYYY HH:mm:ss Z')}
-                    className={'text-sm'}
+                    title={format(backup.createdAt, 'ddd, MMMM do, yyyy HH:mm:ss')}
+                    css={tw`text-sm`}
                 >
                     {formatDistanceToNow(backup.createdAt, { includeSeconds: true, addSuffix: true })}
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase mt-1'}>Created</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase mt-1`}>Created</p>
             </div>
             <Can action={'backup.download'}>
-                <div className={'ml-6'} style={{ marginRight: '-0.5rem' }}>
+                <div css={tw`ml-6`} style={{ marginRight: '-0.5rem' }}>
                     {!backup.completedAt ?
-                        <div className={'p-2 invisible'}>
+                        <div css={tw`p-2 invisible`}>
                             <FontAwesomeIcon icon={faEllipsisH}/>
                         </div>
                         :
@@ -73,6 +75,6 @@ export default ({ backup, className }: Props) => {
                     }
                 </div>
             </Can>
-        </div>
+        </GreyRowBox>
     );
 };
diff --git a/resources/scripts/components/server/backups/ChecksumModal.tsx b/resources/scripts/components/server/backups/ChecksumModal.tsx
index f400da75b..91b275904 100644
--- a/resources/scripts/components/server/backups/ChecksumModal.tsx
+++ b/resources/scripts/components/server/backups/ChecksumModal.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import tw from 'twin.macro';
 
 const ChecksumModal = ({ checksum, ...props }: RequiredModalProps & { checksum: string }) => (
     <Modal {...props}>
-        <h3 className={'mb-6'}>Verify file checksum</h3>
-        <p className={'text-sm'}>
+        <h3 css={tw`mb-6`}>Verify file checksum</h3>
+        <p css={tw`text-sm`}>
             The SHA256 checksum of this file is:
         </p>
-        <pre className={'mt-2 text-sm p-2 bg-neutral-900 rounded'}>
-            <code className={'block font-mono'}>{checksum}</code>
+        <pre css={tw`mt-2 text-sm p-2 bg-neutral-900 rounded`}>
+            <code css={tw`block font-mono`}>{checksum}</code>
         </pre>
     </Modal>
 );
diff --git a/resources/scripts/components/server/backups/CreateBackupButton.tsx b/resources/scripts/components/server/backups/CreateBackupButton.tsx
index 9e0e8421c..8da01dcaf 100644
--- a/resources/scripts/components/server/backups/CreateBackupButton.tsx
+++ b/resources/scripts/components/server/backups/CreateBackupButton.tsx
@@ -10,6 +10,9 @@ import createServerBackup from '@/api/server/backups/createServerBackup';
 import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
+import Input, { Textarea } from '@/components/elements/Input';
 
 interface Values {
     name: string;
@@ -21,17 +24,17 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <Form className={'pb-6'}>
-                <FlashMessageRender byKey={'backups:create'} className={'mb-4'}/>
-                <h3 className={'mb-6'}>Create server backup</h3>
-                <div className={'mb-6'}>
+            <Form>
+                <FlashMessageRender byKey={'backups:create'} css={tw`mb-4`}/>
+                <h2 css={tw`text-2xl mb-6`}>Create server backup</h2>
+                <div css={tw`mb-6`}>
                     <Field
                         name={'name'}
                         label={'Backup name'}
                         description={'If provided, the name that should be used to reference this backup.'}
                     />
                 </div>
-                <div className={'mb-6'}>
+                <div css={tw`mb-6`}>
                     <FormikFieldWrapper
                         name={'ignored'}
                         label={'Ignored Files & Directories'}
@@ -42,20 +45,13 @@ const ModalContent = ({ ...props }: RequiredModalProps) => {
                             prefixing the path with an exclamation point.
                         `}
                     >
-                        <FormikField
-                            name={'ignored'}
-                            component={'textarea'}
-                            className={'input-dark h-32'}
-                        />
+                        <FormikField as={Textarea} name={'ignored'} css={tw`h-32`}/>
                     </FormikFieldWrapper>
                 </div>
-                <div className={'flex justify-end'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-sm'}
-                    >
+                <div css={tw`flex justify-end`}>
+                    <Button type={'submit'}>
                         Start backup
-                    </button>
+                    </Button>
                 </div>
             </Form>
         </Modal>
@@ -99,18 +95,15 @@ export default () => {
                 })}
             >
                 <ModalContent
-                    appear={true}
+                    appear
                     visible={visible}
                     onDismissed={() => setVisible(false)}
                 />
             </Formik>
             }
-            <button
-                className={'btn btn-primary btn-sm'}
-                onClick={() => setVisible(true)}
-            >
+            <Button onClick={() => setVisible(true)}>
                 Create backup
-            </button>
+            </Button>
         </>
     );
 };
diff --git a/resources/scripts/components/server/users/AddSubuserButton.tsx b/resources/scripts/components/server/users/AddSubuserButton.tsx
index 10b30024a..5903088cb 100644
--- a/resources/scripts/components/server/users/AddSubuserButton.tsx
+++ b/resources/scripts/components/server/users/AddSubuserButton.tsx
@@ -2,20 +2,18 @@ import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
 
     return (
         <>
-            {visible && <EditSubuserModal
-                appear={true}
-                visible={true}
-                onDismissed={() => setVisible(false)}
-            />}
-            <button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faUserPlus} className={'mr-1'}/> New User
-            </button>
+            {visible && <EditSubuserModal appear visible onDismissed={() => setVisible(false)}/>}
+            <Button onClick={() => setVisible(true)}>
+                <FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
+            </Button>
         </>
     );
 };
diff --git a/resources/scripts/components/server/users/EditSubuserModal.tsx b/resources/scripts/components/server/users/EditSubuserModal.tsx
index e37ca42d6..3982d54e4 100644
--- a/resources/scripts/components/server/users/EditSubuserModal.tsx
+++ b/resources/scripts/components/server/users/EditSubuserModal.tsx
@@ -18,6 +18,9 @@ import Can from '@/components/elements/Can';
 import { usePermissions } from '@/plugins/usePermissions';
 import { useDeepMemo } from '@/plugins/useDeepMemo';
 import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
 
 type Props = {
     subuser?: Subuser;
@@ -72,17 +75,17 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
         }
 
         return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
-    }, [permissions, loggedInPermissions]);
+    }, [ permissions, loggedInPermissions ]);
 
     return (
         <Modal {...props} top={false} showSpinnerOverlay={isSubmitting}>
-            <h3 ref={ref}>
+            <h2 css={tw`text-2xl`} ref={ref}>
                 {subuser ?
                     `${canEditUser ? 'Modify' : 'View'} permissions for ${subuser.email}`
                     :
                     'Create new subuser'
                 }
-            </h3>
+            </h2>
             <FlashMessageRender byKey={'user:edit'} css={tw`mt-4`}/>
             {(!user.rootAdmin && loggedInPermissions[0] !== '*') &&
             <div css={tw`mt-4 pl-4 py-2 border-l-4 border-cyan-400`}>
@@ -108,8 +111,8 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                         title={
                             <div css={tw`flex items-center`}>
                                 <p css={tw`text-sm uppercase flex-1`}>{key}</p>
-                                {canEditUser && editablePermissions.indexOf(key) >= 0 &&
-                                <input
+                                {canEditUser &&
+                                <Input
                                     type={'checkbox'}
                                     onClick={e => {
                                         if (e.currentTarget.checked) {
@@ -133,7 +136,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                 }
                             </div>
                         }
-                        className={index !== 0 ? 'mt-4' : undefined}
+                        css={index > 0 ? tw`mt-4` : undefined}
                     >
                         <p css={tw`text-sm text-neutral-400 mb-4`}>
                             {permissions[key].description}
@@ -157,9 +160,7 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                                     />
                                 </div>
                                 <div css={tw`flex-1`}>
-                                    <span css={tw`font-medium`} className={'input-dark-label'}>
-                                        {pkey}
-                                    </span>
+                                    <Label css={tw`font-medium`}>{pkey}</Label>
                                     {permissions[key].keys[pkey].length > 0 &&
                                     <p css={tw`text-xs text-neutral-400 mt-1`}>
                                         {permissions[key].keys[pkey]}
@@ -173,9 +174,9 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
             </div>
             <Can action={subuser ? 'user.update' : 'user.create'}>
                 <div css={tw`pb-6 flex justify-end`}>
-                    <button className={'btn btn-primary btn-sm'} type={'submit'}>
+                    <Button type={'submit'}>
                         {subuser ? 'Save' : 'Invite User'}
-                    </button>
+                    </Button>
                 </div>
             </Can>
         </Modal>
diff --git a/resources/scripts/components/server/users/RemoveSubuserButton.tsx b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
index 28f58dc49..cac5a3e67 100644
--- a/resources/scripts/components/server/users/RemoveSubuserButton.tsx
+++ b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
@@ -8,6 +8,7 @@ import deleteSubuser from '@/api/server/users/deleteSubuser';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
 
 export default ({ subuser }: { subuser: Subuser }) => {
     const [ loading, setLoading ] = useState(false);
@@ -38,7 +39,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
             <ConfirmationModal
                 title={'Delete this subuser?'}
                 buttonText={'Yes, remove subuser'}
-                visible={true}
+                visible
                 showSpinnerOverlay={loading}
                 onConfirmed={() => doDeletion()}
                 onDismissed={() => setShowConfirmation(false)}
@@ -50,7 +51,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
             <button
                 type={'button'}
                 aria-label={'Delete subuser'}
-                className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
                 onClick={() => setShowConfirmation(true)}
             >
                 <FontAwesomeIcon icon={faTrashAlt}/>
diff --git a/resources/scripts/components/server/users/UserRow.tsx b/resources/scripts/components/server/users/UserRow.tsx
index 9da469fcb..a5b0097b1 100644
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@@ -9,6 +9,8 @@ import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     subuser: Subuser;
@@ -19,23 +21,23 @@ export default ({ subuser }: Props) => {
     const [ visible, setVisible ] = useState(false);
 
     return (
-        <div className={'grey-row-box mb-2'}>
+        <GreyRowBox css={tw`mb-2`}>
             {visible &&
             <EditSubuserModal
-                appear={true}
-                visible={true}
+                appear
+                visible
                 subuser={subuser}
                 onDismissed={() => setVisible(false)}
             />
             }
-            <div className={'w-10 h-10 rounded-full bg-white border-2 border-inset border-neutral-800 overflow-hidden'}>
-                <img className={'f-full h-full'} src={`${subuser.image}?s=400`}/>
+            <div css={tw`w-10 h-10 rounded-full bg-white border-2 border-neutral-800 overflow-hidden`}>
+                <img css={tw`w-full h-full`} src={`${subuser.image}?s=400`}/>
             </div>
-            <div className={'ml-4 flex-1'}>
-                <p className={'text-sm'}>{subuser.email}</p>
+            <div css={tw`ml-4 flex-1`}>
+                <p css={tw`text-sm`}>{subuser.email}</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>
                     &nbsp;
                     <FontAwesomeIcon
                         icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
@@ -45,13 +47,13 @@ export default ({ subuser }: Props) => {
                     />
                     &nbsp;
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>2FA Enabled</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>2FA Enabled</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>
                     {subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
                 </p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Permissions</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
             </div>
             <button
                 type={'button'}
@@ -66,6 +68,6 @@ export default ({ subuser }: Props) => {
             <Can action={'user.delete'}>
                 <RemoveSubuserButton subuser={subuser}/>
             </Can>
-        </div>
+        </GreyRowBox>
     );
 };
diff --git a/resources/scripts/components/server/users/UsersContainer.tsx b/resources/scripts/components/server/users/UsersContainer.tsx
index f0e17fd48..55f60b449 100644
--- a/resources/scripts/components/server/users/UsersContainer.tsx
+++ b/resources/scripts/components/server/users/UsersContainer.tsx
@@ -10,6 +10,7 @@ import getServerSubusers from '@/api/server/users/getServerSubusers';
 import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -43,15 +44,15 @@ export default () => {
     }, []);
 
     if (!subusers.length && (loading || !Object.keys(permissions).length)) {
-        return <Spinner size={'large'} centered={true}/>;
+        return <Spinner size={'large'} centered/>;
     }
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'users'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'users'} css={tw`mb-4`}/>
             {!subusers.length ?
-                <p className={'text-center text-sm text-neutral-400'}>
-                    It looks like you don't have any subusers.
+                <p css={tw`text-center text-sm text-neutral-400`}>
+                    It looks like you don&apos;t have any subusers.
                 </p>
                 :
                 subusers.map(subuser => (
@@ -59,7 +60,7 @@ export default () => {
                 ))
             }
             <Can action={'user.create'}>
-                <div className={'flex justify-end mt-6'}>
+                <div css={tw`flex justify-end mt-6`}>
                     <AddSubuserButton/>
                 </div>
             </Can>

From a288374027d265a3054b7bb48b0019ff3efe40cc Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 17:00:19 -0700
Subject: [PATCH 19/55] Update schedule page

---
 .../components/elements/ConfirmationModal.tsx |  2 +-
 .../scripts/components/elements/Select.tsx    | 36 +++++++++++++
 .../scripts/components/elements/Switch.tsx    | 13 ++---
 .../schedules/ConfirmTaskDeletionModal.tsx    | 26 ---------
 .../server/schedules/DeleteScheduleButton.tsx | 37 +++++--------
 .../server/schedules/EditScheduleModal.tsx    | 26 ++++-----
 .../server/schedules/NewTaskButton.tsx        |  5 +-
 .../server/schedules/ScheduleContainer.tsx    | 34 ++++++------
 .../schedules/ScheduleEditContainer.tsx       | 27 +++++-----
 .../server/schedules/ScheduleRow.tsx          | 47 ++++++++--------
 .../server/schedules/ScheduleTaskRow.tsx      | 54 ++++++++++---------
 .../server/schedules/TaskDetailsModal.tsx     | 41 +++++++-------
 12 files changed, 180 insertions(+), 168 deletions(-)
 create mode 100644 resources/scripts/components/elements/Select.tsx
 delete mode 100644 resources/scripts/components/server/schedules/ConfirmTaskDeletionModal.tsx

diff --git a/resources/scripts/components/elements/ConfirmationModal.tsx b/resources/scripts/components/elements/ConfirmationModal.tsx
index 050ceab73..596a23f69 100644
--- a/resources/scripts/components/elements/ConfirmationModal.tsx
+++ b/resources/scripts/components/elements/ConfirmationModal.tsx
@@ -18,7 +18,7 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
         showSpinnerOverlay={showSpinnerOverlay}
         onDismissed={() => onDismissed()}
     >
-        <h3 css={tw`mb-6`}>{title}</h3>
+        <h2 css={tw`text-2xl mb-6`}>{title}</h2>
         <p css={tw`text-sm`}>{children}</p>
         <div css={tw`flex items-center justify-end mt-8`}>
             <Button isSecondary onClick={() => onDismissed()}>
diff --git a/resources/scripts/components/elements/Select.tsx b/resources/scripts/components/elements/Select.tsx
new file mode 100644
index 000000000..7ca441b48
--- /dev/null
+++ b/resources/scripts/components/elements/Select.tsx
@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components/macro';
+import tw from 'twin.macro';
+
+interface Props {
+    hideDropdownArrow?: boolean;
+}
+
+const Select = styled.select<Props>`
+    ${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
+
+    &, &:hover:not(:disabled), &:focus {
+        ${tw`outline-none`};
+    }
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-size: 1rem;
+    background-repeat: no-repeat;
+    background-position-x: calc(100% - 0.75rem);
+    background-position-y: center;
+
+    &::-ms-expand {
+        display: none;
+    }
+    
+    ${props => !props.hideDropdownArrow && css`
+        ${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
+    
+        &:hover:not(:disabled), &:focus {
+            ${tw`border-neutral-400`};
+        }
+    `};
+`;
+
+export default Select;
diff --git a/resources/scripts/components/elements/Switch.tsx b/resources/scripts/components/elements/Switch.tsx
index f1ee5812f..5c4b1e9b3 100644
--- a/resources/scripts/components/elements/Switch.tsx
+++ b/resources/scripts/components/elements/Switch.tsx
@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components/macro';
 import v4 from 'uuid/v4';
 import tw from 'twin.macro';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
 
 const ToggleContainer = styled.div`
     ${tw`relative select-none w-12 leading-normal`};
@@ -50,7 +52,7 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
         <div css={tw`flex items-center`}>
             <ToggleContainer css={tw`flex-none`}>
                 {children
-                || <input
+                || <Input
                     id={uuid}
                     name={name}
                     type={'checkbox'}
@@ -58,21 +60,20 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
                     defaultChecked={defaultChecked}
                 />
                 }
-                <label htmlFor={uuid}/>
+                <Label htmlFor={uuid}/>
             </ToggleContainer>
             {(label || description) &&
             <div css={tw`ml-4 w-full`}>
                 {label &&
-                <label
+                <Label
                     css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
-                    className={'input-dark-label'}
                     htmlFor={uuid}
                 >
                     {label}
-                </label>
+                </Label>
                 }
                 {description &&
-                <p className={'input-help'}>
+                <p css={tw`text-neutral-400 text-sm mt-2`}>
                     {description}
                 </p>
                 }
diff --git a/resources/scripts/components/server/schedules/ConfirmTaskDeletionModal.tsx b/resources/scripts/components/server/schedules/ConfirmTaskDeletionModal.tsx
deleted file mode 100644
index abce80cde..000000000
--- a/resources/scripts/components/server/schedules/ConfirmTaskDeletionModal.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
-
-type Props = RequiredModalProps & {
-    onConfirmed: () => void;
-}
-
-export default ({ onConfirmed, ...props }: Props) => (
-    <Modal {...props}>
-        <h2>Confirm task deletion</h2>
-        <p className={'text-sm mt-4'}>
-            Are you sure you want to delete this task? This action cannot be undone.
-        </p>
-        <div className={'flex items-center justify-end mt-8'}>
-            <button className={'btn btn-secondary btn-sm'} onClick={() => props.onDismissed()}>
-                Cancel
-            </button>
-            <button className={'btn btn-red btn-sm ml-4'} onClick={() => {
-                props.onDismissed();
-                onConfirmed();
-            }}>
-                Delete Task
-            </button>
-        </div>
-    </Modal>
-);
diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
index 179987863..1b6ec5a39 100644
--- a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
+++ b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import Modal from '@/components/elements/Modal';
 import deleteSchedule from '@/api/server/schedules/deleteSchedule';
 import { ServerContext } from '@/state/server';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
 
 interface Props {
     scheduleId: number;
@@ -36,34 +38,19 @@ export default ({ scheduleId, onDeleted }: Props) => {
 
     return (
         <>
-            <Modal
+            <ConfirmationModal
+                title={'Delete schedule?'}
+                buttonText={'Yes, delete schedule'}
+                onConfirmed={onDelete}
                 visible={visible}
                 onDismissed={() => setVisible(false)}
-                showSpinnerOverlay={isLoading}
             >
-                <h3 className={'mb-6'}>Delete schedule</h3>
-                <p className={'text-sm'}>
-                    Are you sure you want to delete this schedule? All tasks will be removed and any running processes
-                    will be terminated.
-                </p>
-                <div className={'mt-6 flex justify-end'}>
-                    <button
-                        className={'btn btn-secondary btn-sm mr-4'}
-                        onClick={() => setVisible(false)}
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        className={'btn btn-red btn-sm'}
-                        onClick={() => onDelete()}
-                    >
-                        Yes, delete schedule
-                    </button>
-                </div>
-            </Modal>
-            <button className={'btn btn-red btn-secondary btn-sm mr-4'} onClick={() => setVisible(true)}>
+                Are you sure you want to delete this schedule? All tasks will be removed and any running processes
+                will be terminated.
+            </ConfirmationModal>
+            <Button css={tw`mr-4`} color={'red'} isSecondary onClick={() => setVisible(true)}>
                 Delete
-            </button>
+            </Button>
         </>
     );
 };
diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
index 544944c7b..5793b875c 100644
--- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx
+++ b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
@@ -10,6 +10,8 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 type Props = {
     schedule?: Schedule;
@@ -29,43 +31,43 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
 
     return (
         <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <h3 className={'mb-6'}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
-            <FlashMessageRender byKey={'schedule:edit'} className={'mb-6'}/>
+            <h3 css={tw`mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
+            <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
             <Form>
                 <Field
                     name={'name'}
                     label={'Schedule name'}
                     description={'A human readable identifer for this schedule.'}
                 />
-                <div className={'flex mt-6'}>
-                    <div className={'flex-1 mr-4'}>
+                <div css={tw`flex mt-6`}>
+                    <div css={tw`flex-1 mr-4`}>
                         <Field name={'dayOfWeek'} label={'Day of week'}/>
                     </div>
-                    <div className={'flex-1 mr-4'}>
+                    <div css={tw`flex-1 mr-4`}>
                         <Field name={'dayOfMonth'} label={'Day of month'}/>
                     </div>
-                    <div className={'flex-1 mr-4'}>
+                    <div css={tw`flex-1 mr-4`}>
                         <Field name={'hour'} label={'Hour'}/>
                     </div>
-                    <div className={'flex-1'}>
+                    <div css={tw`flex-1`}>
                         <Field name={'minute'} label={'Minute'}/>
                     </div>
                 </div>
-                <p className={'input-help'}>
+                <p css={tw`text-neutral-400 text-xs mt-2`}>
                     The schedule system supports the use of Cronjob syntax when defining when tasks should begin
                     running. Use the fields above to specify when these tasks should begin running.
                 </p>
-                <div className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
+                <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
                     <FormikSwitch
                         name={'enabled'}
                         description={'If disabled, this schedule and it\'s associated tasks will not run.'}
                         label={'Enabled'}
                     />
                 </div>
-                <div className={'mt-6 text-right'}>
-                    <button className={'btn btn-sm btn-primary'} type={'submit'}>
+                <div css={tw`mt-6 text-right`}>
+                    <Button type={'submit'}>
                         {schedule ? 'Save changes' : 'Create schedule'}
-                    </button>
+                    </Button>
                 </div>
             </Form>
         </Modal>
diff --git a/resources/scripts/components/server/schedules/NewTaskButton.tsx b/resources/scripts/components/server/schedules/NewTaskButton.tsx
index c53f1b17c..b46124e64 100644
--- a/resources/scripts/components/server/schedules/NewTaskButton.tsx
+++ b/resources/scripts/components/server/schedules/NewTaskButton.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
+import Button from '@/components/elements/Button';
 
 interface Props {
     schedule: Schedule;
@@ -17,9 +18,9 @@ export default ({ schedule }: Props) => {
                 onDismissed={() => setVisible(false)}
             />
             }
-            <button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
+            <Button onClick={() => setVisible(true)}>
                 New Task
-            </button>
+            </Button>
         </>
     );
 };
diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
index 233c53ded..0e4ff6bd2 100644
--- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
@@ -11,6 +11,9 @@ import Can from '@/components/elements/Can';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import GreyRowBox from '@/components/elements/GreyRowBox';
+import Button from '@/components/elements/Button';
 
 export default ({ match, history }: RouteComponentProps) => {
     const { uuid } = useServer();
@@ -34,45 +37,38 @@ export default ({ match, history }: RouteComponentProps) => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
             {(!schedules.length && loading) ?
-                <Spinner size={'large'} centered={true}/>
+                <Spinner size={'large'} centered/>
                 :
                 <>
                     {
                         schedules.length === 0 ?
-                            <p className={'text-sm text-center text-neutral-400'}>
+                            <p css={tw`text-sm text-center text-neutral-400`}>
                                 There are no schedules configured for this server.
                             </p>
                             :
                             schedules.map(schedule => (
-                                <a
+                                <GreyRowBox
+                                    as={'a'}
                                     key={schedule.id}
                                     href={`${match.url}/${schedule.id}`}
-                                    className={'grey-row-box cursor-pointer mb-2'}
-                                    onClick={e => {
+                                    css={tw`cursor-pointer mb-2`}
+                                    onClick={(e: any) => {
                                         e.preventDefault();
                                         history.push(`${match.url}/${schedule.id}`, { schedule });
                                     }}
                                 >
                                     <ScheduleRow schedule={schedule}/>
-                                </a>
+                                </GreyRowBox>
                             ))
                     }
                     <Can action={'schedule.create'}>
-                        <div className={'mt-8 flex justify-end'}>
-                            {visible && <EditScheduleModal
-                                appear={true}
-                                visible={true}
-                                onDismissed={() => setVisible(false)}
-                            />}
-                            <button
-                                type={'button'}
-                                className={'btn btn-sm btn-primary'}
-                                onClick={() => setVisible(true)}
-                            >
+                        <div css={tw`mt-8 flex justify-end`}>
+                            {visible && <EditScheduleModal appear visible onDismissed={() => setVisible(false)}/>}
+                            <Button type={'button'} onClick={() => setVisible(true)}>
                                 Create schedule
-                            </button>
+                            </Button>
                         </div>
                     </Can>
                 </>
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index 1abdc5e67..cf9486fd3 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -15,6 +15,9 @@ import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Params {
     id: string;
@@ -51,22 +54,22 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
             {!schedule || isLoading ?
-                <Spinner size={'large'} centered={true}/>
+                <Spinner size={'large'} centered/>
                 :
                 <>
-                    <div className={'grey-row-box'}>
+                    <GreyRowBox>
                         <ScheduleRow schedule={schedule}/>
-                    </div>
+                    </GreyRowBox>
                     <EditScheduleModal
                         visible={showEditModal}
                         schedule={schedule}
                         onDismissed={() => setShowEditModal(false)}
                     />
-                    <div className={'flex items-center mt-8 mb-4'}>
-                        <div className={'flex-1'}>
-                            <h2>Configured Tasks</h2>
+                    <div css={tw`flex items-center mt-8 mb-4`}>
+                        <div css={tw`flex-1`}>
+                            <h2 css={tw`text-2xl`}>Configured Tasks</h2>
                         </div>
                     </div>
                     {schedule.tasks.length > 0 ?
@@ -79,17 +82,17 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
                                     ))
                             }
                             {schedule.tasks.length > 1 &&
-                            <p className={'text-xs text-neutral-400'}>
+                            <p css={tw`text-xs text-neutral-400`}>
                                 Task delays are relative to the previous task in the listing.
                             </p>
                             }
                         </>
                         :
-                        <p className={'text-sm text-neutral-400'}>
+                        <p css={tw`text-sm text-neutral-400`}>
                             There are no tasks configured for this schedule.
                         </p>
                     }
-                    <div className={'mt-8 flex justify-end'}>
+                    <div css={tw`mt-8 flex justify-end`}>
                         <Can action={'schedule.delete'}>
                             <DeleteScheduleButton
                                 scheduleId={schedule.id}
@@ -97,9 +100,9 @@ export default ({ match, history, location: { state } }: RouteComponentProps<Par
                             />
                         </Can>
                         <Can action={'schedule.update'}>
-                            <button className={'btn btn-primary btn-sm mr-4'} onClick={() => setShowEditModal(true)}>
+                            <Button css={tw`mr-4`} onClick={() => setShowEditModal(true)}>
                                 Edit
-                            </button>
+                            </Button>
                             <NewTaskButton schedule={schedule}/>
                         </Can>
                     </div>
diff --git a/resources/scripts/components/server/schedules/ScheduleRow.tsx b/resources/scripts/components/server/schedules/ScheduleRow.tsx
index 2636906f7..aa235028e 100644
--- a/resources/scripts/components/server/schedules/ScheduleRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleRow.tsx
@@ -4,47 +4,48 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
 import format from 'date-fns/format';
 import classNames from 'classnames';
+import tw from 'twin.macro';
 
 export default ({ schedule }: { schedule: Schedule }) => (
     <>
-        <div className={'icon'}>
-            <FontAwesomeIcon icon={faCalendarAlt} fixedWidth={true}/>
+        <div>
+            <FontAwesomeIcon icon={faCalendarAlt} fixedWidth/>
         </div>
-        <div className={'flex-1 ml-4'}>
+        <div css={tw`flex-1 ml-4`}>
             <p>{schedule.name}</p>
-            <p className={'text-xs text-neutral-400'}>
+            <p css={tw`text-xs text-neutral-400`}>
                 Last run
                 at: {schedule.lastRunAt ? format(schedule.lastRunAt, 'MMM Do [at] h:mma') : 'never'}
             </p>
         </div>
-        <div className={'flex items-center mx-8'}>
+        <div css={tw`flex items-center mx-8`}>
             <div>
-                <p className={'font-medium text-center'}>{schedule.cron.minute}</p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
+                <p css={tw`font-medium text-center`}>{schedule.cron.minute}</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Minute</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>{schedule.cron.hour}</p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>{schedule.cron.hour}</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Hour</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>{schedule.cron.dayOfMonth}</p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>{schedule.cron.dayOfMonth}</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Month)</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>*</p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>*</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Month</p>
             </div>
-            <div className={'ml-4'}>
-                <p className={'font-medium text-center'}>{schedule.cron.dayOfWeek}</p>
-                <p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
+            <div css={tw`ml-4`}>
+                <p css={tw`font-medium text-center`}>{schedule.cron.dayOfWeek}</p>
+                <p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Week)</p>
             </div>
         </div>
         <div>
             <p
-                className={classNames('py-1 px-3 rounded text-xs uppercase', {
-                    'bg-green-600': schedule.isActive,
-                    'bg-neutral-400': !schedule.isActive,
-                })}
+                css={[
+                    tw`py-1 px-3 rounded text-xs uppercase text-white`,
+                    schedule.isActive ? tw`bg-green-600` : tw`bg-neutral-400`,
+                ]}
             >
                 {schedule.isActive ? 'Active' : 'Inactive'}
             </p>
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
index f73f5da9d..f9da350e9 100644
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
 import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
-import ConfirmTaskDeletionModal from '@/components/server/schedules/ConfirmTaskDeletionModal';
 import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -15,6 +14,8 @@ import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import { faFileArchive } from '@fortawesome/free-solid-svg-icons/faFileArchive';
+import tw from 'twin.macro';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
 
 interface Props {
     schedule: Schedule;
@@ -23,14 +24,14 @@ interface Props {
 
 const getActionDetails = (action: string): [ string, any ] => {
     switch (action) {
-    case 'command':
-        return ['Send Command', faCode];
-    case 'power':
-        return ['Send Power Action', faToggleOn];
-    case 'backup':
-        return ['Create Backup', faFileArchive];
-    default:
-        return ['Unknown Action', faCode];
+        case 'command':
+            return [ 'Send Command', faCode ];
+        case 'power':
+            return [ 'Send Power Action', faToggleOn ];
+        case 'backup':
+            return [ 'Create Backup', faFileArchive ];
+        default:
+            return [ 'Unknown Action', faCode ];
     }
 };
 
@@ -60,38 +61,43 @@ export default ({ schedule, task }: Props) => {
     const [ title, icon ] = getActionDetails(task.action);
 
     return (
-        <div className={'flex items-center bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded'}>
+        <div css={tw`flex items-center bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded`}>
             <SpinnerOverlay visible={isLoading} fixed={true} size={'large'}/>
             {isEditing && <TaskDetailsModal
                 schedule={schedule}
                 task={task}
                 onDismissed={() => setIsEditing(false)}
             />}
-            <ConfirmTaskDeletionModal
+            <ConfirmationModal
+                title={'Confirm task deletion'}
+                buttonText={'Delete Task'}
+                onConfirmed={onConfirmDeletion}
                 visible={visible}
                 onDismissed={() => setVisible(false)}
-                onConfirmed={() => onConfirmDeletion()}
-            />
-            <FontAwesomeIcon icon={icon} className={'text-lg text-white'}/>
-            <div className={'flex-1'}>
-                <p className={'ml-6 text-neutral-300 uppercase text-xs'}>
+            >
+                Are you sure you want to delete this task? This action cannot be undone.
+            </ConfirmationModal>
+            <FontAwesomeIcon icon={icon} css={tw`text-lg text-white`}/>
+            <div css={tw`flex-1`}>
+                <p css={tw`ml-6 text-neutral-300 uppercase text-xs`}>
                     {title}
                 </p>
                 {task.payload &&
-                <div className={'ml-6 mt-2'}>
-                    {task.action === 'backup' && <p className={'text-xs uppercase text-neutral-400 mb-1'}>Ignoring files & folders:</p>}
-                    <div className={'font-mono bg-neutral-800 rounded py-1 px-2 text-sm w-auto whitespace-pre inline-block'}>
+                <div css={tw`ml-6 mt-2`}>
+                    {task.action === 'backup' &&
+                    <p css={tw`text-xs uppercase text-neutral-400 mb-1`}>Ignoring files & folders:</p>}
+                    <div css={tw`font-mono bg-neutral-800 rounded py-1 px-2 text-sm w-auto whitespace-pre inline-block`}>
                         {task.payload}
                     </div>
                 </div>
                 }
             </div>
             {task.sequenceId > 1 &&
-            <div className={'mr-6'}>
-                <p className={'text-center mb-1'}>
+            <div css={tw`mr-6`}>
+                <p css={tw`text-center mb-1`}>
                     {task.timeOffset}s
                 </p>
-                <p className={'text-neutral-300 uppercase text-2xs'}>
+                <p css={tw`text-neutral-300 uppercase text-2xs`}>
                     Delay Run By
                 </p>
             </div>
@@ -100,7 +106,7 @@ export default ({ schedule, task }: Props) => {
                 <button
                     type={'button'}
                     aria-label={'Edit scheduled task'}
-                    className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
+                    css={tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4`}
                     onClick={() => setIsEditing(true)}
                 >
                     <FontAwesomeIcon icon={faPencilAlt}/>
@@ -110,7 +116,7 @@ export default ({ schedule, task }: Props) => {
                 <button
                     type={'button'}
                     aria-label={'Delete scheduled task'}
-                    className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                    css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
                     onClick={() => setVisible(true)}
                 >
                     <FontAwesomeIcon icon={faTrashAlt}/>
diff --git a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
index 1aef153db..3829d724d 100644
--- a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
+++ b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
@@ -11,6 +11,11 @@ import { number, object, string } from 'yup';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
+import tw from 'twin.macro';
+import Label from '@/components/elements/Label';
+import { Textarea } from '@/components/elements/Input';
+import Button from '@/components/elements/Button';
+import Select from '@/components/elements/Select';
 
 interface Props {
     schedule: Schedule;
@@ -35,20 +40,20 @@ const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
     }, [ action ]);
 
     return (
-        <Form className={'m-0'}>
-            <h3 className={'mb-6'}>{isEditingTask ? 'Edit Task' : 'Create Task'}</h3>
-            <div className={'flex'}>
-                <div className={'mr-2 w-1/3'}>
-                    <label className={'input-dark-label'}>Action</label>
+        <Form css={tw`m-0`}>
+            <h2 css={tw`text-2xl mb-6`}>{isEditingTask ? 'Edit Task' : 'Create Task'}</h2>
+            <div css={tw`flex`}>
+                <div css={tw`mr-2 w-1/3`}>
+                    <Label>Action</Label>
                     <FormikFieldWrapper name={'action'}>
-                        <FormikField as={'select'} name={'action'} className={'input-dark'}>
+                        <FormikField as={Select} name={'action'}>
                             <option value={'command'}>Send command</option>
                             <option value={'power'}>Send power action</option>
                             <option value={'backup'}>Create backup</option>
                         </FormikField>
                     </FormikFieldWrapper>
                 </div>
-                <div className={'flex-1'}>
+                <div css={tw`flex-1`}>
                     {action === 'command' ?
                         <Field
                             name={'payload'}
@@ -58,9 +63,9 @@ const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
                         :
                         action === 'power' ?
                             <div>
-                                <label className={'input-dark-label'}>Payload</label>
+                                <Label>Payload</Label>
                                 <FormikFieldWrapper name={'payload'}>
-                                    <FormikField as={'select'} name={'payload'} className={'input-dark'}>
+                                    <FormikField as={Select} name={'payload'}>
                                         <option value={'start'}>Start the server</option>
                                         <option value={'restart'}>Restart the server</option>
                                         <option value={'stop'}>Stop the server</option>
@@ -70,28 +75,28 @@ const TaskDetailsForm = ({ isEditingTask }: { isEditingTask: boolean }) => {
                             </div>
                             :
                             <div>
-                                <label className={'input-dark-label'}>Ignored Files</label>
+                                <Label>Ignored Files</Label>
                                 <FormikFieldWrapper
                                     name={'payload'}
                                     description={'Optional. Include the files and folders to be excluded in this backup. By default, the contents of your .pteroignore file will be used.'}
                                 >
-                                    <FormikField as={'textarea'} name={'payload'} className={'input-dark h-32'}/>
+                                    <FormikField as={Textarea} name={'payload'} css={tw`h-32`}/>
                                 </FormikFieldWrapper>
                             </div>
                     }
                 </div>
             </div>
-            <div className={'mt-6'}>
+            <div css={tw`mt-6`}>
                 <Field
                     name={'timeOffset'}
                     label={'Time offset (in seconds)'}
                     description={'The amount of time to wait after the previous task executes before running this one. If this is the first task on a schedule this will not be applied.'}
                 />
             </div>
-            <div className={'flex justify-end mt-6'}>
-                <button type={'submit'} className={'btn btn-primary btn-sm'}>
+            <div css={tw`flex justify-end mt-6`}>
+                <Button type={'submit'}>
                     {isEditingTask ? 'Save Changes' : 'Create Task'}
-                </button>
+                </Button>
             </div>
         </Form>
     );
@@ -148,12 +153,12 @@ export default ({ task, schedule, onDismissed }: Props) => {
         >
             {({ isSubmitting }) => (
                 <Modal
-                    visible={true}
-                    appear={true}
+                    visible
+                    appear
                     onDismissed={() => onDismissed()}
                     showSpinnerOverlay={isSubmitting}
                 >
-                    <FlashMessageRender byKey={'schedule:task'} className={'mb-4'}/>
+                    <FlashMessageRender byKey={'schedule:task'} css={tw`mb-4`}/>
                     <TaskDetailsForm isEditingTask={typeof task !== 'undefined'}/>
                 </Modal>
             )}

From 7e8a5f12713d36850026f1484dd4a1cb6c65c898 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 17:15:49 -0700
Subject: [PATCH 20/55] Update database screens

---
 .../components/elements/GreyRowBox.tsx        |   6 +-
 .../server/databases/CreateDatabaseButton.tsx |  31 +++---
 .../server/databases/DatabaseRow.tsx          | 102 +++++++++---------
 .../server/databases/DatabasesContainer.tsx   |  20 ++--
 .../server/databases/RotatePasswordButton.tsx |   3 +-
 5 files changed, 86 insertions(+), 76 deletions(-)

diff --git a/resources/scripts/components/elements/GreyRowBox.tsx b/resources/scripts/components/elements/GreyRowBox.tsx
index e33dae6ca..e86c61dc2 100644
--- a/resources/scripts/components/elements/GreyRowBox.tsx
+++ b/resources/scripts/components/elements/GreyRowBox.tsx
@@ -1,12 +1,10 @@
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 
-export default styled.div`
+export default styled.div<{ $hoverable?: boolean }>`
     ${tw`flex rounded no-underline text-neutral-200 items-center bg-neutral-700 p-4 border border-transparent transition-colors duration-150`};
     
-    &:not(.no-hover):hover {
-        ${tw`border-neutral-500`};
-    }
+    ${props => props.$hoverable !== false && tw`hover:border-neutral-500`};
 
     & > div.icon {
         ${tw`rounded-full bg-neutral-500 p-3`};
diff --git a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
index cf5b8c63d..2b035ce2c 100644
--- a/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
+++ b/resources/scripts/components/server/databases/CreateDatabaseButton.tsx
@@ -9,6 +9,8 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
+import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 interface Values {
     databaseName: string;
@@ -48,7 +50,7 @@ export default () => {
     };
 
     return (
-        <React.Fragment>
+        <>
             <Formik
                 onSubmit={submit}
                 initialValues={{ databaseName: '', connectionsFrom: '%' }}
@@ -65,9 +67,9 @@ export default () => {
                                 setVisible(false);
                             }}
                         >
-                            <FlashMessageRender byKey={'database:create'} className={'mb-6'}/>
-                            <h3 className={'mb-6'}>Create new database</h3>
-                            <Form className={'m-0'}>
+                            <FlashMessageRender byKey={'database:create'} css={tw`mb-6`}/>
+                            <h2 css={tw`text-2xl mb-6`}>Create new database</h2>
+                            <Form css={tw`m-0`}>
                                 <Field
                                     type={'string'}
                                     id={'database_name'}
@@ -75,7 +77,7 @@ export default () => {
                                     label={'Database Name'}
                                     description={'A descriptive name for your database instance.'}
                                 />
-                                <div className={'mt-6'}>
+                                <div css={tw`mt-6`}>
                                     <Field
                                         type={'string'}
                                         id={'connections_from'}
@@ -84,26 +86,27 @@ export default () => {
                                         description={'Where connections should be allowed from. Use % for wildcards.'}
                                     />
                                 </div>
-                                <div className={'mt-6 text-right'}>
-                                    <button
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button
                                         type={'button'}
-                                        className={'btn btn-sm btn-secondary mr-2'}
+                                        isSecondary
+                                        css={tw`mr-2`}
                                         onClick={() => setVisible(false)}
                                     >
                                         Cancel
-                                    </button>
-                                    <button className={'btn btn-sm btn-primary'} type={'submit'}>
+                                    </Button>
+                                    <Button type={'submit'}>
                                         Create Database
-                                    </button>
+                                    </Button>
                                 </div>
                             </Form>
                         </Modal>
                     )
                 }
             </Formik>
-            <button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
+            <Button onClick={() => setVisible(true)}>
                 New Database
-            </button>
-        </React.Fragment>
+            </Button>
+        </>
     );
 };
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 9adc38519..68559e6ca 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -17,6 +17,11 @@ import Can from '@/components/elements/Can';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import Label from '@/components/elements/Label';
+import Input from '@/components/elements/Input';
+import GreyRowBox from '@/components/elements/GreyRowBox';
 
 interface Props {
     database: ServerDatabase;
@@ -51,13 +56,14 @@ export default ({ database, className }: Props) => {
                 addError({ key: 'database:delete', message: httpErrorToHuman(error) });
             });
     };
-    
+
     return (
-        <React.Fragment>
+        <>
             <Formik
                 onSubmit={submit}
                 initialValues={{ confirm: '' }}
                 validationSchema={schema}
+                isInitialValid={false}
             >
                 {
                     ({ isSubmitting, isValid, resetForm }) => (
@@ -70,13 +76,13 @@ export default ({ database, className }: Props) => {
                                 resetForm();
                             }}
                         >
-                            <FlashMessageRender byKey={'database:delete'} className={'mb-6'}/>
-                            <h3 className={'mb-6'}>Confirm database deletion</h3>
-                            <p className={'text-sm'}>
+                            <FlashMessageRender byKey={'database:delete'} css={tw`mb-6`}/>
+                            <h2 css={tw`text-2xl mb-6`}>Confirm database deletion</h2>
+                            <p css={tw`text-sm`}>
                                 Deleting a database is a permanent action, it cannot be undone. This will permanetly
                                 delete the <strong>{database.name}</strong> database and remove all associated data.
                             </p>
-                            <Form className={'m-0 mt-6'}>
+                            <Form css={tw`m-0 mt-6`}>
                                 <Field
                                     type={'text'}
                                     id={'confirm_name'}
@@ -84,21 +90,22 @@ export default ({ database, className }: Props) => {
                                     label={'Confirm Database Name'}
                                     description={'Enter the database name to confirm deletion.'}
                                 />
-                                <div className={'mt-6 text-right'}>
-                                    <button
+                                <div css={tw`mt-6 text-right`}>
+                                    <Button
                                         type={'button'}
-                                        className={'btn btn-sm btn-secondary mr-2'}
+                                        isSecondary
+                                        css={tw`mr-2`}
                                         onClick={() => setVisible(false)}
                                     >
                                         Cancel
-                                    </button>
-                                    <button
+                                    </Button>
+                                    <Button
                                         type={'submit'}
-                                        className={'btn btn-sm btn-red'}
+                                        color={'red'}
                                         disabled={!isValid}
                                     >
                                         Delete Database
-                                    </button>
+                                    </Button>
                                 </div>
                             </Form>
                         </Modal>
@@ -106,62 +113,61 @@ export default ({ database, className }: Props) => {
                 }
             </Formik>
             <Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
-                <FlashMessageRender byKey={'database-connection-modal'} className={'mb-6'}/>
-                <h3 className={'mb-6'}>Database connection details</h3>
+                <FlashMessageRender byKey={'database-connection-modal'} css={tw`mb-6`}/>
+                <h3 css={tw`mb-6`}>Database connection details</h3>
                 <Can action={'database.view_password'}>
                     <div>
-                        <label className={'input-dark-label'}>Password</label>
-                        <input type={'text'} className={'input-dark'} readOnly={true} value={database.password}/>
+                        <Label>Password</Label>
+                        <Input type={'text'} readOnly value={database.password}/>
                     </div>
                 </Can>
-                <div className={'mt-6'}>
-                    <label className={'input-dark-label'}>JBDC Connection String</label>
-                    <input
+                <div css={tw`mt-6`}>
+                    <Label>JBDC Connection String</Label>
+                    <Input
                         type={'text'}
-                        className={'input-dark'}
-                        readOnly={true}
+                        readOnly
                         value={`jdbc:mysql://${database.username}:${database.password}@${database.connectionString}/${database.name}`}
                     />
                 </div>
-                <div className={'mt-6 text-right'}>
+                <div css={tw`mt-6 text-right`}>
                     <Can action={'database.update'}>
                         <RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase}/>
                     </Can>
-                    <button className={'btn btn-sm btn-secondary'} onClick={() => setConnectionVisible(false)}>
+                    <Button isSecondary onClick={() => setConnectionVisible(false)}>
                         Close
-                    </button>
+                    </Button>
                 </div>
             </Modal>
-            <div className={classNames('grey-row-box no-hover', className)}>
-                <div className={'icon'}>
-                    <FontAwesomeIcon icon={faDatabase} fixedWidth={true}/>
+            <GreyRowBox $hoverable={false} className={className}>
+                <div>
+                    <FontAwesomeIcon icon={faDatabase} fixedWidth/>
                 </div>
-                <div className={'flex-1 ml-4'}>
-                    <p className={'text-lg'}>{database.name}</p>
+                <div css={tw`flex-1 ml-4`}>
+                    <p css={tw`text-lg`}>{database.name}</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.connectionString}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Endpoint</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.connectionString}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Endpoint</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.allowConnectionsFrom}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Connections from</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.allowConnectionsFrom}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Connections from</p>
                 </div>
-                <div className={'ml-8 text-center'}>
-                    <p className={'text-sm'}>{database.username}</p>
-                    <p className={'mt-1 text-2xs text-neutral-500 uppercase select-none'}>Username</p>
+                <div css={tw`ml-8 text-center`}>
+                    <p css={tw`text-sm`}>{database.username}</p>
+                    <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Username</p>
                 </div>
-                <div className={'ml-8'}>
-                    <button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setConnectionVisible(true)}>
-                        <FontAwesomeIcon icon={faEye} fixedWidth={true}/>
-                    </button>
+                <div css={tw`ml-8`}>
+                    <Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
+                        <FontAwesomeIcon icon={faEye} fixedWidth/>
+                    </Button>
                     <Can action={'database.delete'}>
-                        <button className={'btn btn-sm btn-secondary btn-red'} onClick={() => setVisible(true)}>
-                            <FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
-                        </button>
+                        <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
+                            <FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
+                        </Button>
                     </Can>
                 </div>
-            </div>
-        </React.Fragment>
+            </GreyRowBox>
+        </>
     );
 };
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 9213347f0..90db7c27c 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -11,6 +11,8 @@ import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
 import useServer from '@/plugins/useServer';
 import PageContentBlock from '@/components/elements/PageContentBlock';
+import tw from 'twin.macro';
+import Fade from '@/components/elements/Fade';
 
 export default () => {
     const { uuid, featureLimits } = useServer();
@@ -35,11 +37,11 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'databases'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'databases'} css={tw`mb-4`}/>
             {(!databases.length && loading) ?
-                <Spinner size={'large'} centered={true}/>
+                <Spinner size={'large'} centered/>
                 :
-                <CSSTransition classNames={'fade'} timeout={250}>
+                <Fade timeout={250}>
                     <>
                         {databases.length > 0 ?
                             databases.map((database, index) => (
@@ -50,28 +52,28 @@ export default () => {
                                 />
                             ))
                             :
-                            <p className={'text-center text-sm text-neutral-400'}>
+                            <p css={tw`text-center text-sm text-neutral-400`}>
                                 {featureLimits.databases > 0 ?
-                                    `It looks like you have no databases.`
+                                    'It looks like you have no databases.'
                                     :
-                                    `Databases cannot be created for this server.`
+                                    'Databases cannot be created for this server.'
                                 }
                             </p>
                         }
                         <Can action={'database.create'}>
                             {(featureLimits.databases > 0 && databases.length > 0) &&
-                            <p className="text-center text-xs text-neutral-400 mt-2">
+                            <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
                                 {databases.length} of {featureLimits.databases} databases have been allocated to this server.
                             </p>
                             }
                             {featureLimits.databases > 0 && featureLimits.databases !== databases.length &&
-                            <div className={'mt-6 flex justify-end'}>
+                            <div css={tw`mt-6 flex justify-end`}>
                                 <CreateDatabaseButton/>
                             </div>
                             }
                         </Can>
                     </>
-                </CSSTransition>
+                </Fade>
             }
         </PageContentBlock>
     );
diff --git a/resources/scripts/components/server/databases/RotatePasswordButton.tsx b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
index fdb31a1e2..41c116006 100644
--- a/resources/scripts/components/server/databases/RotatePasswordButton.tsx
+++ b/resources/scripts/components/server/databases/RotatePasswordButton.tsx
@@ -6,6 +6,7 @@ import { ServerContext } from '@/state/server';
 import { ServerDatabase } from '@/api/server/getServerDatabases';
 import { httpErrorToHuman } from '@/api/http';
 import Button from '@/components/elements/Button';
+import tw from 'twin.macro';
 
 export default ({ databaseId, onUpdate }: {
     databaseId: string;
@@ -38,7 +39,7 @@ export default ({ databaseId, onUpdate }: {
     };
 
     return (
-        <Button className={'btn-secondary mr-2'} onClick={rotate} isLoading={loading}>
+        <Button isSecondary color={'primary'} css={tw`mr-2`} onClick={rotate} isLoading={loading}>
             Rotate Password
         </Button>
     );

From 43fbefbdb6741f9dd00c74c7b1bebcf98844b059 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 17:57:24 -0700
Subject: [PATCH 21/55] Fix up file manager

---
 .../scripts/components/elements/AceEditor.tsx | 23 ++++------
 .../components/elements/DropdownMenu.tsx      |  3 +-
 .../server/files/FileDropdownMenu.tsx         | 42 ++++++++++---------
 .../server/files/FileEditContainer.tsx        | 31 +++++++-------
 .../server/files/FileManagerBreadcrumbs.tsx   | 13 +++---
 .../server/files/FileManagerContainer.tsx     | 24 ++++++-----
 .../components/server/files/FileNameModal.tsx | 10 ++---
 .../components/server/files/FileObjectRow.tsx | 18 ++++----
 .../server/files/NewDirectoryButton.tsx       | 20 +++++----
 .../server/files/RenameFileModal.tsx          | 25 ++++++-----
 tailwind.config.js                            |  3 ++
 11 files changed, 108 insertions(+), 104 deletions(-)

diff --git a/resources/scripts/components/elements/AceEditor.tsx b/resources/scripts/components/elements/AceEditor.tsx
index 4fc71cb3f..9f9866388 100644
--- a/resources/scripts/components/elements/AceEditor.tsx
+++ b/resources/scripts/components/elements/AceEditor.tsx
@@ -1,9 +1,8 @@
-import React, { useCallback, useEffect, useState, lazy } from 'react';
-import useRouter from 'use-react-router';
-import { ServerContext } from '@/state/server';
+import React, { useCallback, useEffect, useState } from 'react';
 import ace, { Editor } from 'brace';
-import getFileContents from '@/api/server/files/getFileContents';
 import styled from 'styled-components/macro';
+import tw from 'twin.macro';
+import Select from '@/components/elements/Select';
 
 // @ts-ignore
 require('brace/ext/modelist');
@@ -11,7 +10,7 @@ require('ayu-ace/mirage');
 
 const EditorContainer = styled.div`
     min-height: 16rem;
-    height: calc(100vh - 16rem);
+    height: calc(100vh - 20rem);
     ${tw`relative`};
     
     #editor {
@@ -20,9 +19,7 @@ const EditorContainer = styled.div`
 `;
 
 const modes: { [k: string]: string } = {
-    // eslint-disable-next-line @typescript-eslint/camelcase
     assembly_x86: 'Assembly (x86)',
-    // eslint-disable-next-line @typescript-eslint/camelcase
     c_cpp: 'C++',
     coffee: 'Coffeescript',
     css: 'CSS',
@@ -40,7 +37,6 @@ const modes: { [k: string]: string } = {
     properties: 'Properties',
     python: 'Python',
     ruby: 'Ruby',
-    // eslint-disable-next-line @typescript-eslint/camelcase
     plain_text: 'Plaintext',
     toml: 'TOML',
     typescript: 'Typescript',
@@ -70,7 +66,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
 
     useEffect(() => {
         editor && editor.session.setMode(mode);
-    }, [editor, mode]);
+    }, [ editor, mode ]);
 
     useEffect(() => {
         editor && editor.session.setValue(initialContent || '');
@@ -113,10 +109,9 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
     return (
         <EditorContainer style={style}>
             <div id={'editor'} ref={ref}/>
-            <div className={'absolute right-0 bottom-0 z-50'}>
-                <div className={'m-3 rounded bg-neutral-900 border border-black'}>
-                    <select
-                        className={'input-dark'}
+            <div css={tw`absolute right-0 bottom-0 z-50`}>
+                <div css={tw`m-3 rounded bg-neutral-900 border border-black`}>
+                    <Select
                         value={mode.split('/').pop()}
                         onChange={e => setMode(`ace/mode/${e.currentTarget.value}`)}
                     >
@@ -125,7 +120,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
                                 <option key={key} value={key}>{modes[key]}</option>
                             ))
                         }
-                    </select>
+                    </Select>
                 </div>
             </div>
         </EditorContainer>
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 11e70889f..74492f0c3 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -69,8 +69,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
                         e.stopPropagation();
                         setVisible(false);
                     }}
-                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500`}
-                    style={{ minWidth: '12rem' }}
+                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
                 >
                     {children}
                 </div>
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 5c1b19d06..b16fd1b20 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -18,6 +18,8 @@ import Can from '@/components/elements/Can';
 import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import Fade from '@/components/elements/Fade';
 
 type ModalType = 'rename' | 'move';
 
@@ -113,7 +115,7 @@ export default ({ uuid }: { uuid: string }) => {
         <div key={`dropdown:${file.uuid}`}>
             <div
                 ref={menuButton}
-                className={'p-3 hover:text-white'}
+                css={tw`p-3 hover:text-white`}
                 onClick={e => {
                     e.preventDefault();
                     if (!menuVisible) {
@@ -133,60 +135,60 @@ export default ({ uuid }: { uuid: string }) => {
                         setMenuVisible(false);
                     }}
                 />
-                <SpinnerOverlay visible={showSpinner} fixed={true} size={'large'}/>
+                <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
             </div>
-            <CSSTransition timeout={250} in={menuVisible} unmountOnExit={true} classNames={'fade'}>
+            <Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}>
                 <div
                     ref={menu}
                     onClick={e => {
                         e.stopPropagation();
                         setMenuVisible(false);
                     }}
-                    className={'absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48'}
+                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
                 >
                     <Can action={'file.update'}>
                         <div
                             onClick={() => setModal('rename')}
-                            className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
+                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
                         >
-                            <FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Rename</span>
+                            <FontAwesomeIcon icon={faPencilAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Rename</span>
                         </div>
                         <div
                             onClick={() => setModal('move')}
-                            className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
+                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
                         >
-                            <FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Move</span>
+                            <FontAwesomeIcon icon={faLevelUpAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Move</span>
                         </div>
                     </Can>
                     <Can action={'file.create'}>
                         <div
                             onClick={() => doCopy()}
-                            className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
+                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
                         >
-                            <FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
-                            <span className={'ml-2'}>Copy</span>
+                            <FontAwesomeIcon icon={faCopy} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Copy</span>
                         </div>
                     </Can>
                     <div
-                        className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
+                        css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
                         onClick={() => doDownload()}
                     >
-                        <FontAwesomeIcon icon={faFileDownload} className={'text-xs'}/>
-                        <span className={'ml-2'}>Download</span>
+                        <FontAwesomeIcon icon={faFileDownload} css={tw`text-xs`}/>
+                        <span css={tw`ml-2`}>Download</span>
                     </div>
                     <Can action={'file.delete'}>
                         <div
                             onClick={() => doDeletion()}
-                            className={'hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded'}
+                            css={tw`hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded`}
                         >
-                            <FontAwesomeIcon icon={faTrashAlt} className={'text-xs'}/>
-                            <span className={'ml-2'}>Delete</span>
+                            <FontAwesomeIcon icon={faTrashAlt} css={tw`text-xs`}/>
+                            <span css={tw`ml-2`}>Delete</span>
                         </div>
                     </Can>
                 </div>
-            </CSSTransition>
+            </Fade>
         </div>
     );
 };
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index f24e7bc60..b85f7bc7d 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -14,6 +14,8 @@ import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/components/elements/AceEditor'));
 
@@ -81,16 +83,17 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'files:view'} className={'mb-4'}/>
-            <FileManagerBreadcrumbs withinFileEditor={true} isNewFile={action !== 'edit'}/>
-            {(name || hash.replace(/^#/, '')).endsWith('.pteroignore') &&
-            <div className={'mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400'}>
-                <p className={'text-neutral-300 text-sm'}>
-                    You're editing a <code className={'font-mono bg-black rounded py-px px-1'}>.pteroignore</code> file.
+            <FlashMessageRender byKey={'files:view'} css={tw`mb-4`}/>
+            <FileManagerBreadcrumbs withinFileEditor isNewFile={action !== 'edit'}/>
+            {hash.replace(/^#/, '').endsWith('.pteroignore') &&
+            <div css={tw`mb-4 p-4 border-l-4 bg-neutral-900 rounded border-cyan-400`}>
+                <p css={tw`text-neutral-300 text-sm`}>
+                    You&apos;re editing
+                    a <code css={tw`font-mono bg-black rounded py-px px-1`}>.pteroignore</code> file.
                     Any files or directories listed in here will be excluded from backups. Wildcards are supported by
-                    using an asterisk (<code className={'font-mono bg-black rounded py-px px-1'}>*</code>). You can
+                    using an asterisk (<code css={tw`font-mono bg-black rounded py-px px-1`}>*</code>). You can
                     negate a prior rule by prepending an exclamation point
-                    (<code className={'font-mono bg-black rounded py-px px-1'}>!</code>).
+                    (<code css={tw`font-mono bg-black rounded py-px px-1`}>!</code>).
                 </p>
             </div>
             }
@@ -102,7 +105,7 @@ export default () => {
                     save(name);
                 }}
             />
-            <div className={'relative'}>
+            <div css={tw`relative`}>
                 <SpinnerOverlay visible={loading}/>
                 <LazyAceEditor
                     initialModePath={hash.replace(/^#/, '') || 'plain_text'}
@@ -113,18 +116,18 @@ export default () => {
                     onContentSaved={() => save()}
                 />
             </div>
-            <div className={'flex justify-end mt-4'}>
+            <div css={tw`flex justify-end mt-4`}>
                 {action === 'edit' ?
                     <Can action={'file.update'}>
-                        <button className={'btn btn-primary btn-sm'} onClick={() => save()}>
+                        <Button onClick={() => save()}>
                             Save Content
-                        </button>
+                        </Button>
                     </Can>
                     :
                     <Can action={'file.create'}>
-                        <button className={'btn btn-primary btn-sm'} onClick={() => setModalVisible(true)}>
+                        <Button onClick={() => setModalVisible(true)}>
                             Create File
-                        </button>
+                        </Button>
                     </Can>
                 }
             </div>
diff --git a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
index c125dd2c2..fba1938ea 100644
--- a/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
+++ b/resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { NavLink } from 'react-router-dom';
 import { cleanDirectoryPath } from '@/helpers';
+import tw from 'twin.macro';
 
 interface Props {
     withinFileEditor?: boolean;
@@ -32,11 +33,11 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
         });
 
     return (
-        <div className={'flex items-center text-sm mb-4 text-neutral-500'}>
-            /<span className={'px-1 text-neutral-300'}>home</span>/
+        <div css={tw`flex items-center text-sm mb-4 text-neutral-500`}>
+            /<span css={tw`px-1 text-neutral-300`}>home</span>/
             <NavLink
                 to={`/server/${id}/files`}
-                className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
+                css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
             >
                 container
             </NavLink>/
@@ -46,18 +47,18 @@ export default ({ withinFileEditor, isNewFile }: Props) => {
                         <React.Fragment key={index}>
                             <NavLink
                                 to={`/server/${id}/files#${crumb.path}`}
-                                className={'px-1 text-neutral-200 no-underline hover:text-neutral-100'}
+                                css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
                             >
                                 {crumb.name}
                             </NavLink>/
                         </React.Fragment>
                         :
-                        <span key={index} className={'px-1 text-neutral-300'}>{crumb.name}</span>
+                        <span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
                 ))
             }
             {file &&
             <React.Fragment>
-                <span className={'px-1 text-neutral-300'}>{decodeURIComponent(file)}</span>
+                <span css={tw`px-1 text-neutral-300`}>{decodeURIComponent(file)}</span>
             </React.Fragment>
             }
         </div>
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 2e0298dce..2d220926a 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -14,7 +14,8 @@ import { Link } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
-import useRouter from 'use-react-router';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -24,7 +25,7 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 export default () => {
     const [ error, setError ] = useState('');
     const [ loading, setLoading ] = useState(true);
-    const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+    const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
     const { id } = ServerContext.useStoreState(state => state.server.data!);
     const { contents: files } = ServerContext.useStoreState(state => state.files);
     const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
@@ -56,16 +57,16 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'files'} className={'mb-4'}/>
+            <FlashMessageRender byKey={'files'} css={tw`mb-4`}/>
             <React.Fragment>
                 <FileManagerBreadcrumbs/>
                 {
                     loading ?
-                        <Spinner size={'large'} centered={true}/>
+                        <Spinner size={'large'} centered/>
                         :
                         <React.Fragment>
                             {!files.length ?
-                                <p className={'text-sm text-neutral-400 text-center'}>
+                                <p css={tw`text-sm text-neutral-400 text-center`}>
                                     This directory seems to be empty.
                                 </p>
                                 :
@@ -74,8 +75,8 @@ export default () => {
                                         <div>
                                             {files.length > 250 ?
                                                 <React.Fragment>
-                                                    <div className={'rounded bg-yellow-400 mb-px p-3'}>
-                                                        <p className={'text-yellow-900 text-sm text-center'}>
+                                                    <div css={tw`rounded bg-yellow-400 mb-px p-3`}>
+                                                        <p css={tw`text-yellow-900 text-sm text-center`}>
                                                             This directory is too large to display in the browser,
                                                             limiting the output to the first 250 files.
                                                         </p>
@@ -96,14 +97,15 @@ export default () => {
                                 </CSSTransition>
                             }
                             <Can action={'file.create'}>
-                                <div className={'flex justify-end mt-8'}>
+                                <div css={tw`flex justify-end mt-8`}>
                                     <NewDirectoryButton/>
-                                    <Link
+                                    <Button
+                                        // @ts-ignore
+                                        as={Link}
                                         to={`/server/${id}/files/new${window.location.hash}`}
-                                        className={'btn btn-sm btn-primary'}
                                     >
                                         New File
-                                    </Link>
+                                    </Button>
                                 </div>
                             </Can>
                         </React.Fragment>
diff --git a/resources/scripts/components/server/files/FileNameModal.tsx b/resources/scripts/components/server/files/FileNameModal.tsx
index 9ce60086e..b607e3b76 100644
--- a/resources/scripts/components/server/files/FileNameModal.tsx
+++ b/resources/scripts/components/server/files/FileNameModal.tsx
@@ -5,6 +5,8 @@ import { object, string } from 'yup';
 import Field from '@/components/elements/Field';
 import { ServerContext } from '@/state/server';
 import { join } from 'path';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 type Props = RequiredModalProps & {
     onFileNamed: (name: string) => void;
@@ -44,12 +46,10 @@ export default ({ onFileNamed, onDismissed, ...props }: Props) => {
                             name={'fileName'}
                             label={'File Name'}
                             description={'Enter the name that this file should be saved as.'}
-                            autoFocus={true}
+                            autoFocus
                         />
-                        <div className={'mt-6 text-right'}>
-                            <button className={'btn btn-primary btn-sm'}>
-                                Create File
-                            </button>
+                        <div css={tw`mt-6 text-right`}>
+                            <Button>Create File</Button>
                         </div>
                     </Form>
                 </Modal>
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index dc583a196..45abd046c 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -10,6 +10,7 @@ import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
 import { NavLink } from 'react-router-dom';
 import useRouter from 'use-react-router';
+import tw from 'twin.macro';
 
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
@@ -19,14 +20,11 @@ export default ({ file }: { file: FileObject }) => {
     return (
         <div
             key={file.name}
-            className={`
-                flex bg-neutral-700 rounded-sm mb-px text-sm
-                hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
-            `}
+            css={tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`}
         >
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
-                className={'flex flex-1 text-neutral-300 no-underline p-3'}
+                css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
                 onClick={e => {
                     // Don't rely on the onClick to work with the generated URL. Because of the way this
                     // component re-renders you'll get redirected into a nested directory structure since
@@ -41,27 +39,27 @@ export default ({ file }: { file: FileObject }) => {
                     }
                 }}
             >
-                <div className={'flex-none text-neutral-400 mr-4 text-lg pl-3'}>
+                <div css={tw`flex-none text-neutral-400 mr-4 text-lg pl-3`}>
                     {file.isFile ?
                         <FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
                         :
                         <FontAwesomeIcon icon={faFolder}/>
                     }
                 </div>
-                <div className={'flex-1'}>
+                <div css={tw`flex-1`}>
                     {file.name}
                 </div>
                 {file.isFile &&
-                <div className={'w-1/6 text-right mr-4'}>
+                <div css={tw`w-1/6 text-right mr-4`}>
                     {bytesToHuman(file.size)}
                 </div>
                 }
                 <div
-                    className={'w-1/5 text-right mr-4'}
+                    css={tw`w-1/5 text-right mr-4`}
                     title={file.modifiedAt.toString()}
                 >
                     {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
-                        format(file.modifiedAt, 'MMM Do, YYYY h:mma')
+                        format(file.modifiedAt, 'MMM do, yyyy h:mma')
                         :
                         formatDistanceToNow(file.modifiedAt, { addSuffix: true })
                     }
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 842cddf8a..79e55f881 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -7,6 +7,8 @@ import { join } from 'path';
 import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import v4 from 'uuid/v4';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     directoryName: string;
@@ -62,33 +64,33 @@ export default () => {
                             resetForm();
                         }}
                     >
-                        <Form className={'m-0'}>
+                        <Form css={tw`m-0`}>
                             <Field
                                 id={'directoryName'}
                                 name={'directoryName'}
                                 label={'Directory Name'}
                             />
-                            <p className={'text-xs mt-2 text-neutral-400'}>
-                                <span className={'text-neutral-200'}>This directory will be created as</span>
+                            <p css={tw`text-xs mt-2 text-neutral-400`}>
+                                <span css={tw`text-neutral-200`}>This directory will be created as</span>
                                 &nbsp;/home/container/
-                                <span className={'text-cyan-200'}>
+                                <span css={tw`text-cyan-200`}>
                                     {decodeURIComponent(
                                         join(directory, values.directoryName).replace(/^(\.\.\/|\/)+/, ''),
                                     )}
                                 </span>
                             </p>
-                            <div className={'flex justify-end'}>
-                                <button className={'btn btn-sm btn-primary mt-8'}>
+                            <div css={tw`flex justify-end`}>
+                                <Button css={tw`mt-8`}>
                                     Create Directory
-                                </button>
+                                </Button>
                             </div>
                         </Form>
                     </Modal>
                 )}
             </Formik>
-            <button className={'btn btn-sm btn-secondary mr-2'} onClick={() => setVisible(true)}>
+            <Button isSecondary css={tw`mr-2`} onClick={() => setVisible(true)}>
                 Create Directory
-            </button>
+            </Button>
         </React.Fragment>
     );
 };
diff --git a/resources/scripts/components/server/files/RenameFileModal.tsx b/resources/scripts/components/server/files/RenameFileModal.tsx
index 41a0a0fdc..9b001cba0 100644
--- a/resources/scripts/components/server/files/RenameFileModal.tsx
+++ b/resources/scripts/components/server/files/RenameFileModal.tsx
@@ -6,7 +6,8 @@ import { join } from 'path';
 import renameFile from '@/api/server/files/renameFile';
 import { ServerContext } from '@/state/server';
 import { FileObject } from '@/api/server/files/loadDirectory';
-import classNames from 'classnames';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface FormikValues {
     name: string;
@@ -48,14 +49,14 @@ export default ({ file, useMoveTerminology, ...props }: Props) => {
         >
             {({ isSubmitting, values }) => (
                 <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
-                    <Form className={'m-0'}>
+                    <Form css={tw`m-0`}>
                         <div
-                            className={classNames('flex', {
-                                'items-center': useMoveTerminology,
-                                'items-end': !useMoveTerminology,
-                            })}
+                            css={[
+                                tw`flex`,
+                                useMoveTerminology ? tw`items-center` : tw`items-end`,
+                            ]}
                         >
-                            <div className={'flex-1 mr-6'}>
+                            <div css={tw`flex-1 mr-6`}>
                                 <Field
                                     type={'string'}
                                     id={'file_name'}
@@ -65,18 +66,16 @@ export default ({ file, useMoveTerminology, ...props }: Props) => {
                                         ? 'Enter the new name and directory of this file or folder, relative to the current directory.'
                                         : undefined
                                     }
-                                    autoFocus={true}
+                                    autoFocus
                                 />
                             </div>
                             <div>
-                                <button className={'btn btn-sm btn-primary'}>
-                                    {useMoveTerminology ? 'Move' : 'Rename'}
-                                </button>
+                                <Button>{useMoveTerminology ? 'Move' : 'Rename'}</Button>
                             </div>
                         </div>
                         {useMoveTerminology &&
-                        <p className={'text-xs mt-2 text-neutral-400'}>
-                            <strong className={'text-neutral-200'}>New location:</strong>
+                        <p css={tw`text-xs mt-2 text-neutral-400`}>
+                            <strong css={tw`text-neutral-200`}>New location:</strong>
                             &nbsp;/home/container/{join(directory, values.name).replace(/^(\.\.\/|\/)+/, '')}
                         </p>
                         }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ed79cdd9..8df6c807b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -119,6 +119,9 @@ module.exports = {
             transitionDuration: {
                 250: '250ms',
             },
+            minWidth: {
+                '48': '12rem',
+            },
             borderColor: theme => ({
                 default: theme('colors.neutral.400', 'cuurrentColor'),
             }),

From f24a741cbb8a3ff0ecb8514743344ee33af1bc00 Mon Sep 17 00:00:00 2001
From: Jakob Schrettenbrunner <dev@schrej.net>
Date: Sun, 5 Jul 2020 02:36:07 +0200
Subject: [PATCH 22/55] add release automation

---
 .github/workflows/release.yml | 87 +++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 .github/workflows/release.yml

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..61df3a539
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,87 @@
+name: "Release"
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: '12'
+      
+      - name: Create release branch and bump version
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          BRANCH=release/${REF:10}
+          git config --local user.email "ci@pterodactyl.io"
+          git config --local user.name "Pterodactyl CI"
+          git checkout -b $BRANCH
+          git push -u origin $BRANCH
+          sed -i "s/    'version' => 'canary',/    'version' => '${REF:11}',/" config/app.php
+          git add config/app.php
+          git commit -m "bump version for release"
+          git push
+
+      - name: Build assets
+        run: |
+          yarn install
+          yarn run build:production
+      
+      - name: Create release archive
+        run: |
+          rm -rf node_modules/ test/ codecov.yml CODE_OF_CONDUCT.md CONTRIBUTING.md phpunit.dusk.xml phpunit.xml Vagrantfile
+          tar -czf panel.tar.gz *
+
+      - name: Extract changelog
+        id: extract_changelog
+        env:
+          REF: ${{ github.ref }}
+        run: |
+          sed -n "/^## ${REF:10}/,/^## /{/^## /b;p}" CHANGELOG.md > ./RELEASE_CHANGELOG
+          echo ::set-output name=version_name::`sed -nr "s/^## (${REF:10} .*)$/\1/p" CHANGELOG.md`
+
+      - name: Create checksum and add to changelog
+        run: |
+          SUM=`sha256sum panel.tar.gz`
+          echo -e "\n#### SHA256 Checksum\n\n\`\`\`\n$SUM\n\`\`\`\n" >> ./RELEASE_CHANGELOG
+          echo $SUM > checksum.txt
+
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: ${{ steps.extract_changelog.outputs.version_name }}
+          body_path: ./RELEASE_CHANGELOG
+          draft: true
+          prerelease: ${{ contains(github.ref, 'beta') || contains(github.ref, 'alpha') }}
+      
+      - name: Upload binary
+        id: upload-release-archive
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }} 
+          asset_path: panel.tar.gz
+          asset_name: panel.tar.gz
+          asset_content_type: application/gzip
+      
+      - name: Upload checksum
+        id: upload-release-checksum 
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }} 
+          asset_path: ./checksum.txt
+          asset_name: checksum.txt
+          asset_content_type: text/plain

From 2d48781f8e09faa0690fdbc84b608fba95530c45 Mon Sep 17 00:00:00 2001
From: Jakob Schrettenbrunner <dev@schrej.net>
Date: Sun, 5 Jul 2020 03:13:53 +0200
Subject: [PATCH 23/55] disable ci on master and release branches

---
 .github/workflows/tests.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 71328ff02..00c37cc59 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -1,6 +1,9 @@
 name: tests
 on:
   push:
+    branch-ignore:
+      - 'master'
+      - 'release/**'
   pull_request:
 jobs:
   integration_tests:

From 922383e232ae86d28a4d507b2abdf40781c2e7fb Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 18:19:46 -0700
Subject: [PATCH 24/55] Cleanup unused code and simplify webpack

---
 package.json                                  |   7 +-
 resources/scripts/routers/ServerRouter.tsx    |   4 +-
 resources/styles/components/animations.css    |  28 --
 resources/styles/components/filemanager.css   |  81 ------
 resources/styles/components/forms.css         | 253 ------------------
 resources/styles/components/miscellaneous.css |  65 -----
 resources/styles/components/modal.css         |  51 ----
 resources/styles/components/navigation.css    |  69 -----
 resources/styles/components/notifications.css |  46 ----
 resources/styles/components/spinners.css      |  34 ---
 resources/styles/components/typography.css    |  17 --
 resources/styles/main.css                     |  32 ---
 tsconfig.json                                 |   1 +
 webpack.config.js                             |  97 +++----
 yarn.lock                                     | 205 +++++++-------
 15 files changed, 135 insertions(+), 855 deletions(-)
 delete mode 100644 resources/styles/components/animations.css
 delete mode 100644 resources/styles/components/filemanager.css
 delete mode 100644 resources/styles/components/forms.css
 delete mode 100644 resources/styles/components/miscellaneous.css
 delete mode 100644 resources/styles/components/modal.css
 delete mode 100644 resources/styles/components/navigation.css
 delete mode 100644 resources/styles/components/notifications.css
 delete mode 100644 resources/styles/components/spinners.css
 delete mode 100644 resources/styles/components/typography.css
 delete mode 100644 resources/styles/main.css

diff --git a/package.json b/package.json
index 4023446df..32334baae 100644
--- a/package.json
+++ b/package.json
@@ -88,19 +88,17 @@
         "eslint-plugin-react-hooks": "^4.0.5",
         "eslint-plugin-standard": "^4.0.1",
         "fork-ts-checker-webpack-plugin": "^5.0.6",
-        "glob-all": "^3.1.0",
         "html-webpack-plugin": "^3.2.0",
-        "mini-css-extract-plugin": "^0.8.0",
         "postcss": "^7.0.24",
         "postcss-import": "^12.0.1",
         "postcss-loader": "^3.0.0",
         "postcss-preset-env": "^6.7.0",
         "precss": "^4.0.0",
-        "purgecss-webpack-plugin": "^1.6.0",
         "redux-devtools-extension": "^2.13.8",
         "resolve-url-loader": "^3.0.0",
         "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
+        "svg-url-loader": "^6.0.0",
         "tailwindcss": "^1.4.6",
         "terser-webpack-plugin": "^3.0.6",
         "ts-loader": "^6.2.1",
@@ -109,6 +107,7 @@
         "typescript-plugin-tw-template": "^2.0.1",
         "webpack": "^4.43.0",
         "webpack-assets-manifest": "^3.1.1",
+        "webpack-bundle-analyzer": "^3.8.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
         "webpack-manifest-plugin": "^2.2.0",
@@ -119,7 +118,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 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 cross-env TSC_WATCHFILE=UseFsEventsWithFallbackDynamicPolling 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/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index a053262d6..655acea52 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -66,9 +66,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                 error ?
                     <ServerError message={error}/>
                     :
-                    <div className={'flex justify-center m-20'}>
-                        <Spinner size={'large'}/>
-                    </div>
+                    <Spinner size={'large'} centered/>
                 :
                 <>
                     <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
diff --git a/resources/styles/components/animations.css b/resources/styles/components/animations.css
deleted file mode 100644
index 3c3689198..000000000
--- a/resources/styles/components/animations.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*! purgecss start ignore */
-.fade-enter, .fade-appear {
-  @apply .opacity-0;
-}
-
-.fade-enter-active, .fade-appear-active {
-  @apply .opacity-100;
-  transition: opacity 250ms;
-}
-
-.fade-exit {
-  @apply .opacity-100;
-}
-
-.fade-exit-active {
-  @apply .opacity-0;
-  transition: opacity 250ms;
-}
-
-/** @todo fix this, hides footer stuff */
-div.route-transition-group {
-  @apply .relative;
-
-  & section {
-    @apply .absolute .w-full .top-0 .left-0;
-  }
-}
-/*! purgecss end ignore */
diff --git a/resources/styles/components/filemanager.css b/resources/styles/components/filemanager.css
deleted file mode 100644
index 329f90ea1..000000000
--- a/resources/styles/components/filemanager.css
+++ /dev/null
@@ -1,81 +0,0 @@
-.filemanager {
-  & .header {
-    @apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase;
-
-    & > div:not(:last-of-type) {
-      @apply .pr-4;
-    }
-  }
-
-  & .row {
-    @apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded .no-underline;
-
-    & > div:not(:last-of-type) {
-      @apply .pr-4;
-    }
-
-    &.active-selection, &:hover {
-      @apply .bg-neutral-50 .text-neutral-900;
-    }
-
-    & > .icon {
-      @apply .w-8 .text-center;
-
-      & > svg {
-        @apply .h-4;
-      }
-    }
-  }
-
-  .context-menu {
-    @apply .absolute .bg-white .py-2 .border .border-neutral-300 .shadow-lg .rounded .text-neutral-600 .text-sm .cursor-pointer;
-
-    & > div:not(:last-of-type) {
-      @apply .border-b .border-neutral-100 .pb-2 .mb-2;
-    }
-
-    & .context-row {
-      @apply .flex .flex-row .items-center .py-2 .px-8 .mx-2 .rounded;
-      transition: background-color 50ms linear;
-
-      & > .icon {
-        @apply .flex-none;
-
-        & > svg {
-          @apply .h-4;
-        }
-      }
-
-      & > .action {
-        @apply .flex-auto .pl-2;
-      }
-
-      &:hover {
-        @apply .bg-neutral-50 .text-neutral-800;
-      }
-
-      &.danger {
-        @apply .border .border-transparent;
-        transition: border 50ms linear;
-
-        &:hover {
-          @apply .bg-red-50 .border-red-100;
-        }
-      }
-
-    }
-  }
-}
-
-.filemanager-breadcrumbs {
-  @apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-400 .border .border-neutral-100 .shadow;
-
-  & a {
-    @apply .no-underline .text-neutral-400;
-    transition: color 100ms linear;
-
-    &:hover {
-      @apply .text-primary-500;
-    }
-  }
-}
diff --git a/resources/styles/components/forms.css b/resources/styles/components/forms.css
deleted file mode 100644
index 2b1efbc1e..000000000
--- a/resources/styles/components/forms.css
+++ /dev/null
@@ -1,253 +0,0 @@
-form {
-    @apply .m-0;
-}
-
-textarea, select, input, button {
-    @apply .outline-none;
-}
-
-button:focus, button:focus-visible {
-    @apply .outline-none;
-}
-
-input[type=number]::-webkit-outer-spin-button,
-input[type=number]::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0;
-}
-
-input[type=number] {
-    -moz-appearance: textfield !important;
-}
-
-/**
- * Styling for other forms throughout the Panel.
- */
-.input:not(select), .input-dark:not(select) {
-    @apply .appearance-none .w-full;
-    min-width: 0;
-
-    &:required, &:invalid {
-        box-shadow: none;
-    }
-}
-
-.input:not(select) {
-    @apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
-    transition: border 150ms linear;
-
-    &:focus {
-        @apply .border-primary-400;
-    }
-
-    &.error {
-        @apply .text-red-600 .border-red-500;
-    }
-
-    &:disabled {
-        @apply .bg-neutral-100 .border-neutral-200;
-    }
-}
-
-.input-dark:not(select) {
-    @apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none;
-    transition: border 150ms linear, box-shaodw 150ms ease-in;
-
-    &:focus {
-        @apply .shadow-md .border-neutral-400;
-    }
-
-    &:hover {
-        @apply .border-neutral-400;
-    }
-
-    & + .input-help {
-        @apply .text-xs .text-neutral-400;
-    }
-
-    &.error + .input-help {
-        @apply .text-red-400 !important;
-    }
-
-    &:disabled {
-        @apply .opacity-75;
-    }
-}
-
-.has-error .input-dark:not(select), .input-dark.error {
-    @apply .text-red-100 .border-red-400;
-}
-
-.input-help {
-    @apply .text-xs .text-neutral-400 .pt-2;
-
-    &.error {
-        @apply .text-red-400 !important;
-    }
-}
-
-label {
-    @apply .block .text-xs .uppercase .text-neutral-700 .mb-2;
-}
-
-select:not(.appearance-none) {
-    @apply .shadow-none .block .p-3 .pr-8 .rounded .border .w-full .text-sm;
-    transition: border-color 150ms linear;
-
-    &, &:hover:not(:disabled), &:focus {
-        @apply .outline-none;
-    }
-
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background-size: 1rem;
-    background-repeat: no-repeat;
-    background-position-x: calc(100% - 0.75rem);
-    background-position-y: center;
-
-    &::-ms-expand {
-        display: none;
-    }
-}
-
-select.input:not(.appearance-none) {
-    @apply .bg-white .border-neutral-200 .text-neutral-400;
-    transition: color 150ms linear;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
-
-    &:hover:not(:disabled), &:focus {
-        @apply .border-primary-500 .text-neutral-700;
-    }
-}
-
-select.input-dark:not(.appearance-none) {
-    @apply .bg-neutral-600 .border-neutral-500 .text-neutral-200;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
-    background-color: hsl(220deg 21% 16%);
-
-    &:hover:not(:disabled), &:focus {
-        @apply .border-neutral-400;
-    }
-}
-
-.input-dark-label {
-    @apply .uppercase .text-neutral-200;
-}
-
-.input-label {
-    @apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold;
-
-    &:not(.mb-0) {
-        @apply .mb-2;
-    }
-}
-
-a.btn {
-    @apply .no-underline;
-}
-
-.btn {
-    @apply .rounded .p-2 .uppercase .tracking-wide .text-sm;
-    transition: all 150ms linear;
-
-    &.btn-secondary {
-        @apply .border .border-neutral-600 .bg-transparent .text-neutral-200;
-
-        &:hover:not(:disabled) {
-            @apply .border-neutral-500 .text-neutral-100;
-        }
-
-        &.btn-red:hover:not(:disabled) {
-            @apply .bg-red-500 .border-red-600 .text-red-50;
-        }
-
-        &.btn-green:hover:not(:disabled) {
-            @apply .bg-green-500 .border-green-600 .text-green-50;
-        }
-    }
-
-    &.btn-primary {
-        &:not(.btn-secondary) {
-            @apply .bg-primary-500 .border-primary-600 .border .text-primary-50;
-        }
-
-        &:hover:not(:disabled) {
-            @apply .bg-primary-600 .border-primary-700;
-        }
-    }
-
-    &.btn-grey {
-        @apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50;
-
-        &:hover:not(:disabled) {
-            @apply .bg-neutral-600 .border-neutral-700;
-        }
-    }
-
-    &.btn-green {
-        &:not(.btn-secondary) {
-            @apply .bg-green-500 .border-green-600 .border .text-green-50;
-        }
-
-        &:hover:not(:disabled), &.btn-secondary:active:not(:disabled) {
-            @apply .bg-green-600 .border-green-700;
-        }
-    }
-
-    &.btn-red {
-        &:not(.btn-secondary) {
-            @apply .bg-red-500 .border-red-600 .text-red-50;
-        }
-
-        &:hover:not(:disabled), &.btn-secondary:active:not(:disabled) {
-            @apply .bg-red-600 .border-red-700;
-        }
-    }
-
-    /**
-     * Button Sizes
-     */
-    &.btn-jumbo {
-        @apply .p-4 .w-full;
-    }
-
-    &.btn-lg {
-        @apply .p-4 .text-sm;
-    }
-
-    &.btn-sm {
-        @apply .p-3;
-    }
-
-    &.btn-xs {
-        @apply .p-2 .text-xs;
-    }
-
-    &:disabled, &.disabled {
-        opacity: 0.55;
-        cursor: default;
-    }
-}
-
-input[type="checkbox"], input[type="radio"] {
-    @apply .cursor-pointer .appearance-none .inline-block .align-middle .select-none .flex-no-shrink .w-4 .h-4 .text-primary-400 .border .border-neutral-300 .rounded-sm;
-    color-adjust: exact;
-    background-origin: border-box;
-    transition: all 75ms linear, box-shadow 25ms linear;
-
-    &:checked {
-        @apply .border-transparent .bg-no-repeat .bg-center;
-        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-        background-color: currentColor;
-        background-size: 100% 100%;
-    }
-
-    &:focus {
-        @apply .outline-none .border-primary-300;
-        box-shadow: 0 0 0 1px rgba(9, 103, 210, 0.25);
-    }
-}
-
-input[type="radio"] {
-    @apply .rounded-full;
-}
diff --git a/resources/styles/components/miscellaneous.css b/resources/styles/components/miscellaneous.css
deleted file mode 100644
index 95a2f030d..000000000
--- a/resources/styles/components/miscellaneous.css
+++ /dev/null
@@ -1,65 +0,0 @@
-code.clean {
-    @apply .font-mono .px-2 .py-1;
-    background-color: #eef1f6;
-    color: #596981;
-    border-radius: 2px;
-    border: 1px solid rgba(0, 0, 0, .1);
-    display: inline-block;
-}
-
-.grey-row-box {
-    @apply .flex .rounded .no-underline .text-neutral-200 .items-center .bg-neutral-700 .p-4 .border .border-transparent;
-    transition: border-color 150ms linear;
-
-    &:not(.no-hover):hover {
-        @apply .border-neutral-500;
-    }
-
-    & > div.icon {
-        @apply .rounded-full .bg-neutral-500 .p-3;
-    }
-}
-
-.grey-box {
-    @apply .shadow-md .bg-neutral-700 .rounded .p-3 .flex .text-xs;
-
-    &:not(.mt-0) {
-        @apply .mt-4;
-    }
-}
-
-::-webkit-scrollbar {
-    background: none;
-    width: 16px;
-    height: 16px;
-}
-
- ::-webkit-scrollbar-thumb {
-     border: solid 0 rgb(0 0 0 / 0%);
-     border-right-width: 4px;
-     border-left-width: 4px;
-     -webkit-border-radius: 9px 4px;
-     -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
-}
-
- ::-webkit-scrollbar-track-piece {
-     margin: 4px 0;
-}
-
- ::-webkit-scrollbar-thumb:horizontal {
-     border-right-width: 0;
-     border-left-width: 0;
-     border-top-width: 4px;
-     border-bottom-width: 4px;
-     -webkit-border-radius: 4px 9px;
-}
-
- ::-webkit-scrollbar-thumb:hover {
-     -webkit-box-shadow:
-       inset 0 0 0 1px hsl(212, 92%, 43%),
-       inset 0 0 0 4px hsl(212, 92%, 43%);
-}
-
- ::-webkit-scrollbar-corner {
-     background: transparent;
-}
diff --git a/resources/styles/components/modal.css b/resources/styles/components/modal.css
deleted file mode 100644
index 0919d9ba1..000000000
--- a/resources/styles/components/modal.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.modal-mask {
-  @apply .fixed .pin .z-50 .overflow-auto .flex;
-  background: rgba(0, 0, 0, 0.70);
-  transition: opacity 250ms ease;
-
-  & > .modal-container {
-    @apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex;
-
-    &.top {
-      margin-top: 10%;
-    }
-
-    & > .modal-close-icon {
-      @apply .absolute .right-0 .p-2 .text-white .cursor-pointer .opacity-50;
-      transition: opacity 150ms linear, transform 150ms ease-in;
-      top: -2rem;
-
-      &:hover {
-        @apply .opacity-100;
-        transform: rotate(90deg);
-      }
-    }
-
-    & > .modal-content {
-      @apply .bg-neutral-800 .rounded .shadow-md .overflow-y-scroll;
-      max-height: calc(100vh - 16rem);
-      transition: all 250ms ease;
-    }
-
-    /**
-     * On tiny phone screens make sure there is a margin on the sides and also
-     * center the modal rather than putting it towards the top of the screen.
-     */
-    @screen smx {
-      width: 90%;
-      .top {
-        margin-top: auto;
-      }
-    }
-  }
-
-  & > .modal-container.full-screen {
-    @apply .w-3/4;
-    height: calc(100vh - 16rem);
-    max-width: none;
-  }
-
-  & > .modal-container.w-auto {
-    @apply .w-auto;
-  }
-}
diff --git a/resources/styles/components/navigation.css b/resources/styles/components/navigation.css
deleted file mode 100644
index 31951ebfb..000000000
--- a/resources/styles/components/navigation.css
+++ /dev/null
@@ -1,69 +0,0 @@
-#navigation {
-    @apply .w-full .bg-neutral-900 .shadow-md;
-
-    & > div {
-        @apply .mx-auto .w-full .flex .items-center;
-    }
-
-    & #logo {
-        @apply .flex-1;
-
-        & > a {
-            @apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
-            transition: color 150ms linear;
-
-            &:hover {
-                @apply .text-neutral-100;
-            }
-        }
-    }
-
-    & .right-navigation {
-        @apply .flex .h-full .items-center .justify-center;
-
-        & > a, & > .navigation-link {
-            @apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6 .cursor-pointer;
-            transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;
-
-            /*! purgecss start ignore */
-            &.active, &:hover {
-                @apply .text-neutral-100 .bg-black;
-                box-shadow: inset 0 -2px config('colors.cyan-700');
-            }
-
-            &.active {
-                box-shadow: inset 0 -2px config('colors.cyan-500');
-            }
-            /*! purgecss end ignore */
-        }
-    }
-}
-
-#sub-navigation {
-    @apply .w-full .bg-neutral-700 .shadow;
-
-    .items {
-        @apply .flex .items-center .text-sm .mx-auto .px-2;
-        max-width: 1200px;
-
-        /*! purgecss start ignore */
-        & > a, & > div {
-            @apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
-            transition: color 150ms linear, box-shadow 150ms ease-in;
-
-            &:not(:first-of-type) {
-                @apply .ml-2;
-            }
-
-            &.active, &:hover {
-                @apply .text-neutral-100;
-                box-shadow: inset 0 -2px config('colors.cyan-700');
-            }
-
-            &.active {
-                box-shadow: inset 0 -2px config('colors.cyan-500');
-            }
-        }
-        /*! purgecss end ignore */
-    }
-}
diff --git a/resources/styles/components/notifications.css b/resources/styles/components/notifications.css
deleted file mode 100644
index 85d31ee6c..000000000
--- a/resources/styles/components/notifications.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Styling to control alert boxes.
- */
-.alert {
-    @apply .p-2 .border .items-center .leading-normal .rounded .flex .w-full .text-sm;
-
-    & > .title {
-        @apply .flex .rounded-full .uppercase .px-2 .py-1 .text-xs .font-bold .mr-3 .leading-none;
-    }
-
-    & > .message {
-        @apply .mr-2 .text-left .flex-auto;
-    }
-
-    &.error {
-        @apply .bg-red-600 .border-red-800 .text-red-50;
-
-        & > .title {
-            @apply .bg-red-500;
-        }
-    }
-
-    &.info {
-        @apply .bg-primary-600 .border-primary-800 .text-primary-50;
-
-        & > .title {
-            @apply .bg-primary-500;
-        }
-    }
-
-    &.success {
-        @apply .bg-green-600 .border-green-800 .text-green-50;
-
-        & > .title {
-            @apply .bg-green-500;
-        }
-    }
-
-    &.warning {
-        @apply .bg-yellow-600 .border-yellow-800 .text-yellow-50;
-
-        & > .title {
-            @apply .bg-yellow-500;
-        }
-    }
-}
diff --git a/resources/styles/components/spinners.css b/resources/styles/components/spinners.css
deleted file mode 100644
index 864445b31..000000000
--- a/resources/styles/components/spinners.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.spinner-circle {
-  @apply .w-8 .h-8;
-  border: 3px solid hsla(211, 12%, 43%, 0.2);
-  border-top-color: hsl(211, 12%, 43%);
-  border-radius: 50%;
-  animation: spin 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
-
-  &.spinner-sm {
-    @apply .w-4 .h-4 .border-2;
-  }
-
-  &.spinner-lg {
-    @apply .w-16 .h-16;
-    border-width: 6px;
-  }
-
-  &.spinner-blue {
-    border-style: solid;
-    border-color: hsla(212, 92%, 43%, 0.2);
-    border-top-color: hsl(212, 92%, 43%);
-  }
-
-  &.spinner-white {
-    border-style: solid;
-    border-color: rgba(255, 255, 255, 0.2);
-    border-top-color: rgb(255, 255, 255);
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/resources/styles/components/typography.css b/resources/styles/components/typography.css
deleted file mode 100644
index 00209a553..000000000
--- a/resources/styles/components/typography.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
-@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:500&display=swap');
-
-body {
-    @apply .text-neutral-200;
-    letter-spacing: 0.015em;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    @apply .font-medium;
-    letter-spacing: 0;
-    font-family: 'IBM Plex Sans', -apple-system, '"Roboto"', 'system-ui', 'sans-serif';
-}
-
-p {
-    @apply .text-neutral-200 .leading-snug;
-}
diff --git a/resources/styles/main.css b/resources/styles/main.css
deleted file mode 100644
index bac7986f1..000000000
--- a/resources/styles/main.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Tailwind Preflight Classes
- */
-@import "tailwindcss/preflight";
-@import "tailwindcss/components";
-
-@import "xterm/src/xterm.css";
-
-/**
- * Pterodactyl Specific CSS
- */
-@import "components/typography.css";
-@import "components/animations.css";
-@import "components/forms.css";
-@import "components/miscellaneous.css";
-@import "components/modal.css";
-@import "components/navigation.css";
-@import "components/notifications.css";
-@import "components/spinners.css";
-@import "components/filemanager.css";
-
-/**
- * Tailwind Utilities
- */
-@import "tailwindcss/utilities";
-
-/**
- * Assorted Other CSS
- */
-body {
-    @apply .font-sans;
-}
diff --git a/tsconfig.json b/tsconfig.json
index 7bae0683d..41a4286b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "lib": ["es2015", "dom"],
+    "importsNotUsedAsValues": "preserve",
     "paths": {
       "@/*": [
         "./resources/scripts/*"
diff --git a/webpack.config.js b/webpack.config.js
index 0770fb7b9..780461bd7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,64 +1,23 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
-const tailwind = require('tailwindcss');
-const glob = require('glob-all');
-
 const AssetsManifestPlugin = require('webpack-assets-manifest');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const PurgeCssPlugin = require('purgecss-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-let plugins = [
-    // new MiniCssExtractPlugin({ filename: isProduction ? 'bundle.[chunkhash:8].css' : 'bundle.[hash:8].css' }),
-    new AssetsManifestPlugin({
-        writeToDisk: true,
-        publicPath: true,
-        integrity: true,
-        integrityHashes: ['sha384'],
-    }),
-];
-
-if (isProduction) {
-    // plugins = plugins.concat([
-    //     new PurgeCssPlugin({
-    //         paths: glob.sync([
-    //             path.join(__dirname, 'resources/scripts/**/*.tsx'),
-    //             path.join(__dirname, 'resources/views/templates/**/*.blade.php'),
-    //         ]),
-    //         whitelistPatterns: [/^xterm/],
-    //         extractors: [
-    //             {
-    //                 extractor: class {
-    //                     static extract (content) {
-    //                         return content.match(/[A-Za-z0-9-_:\\/]+/g) || [];
-    //                     }
-    //                 },
-    //                 extensions: ['html', 'ts', 'tsx', 'js', 'php'],
-    //             },
-    //         ],
-    //     }),
-    // ]);
-} else {
-    plugins.concat([new ForkTsCheckerWebpackPlugin()]);
-}
-
 module.exports = {
     cache: true,
     target: 'web',
     mode: process.env.NODE_ENV,
-    devtool: isProduction ? false : process.env.DEVTOOL || 'source-map',
+    context: __dirname,
+    devtool: isProduction ? false : (process.env.DEVTOOL || 'eval-source-map'),
     performance: {
         hints: false,
     },
-    entry: [
-        'react-hot-loader/patch',
-        './resources/scripts/index.tsx',
-    ],
+    entry: ['react-hot-loader/patch', './resources/scripts/index.tsx'],
     output: {
-        path: path.resolve(__dirname, 'public/assets'),
+        path: path.resolve(__dirname, '/public/assets'),
         filename: isProduction ? 'bundle.[chunkhash:8].js' : 'bundle.[hash:8].js',
         chunkFilename: isProduction ? '[name].[chunkhash:8].js' : '[name].[hash:8].js',
         publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
@@ -67,7 +26,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.tsx?$/,
+                test: /\.ts(x?)$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 options: {
@@ -76,45 +35,54 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                // include: [
-                //     path.resolve(__dirname, 'resources'),
-                // ],
-                use: [
-                    { loader: 'style-loader' },
-                    { loader: 'css-loader' },
-                    { loader: 'resolve-url-loader' },
-                ],
+                use: [ 'style-loader', 'css-loader' ],
             },
             {
-                test: /\.(png|jpg|gif|svg)$/,
+                test: /\.(png|jpe?g|gif)$/,
                 loader: 'file-loader',
                 options: {
-                    name: '[name].[ext]?[hash:8]',
+                    name: 'images/[name].[hash].[ext]',
                 },
             },
             {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader',
+                test: /\.svg$/,
+                loader: 'svg-url-loader',
             }
+            // {
+            //     enforce: 'pre',
+            //     test: /\.js$/,
+            //     loader: 'source-map-loader',
+            // },
         ],
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js', '.json'],
         alias: {
-            '@': path.join(__dirname, 'resources/scripts'),
+            '@': path.resolve(__dirname, 'resources/scripts'),
         },
         symlinks: false,
     },
-    plugins: plugins,
+    plugins: [
+        new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
+        !isProduction ? new ForkTsCheckerWebpackPlugin({
+            eslint: {
+                files: './resources/scripts/**/*.{ts,tsx}',
+            },
+        }) : null,
+        process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin() : null
+    ].filter(p => p),
     optimization: {
+        usedExports: true,
+        sideEffects: false,
+        runtimeChunk: false,
+        removeEmptyChunks: true,
         minimize: isProduction,
         minimizer: [
             new TerserPlugin({
                 cache: true,
                 parallel: true,
+                extractComments: false,
                 terserOptions: {
-                    safari10: true,
                     mangle: true,
                     output: {
                         comments: false,
@@ -128,7 +96,8 @@ module.exports = {
         ignored: /node_modules/,
     },
     devServer: {
-        contentBase: path.join(__dirname, 'public'),
+        compress: true,
+        contentBase: 'public',
         publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
         allowedHosts: [
             '.pterodactyl.test',
diff --git a/yarn.lock b/yarn.lock
index f814aec3e..e05197279 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1364,7 +1364,7 @@ acorn-node@^1.6.1:
     acorn-walk "^7.0.0"
     xtend "^4.0.2"
 
-acorn-walk@^7.0.0:
+acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -1374,7 +1374,7 @@ acorn@^6.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
-acorn@^7.0.0, acorn@^7.2.0:
+acorn@^7.0.0, acorn@^7.1.1, acorn@^7.2.0:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
   integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
@@ -1729,6 +1729,16 @@ batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
 
+bfj@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-6.1.2.tgz#325c861a822bcb358a41c78a33b8e6e2086dde7f"
+  integrity sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==
+  dependencies:
+    bluebird "^3.5.5"
+    check-types "^8.0.3"
+    hoopy "^0.1.4"
+    tryer "^1.0.1"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2090,6 +2100,11 @@ chartjs-color@^2.1.0:
     chartjs-color-string "^0.6.0"
     color-convert "^0.5.3"
 
+check-types@^8.0.3:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
+  integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
+
 chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -2259,7 +2274,7 @@ commander@2.15.x, commander@~2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
-commander@^2.10.0, commander@^2.20.0:
+commander@^2.10.0, commander@^2.18.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
@@ -2996,6 +3011,11 @@ dset@^2.0.1:
   resolved "https://registry.yarnpkg.com/dset/-/dset-2.0.1.tgz#a15fff3d1e4d60ac0c95634625cbd5441a76deb1"
   integrity sha512-nI29OZMRYq36hOcifB6HTjajNAAiBKSXsyWZrq+VniusseuP2OpNlTiYgsaNRSGvpyq5Wjbc2gQLyBdTyWqhnQ==
 
+duplexer@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
@@ -3024,6 +3044,11 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+ejs@^2.6.1:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
+  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
+
 electron-to-chromium@^1.3.322:
   version "1.3.322"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.322.tgz#a6f7e1c79025c2b05838e8e344f6e89eb83213a8"
@@ -3457,7 +3482,7 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-express@^4.17.1:
+express@^4.16.3, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
   dependencies:
@@ -3557,6 +3582,19 @@ file-entry-cache@^5.0.1:
   dependencies:
     flat-cache "^2.0.1"
 
+file-loader@~6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.0.0.tgz#97bbfaab7a2460c07bcbd72d3a6922407f67649f"
+  integrity sha512-/aMOAYEFXDdjG0wytpTL5YQLfZnnTmLNjn+AIrJ/6HVnTfDqLsVKUUwkDf4I4kgex36BvjuXEn/TX9B/1ESyqQ==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.5"
+
+filesize@^3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
+
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
@@ -3836,13 +3874,6 @@ get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
 
-glob-all@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.1.0.tgz#8913ddfb5ee1ac7812656241b03d5217c64b02ab"
-  dependencies:
-    glob "^7.0.5"
-    yargs "~1.2.6"
-
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -3869,7 +3900,7 @@ glob@^7.0.0, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
   dependencies:
@@ -3954,6 +3985,14 @@ gud@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
 
+gzip-size@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^4.0.1"
+
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
@@ -4083,6 +4122,11 @@ homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
+hoopy@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
+  integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
+
 hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
@@ -4591,10 +4635,6 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
-is-plain-obj@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -4863,7 +4903,7 @@ loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
   integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
@@ -5195,15 +5235,6 @@ mini-create-react-context@^0.3.0:
     gud "^1.0.0"
     tiny-warning "^1.0.2"
 
-mini-css-extract-plugin@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
-  dependencies:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
-
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -5222,10 +5253,6 @@ minimist@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
 
-minimist@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
-
 minimist@^1.1.1, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -5507,15 +5534,6 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
-normalize-url@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
-
 normalize-url@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.2.0.tgz#98d0948afc82829f374320f405fe9ca55a5f8567"
@@ -5676,6 +5694,11 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+opener@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
+  integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -6657,10 +6680,6 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prepend-http@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
-
 pretty-error@^2.0.2:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
@@ -6764,22 +6783,6 @@ punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
-purgecss-webpack-plugin@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/purgecss-webpack-plugin/-/purgecss-webpack-plugin-1.6.0.tgz#7b5d6d189f5574c1365592e1445d252162404e4a"
-  dependencies:
-    purgecss "^1.4.0"
-    webpack-sources "^1.4.3"
-
-purgecss@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.1.tgz#d362e63eb1ed9dd1fa1554b9fd7accb8d54e56dc"
-  dependencies:
-    glob "^7.1.3"
-    postcss "^7.0.14"
-    postcss-selector-parser "^6.0.0"
-    yargs "^14.0.0"
-
 purgecss@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-2.3.0.tgz#5327587abf5795e6541517af8b190a6fb5488bb3"
@@ -6806,13 +6809,6 @@ query-string@*, query-string@^6.7.0:
     split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
-query-string@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -7361,7 +7357,7 @@ schema-utils@^2.6.0:
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
-schema-utils@^2.6.6:
+schema-utils@^2.6.5, schema-utils@^2.6.6:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7"
   integrity sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==
@@ -7590,12 +7586,6 @@ sockjs@0.3.20:
     uuid "^3.4.0"
     websocket-driver "0.6.5"
 
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
-  dependencies:
-    is-plain-obj "^1.0.0"
-
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -7758,10 +7748,6 @@ stream-shift@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -7945,6 +7931,14 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svg-url-loader@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/svg-url-loader/-/svg-url-loader-6.0.0.tgz#b94861d9f6badfb8ca3e7d3ec4655c1bf732ac5d"
+  integrity sha512-Qr5SCKxyxKcRnvnVrO3iQj9EX/v40UiGEMshgegzV7vpo3yc+HexELOdtWcA3MKjL8IyZZ1zOdcILmDEa/8JJQ==
+  dependencies:
+    file-loader "~6.0.0"
+    loader-utils "~2.0.0"
+
 svgo@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.0.5.tgz#7040364c062a0538abacff4401cea6a26a7a389a"
@@ -8174,6 +8168,11 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
+tryer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
+  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
+
 ts-loader@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
@@ -8527,6 +8526,25 @@ webpack-assets-manifest@^3.1.1:
     tapable "^1.0.0"
     webpack-sources "^1.0.0"
 
+webpack-bundle-analyzer@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz#ce6b3f908daf069fd1f7266f692cbb3bded9ba16"
+  integrity sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+    bfj "^6.1.1"
+    chalk "^2.4.1"
+    commander "^2.18.0"
+    ejs "^2.6.1"
+    express "^4.16.3"
+    filesize "^3.6.1"
+    gzip-size "^5.0.0"
+    lodash "^4.17.15"
+    mkdirp "^0.5.1"
+    opener "^1.5.1"
+    ws "^6.0.0"
+
 webpack-cli@^3.3.12:
   version "3.3.12"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.12.tgz#94e9ada081453cd0aa609c99e500012fd3ad2d4a"
@@ -8610,7 +8628,7 @@ webpack-manifest-plugin@^2.2.0:
     object.entries "^1.1.0"
     tapable "^1.0.0"
 
-webpack-sources@^1.0.0, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+webpack-sources@^1.0.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   dependencies:
@@ -8730,7 +8748,7 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@^6.2.1:
+ws@^6.0.0, ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
   dependencies:
@@ -8783,13 +8801,6 @@ yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^15.0.0:
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -8806,28 +8817,6 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
-yargs@^14.0.0:
-  version "14.2.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.2.tgz#2769564379009ff8597cdd38fba09da9b493c4b5"
-  dependencies:
-    cliui "^5.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^15.0.0"
-
-yargs@~1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
-  dependencies:
-    minimist "^0.1.0"
-
 yarn-deduplicate@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/yarn-deduplicate/-/yarn-deduplicate-1.1.1.tgz#19b4a87654b66f55bf3a4bd6b153b4e4ab1b6e6d"

From c419d15907e9504ad9ef055243cb3e9f4ab8e0cd Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 18:30:50 -0700
Subject: [PATCH 25/55] eslint cleanup

---
 package.json                                                | 1 +
 resources/scripts/.eslintrc.yml                             | 4 +++-
 resources/scripts/api/account/createApiKey.ts               | 4 ++--
 resources/scripts/api/account/updateAccountPassword.ts      | 2 --
 resources/scripts/api/auth/loginCheckpoint.ts               | 2 --
 resources/scripts/api/auth/performPasswordReset.ts          | 1 -
 resources/scripts/api/getServers.ts                         | 3 +--
 resources/scripts/api/getSystemPermissions.ts               | 2 +-
 resources/scripts/api/http.ts                               | 2 +-
 resources/scripts/api/server/files/renameFile.ts            | 2 --
 resources/scripts/api/server/getServer.ts                   | 3 ++-
 resources/scripts/api/server/getServerDatabases.ts          | 2 +-
 resources/scripts/api/server/reinstallServer.ts             | 2 +-
 .../api/server/schedules/createOrUpdateScheduleTask.ts      | 1 -
 .../scripts/api/server/schedules/deleteScheduleTask.ts      | 2 +-
 resources/scripts/api/server/schedules/getServerSchedule.ts | 2 +-
 .../scripts/api/server/schedules/getServerSchedules.tsx     | 2 +-
 resources/scripts/api/server/users/createOrUpdateSubuser.ts | 2 +-
 .../scripts/components/auth/LoginCheckpointContainer.tsx    | 2 +-
 .../scripts/components/auth/ResetPasswordContainer.tsx      | 2 +-
 .../components/dashboard/forms/ConfigureTwoFactorForm.tsx   | 2 +-
 resources/scripts/components/elements/ProgressBar.tsx       | 4 ++--
 resources/scripts/components/server/WebsocketHandler.tsx    | 2 +-
 .../scripts/components/server/backups/BackupContextMenu.tsx | 2 +-
 .../components/server/files/FileManagerContainer.tsx        | 2 +-
 .../components/server/schedules/ScheduleEditContainer.tsx   | 2 +-
 .../scripts/components/server/schedules/ScheduleTaskRow.tsx | 2 +-
 .../scripts/components/server/users/RemoveSubuserButton.tsx | 2 +-
 resources/scripts/i18n.ts                                   | 4 ++--
 resources/scripts/plugins/useEventListener.ts               | 4 ++--
 resources/scripts/plugins/usePersistedState.ts              | 6 +++---
 resources/scripts/plugins/useWebsocketEvent.ts              | 2 +-
 resources/scripts/routers/ServerRouter.tsx                  | 4 ++--
 resources/scripts/state/permissions.ts                      | 2 +-
 resources/scripts/state/server/files.ts                     | 2 +-
 resources/scripts/state/server/index.ts                     | 2 +-
 resources/scripts/state/user.ts                             | 2 +-
 37 files changed, 42 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index 32334baae..d50fc0cb1 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     },
     "scripts": {
         "clean": "rm -rf public/assets/*.{js,css,map}",
+        "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
         "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",
diff --git a/resources/scripts/.eslintrc.yml b/resources/scripts/.eslintrc.yml
index 2d77a9d90..9ecd57a7a 100644
--- a/resources/scripts/.eslintrc.yml
+++ b/resources/scripts/.eslintrc.yml
@@ -49,7 +49,7 @@ rules:
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
   "@typescript-eslint/ban-ts-comment": 0
-  # @todo this would be nice to have, but don't want to deal with the warning spam at the moment.
+  # This would be nice to have, but don't want to deal with the warning spam at the moment.
   "@typescript-eslint/explicit-module-boundary-types": 0
   no-restricted-imports:
     - error
@@ -58,6 +58,8 @@ rules:
           message: Please import from styled-components/macro.
       patterns:
         - "!styled-components/macro"
+  # Not sure, this rule just doesn't work right and is protected by our use of Typescript anyways
+  # so I'm just not going to worry about it.
   "react/prop-types": 0
   "react/display-name": 0
   "react/jsx-indent-props":
diff --git a/resources/scripts/api/account/createApiKey.ts b/resources/scripts/api/account/createApiKey.ts
index afe509264..7067ec145 100644
--- a/resources/scripts/api/account/createApiKey.ts
+++ b/resources/scripts/api/account/createApiKey.ts
@@ -3,13 +3,13 @@ import { ApiKey, rawDataToApiKey } from '@/api/account/getApiKeys';
 
 export default (description: string, allowedIps: string): Promise<ApiKey & { secretToken: string }> => {
     return new Promise((resolve, reject) => {
-        http.post(`/api/client/account/api-keys`, {
+        http.post('/api/client/account/api-keys', {
             description,
-            // eslint-disable-next-line @typescript-eslint/camelcase
             allowed_ips: allowedIps.length > 0 ? allowedIps.split('\n') : [],
         })
             .then(({ data }) => resolve({
                 ...rawDataToApiKey(data.attributes),
+                // eslint-disable-next-line camelcase
                 secretToken: data.meta?.secret_token ?? '',
             }))
             .catch(reject);
diff --git a/resources/scripts/api/account/updateAccountPassword.ts b/resources/scripts/api/account/updateAccountPassword.ts
index c29aefd2d..d59e85e9c 100644
--- a/resources/scripts/api/account/updateAccountPassword.ts
+++ b/resources/scripts/api/account/updateAccountPassword.ts
@@ -9,10 +9,8 @@ interface Data {
 export default ({ current, password, confirmPassword }: Data): Promise<void> => {
     return new Promise((resolve, reject) => {
         http.put('/api/client/account/password', {
-            // eslint-disable-next-line @typescript-eslint/camelcase
             current_password: current,
             password: password,
-            // eslint-disable-next-line @typescript-eslint/camelcase
             password_confirmation: confirmPassword,
         })
             .then(() => resolve())
diff --git a/resources/scripts/api/auth/loginCheckpoint.ts b/resources/scripts/api/auth/loginCheckpoint.ts
index 25bb715a4..2d139fa52 100644
--- a/resources/scripts/api/auth/loginCheckpoint.ts
+++ b/resources/scripts/api/auth/loginCheckpoint.ts
@@ -4,11 +4,9 @@ import { LoginResponse } from '@/api/auth/login';
 export default (token: string, code: string, recoveryToken?: string): Promise<LoginResponse> => {
     return new Promise((resolve, reject) => {
         http.post('/auth/login/checkpoint', {
-            /* eslint-disable @typescript-eslint/camelcase */
             confirmation_token: token,
             authentication_code: code,
             recovery_token: (recoveryToken && recoveryToken.length > 0) ? recoveryToken : undefined,
-            /* eslint-enable @typescript-eslint/camelcase */
         })
             .then(response => resolve({
                 complete: response.data.data.complete,
diff --git a/resources/scripts/api/auth/performPasswordReset.ts b/resources/scripts/api/auth/performPasswordReset.ts
index f6263c4fe..6695099ee 100644
--- a/resources/scripts/api/auth/performPasswordReset.ts
+++ b/resources/scripts/api/auth/performPasswordReset.ts
@@ -17,7 +17,6 @@ export default (email: string, data: Data): Promise<PasswordResetResponse> => {
             email,
             token: data.token,
             password: data.password,
-            // eslint-disable-next-line @typescript-eslint/camelcase
             password_confirmation: data.passwordConfirmation,
         })
             .then(response => resolve({
diff --git a/resources/scripts/api/getServers.ts b/resources/scripts/api/getServers.ts
index 499932376..42b2d501b 100644
--- a/resources/scripts/api/getServers.ts
+++ b/resources/scripts/api/getServers.ts
@@ -3,10 +3,9 @@ import http, { getPaginationSet, PaginatedResult } from '@/api/http';
 
 export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult<Server>> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/client`, {
+        http.get('/api/client', {
             params: {
                 include: [ 'allocation' ],
-                // eslint-disable-next-line @typescript-eslint/camelcase
                 filter: includeAdmin ? 'all' : undefined,
                 query,
             },
diff --git a/resources/scripts/api/getSystemPermissions.ts b/resources/scripts/api/getSystemPermissions.ts
index 69fb56797..0e7f27caa 100644
--- a/resources/scripts/api/getSystemPermissions.ts
+++ b/resources/scripts/api/getSystemPermissions.ts
@@ -3,7 +3,7 @@ import http from '@/api/http';
 
 export default (): Promise<PanelPermissions> => {
     return new Promise((resolve, reject) => {
-        http.get(`/api/client/permissions`)
+        http.get('/api/client/permissions')
             .then(({ data }) => resolve(data.attributes.permissions))
             .catch(reject);
     });
diff --git a/resources/scripts/api/http.ts b/resources/scripts/api/http.ts
index 98f74d56c..21111ba9b 100644
--- a/resources/scripts/api/http.ts
+++ b/resources/scripts/api/http.ts
@@ -5,7 +5,7 @@ const http: AxiosInstance = axios.create({
     timeout: 20000,
     headers: {
         'X-Requested-With': 'XMLHttpRequest',
-        'Accept': 'application/json',
+        Accept: 'application/json',
         'Content-Type': 'application/json',
         'X-CSRF-Token': (window as any).X_CSRF_TOKEN as string || '',
     },
diff --git a/resources/scripts/api/server/files/renameFile.ts b/resources/scripts/api/server/files/renameFile.ts
index ba483d99c..6b307c837 100644
--- a/resources/scripts/api/server/files/renameFile.ts
+++ b/resources/scripts/api/server/files/renameFile.ts
@@ -8,9 +8,7 @@ interface Data {
 export default (uuid: string, { renameFrom, renameTo }: Data): Promise<void> => {
     return new Promise((resolve, reject) => {
         http.put(`/api/client/servers/${uuid}/files/rename`, {
-            // eslint-disable-next-line @typescript-eslint/camelcase
             rename_from: renameFrom,
-            // eslint-disable-next-line @typescript-eslint/camelcase
             rename_to: renameTo,
         })
             .then(() => resolve())
diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index 0a0b4e4a5..bd4f90ba8 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -62,7 +62,8 @@ export default (uuid: string): Promise<[ Server, string[] ]> => {
         http.get(`/api/client/servers/${uuid}`)
             .then(({ data }) => resolve([
                 rawDataToServerObject(data.attributes),
-                data.meta?.is_server_owner ? ['*'] : (data.meta?.user_permissions || []),
+                // eslint-disable-next-line camelcase
+                data.meta?.is_server_owner ? [ '*' ] : (data.meta?.user_permissions || []),
             ]))
             .catch(reject);
     });
diff --git a/resources/scripts/api/server/getServerDatabases.ts b/resources/scripts/api/server/getServerDatabases.ts
index 835964c27..cf7c9037d 100644
--- a/resources/scripts/api/server/getServerDatabases.ts
+++ b/resources/scripts/api/server/getServerDatabases.ts
@@ -18,7 +18,7 @@ export const rawDataToServerDatabase = (data: any): ServerDatabase => ({
     password: data.relationships && data.relationships.password ? data.relationships.password.attributes.password : undefined,
 });
 
-export default (uuid: string, includePassword: boolean = true): Promise<ServerDatabase[]> => {
+export default (uuid: string, includePassword = true): Promise<ServerDatabase[]> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}/databases`, {
             params: includePassword ? { include: 'password' } : undefined,
diff --git a/resources/scripts/api/server/reinstallServer.ts b/resources/scripts/api/server/reinstallServer.ts
index e931d7991..5cb2ca5e7 100644
--- a/resources/scripts/api/server/reinstallServer.ts
+++ b/resources/scripts/api/server/reinstallServer.ts
@@ -6,4 +6,4 @@ export default (uuid: string): Promise<void> => {
             .then(() => resolve())
             .catch(reject);
     });
-}
+};
diff --git a/resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts b/resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts
index d48214d09..c0d7fbbe7 100644
--- a/resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts
+++ b/resources/scripts/api/server/schedules/createOrUpdateScheduleTask.ts
@@ -11,7 +11,6 @@ export default (uuid: string, schedule: number, task: number | undefined, { time
     return new Promise((resolve, reject) => {
         http.post(`/api/client/servers/${uuid}/schedules/${schedule}/tasks${task ? `/${task}` : ''}`, {
             ...data,
-            // eslint-disable-next-line @typescript-eslint/camelcase
             time_offset: timeOffset,
         })
             .then(({ data }) => resolve(rawDataToServerTask(data.attributes)))
diff --git a/resources/scripts/api/server/schedules/deleteScheduleTask.ts b/resources/scripts/api/server/schedules/deleteScheduleTask.ts
index 4b5a33296..8867677b2 100644
--- a/resources/scripts/api/server/schedules/deleteScheduleTask.ts
+++ b/resources/scripts/api/server/schedules/deleteScheduleTask.ts
@@ -5,5 +5,5 @@ export default (uuid: string, scheduleId: number, taskId: number): Promise<void>
         http.delete(`/api/client/servers/${uuid}/schedules/${scheduleId}/tasks/${taskId}`)
             .then(() => resolve())
             .catch(reject);
-    })
+    });
 };
diff --git a/resources/scripts/api/server/schedules/getServerSchedule.ts b/resources/scripts/api/server/schedules/getServerSchedule.ts
index 537124bd6..63e3d6f98 100644
--- a/resources/scripts/api/server/schedules/getServerSchedule.ts
+++ b/resources/scripts/api/server/schedules/getServerSchedule.ts
@@ -5,7 +5,7 @@ export default (uuid: string, schedule: number): Promise<Schedule> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}/schedules/${schedule}`, {
             params: {
-                include: ['tasks'],
+                include: [ 'tasks' ],
             },
         })
             .then(({ data }) => resolve(rawDataToServerSchedule(data.attributes)))
diff --git a/resources/scripts/api/server/schedules/getServerSchedules.tsx b/resources/scripts/api/server/schedules/getServerSchedules.tsx
index 7d3ae4d1c..42514582a 100644
--- a/resources/scripts/api/server/schedules/getServerSchedules.tsx
+++ b/resources/scripts/api/server/schedules/getServerSchedules.tsx
@@ -64,7 +64,7 @@ export default (uuid: string): Promise<Schedule[]> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}/schedules`, {
             params: {
-                include: ['tasks'],
+                include: [ 'tasks' ],
             },
         })
             .then(({ data }) => resolve((data.data || []).map((row: any) => rawDataToServerSchedule(row.attributes))))
diff --git a/resources/scripts/api/server/users/createOrUpdateSubuser.ts b/resources/scripts/api/server/users/createOrUpdateSubuser.ts
index fbcf78fe5..93303a2db 100644
--- a/resources/scripts/api/server/users/createOrUpdateSubuser.ts
+++ b/resources/scripts/api/server/users/createOrUpdateSubuser.ts
@@ -15,4 +15,4 @@ export default (uuid: string, params: Params, subuser?: Subuser): Promise<Subuse
             .then(data => resolve(rawDataToServerSubuser(data.data)))
             .catch(reject);
     });
-}
+};
diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index 41af2ac20..a546c9664 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
@@ -17,7 +17,7 @@ interface Values {
     recoveryCode: '',
 }
 
-type OwnProps = RouteComponentProps<{}, StaticContext, { token?: string }>
+type OwnProps = RouteComponentProps<Record<string, unknown>, StaticContext, { token?: string }>
 
 type Props = OwnProps & {
     addError: ActionCreator<FlashStore['addError']['payload']>;
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index 6535d9d20..92bba53ab 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx
@@ -57,7 +57,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                     .min(8, 'Your new password should be at least 8 characters in length.'),
                 passwordConfirmation: string()
                     .required('Your new password does not match.')
-                    .oneOf([ref('password'), null], 'Your new password does not match.'),
+                    .oneOf([ ref('password'), null ], 'Your new password does not match.'),
             })}
         >
             {({ isSubmitting }) => (
diff --git a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
index f848b633d..0b0db4d77 100644
--- a/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
+++ b/resources/scripts/components/dashboard/forms/ConfigureTwoFactorForm.tsx
@@ -14,7 +14,7 @@ export default () => {
         <div>
             {visible &&
             <DisableTwoFactorModal
-                appear={true}
+                appear
                 visible={visible}
                 onDismissed={() => setVisible(false)}
             />
diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx
index 448815414..a40b92705 100644
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/resources/scripts/components/elements/ProgressBar.tsx
@@ -62,9 +62,9 @@ export default () => {
         <div className={'w-full fixed'} style={{ height: '2px' }}>
             <CSSTransition
                 timeout={250}
-                appear={true}
+                appear
                 in={visible}
-                unmountOnExit={true}
+                unmountOnExit
                 classNames={'fade'}
             >
                 <BarFill style={{ width: progress === undefined ? '100%' : `${progress}%` }}/>
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index 174626f4d..b2dd6e84e 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/resources/scripts/components/server/WebsocketHandler.tsx
@@ -67,7 +67,7 @@ export default () => {
 
     return (
         error ?
-            <CSSTransition timeout={250} in={true} appear={true} classNames={'fade'}>
+            <CSSTransition timeout={250} in appear classNames={'fade'}>
                 <div css={tw`bg-red-500 py-2`}>
                     <ContentContainer css={tw`flex items-center justify-center`}>
                         <Spinner size={'small'}/>
diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx
index 7d2def09f..3dbcd2ace 100644
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/resources/scripts/components/server/backups/BackupContextMenu.tsx
@@ -80,7 +80,7 @@ export default ({ backup }: Props) => {
                 be recovered once deleted.
             </ConfirmationModal>
             }
-            <SpinnerOverlay visible={loading} fixed={true}/>
+            <SpinnerOverlay visible={loading} fixed/>
             <DropdownMenu
                 renderToggle={onClick => (
                     <button
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 2d220926a..ea5b16573 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -70,7 +70,7 @@ export default () => {
                                     This directory seems to be empty.
                                 </p>
                                 :
-                                <CSSTransition classNames={'fade'} timeout={250} appear={true} in={true}>
+                                <CSSTransition classNames={'fade'} timeout={250} appear in>
                                     <React.Fragment>
                                         <div>
                                             {files.length > 250 ?
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index cf9486fd3..6fcaca784 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
@@ -27,7 +27,7 @@ interface State {
     schedule?: Schedule;
 }
 
-export default ({ match, history, location: { state } }: RouteComponentProps<Params, {}, State>) => {
+export default ({ match, history, location: { state } }: RouteComponentProps<Params, Record<string, unknown>, State>) => {
     const { id, uuid } = useServer();
     const { clearFlashes, addError } = useFlash();
     const [ isLoading, setIsLoading ] = useState(true);
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
index f9da350e9..8b6cd346d 100644
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -62,7 +62,7 @@ export default ({ schedule, task }: Props) => {
 
     return (
         <div css={tw`flex items-center bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded`}>
-            <SpinnerOverlay visible={isLoading} fixed={true} size={'large'}/>
+            <SpinnerOverlay visible={isLoading} fixed size={'large'}/>
             {isEditing && <TaskDetailsModal
                 schedule={schedule}
                 task={task}
diff --git a/resources/scripts/components/server/users/RemoveSubuserButton.tsx b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
index cac5a3e67..b8020f705 100644
--- a/resources/scripts/components/server/users/RemoveSubuserButton.tsx
+++ b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
@@ -31,7 +31,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
                 addError({ key: 'users', message: httpErrorToHuman(error) });
                 setShowConfirmation(false);
             });
-    }
+    };
 
     return (
         <>
diff --git a/resources/scripts/i18n.ts b/resources/scripts/i18n.ts
index ceab3cffc..1f80a2e13 100644
--- a/resources/scripts/i18n.ts
+++ b/resources/scripts/i18n.ts
@@ -17,13 +17,13 @@ i18n
                 LocalStorageBackend,
                 XHR,
             ],
-            backendOptions: [{
+            backendOptions: [ {
                 prefix: 'pterodactyl_lng__',
                 expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days, in milliseconds
                 store: window.localStorage,
             }, {
                 loadPath: '/locales/{{lng}}/{{ns}}.json',
-            }],
+            } ],
         },
     });
 
diff --git a/resources/scripts/plugins/useEventListener.ts b/resources/scripts/plugins/useEventListener.ts
index 7cb14690a..feb281ea4 100644
--- a/resources/scripts/plugins/useEventListener.ts
+++ b/resources/scripts/plugins/useEventListener.ts
@@ -5,7 +5,7 @@ export default (eventName: string, handler: any, element: any = window) => {
 
     useEffect(() => {
         savedHandler.current = handler;
-    }, [handler]);
+    }, [ handler ]);
 
     useEffect(
         () => {
@@ -18,6 +18,6 @@ export default (eventName: string, handler: any, element: any = window) => {
                 element.removeEventListener(eventName, eventListener);
             };
         },
-        [eventName, element],
+        [ eventName, element ],
     );
 };
diff --git a/resources/scripts/plugins/usePersistedState.ts b/resources/scripts/plugins/usePersistedState.ts
index 18830696b..f31985558 100644
--- a/resources/scripts/plugins/usePersistedState.ts
+++ b/resources/scripts/plugins/usePersistedState.ts
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 export function usePersistedState<S = undefined> (key: string, defaultValue: S): [S | undefined, Dispatch<SetStateAction<S | undefined>>] {
-    const [state, setState] = useState(
+    const [ state, setState ] = useState(
         () => {
             try {
                 const item = localStorage.getItem(key);
@@ -16,8 +16,8 @@ export function usePersistedState<S = undefined> (key: string, defaultValue: S):
     );
 
     useEffect(() => {
-        localStorage.setItem(key, JSON.stringify(state))
-    }, [key, state]);
+        localStorage.setItem(key, JSON.stringify(state));
+    }, [ key, state ]);
 
     return [ state, setState ];
 }
diff --git a/resources/scripts/plugins/useWebsocketEvent.ts b/resources/scripts/plugins/useWebsocketEvent.ts
index 4637e304c..09ffeaf43 100644
--- a/resources/scripts/plugins/useWebsocketEvent.ts
+++ b/resources/scripts/plugins/useWebsocketEvent.ts
@@ -7,7 +7,7 @@ const useWebsocketEvent = (event: string, callback: (data: string) => void) => {
 
     useEffect(() => {
         savedCallback.current = callback;
-    }, [callback]);
+    }, [ callback ]);
 
     return useEffect(() => {
         const eventListener = (event: any) => savedCallback.current(event);
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index 655acea52..cf4cbec8a 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -69,7 +69,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     <Spinner size={'large'} centered/>
                 :
                 <>
-                    <CSSTransition timeout={250} classNames={'fade'} appear={true} in={true}>
+                    <CSSTransition timeout={250} classNames={'fade'} appear in>
                         <SubNavigation>
                             <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>
@@ -88,7 +88,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                 <Can action={'backup.*'}>
                                     <NavLink to={`${match.url}/backups`}>Backups</NavLink>
                                 </Can>
-                                <Can action={[ 'settings.*', 'file.sftp' ]} matchAny={true}>
+                                <Can action={[ 'settings.*', 'file.sftp' ]} matchAny>
                                     <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                                 </Can>
                             </div>
diff --git a/resources/scripts/state/permissions.ts b/resources/scripts/state/permissions.ts
index 07a428002..2e1fc0144 100644
--- a/resources/scripts/state/permissions.ts
+++ b/resources/scripts/state/permissions.ts
@@ -11,7 +11,7 @@ export interface PanelPermissions {
 export interface GloablPermissionsStore {
     data: PanelPermissions;
     setPermissions: Action<GloablPermissionsStore, PanelPermissions>;
-    getPermissions: Thunk<GloablPermissionsStore, void, {}, any, Promise<void>>;
+    getPermissions: Thunk<GloablPermissionsStore, void, Record<string, unknown>, any, Promise<void>>;
 }
 
 const permissions: GloablPermissionsStore = {
diff --git a/resources/scripts/state/server/files.ts b/resources/scripts/state/server/files.ts
index bc7f6539e..7944d8c3d 100644
--- a/resources/scripts/state/server/files.ts
+++ b/resources/scripts/state/server/files.ts
@@ -6,7 +6,7 @@ import { cleanDirectoryPath } from '@/helpers';
 export interface ServerFileStore {
     directory: string;
     contents: FileObject[];
-    getDirectoryContents: Thunk<ServerFileStore, string, {}, ServerStore, Promise<void>>;
+    getDirectoryContents: Thunk<ServerFileStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
     setContents: Action<ServerFileStore, FileObject[]>;
     pushFile: Action<ServerFileStore, FileObject>;
     removeFile: Action<ServerFileStore, string>;
diff --git a/resources/scripts/state/server/index.ts b/resources/scripts/state/server/index.ts
index e6d389668..f0d3c66db 100644
--- a/resources/scripts/state/server/index.ts
+++ b/resources/scripts/state/server/index.ts
@@ -14,7 +14,7 @@ interface ServerDataStore {
     data?: Server;
     permissions: string[];
 
-    getServer: Thunk<ServerDataStore, string, {}, ServerStore, Promise<void>>;
+    getServer: Thunk<ServerDataStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
     setServer: Action<ServerDataStore, Server>;
     setPermissions: Action<ServerDataStore, string[]>;
 }
diff --git a/resources/scripts/state/user.ts b/resources/scripts/state/user.ts
index 087bfe003..f04f878ae 100644
--- a/resources/scripts/state/user.ts
+++ b/resources/scripts/state/user.ts
@@ -16,7 +16,7 @@ export interface UserStore {
     data?: UserData;
     setUserData: Action<UserStore, UserData>;
     updateUserData: Action<UserStore, Partial<UserData>>;
-    updateUserEmail: Thunk<UserStore, { email: string; password: string }, any, {}, Promise<void>>;
+    updateUserEmail: Thunk<UserStore, { email: string; password: string }, any, UserStore, Promise<void>>;
 }
 
 const user: UserStore = {

From 732594a164a886b98856c9ee92f8f0ccecc59642 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 18:46:09 -0700
Subject: [PATCH 26/55] Remove unused imports

---
 resources/scripts/.eslintrc.yml               |  1 -
 .../components/auth/LoginContainer.tsx        |  3 +-
 .../auth/ResetPasswordContainer.tsx           |  1 -
 .../dashboard/AccountApiContainer.tsx         |  5 +--
 .../components/dashboard/ServerRow.tsx        |  7 +--
 .../dashboard/forms/UpdatePasswordForm.tsx    |  2 +-
 .../dashboard/search/SearchContainer.tsx      |  2 +-
 .../components/elements/DropdownMenu.tsx      |  1 -
 .../scripts/components/elements/Field.tsx     |  6 +--
 .../elements/FormikFieldWrapper.tsx           |  1 -
 .../scripts/components/elements/Input.tsx     |  1 -
 .../components/elements/InputSpinner.tsx      |  1 -
 .../scripts/components/elements/Modal.tsx     |  2 +-
 .../components/screens/ServerError.tsx        |  1 -
 .../components/server/ServerConsole.tsx       |  6 +--
 .../scripts/components/server/StatGraphs.tsx  |  3 +-
 .../components/server/StopOrKillButton.tsx    |  1 -
 .../server/backups/BackupContextMenu.tsx      |  5 +--
 .../components/server/backups/BackupRow.tsx   |  3 +-
 .../server/backups/CreateBackupButton.tsx     |  2 +-
 .../server/databases/DatabaseRow.tsx          |  5 +--
 .../server/databases/DatabasesContainer.tsx   |  4 +-
 .../server/files/FileDropdownMenu.tsx         | 15 ++++---
 .../components/server/files/FileObjectRow.tsx |  4 +-
 .../server/schedules/DeleteScheduleButton.tsx |  1 +
 .../server/schedules/ScheduleRow.tsx          |  5 +--
 .../server/schedules/ScheduleTaskRow.tsx      |  6 +--
 .../server/settings/SettingsContainer.tsx     |  2 +-
 .../server/users/AddSubuserButton.tsx         |  2 +-
 .../server/users/RemoveSubuserButton.tsx      |  2 +-
 .../components/server/users/UserRow.tsx       |  4 +-
 resources/scripts/easy-peasy.d.ts             |  1 +
 yarn.lock                                     | 45 ++++++++++++++-----
 33 files changed, 69 insertions(+), 81 deletions(-)

diff --git a/resources/scripts/.eslintrc.yml b/resources/scripts/.eslintrc.yml
index 9ecd57a7a..0b0d552f6 100644
--- a/resources/scripts/.eslintrc.yml
+++ b/resources/scripts/.eslintrc.yml
@@ -45,7 +45,6 @@ rules:
   "@typescript-eslint/explicit-function-return-type": 0
   "@typescript-eslint/explicit-member-accessibility": 0
   "@typescript-eslint/ban-ts-ignore": 0
-  "@typescript-eslint/no-unused-vars": 0
   "@typescript-eslint/no-explicit-any": 0
   "@typescript-eslint/no-non-null-assertion": 0
   "@typescript-eslint/ban-ts-comment": 0
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index 7b25c36d7..b520dd7e7 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/resources/scripts/components/auth/LoginContainer.tsx
@@ -10,7 +10,6 @@ import Field from '@/components/elements/Field';
 import { httpErrorToHuman } from '@/api/http';
 import { FlashMessage } from '@/state/flashes';
 import ReCAPTCHA from 'react-google-recaptcha';
-import Spinner from '@/components/elements/Spinner';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 
@@ -87,7 +86,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
 const EnhancedForm = withFormik<OwnProps, LoginData>({
     displayName: 'LoginContainerForm',
 
-    mapPropsToValues: (props) => ({
+    mapPropsToValues: () => ({
         username: '',
         password: '',
         recaptchaData: null,
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index 92bba53ab..6a6f61f12 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx
@@ -7,7 +7,6 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
-import Spinner from '@/components/elements/Spinner';
 import { Formik, FormikHelpers } from 'formik';
 import { object, ref, string } from 'yup';
 import Field from '@/components/elements/Field';
diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index d478f26ac..f3ceb66f0 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -4,15 +4,14 @@ import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
 import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import deleteApiKey from '@/api/account/deleteApiKey';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { httpErrorToHuman } from '@/api/http';
-import format from 'date-fns/format';
+import { format } from 'date-fns';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 63866467c..481d85317 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -1,16 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
-import { faEthernet } from '@fortawesome/free-solid-svg-icons/faEthernet';
-import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
-import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
-import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
+import { faServer, faEthernet, faMicrochip, faMemory, faHdd } from '@fortawesome/free-solid-svg-icons';
 import { Link } from 'react-router-dom';
 import { Server } from '@/api/server/getServer';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import getServerResourceUsage, { ServerStats } from '@/api/server/getServerResourceUsage';
 import { bytesToHuman } from '@/helpers';
-import classNames from 'classnames';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 
diff --git a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
index 72a95b200..7dec924a5 100644
--- a/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
+++ b/resources/scripts/components/dashboard/forms/UpdatePasswordForm.tsx
@@ -32,7 +32,7 @@ export default () => {
         return null;
     }
 
-    const submit = (values: Values, { resetForm, setSubmitting }: FormikHelpers<Values>) => {
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('account:password');
         updateAccountPassword({ ...values })
             .then(() => {
diff --git a/resources/scripts/components/dashboard/search/SearchContainer.tsx b/resources/scripts/components/dashboard/search/SearchContainer.tsx
index ef3ae48db..d552d2c1d 100644
--- a/resources/scripts/components/dashboard/search/SearchContainer.tsx
+++ b/resources/scripts/components/dashboard/search/SearchContainer.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import useEventListener from '@/plugins/useEventListener';
 import SearchModal from '@/components/dashboard/search/SearchModal';
 
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 74492f0c3..8637fa8ec 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
diff --git a/resources/scripts/components/elements/Field.tsx b/resources/scripts/components/elements/Field.tsx
index f89b01343..0c76f285c 100644
--- a/resources/scripts/components/elements/Field.tsx
+++ b/resources/scripts/components/elements/Field.tsx
@@ -13,11 +13,11 @@ interface OwnProps {
 
 type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
 
-const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, className, ...props }, ref) => (
+const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, ...props }, ref) => (
     <FormikField innerRef={ref} name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <React.Fragment>
+                <>
                     {label &&
                     <Label htmlFor={id} isLight={light}>{label}</Label>
                     }
@@ -35,7 +35,7 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
                         :
                         description ? <p className={'input-help'}>{description}</p> : null
                     }
-                </React.Fragment>
+                </>
             )
         }
     </FormikField>
diff --git a/resources/scripts/components/elements/FormikFieldWrapper.tsx b/resources/scripts/components/elements/FormikFieldWrapper.tsx
index aeaf1b6d0..30214d18e 100644
--- a/resources/scripts/components/elements/FormikFieldWrapper.tsx
+++ b/resources/scripts/components/elements/FormikFieldWrapper.tsx
@@ -3,7 +3,6 @@ import { Field, FieldProps } from 'formik';
 import classNames from 'classnames';
 import InputError from '@/components/elements/InputError';
 import Label from '@/components/elements/Label';
-import tw from 'twin.macro';
 
 interface Props {
     id?: string;
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index 4615ab14b..c548aad3e 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import styled, { css } from 'styled-components/macro';
 import tw from 'twin.macro';
 
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index 32f1b18d9..d1273435f 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/resources/scripts/components/elements/InputSpinner.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import Spinner from '@/components/elements/Spinner';
-import { CSSTransition } from 'react-transition-group';
 import Fade from '@/components/elements/Fade';
 import tw from 'twin.macro';
 
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 9e968b0db..672333ecf 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import Spinner from '@/components/elements/Spinner';
 import tw from 'twin.macro';
 import styled from 'styled-components/macro';
diff --git a/resources/scripts/components/screens/ServerError.tsx b/resources/scripts/components/screens/ServerError.tsx
index 7851cf72f..b05dd3f14 100644
--- a/resources/scripts/components/screens/ServerError.tsx
+++ b/resources/scripts/components/screens/ServerError.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components/macro';
 import ScreenBlock from '@/components/screens/ScreenBlock';
 
 interface Props {
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index d2f7d5f95..bda6c403d 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -1,12 +1,8 @@
 import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faServer } from '@fortawesome/free-solid-svg-icons/faServer';
-import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
+import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
-import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
-import { faHdd } from '@fortawesome/free-solid-svg-icons/faHdd';
 import { bytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index e404a8475..6a162ee05 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -4,8 +4,7 @@ import { ServerContext } from '@/state/server';
 import { bytesToMegabytes } from '@/helpers';
 import merge from 'lodash-es/merge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
-import { faMemory } from '@fortawesome/free-solid-svg-icons/faMemory';
-import { faMicrochip } from '@fortawesome/free-solid-svg-icons/faMicrochip';
+import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
 
 const chartDefaults: ChartConfiguration = {
diff --git a/resources/scripts/components/server/StopOrKillButton.tsx b/resources/scripts/components/server/StopOrKillButton.tsx
index 0d8b3db2e..b9daed85b 100644
--- a/resources/scripts/components/server/StopOrKillButton.tsx
+++ b/resources/scripts/components/server/StopOrKillButton.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import tw from 'twin.macro';
 import { PowerAction } from '@/components/server/ServerConsole';
 import Button from '@/components/elements/Button';
 
diff --git a/resources/scripts/components/server/backups/BackupContextMenu.tsx b/resources/scripts/components/server/backups/BackupContextMenu.tsx
index 3dbcd2ace..54a45b9d3 100644
--- a/resources/scripts/components/server/backups/BackupContextMenu.tsx
+++ b/resources/scripts/components/server/backups/BackupContextMenu.tsx
@@ -1,11 +1,8 @@
 import React, { useState } from 'react';
 import { ServerBackup } from '@/api/server/backups/getServerBackups';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import { faCloudDownloadAlt, faEllipsisH, faLock, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownMenu, { DropdownButtonRow } from '@/components/elements/DropdownMenu';
-import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons/faCloudDownloadAlt';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
-import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
 import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
 import { httpErrorToHuman } from '@/api/http';
 import useFlash from '@/plugins/useFlash';
diff --git a/resources/scripts/components/server/backups/BackupRow.tsx b/resources/scripts/components/server/backups/BackupRow.tsx
index 3f96a7c7f..2a7b625bc 100644
--- a/resources/scripts/components/server/backups/BackupRow.tsx
+++ b/resources/scripts/components/server/backups/BackupRow.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ServerBackup } from '@/api/server/backups/getServerBackups';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArchive } from '@fortawesome/free-solid-svg-icons/faArchive';
+import { faArchive, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
 import { format, formatDistanceToNow } from 'date-fns';
 import Spinner from '@/components/elements/Spinner';
 import { bytesToHuman } from '@/helpers';
@@ -9,7 +9,6 @@ import Can from '@/components/elements/Can';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { ServerContext } from '@/state/server';
 import BackupContextMenu from '@/components/server/backups/BackupContextMenu';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 
diff --git a/resources/scripts/components/server/backups/CreateBackupButton.tsx b/resources/scripts/components/server/backups/CreateBackupButton.tsx
index 8da01dcaf..7a04f1041 100644
--- a/resources/scripts/components/server/backups/CreateBackupButton.tsx
+++ b/resources/scripts/components/server/backups/CreateBackupButton.tsx
@@ -12,7 +12,7 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import { ServerContext } from '@/state/server';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
-import Input, { Textarea } from '@/components/elements/Input';
+import { Textarea } from '@/components/elements/Input';
 
 interface Values {
     name: string;
diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 68559e6ca..4cad11611 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
-import classNames from 'classnames';
+import { faDatabase, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
 import Modal from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 90db7c27c..164f2edef 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -5,7 +5,6 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import DatabaseRow from '@/components/server/databases/DatabaseRow';
 import Spinner from '@/components/elements/Spinner';
-import { CSSTransition } from 'react-transition-group';
 import CreateDatabaseButton from '@/components/server/databases/CreateDatabaseButton';
 import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
@@ -63,7 +62,8 @@ export default () => {
                         <Can action={'database.create'}>
                             {(featureLimits.databases > 0 && databases.length > 0) &&
                             <p css={tw`text-center text-xs text-neutral-400 mt-2`}>
-                                {databases.length} of {featureLimits.databases} databases have been allocated to this server.
+                                {databases.length} of {featureLimits.databases} databases have been allocated to this
+                                server.
                             </p>
                             }
                             {featureLimits.databases > 0 && featureLimits.databases !== databases.length &&
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index b16fd1b20..53b817d0e 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -1,12 +1,13 @@
 import React, { createRef, useEffect, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
-import { CSSTransition } from 'react-transition-group';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
-import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload';
-import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
-import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
+import {
+    faCopy,
+    faEllipsisH,
+    faFileDownload,
+    faLevelUpAlt,
+    faPencilAlt,
+    faTrashAlt,
+} from '@fortawesome/free-solid-svg-icons';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
 import { join } from 'path';
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 45abd046c..3494af817 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -1,7 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
-import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
-import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
+import { faFileAlt, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
 import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
 import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
 import React from 'react';
diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
index 1b6ec5a39..26d86652d 100644
--- a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
+++ b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
@@ -39,6 +39,7 @@ export default ({ scheduleId, onDeleted }: Props) => {
     return (
         <>
             <ConfirmationModal
+                showSpinnerOverlay={isLoading}
                 title={'Delete schedule?'}
                 buttonText={'Yes, delete schedule'}
                 onConfirmed={onDelete}
diff --git a/resources/scripts/components/server/schedules/ScheduleRow.tsx b/resources/scripts/components/server/schedules/ScheduleRow.tsx
index aa235028e..ec23c6f10 100644
--- a/resources/scripts/components/server/schedules/ScheduleRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleRow.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
-import format from 'date-fns/format';
-import classNames from 'classnames';
+import { faCalendarAlt } from '@fortawesome/free-solid-svg-icons';
+import { format } from 'date-fns';
 import tw from 'twin.macro';
 
 export default ({ schedule }: { schedule: Schedule }) => (
diff --git a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
index 8b6cd346d..fb1136f73 100644
--- a/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
+++ b/resources/scripts/components/server/schedules/ScheduleTaskRow.tsx
@@ -1,19 +1,15 @@
 import React, { useState } from 'react';
 import { Schedule, Task } from '@/api/server/schedules/getServerSchedules';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
-import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
-import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
+import { faCode, faFileArchive, faPencilAlt, faToggleOn, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
 import Can from '@/components/elements/Can';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
-import { faFileArchive } from '@fortawesome/free-solid-svg-icons/faFileArchive';
 import tw from 'twin.macro';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index 5697ca824..2be5a8b93 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -12,7 +12,7 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
-import Button, { LinkButton } from '@/components/elements/Button';
+import { LinkButton } from '@/components/elements/Button';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
diff --git a/resources/scripts/components/server/users/AddSubuserButton.tsx b/resources/scripts/components/server/users/AddSubuserButton.tsx
index 5903088cb..210578bb9 100644
--- a/resources/scripts/components/server/users/AddSubuserButton.tsx
+++ b/resources/scripts/components/server/users/AddSubuserButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus';
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
 import Button from '@/components/elements/Button';
 import tw from 'twin.macro';
diff --git a/resources/scripts/components/server/users/RemoveSubuserButton.tsx b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
index b8020f705..976c64170 100644
--- a/resources/scripts/components/server/users/RemoveSubuserButton.tsx
+++ b/resources/scripts/components/server/users/RemoveSubuserButton.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Subuser } from '@/state/server/subusers';
 import deleteSubuser from '@/api/server/users/deleteSubuser';
 import { Actions, useStoreActions } from 'easy-peasy';
diff --git a/resources/scripts/components/server/users/UserRow.tsx b/resources/scripts/components/server/users/UserRow.tsx
index a5b0097b1..eba830467 100644
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
 import { Subuser } from '@/state/server/subusers';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
+import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
 import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import { faUnlockAlt } from '@fortawesome/free-solid-svg-icons/faUnlockAlt';
-import { faUserLock } from '@fortawesome/free-solid-svg-icons/faUserLock';
 import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
diff --git a/resources/scripts/easy-peasy.d.ts b/resources/scripts/easy-peasy.d.ts
index 999ea2f56..6b052ee11 100644
--- a/resources/scripts/easy-peasy.d.ts
+++ b/resources/scripts/easy-peasy.d.ts
@@ -1,4 +1,5 @@
 // noinspection ES6UnusedImports
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import EasyPeasy, { Actions, State } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 
diff --git a/yarn.lock b/yarn.lock
index e05197279..b096db93a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2349,6 +2349,7 @@ constants-browserify@^1.0.0:
 contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
 
 content-disposition@0.5.3:
   version "0.5.3"
@@ -2928,6 +2929,7 @@ dns-txt@^2.0.2:
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
@@ -3642,6 +3644,7 @@ find-cache-dir@^3.3.1:
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
   dependencies:
     locate-path "^2.0.0"
 
@@ -4128,8 +4131,9 @@ hoopy@^0.1.4:
   integrity sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==
 
 hosted-git-info@^2.1.4:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -4867,6 +4871,7 @@ lines-and-columns@^1.1.6:
 load-json-file@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -4915,6 +4920,7 @@ loader-utils@^2.0.0, loader-utils@~2.0.0:
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
   dependencies:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
@@ -5514,6 +5520,7 @@ nopt@^4.0.1:
 normalize-package-data@^2.3.2:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
     resolve "^1.10.0"
@@ -5747,8 +5754,9 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
 
 p-limit@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
   dependencies:
     p-try "^1.0.0"
 
@@ -5775,6 +5783,7 @@ p-limit@^3.0.1:
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
   dependencies:
     p-limit "^1.1.0"
 
@@ -5811,6 +5820,7 @@ p-retry@^3.0.1:
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
 
 p-try@^2.0.0:
   version "2.0.0"
@@ -5853,6 +5863,7 @@ parse-asn1@^5.0.0:
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
+  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
   dependencies:
     error-ex "^1.2.0"
 
@@ -5936,6 +5947,7 @@ path-to-regexp@^1.7.0:
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
   dependencies:
     pify "^2.0.0"
 
@@ -5991,6 +6003,7 @@ pinkie@^2.0.0:
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
   dependencies:
     find-up "^2.1.0"
 
@@ -6985,6 +6998,7 @@ read-cache@^1.0.0:
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
   dependencies:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
@@ -6992,6 +7006,7 @@ read-pkg-up@^2.0.0:
 read-pkg@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
   dependencies:
     load-json-file "^2.0.0"
     normalize-package-data "^2.3.2"
@@ -7635,26 +7650,30 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
 
 spdx-correct@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
   dependencies:
     spdx-expression-parse "^3.0.0"
     spdx-license-ids "^3.0.0"
 
 spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
 
 spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz#75ecd1a88de8c184ef015eafb51b5b48bfd11bb1"
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
+  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
 
 spdy-transport@^3.0.0:
   version "3.0.0"
@@ -7852,6 +7871,7 @@ strip-ansi@^6.0.0:
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
 strip-eof@^1.0.0:
   version "1.0.0"
@@ -8460,6 +8480,7 @@ v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.1:
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
   dependencies:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"

From 7f5ee04978bb2c5a483cbba58f4c10fb45d65a36 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 19:01:49 -0700
Subject: [PATCH 27/55] Remove a hilarious number of unused dependencies

---
 package.json                                  |   15 -
 .../auth/LoginCheckpointContainer.tsx         |    2 +-
 .../auth/ResetPasswordContainer.tsx           |    3 +-
 .../elements/FormikFieldWrapper.tsx           |    3 +-
 .../components/screens/ScreenBlock.tsx        |    6 +-
 .../components/server/ServerConsole.tsx       |   10 +-
 .../server/files/FileEditContainer.tsx        |    7 +-
 .../components/server/files/FileObjectRow.tsx |    7 +-
 .../server/users/EditSubuserModal.tsx         |   10 +-
 .../components/server/users/UserRow.tsx       |   13 +-
 yarn.lock                                     | 1676 +----------------
 11 files changed, 76 insertions(+), 1676 deletions(-)

diff --git a/package.json b/package.json
index d50fc0cb1..3614da244 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
         "ayu-ace": "^2.0.4",
         "brace": "^0.11.1",
         "chart.js": "^2.8.0",
-        "classnames": "^2.2.6",
         "date-fns": "^2.14.0",
         "easy-peasy": "^3.3.1",
         "events": "^3.0.0",
@@ -33,7 +32,6 @@
         "sockette": "^2.0.6",
         "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
-        "use-react-router": "^1.0.7",
         "uuid": "^3.3.2",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
@@ -54,7 +52,6 @@
         "@babel/preset-typescript": "^7.7.4",
         "@babel/runtime": "^7.7.5",
         "@types/chart.js": "^2.8.5",
-        "@types/classnames": "^2.2.8",
         "@types/events": "^3.0.0",
         "@types/feather-icons": "^4.7.0",
         "@types/lodash": "^4.14.119",
@@ -75,10 +72,8 @@
         "@typescript-eslint/parser": "^3.5.0",
         "babel-loader": "^8.0.6",
         "babel-plugin-styled-components": "^1.10.7",
-        "babel-plugin-tailwind-components": "^0.5.10",
         "cross-env": "^7.0.2",
         "css-loader": "^3.2.1",
-        "cssnano": "^4.1.10",
         "eslint": "^7.4.0",
         "eslint-config-standard": "^14.1.1",
         "eslint-plugin-import": "^2.22.0",
@@ -88,20 +83,11 @@
         "eslint-plugin-react-hooks": "^4.0.5",
         "eslint-plugin-standard": "^4.0.1",
         "fork-ts-checker-webpack-plugin": "^5.0.6",
-        "html-webpack-plugin": "^3.2.0",
-        "postcss": "^7.0.24",
-        "postcss-import": "^12.0.1",
-        "postcss-loader": "^3.0.0",
-        "postcss-preset-env": "^6.7.0",
-        "precss": "^4.0.0",
         "redux-devtools-extension": "^2.13.8",
-        "resolve-url-loader": "^3.0.0",
-        "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
         "tailwindcss": "^1.4.6",
         "terser-webpack-plugin": "^3.0.6",
-        "ts-loader": "^6.2.1",
         "twin.macro": "^1.4.1",
         "typescript": "^3.9.6",
         "typescript-plugin-tw-template": "^2.0.1",
@@ -110,7 +96,6 @@
         "webpack-bundle-analyzer": "^3.8.0",
         "webpack-cli": "^3.3.12",
         "webpack-dev-server": "^3.11.0",
-        "webpack-manifest-plugin": "^2.2.0",
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {
diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index a546c9664..d2c3c8643 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
@@ -17,7 +17,7 @@ interface Values {
     recoveryCode: '',
 }
 
-type OwnProps = RouteComponentProps<Record<string, unknown>, StaticContext, { token?: string }>
+type OwnProps = RouteComponentProps<Record<string, string | undefined>, StaticContext, { token?: string }>
 
 type Props = OwnProps & {
     addError: ActionCreator<FlashStore['addError']['payload']>;
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index 6a6f61f12..cded2e9ac 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx
@@ -56,6 +56,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                     .min(8, 'Your new password should be at least 8 characters in length.'),
                 passwordConfirmation: string()
                     .required('Your new password does not match.')
+                    // @ts-ignore
                     .oneOf([ ref('password'), null ], 'Your new password does not match.'),
             })}
         >
@@ -66,7 +67,7 @@ export default ({ match, location }: RouteComponentProps<{ token: string }>) =>
                 >
                     <div>
                         <label>Email</label>
-                        <Input value={email} light disabled/>
+                        <Input value={email} isLight disabled/>
                     </div>
                     <div css={tw`mt-6`}>
                         <Field
diff --git a/resources/scripts/components/elements/FormikFieldWrapper.tsx b/resources/scripts/components/elements/FormikFieldWrapper.tsx
index 30214d18e..208f47a22 100644
--- a/resources/scripts/components/elements/FormikFieldWrapper.tsx
+++ b/resources/scripts/components/elements/FormikFieldWrapper.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Field, FieldProps } from 'formik';
-import classNames from 'classnames';
 import InputError from '@/components/elements/InputError';
 import Label from '@/components/elements/Label';
 
@@ -18,7 +17,7 @@ const FormikFieldWrapper = ({ id, name, label, className, description, validate,
     <Field name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
+                <div className={`${className} ${(touched[field.name] && errors[field.name]) ? 'has-error' : undefined}`}>
                     {label && <Label htmlFor={id}>{label}</Label>}
                     {children}
                     <InputError errors={errors} touched={touched} name={field.name}>
diff --git a/resources/scripts/components/screens/ScreenBlock.tsx b/resources/scripts/components/screens/ScreenBlock.tsx
index 90a39e4dd..55e1e70a0 100644
--- a/resources/scripts/components/screens/ScreenBlock.tsx
+++ b/resources/scripts/components/screens/ScreenBlock.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 import styled, { keyframes } from 'styled-components/macro';
 import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface BaseProps {
     title: string;
@@ -30,7 +30,7 @@ const spin = keyframes`
     to { transform: rotate(360deg) }
 `;
 
-const ActionButton = styled.button`
+const ActionButton = styled(Button)`
     ${tw`rounded-full w-8 h-8 flex items-center justify-center`};
 
     &.hover\\:spin:hover {
@@ -46,7 +46,7 @@ export default ({ title, image, message, onBack, onRetry }: Props) => (
                 <div css={tw`absolute left-0 top-0 ml-4 mt-4`}>
                     <ActionButton
                         onClick={() => onRetry ? onRetry() : (onBack ? onBack() : null)}
-                        className={classNames('btn btn-primary', { 'hover:spin': !!onRetry })}
+                        className={onRetry ? 'hover:spin' : undefined}
                     >
                         <FontAwesomeIcon icon={onRetry ? faSyncAlt : faArrowLeft}/>
                     </ActionButton>
diff --git a/resources/scripts/components/server/ServerConsole.tsx b/resources/scripts/components/server/ServerConsole.tsx
index bda6c403d..8c9dd1ed5 100644
--- a/resources/scripts/components/server/ServerConsole.tsx
+++ b/resources/scripts/components/server/ServerConsole.tsx
@@ -2,7 +2,6 @@ import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircle, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons';
-import classNames from 'classnames';
 import { bytesToHuman } from '@/helpers';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
@@ -68,11 +67,10 @@ export default () => {
                         <FontAwesomeIcon
                             icon={faCircle}
                             fixedWidth
-                            className={classNames('mr-1', {
-                                'text-red-500': status === 'offline',
-                                'text-yellow-500': [ 'running', 'offline' ].indexOf(status) < 0,
-                                'text-green-500': status === 'running',
-                            })}
+                            css={[
+                                tw`mr-1`,
+                                status === 'offline' ? tw`text-red-500` : (status === 'running' ? tw`text-green-500` : tw`text-yellow-500`),
+                            ]}
                         />
                         &nbsp;{status}
                     </p>
diff --git a/resources/scripts/components/server/files/FileEditContainer.tsx b/resources/scripts/components/server/files/FileEditContainer.tsx
index b85f7bc7d..fdde9bb1b 100644
--- a/resources/scripts/components/server/files/FileEditContainer.tsx
+++ b/resources/scripts/components/server/files/FileEditContainer.tsx
@@ -1,14 +1,13 @@
 import React, { lazy, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
-import useRouter from 'use-react-router';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import saveFileContents from '@/api/server/files/saveFileContents';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
-import { useParams } from 'react-router';
+import { useHistory, useLocation, useParams } from 'react-router';
 import FileNameModal from '@/components/server/files/FileNameModal';
 import Can from '@/components/elements/Can';
 import FlashMessageRender from '@/components/FlashMessageRender';
@@ -22,11 +21,13 @@ const LazyAceEditor = lazy(() => import(/* webpackChunkName: "editor" */'@/compo
 export default () => {
     const [ error, setError ] = useState('');
     const { action } = useParams();
-    const { history, location: { hash } } = useRouter();
     const [ loading, setLoading ] = useState(action === 'edit');
     const [ content, setContent ] = useState('');
     const [ modalVisible, setModalVisible ] = useState(false);
 
+    const history = useHistory();
+    const { hash } = useLocation();
+
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
     const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 3494af817..d7b323b31 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -6,14 +6,15 @@ import React from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
-import { NavLink } from 'react-router-dom';
-import useRouter from 'use-react-router';
+import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
 
 export default ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
-    const { match, history } = useRouter();
+
+    const history = useHistory();
+    const match = useRouteMatch();
 
     return (
         <div
diff --git a/resources/scripts/components/server/users/EditSubuserModal.tsx b/resources/scripts/components/server/users/EditSubuserModal.tsx
index 3982d54e4..02776932e 100644
--- a/resources/scripts/components/server/users/EditSubuserModal.tsx
+++ b/resources/scripts/components/server/users/EditSubuserModal.tsx
@@ -9,7 +9,6 @@ import { ApplicationStore } from '@/state';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import Checkbox from '@/components/elements/Checkbox';
 import styled from 'styled-components/macro';
-import classNames from 'classnames';
 import createOrUpdateSubuser from '@/api/server/users/createOrUpdateSubuser';
 import { ServerContext } from '@/state/server';
 import { httpErrorToHuman } from '@/api/http';
@@ -145,10 +144,11 @@ const EditSubuserModal = forwardRef<HTMLHeadingElement, Props>(({ subuser, ...pr
                             <PermissionLabel
                                 key={`permission_${key}_${pkey}`}
                                 htmlFor={`permission_${key}_${pkey}`}
-                                className={classNames('transition-colors duration-75', {
-                                    'mt-2': index !== 0,
-                                    disabled: !canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0,
-                                })}
+                                css={[
+                                    tw`transition-colors duration-75`,
+                                    index > 0 ? tw`mt-2` : undefined,
+                                ]}
+                                className={(!canEditUser || editablePermissions.indexOf(`${key}.${pkey}`) < 0) ? 'disabled' : undefined}
                             >
                                 <div css={tw`p-2`}>
                                     <Checkbox
diff --git a/resources/scripts/components/server/users/UserRow.tsx b/resources/scripts/components/server/users/UserRow.tsx
index eba830467..165d0f9c7 100644
--- a/resources/scripts/components/server/users/UserRow.tsx
+++ b/resources/scripts/components/server/users/UserRow.tsx
@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
 import RemoveSubuserButton from '@/components/server/users/RemoveSubuserButton';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import classNames from 'classnames';
 import Can from '@/components/elements/Can';
 import { useStoreState } from 'easy-peasy';
 import tw from 'twin.macro';
@@ -39,9 +38,8 @@ export default ({ subuser }: Props) => {
                     &nbsp;
                     <FontAwesomeIcon
                         icon={subuser.twoFactorEnabled ? faUserLock : faUnlockAlt}
-                        className={classNames('fa-fw', {
-                            'text-red-400': !subuser.twoFactorEnabled,
-                        })}
+                        fixedWidth
+                        css={!subuser.twoFactorEnabled ? tw`text-red-400` : undefined}
                     />
                     &nbsp;
                 </p>
@@ -56,9 +54,10 @@ export default ({ subuser }: Props) => {
             <button
                 type={'button'}
                 aria-label={'Edit subuser'}
-                className={classNames('block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4', {
-                    hidden: subuser.uuid === uuid,
-                })}
+                css={[
+                    tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mx-4`,
+                    subuser.uuid === uuid ? tw`hidden` : undefined,
+                ]}
                 onClick={() => setVisible(true)}
             >
                 <FontAwesomeIcon icon={faPencilAlt}/>
diff --git a/yarn.lock b/yarn.lock
index b096db93a..1f46e2f7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,15 +34,6 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.0.0", "@babel/generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
-  dependencies:
-    "@babel/types" "^7.7.4"
-    jsesc "^2.5.1"
-    lodash "^4.17.13"
-    source-map "^0.5.0"
-
 "@babel/generator@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.10.4.tgz#e49eeed9fe114b62fa5b181856a43a5e32f5f243"
@@ -53,6 +44,15 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.7.4":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.4.tgz#db651e2840ca9aa66f327dcec1dc5f5fa9611369"
+  dependencies:
+    "@babel/types" "^7.7.4"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
@@ -307,15 +307,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
-
 "@babel/parser@^7.10.2", "@babel/parser@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.4.tgz#9eedf27e1998d87739fb5028a5120557c06a1a64"
   integrity sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==
 
+"@babel/parser@^7.7.4", "@babel/parser@^7.7.5":
+  version "7.7.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.5.tgz#cbf45321619ac12d83363fcf9c94bb67fa646d71"
+
 "@babel/plugin-proposal-async-generator-functions@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
@@ -790,7 +790,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.7.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.5":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.5":
   version "7.7.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.5.tgz#4b087f183f5d83647744d4157f66199081d17a00"
   dependencies:
@@ -866,14 +866,6 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@csstools/convert-colors@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
-
-"@csstools/sass-import-resolve@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/sass-import-resolve/-/sass-import-resolve-1.0.0.tgz#32c3cdb2f7af3cd8f0dca357b592e7271f3831b5"
-
 "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
@@ -938,10 +930,6 @@
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.8.5.tgz#7d47cfd36f0a1c2c4ad6a585749bc68e8659492a"
 
-"@types/classnames@^2.2.8":
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.8.tgz#17139e1e1104203572caa4368f6796f6225b70b4"
-
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1334,11 +1322,6 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
 
-abab@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
-  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
-
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -1379,18 +1362,6 @@ acorn@^7.0.0, acorn@^7.1.1, acorn@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.3.1.tgz#85010754db53c3fbaf3b9ea3e083aa5c5d147ffd"
   integrity sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==
 
-adjust-sourcemap-loader@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.2.0.tgz#e33fde95e50db9f2a802e3647e311d2fc5000c69"
-  dependencies:
-    assert "^1.3.0"
-    camelcase "^1.2.1"
-    loader-utils "^1.1.0"
-    lodash.assign "^4.0.1"
-    lodash.defaults "^3.1.2"
-    object-path "^0.9.2"
-    regex-parser "^2.2.9"
-
 aggregate-error@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.0.1.tgz#db2fe7246e536f40d9b5442a39e117d7dd6a24e0"
@@ -1426,10 +1397,6 @@ ajv@^6.10.0, ajv@^6.12.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-
 ansi-colors@^3.0.0:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
@@ -1460,10 +1427,6 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1510,10 +1473,6 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-arity-n@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
-
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -1582,7 +1541,7 @@ asn1.js@^4.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-assert@^1.1.1, assert@^1.3.0:
+assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
   dependencies:
@@ -1619,7 +1578,7 @@ atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
-autoprefixer@^9.4.5, autoprefixer@^9.6.1:
+autoprefixer@^9.4.5:
   version "9.7.1"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.1.tgz#9ffc44c55f5ca89253d9bb7186cefb01ef57747f"
   dependencies:
@@ -1657,14 +1616,6 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-macros@^2.1.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
-  dependencies:
-    "@babel/runtime" "^7.4.2"
-    cosmiconfig "^5.2.0"
-    resolve "^1.10.0"
-
 babel-plugin-macros@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
@@ -1697,14 +1648,6 @@ babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-tailwind-components@^0.5.10:
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/babel-plugin-tailwind-components/-/babel-plugin-tailwind-components-0.5.10.tgz#33e3574e7a5ec80d108c7d3d7c424ccd018e390c"
-  dependencies:
-    "@babel/generator" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    babel-plugin-macros "^2.1.0"
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -1739,10 +1682,6 @@ bfj@^6.1.1:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -1790,10 +1729,6 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-boolbase@^1.0.0, boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1820,7 +1755,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   dependencies:
@@ -1882,14 +1817,6 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.6.4, browserslist@^4.7.2, browserslist@^4.8.0:
-  version "4.8.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
-  dependencies:
-    caniuse-lite "^1.0.30001015"
-    electron-to-chromium "^1.3.322"
-    node-releases "^1.1.42"
-
 browserslist@^4.12.0:
   version "4.12.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.2.tgz#76653d7e4c57caa8a1a28513e2f4e197dc11a711"
@@ -1900,6 +1827,14 @@ browserslist@^4.12.0:
     escalade "^3.0.1"
     node-releases "^1.1.58"
 
+browserslist@^4.6.0, browserslist@^4.7.2, browserslist@^4.8.0:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
+  dependencies:
+    caniuse-lite "^1.0.30001015"
+    electron-to-chromium "^1.3.322"
+    node-releases "^1.1.42"
+
 buffer-from@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.0.tgz#87fcaa3a298358e0ade6e442cfce840740d1ad04"
@@ -1989,45 +1924,14 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
-  dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
-
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
 
-camel-case@3.0.x:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
-  dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
-
 camelcase-css@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
 
-camelcase@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
-
-camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
-
 camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
@@ -2036,16 +1940,7 @@ camelize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
 
-caniuse-api@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-lite "^1.0.0"
-    lodash.memoize "^4.1.2"
-    lodash.uniq "^4.5.0"
-
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001006, caniuse-lite@^1.0.30001015:
+caniuse-lite@^1.0.30001006, caniuse-lite@^1.0.30001015:
   version "1.0.30001015"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz#15a7ddf66aba786a71d99626bc8f2b91c6f0f5f0"
 
@@ -2054,17 +1949,7 @@ caniuse-lite@^1.0.30001088:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001093.tgz#833e80f64b1a0455cbceed2a4a3baf19e4abd312"
   integrity sha512-0+ODNoOjtWD5eS9aaIpf4K0gQqZfILNY4WSNuYzeT1sXni+lMrrVjc0odEobJt6wrODofDZUX8XYi/5y7+xl8g==
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^2.0, chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
+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"
   dependencies:
@@ -2169,16 +2054,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
-
-clean-css@4.1.x:
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
-  dependencies:
-    source-map "0.5.x"
-
 clean-set@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
@@ -2197,12 +2072,6 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
-coa@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.1.tgz#f3f8b0b15073e35d70263fb1042cb2c023db38af"
-  dependencies:
-    q "^1.1.2"
-
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -2251,13 +2120,6 @@ color-string@^1.5.2:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
-color@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.2"
-
 color@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
@@ -2266,14 +2128,6 @@ color@^3.1.2:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-
-commander@2.15.x, commander@~2.15.0:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-
 commander@^2.10.0, commander@^2.18.0, commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -2291,12 +2145,6 @@ component-emitter@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
 
-compose-function@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
-  dependencies:
-    arity-n "^1.0.4"
-
 compressible@~2.0.16:
   version "2.0.17"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.17.tgz#6e8c108a16ad58384a977f3a482ca20bff2f38c1"
@@ -2361,11 +2209,7 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@^0.3.3:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
-
-convert-source-map@^1.5.1, convert-source-map@^1.7.0:
+convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   dependencies:
@@ -2405,24 +2249,6 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cosmiconfig@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.9.0"
-    parse-json "^4.0.0"
-    require-from-string "^2.0.1"
-
-cosmiconfig@^5.0.0, cosmiconfig@^5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
-  dependencies:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -2513,34 +2339,10 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-css-blank-pseudo@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
-  dependencies:
-    postcss "^7.0.5"
-
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
 
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
-  dependencies:
-    postcss "^7.0.1"
-    timsort "^0.3.0"
-
-css-has-pseudo@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^5.0.0-rc.4"
-
 css-loader@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.2.1.tgz#62849b45a414b7bde0bfba17325a026471040eae"
@@ -2558,34 +2360,6 @@ css-loader@^3.2.1:
     postcss-value-parser "^4.0.2"
     schema-utils "^2.6.0"
 
-css-prefers-color-scheme@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
-  dependencies:
-    postcss "^7.0.5"
-
-css-select-base-adapter@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.0.tgz#0102b3d14630df86c3eb9fa9f5456270106cf990"
-
-css-select@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
-css-select@~1.3.0-rc0:
-  version "1.3.0-rc0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.3.0-rc0.tgz#6f93196aaae737666ea1036a8cb14a8fcb7a9231"
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "^1.0.1"
-
 css-to-react-native@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
@@ -2595,121 +2369,14 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
-css-tree@1.0.0-alpha.29:
-  version "1.0.0-alpha.29"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
-  dependencies:
-    mdn-data "~1.1.0"
-    source-map "^0.5.3"
-
-css-tree@1.0.0-alpha25:
-  version "1.0.0-alpha25"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha25.tgz#1bbfabfbf6eeef4f01d9108ff2edd0be2fe35597"
-  dependencies:
-    mdn-data "^1.0.0"
-    source-map "^0.5.3"
-
 css-unit-converter@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
 
-css-url-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
-
-css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
-
-css@^2.0.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
-cssdb@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
-
-cssesc@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
 
-cssnano-preset-default@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.0.tgz#d2a3de1039aa98bc4ec25001fa050330c2a16dac"
-
-cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
-
-csso@^3.5.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
-  dependencies:
-    css-tree "1.0.0-alpha.29"
-
 csstype@^2.2.0, csstype@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
@@ -2718,21 +2385,6 @@ cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
-d@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
-  dependencies:
-    es5-ext "^0.10.9"
-
-data-urls@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
-  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
-  dependencies:
-    abab "^2.0.3"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^8.0.0"
-
 date-fns@^2.14.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
@@ -2947,12 +2599,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-converter@~0.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
-  dependencies:
-    utila "~0.3"
-
 dom-helpers@^5.0.1:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
@@ -2960,13 +2606,6 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.6.3"
     csstype "^2.6.7"
 
-dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
-  dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
-
 dom-walk@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2975,39 +2614,6 @@ domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
 
-domelementtype@1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-
-domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
-
-domhandler@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
-  dependencies:
-    domelementtype "1"
-
-domutils@1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
-  dependencies:
-    domelementtype "1"
-
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-dot-prop@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
-  dependencies:
-    is-obj "^1.0.0"
-
 dset@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/dset/-/dset-2.0.1.tgz#a15fff3d1e4d60ac0c95634625cbd5441a76deb1"
@@ -3095,7 +2701,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0:
+enhanced-resolve@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
   dependencies:
@@ -3119,10 +2725,6 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
-entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
-
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -3152,25 +2754,6 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.13.0.tgz#ac86145fdd5099d8dd49558ccba2eaf9b88e24e9"
-  dependencies:
-    es-to-primitive "^1.2.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    is-callable "^1.1.4"
-    is-regex "^1.0.4"
-    object-keys "^1.0.12"
-
-es-to-primitive@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
-  dependencies:
-    is-callable "^1.1.4"
-    is-date-object "^1.0.1"
-    is-symbol "^1.0.2"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3180,29 +2763,6 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.45"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.45.tgz#0bfdf7b473da5919d5adf3bd25ceb754fccc3653"
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.1"
-    next-tick "1"
-
-es6-iterator@^2.0.3, es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
-  dependencies:
-    d "1"
-    es5-ext "~0.10.14"
-
 escalade@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.1.tgz#52568a77443f6927cd0ab9c73129137533c965ed"
@@ -3212,7 +2772,7 @@ escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -3684,10 +3244,6 @@ flatted@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
 
-flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
-
 flush-write-stream@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
@@ -3771,15 +3327,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3842,7 +3389,7 @@ fsevents@~2.1.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-function-bind@^1.1.0, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
@@ -4000,16 +3547,6 @@ handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  dependencies:
-    ansi-regex "^2.0.0"
-
-has-flag@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
-
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -4059,7 +3596,7 @@ has-values@^1.0.0:
     is-number "^3.0.0"
     kind-of "^4.0.0"
 
-has@^1.0.0, has@^1.0.1, has@^1.0.3:
+has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   dependencies:
@@ -4079,14 +3616,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.0"
 
-he@1.1.x:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
-
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-
 history@^4.9.0:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/history/-/history-4.9.0.tgz#84587c2068039ead8af769e9d6a6860a14fa1bca"
@@ -4144,62 +3673,17 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-
-html-comment-regex@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
-
 html-entities@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
   integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
-html-minifier@^3.2.3:
-  version "3.5.16"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.16.tgz#39f5aabaf78bdfc057fe67334226efd7f3851175"
-  dependencies:
-    camel-case "3.0.x"
-    clean-css "4.1.x"
-    commander "2.15.x"
-    he "1.1.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "3.3.x"
-
 html-parse-stringify2@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
   dependencies:
     void-elements "^2.0.1"
 
-html-webpack-plugin@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
-  dependencies:
-    html-minifier "^3.2.3"
-    loader-utils "^0.2.16"
-    lodash "^4.17.3"
-    pretty-error "^2.0.2"
-    tapable "^1.0.0"
-    toposort "^1.0.0"
-    util.promisify "1.0.0"
-
-htmlparser2@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
-  dependencies:
-    domelementtype "1"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
-
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -4292,13 +3776,6 @@ iconv-lite@0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.2.tgz#af6d628dccfb463b7364d97f715e4b74b8c8c2b8"
-  integrity sha512-kERHXvpSaB4aU3eANwidg79K8FlrN77m8G9V+0vOR3HYaRifrlwMEpT7ZBJqLSEIHnEgJTHcWK82wwLwwKwtag==
-  dependencies:
-    safer-buffer ">= 2.1.2 < 3"
-
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -4331,19 +3808,6 @@ immer-peasy@3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/immer-peasy/-/immer-peasy-3.1.3.tgz#d0ea8d388f47ec6b15ab2ca19ffb9f0bf4310110"
 
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  dependencies:
-    import-from "^2.1.0"
-
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
 import-fresh@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.0.0.tgz#a3d897f420cab0e671236897f75bc14b4885c390"
@@ -4359,12 +3823,6 @@ import-fresh@^3.1.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  dependencies:
-    resolve-from "^3.0.0"
-
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -4456,10 +3914,6 @@ ipaddr.js@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
 
-is-absolute-url@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
-
 is-absolute-url@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
@@ -4510,17 +3964,6 @@ is-callable@^1.2.0:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
   integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
 
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -4553,10 +3996,6 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
     is-data-descriptor "^1.0.0"
     kind-of "^6.0.2"
 
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -4613,10 +4052,6 @@ is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
 
-is-obj@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
-
 is-odd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-2.0.0.tgz#7646624671fd7ea558ccd9a2795182f2958f1b24"
@@ -4651,12 +4086,6 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-is-regex@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
-  dependencies:
-    has "^1.0.1"
-
 is-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
@@ -4664,10 +4093,6 @@ is-regex@^1.1.0:
   dependencies:
     has-symbols "^1.0.1"
 
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4677,12 +4102,6 @@ is-string@^1.0.5:
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
   integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
-is-svg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
-  dependencies:
-    html-comment-regex "^1.1.0"
-
 is-symbol@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
@@ -4735,10 +4154,6 @@ jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
 
-js-base64@^2.1.9:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.5.tgz#e293cd3c7c82f070d700fc7a1ca0a2e69f101f92"
-
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -4747,20 +4162,13 @@ js-levenshtein@^1.1.3:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
-js-yaml@^3.13.1, js-yaml@^3.9.0:
+js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 jsesc@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
@@ -4785,10 +4193,6 @@ json3@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
 
-json5@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -4882,15 +4286,6 @@ loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
 
-loader-utils@^0.2.16:
-  version "0.2.17"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
-  dependencies:
-    big.js "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
-    object-assign "^4.0.1"
-
 loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@@ -4943,64 +4338,6 @@ lodash-es@^4.17.11, lodash-es@^4.17.14, lodash-es@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
 
-lodash._baseassign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
-  dependencies:
-    lodash._basecopy "^3.0.0"
-    lodash.keys "^3.0.0"
-
-lodash._basecopy@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36"
-
-lodash._bindcallback@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-
-lodash._createassigner@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
-  dependencies:
-    lodash._bindcallback "^3.0.0"
-    lodash._isiterateecall "^3.0.0"
-    lodash.restparam "^3.0.0"
-
-lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-
-lodash._isiterateecall@^3.0.0:
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz#5203ad7ba425fae842460e696db9cf3e6aac057c"
-
-lodash._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-
-lodash.assign@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-3.2.0.tgz#3ce9f0234b4b2223e296b8fa0ac1fee8ebca64fa"
-  dependencies:
-    lodash._baseassign "^3.0.0"
-    lodash._createassigner "^3.0.0"
-    lodash.keys "^3.0.0"
-
-lodash.assign@^4.0.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
-
-lodash.defaults@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-3.1.2.tgz#c7308b18dbf8bc9372d701a73493c61192bd2e2c"
-  dependencies:
-    lodash.assign "^3.0.0"
-    lodash.restparam "^3.0.0"
-
-lodash.defaults@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
-
 lodash.get@^4.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -5009,62 +4346,16 @@ lodash.has@^4.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
 
-lodash.isarguments@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
-
-lodash.isarray@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
-
-lodash.keys@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-3.1.2.tgz#4dbc0472b156be50a0b286855d1bd0b0c656098a"
-  dependencies:
-    lodash._getnative "^3.0.0"
-    lodash.isarguments "^3.0.0"
-    lodash.isarray "^3.0.0"
-
-lodash.memoize@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.restparam@^3.0.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-
-lodash.sortby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
-  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-
-lodash.template@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
-  dependencies:
-    lodash._reinterpolate "^3.0.0"
-    lodash.templatesettings "^4.0.0"
-
-lodash.templatesettings@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
-  dependencies:
-    lodash._reinterpolate "~3.0.0"
-
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
 
-lodash.uniq@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-
-"lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
@@ -5079,10 +4370,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lower-case@^1.1.1:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
-
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -5124,10 +4411,6 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-mdn-data@^1.0.0, mdn-data@~1.1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5191,13 +4474,6 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.0.5"
-
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -5339,7 +4615,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@^0.5, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@^0.5, mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -5432,20 +4708,10 @@ neo-async@^2.5.0, neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
 
-next-tick@1:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-
 nice-try@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.4.tgz#d93962f6c52f2c1558c0fbda6d512819f1efe1c4"
 
-no-case@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
-  dependencies:
-    lower-case "^1.1.1"
-
 node-emoji@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.8.1.tgz#6eec6bfb07421e2148c75c6bba72421f8530a826"
@@ -5541,10 +4807,6 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
-normalize-url@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.2.0.tgz#98d0948afc82829f374320f405fe9ca55a5f8567"
-
 normalize.css@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
@@ -5576,12 +4838,6 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@^1.0.1, nth-check@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
-  dependencies:
-    boolbase "~1.0.0"
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -5611,10 +4867,6 @@ object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.8, object-keys@^1.1.1
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
 
-object-path@^0.9.2:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
-
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -5630,7 +4882,7 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.entries@^1.1.0, object.entries@^1.1.2:
+object.entries@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
   integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
@@ -5649,28 +4901,12 @@ object.fromentries@^2.0.2:
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
-
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.6.1"
-    function-bind "^1.1.0"
-    has "^1.0.1"
-
 object.values@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
@@ -5838,12 +5074,6 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
-  dependencies:
-    no-case "^2.2.0"
-
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5867,13 +5097,6 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-json@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
@@ -5978,11 +5201,7 @@ picomatch@^2.0.4, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-picomatch@^2.0.5:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
-
-pify@^2.0.0, pify@^2.3.0:
+pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -6033,179 +5252,6 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
-postcss-advanced-variables@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-advanced-variables/-/postcss-advanced-variables-3.0.0.tgz#d1ca9a0da920c0be41213dd33ce6033d14f0b150"
-  dependencies:
-    "@csstools/sass-import-resolve" "^1.0.0"
-    postcss "^7.0.6"
-
-postcss-atroot@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/postcss-atroot/-/postcss-atroot-0.1.3.tgz#6752c0230c745140549345b2b0e30ebeda01a405"
-  dependencies:
-    postcss "^5.0.5"
-
-postcss-attribute-case-insensitive@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz#b2a721a0d279c2f9103a36331c88981526428cc7"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0"
-
-postcss-calc@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss "^7.0.5"
-    postcss-selector-parser "^5.0.0-rc.4"
-    postcss-value-parser "^3.3.1"
-
-postcss-color-functional-notation@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-gray@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-hex-alpha@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
-  dependencies:
-    postcss "^7.0.14"
-    postcss-values-parser "^2.0.1"
-
-postcss-color-mod-function@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-color-rebeccapurple@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
-  dependencies:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-custom-media@^7.0.8:
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
-  dependencies:
-    postcss "^7.0.14"
-
-postcss-custom-properties@^8.0.11:
-  version "8.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
-  dependencies:
-    postcss "^7.0.17"
-    postcss-values-parser "^2.0.1"
-
-postcss-custom-selectors@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-dir-pseudo-class@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-discard-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-double-position-gradients@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
-  dependencies:
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
-
-postcss-env-function@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-extend-rule@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-extend-rule/-/postcss-extend-rule-2.0.0.tgz#031fe6f608cf6efd20cb58b11f343b164c18d370"
-  dependencies:
-    postcss "^6.0.22"
-    postcss-nesting "^5.0.0"
-
-postcss-focus-visible@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-focus-within@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-font-variant@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
-  dependencies:
-    postcss "^7.0.2"
-
 postcss-functions@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-functions/-/postcss-functions-3.0.0.tgz#0e94d01444700a481de20de4d55fb2640564250e"
@@ -6215,35 +5261,6 @@ postcss-functions@^3.0.0:
     postcss "^6.0.9"
     postcss-value-parser "^3.3.0"
 
-postcss-gap-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-image-set-function@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-import@^12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-12.0.1.tgz#cf8c7ab0b5ccab5649024536e565f841928b7153"
-  dependencies:
-    postcss "^7.0.1"
-    postcss-value-parser "^3.2.3"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-initial@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d"
-  dependencies:
-    lodash.template "^4.5.0"
-    postcss "^7.0.2"
-
 postcss-js@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-2.0.0.tgz#f75b70470009eb37f998ee9bb516a2899c19ef8d"
@@ -6251,98 +5268,6 @@ postcss-js@^2.0.0:
     camelcase-css "^2.0.0"
     postcss "^7.0.0"
 
-postcss-lab-function@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-load-config@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
-  dependencies:
-    cosmiconfig "^4.0.0"
-    import-cwd "^2.0.0"
-
-postcss-loader@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
-
-postcss-logical@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-media-minmax@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-merge-longhand@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
-  dependencies:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
-
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
-
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
-  dependencies:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
-
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
-  dependencies:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -6372,235 +5297,13 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
-postcss-nested@^4.1.0, postcss-nested@^4.1.1:
+postcss-nested@^4.1.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.1.tgz#4bc2e5b35e3b1e481ff81e23b700da7f82a8b248"
   dependencies:
     postcss "^7.0.21"
     postcss-selector-parser "^6.0.2"
 
-postcss-nesting@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-5.0.0.tgz#973e3a7dc6426543affc0b0beb367c3b2a8d9923"
-  dependencies:
-    postcss "^6.0.21"
-
-postcss-nesting@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
-  dependencies:
-    postcss "^7.0.0"
-
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
-  dependencies:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
-  dependencies:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
-  dependencies:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-overflow-shorthand@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-page-break@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-place@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-preset-env@^6.4.0, postcss-preset-env@^6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
-  dependencies:
-    autoprefixer "^9.6.1"
-    browserslist "^4.6.4"
-    caniuse-lite "^1.0.30000981"
-    css-blank-pseudo "^0.1.4"
-    css-has-pseudo "^0.10.0"
-    css-prefers-color-scheme "^3.1.1"
-    cssdb "^4.4.0"
-    postcss "^7.0.17"
-    postcss-attribute-case-insensitive "^4.0.1"
-    postcss-color-functional-notation "^2.0.1"
-    postcss-color-gray "^5.0.0"
-    postcss-color-hex-alpha "^5.0.3"
-    postcss-color-mod-function "^3.0.3"
-    postcss-color-rebeccapurple "^4.0.1"
-    postcss-custom-media "^7.0.8"
-    postcss-custom-properties "^8.0.11"
-    postcss-custom-selectors "^5.1.2"
-    postcss-dir-pseudo-class "^5.0.0"
-    postcss-double-position-gradients "^1.0.0"
-    postcss-env-function "^2.0.2"
-    postcss-focus-visible "^4.0.0"
-    postcss-focus-within "^3.0.0"
-    postcss-font-variant "^4.0.0"
-    postcss-gap-properties "^2.0.0"
-    postcss-image-set-function "^3.0.1"
-    postcss-initial "^3.0.0"
-    postcss-lab-function "^2.0.1"
-    postcss-logical "^3.0.0"
-    postcss-media-minmax "^4.0.0"
-    postcss-nesting "^7.0.0"
-    postcss-overflow-shorthand "^2.0.0"
-    postcss-page-break "^2.0.0"
-    postcss-place "^4.0.1"
-    postcss-pseudo-class-any-link "^6.0.0"
-    postcss-replace-overflow-wrap "^3.0.0"
-    postcss-selector-matches "^4.0.0"
-    postcss-selector-not "^4.0.0"
-
-postcss-property-lookup@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-property-lookup/-/postcss-property-lookup-2.0.0.tgz#c995d1df42a75420f2aea834c2cbe296b2c15922"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^6.0.6"
-    tcomb "^3.2.21"
-
-postcss-pseudo-class-any-link@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
-
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
-  dependencies:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-
-postcss-replace-overflow-wrap@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
-  dependencies:
-    postcss "^7.0.2"
-
-postcss-selector-matches@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
-
-postcss-selector-not@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
-
-postcss-selector-parser@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
-  dependencies:
-    dot-prop "^4.1.1"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
-  dependencies:
-    cssesc "^2.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
@@ -6609,24 +5312,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
-  dependencies:
-    is-svg "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
-
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
-  dependencies:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
+postcss-value-parser@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
 
@@ -6634,14 +5320,6 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
 
-postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
 postcss@7.0.32, postcss@^7.0.27:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
@@ -6651,16 +5329,7 @@ postcss@7.0.32, postcss@^7.0.27:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^5.0.5:
-  version "5.2.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
-  dependencies:
-    chalk "^1.1.3"
-    js-base64 "^2.1.9"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
-postcss@^6.0.0, postcss@^6.0.21, postcss@^6.0.22, postcss@^6.0.6, postcss@^6.0.9:
+postcss@^6.0.9:
   version "6.0.22"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.22.tgz#e23b78314905c3b90cbd61702121e7a78848f2a3"
   dependencies:
@@ -6668,7 +5337,7 @@ postcss@^6.0.0, postcss@^6.0.21, postcss@^6.0.22, postcss@^6.0.6, postcss@^6.0.9
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.23, postcss@^7.0.24, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.21, postcss@^7.0.23, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.24"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.24.tgz#972c3c5be431b32e40caefe6c81b5a19117704c2"
   dependencies:
@@ -6676,30 +5345,11 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-precss@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/precss/-/precss-4.0.0.tgz#518ce5c4d31eac9bd268c538ae6fb462f3bf57b3"
-  dependencies:
-    postcss "^7.0.6"
-    postcss-advanced-variables "^3.0.0"
-    postcss-atroot "^0.1.3"
-    postcss-extend-rule "^2.0.0"
-    postcss-nested "^4.1.0"
-    postcss-preset-env "^6.4.0"
-    postcss-property-lookup "^2.0.0"
-
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-pretty-error@^2.0.2:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
-  dependencies:
-    renderkid "^2.0.1"
-    utila "~0.4"
-
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -6792,7 +5442,7 @@ punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
@@ -6806,10 +5456,6 @@ purgecss@^2.3.0:
     postcss "7.0.32"
     postcss-selector-parser "^6.0.2"
 
-q@^1.1.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -6989,12 +5635,6 @@ react@^16.13.1:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  dependencies:
-    pify "^2.3.0"
-
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -7024,15 +5664,6 @@ read-pkg@^2.0.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-stream@^3.0.6:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.1.1.tgz#ed6bbc6c5ba58b090039ff18ce670515795aeb06"
@@ -7119,10 +5750,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regex-parser@^2.2.9:
-  version "2.2.10"
-  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
-
 regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
@@ -7165,24 +5792,10 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
-relateurl@0.2.x:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
 
-renderkid@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
-  dependencies:
-    css-select "^1.1.0"
-    dom-converter "~0.1"
-    htmlparser2 "~3.3.0"
-    strip-ansi "^3.0.0"
-    utila "~0.3"
-
 repeat-element@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.2.tgz#ef089a178d1483baae4d93eb98b4f9e4e11d990a"
@@ -7195,10 +5808,6 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
-require-from-string@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-
 require-main-filename@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -7232,27 +5841,11 @@ resolve-pathname@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
 
-resolve-url-loader@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.0.0.tgz#c47eeca1fc8d62b08dc2eef12b3af5af3e775c74"
-  dependencies:
-    adjust-sourcemap-loader "^1.1.0"
-    camelcase "^4.1.0"
-    compose-function "^3.0.3"
-    convert-source-map "^1.5.1"
-    es6-iterator "^2.0.3"
-    loader-utils "^1.1.0"
-    lodash.defaults "^4.0.0"
-    postcss "^7.0.0"
-    rework "^1.0.1"
-    rework-visit "^1.0.0"
-    source-map "^0.5.7"
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.10.1, resolve@^1.3.2, resolve@^1.8.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   dependencies:
@@ -7273,25 +5866,6 @@ retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
 
-rework-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
-
-rework@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
-  dependencies:
-    convert-source-map "^0.3.3"
-    css "^2.0.0"
-
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -7338,7 +5912,7 @@ safe-regex@^1.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
 
-sax@^1.2.4, sax@~1.2.4:
+sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
@@ -7605,18 +6179,7 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
-source-map-loader@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.0.1.tgz#703df5345b0816734f0336c1ccee8af66e082061"
-  integrity sha512-DE4CJyfCVoxFLsHyuVE9Sjcib8cs5qdmOq3wcev1Un/r6F2AfQJDhag4rzpPPA48A2QZyV3CTbc+NGoFMfKIOQ==
-  dependencies:
-    data-urls "^2.0.0"
-    iconv-lite "^0.5.1"
-    loader-utils "^2.0.0"
-    schema-utils "^2.6.6"
-    source-map "^0.6.0"
-
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
+source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   dependencies:
@@ -7637,7 +6200,7 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
+source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -7724,10 +6287,6 @@ ssri@^8.0.0:
   dependencies:
     minipass "^3.1.1"
 
-stable@~0.1.6:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -7833,10 +6392,6 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -7914,24 +6469,6 @@ styled-components@^5.1.1:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
-stylehacks@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.0.tgz#64b323951c4a24e5fc7b2ec06c137bf32d155e8a"
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^6.0.0"
-    postcss-selector-parser "^3.0.0"
-
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-
-supports-color@^3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
-  dependencies:
-    has-flag "^1.0.0"
-
 supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -7959,25 +6496,6 @@ svg-url-loader@^6.0.0:
     file-loader "~6.0.0"
     loader-utils "~2.0.0"
 
-svgo@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.0.5.tgz#7040364c062a0538abacff4401cea6a26a7a389a"
-  dependencies:
-    coa "~2.0.1"
-    colors "~1.1.2"
-    css-select "~1.3.0-rc0"
-    css-select-base-adapter "~0.1.0"
-    css-tree "1.0.0-alpha25"
-    css-url-regex "^1.1.0"
-    csso "^3.5.0"
-    js-yaml "~3.10.0"
-    mkdirp "~0.5.1"
-    object.values "^1.0.4"
-    sax "~1.2.4"
-    stable "~0.1.6"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
@@ -8049,10 +6567,6 @@ tar@^6.0.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
-tcomb@^3.2.21:
-  version "3.2.27"
-  resolved "https://registry.yarnpkg.com/tcomb/-/tcomb-3.2.27.tgz#f4928bfc536b959d21a47e5f5f1ca2b2e4b7188a"
-
 terser-webpack-plugin@^1.4.3:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.4.tgz#2c63544347324baafa9a56baaddf1634c8abfc2f"
@@ -8173,36 +6687,15 @@ toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
 
-toposort@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
-
 toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
 
-tr46@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
-  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
-  dependencies:
-    punycode "^2.1.1"
-
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-loader@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
-  dependencies:
-    chalk "^2.3.0"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^1.0.2"
-    micromatch "^4.0.0"
-    semver "^6.0.0"
-
 ts-toolbelt@^6.1.6:
   version "6.9.9"
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-6.9.9.tgz#e6cfd8ec7d425d2a06bda3b4fe9577ceaf2abda8"
@@ -8295,13 +6788,6 @@ typescript@^3.9.6:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.6.tgz#8f3e0198a34c3ae17091b35571d3afd31999365a"
   integrity sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==
 
-uglify-js@3.3.x:
-  version "3.3.28"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.28.tgz#0efb9a13850e11303361c1051f64d2ec68d9be06"
-  dependencies:
-    commander "~2.15.0"
-    source-map "~0.6.1"
-
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -8334,10 +6820,6 @@ uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
 
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-
 unique-filename@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
@@ -8363,10 +6845,6 @@ unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
-unquote@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -8378,10 +6856,6 @@ upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
 
-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
-
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -8406,16 +6880,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-force-update@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/use-force-update/-/use-force-update-1.0.5.tgz#9b7192f73f6cb90d592b225858c1562719d7c184"
-
-use-react-router@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/use-react-router/-/use-react-router-1.0.7.tgz#04216066d87e45040309f24d2fd5e9f28308b3e2"
-  dependencies:
-    use-force-update "^1.0.5"
-
 use@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.0.tgz#14716bf03fdfefd03040aef58d8b4b85f3a7c544"
@@ -8426,13 +6890,6 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
-util.promisify@1.0.0, util.promisify@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -8451,14 +6908,6 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
-utila@~0.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
-
-utila@~0.4:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@@ -8493,10 +6942,6 @@ vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
 
-vendors@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
-
 vm-browserify@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
@@ -8529,11 +6974,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webidl-conversions@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
-  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
-
 webpack-assets-manifest@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-3.1.1.tgz#39bbc3bf2ee57fcd8ba07cda51c9ba4a3c6ae1de"
@@ -8639,16 +7079,6 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-manifest-plugin@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
-  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
-  dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
-
 webpack-sources@^1.0.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
@@ -8703,20 +7133,6 @@ websocket-extensions@>=0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
-whatwg-mimetype@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
-  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
-
-whatwg-url@^8.0.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.1.0.tgz#c628acdcf45b82274ce7281ee31dd3c839791771"
-  integrity sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^2.0.2"
-    webidl-conversions "^5.0.0"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

From 0403fa9517d24cb4c8570ffaf9a5be9aafd436c4 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 20:54:33 -0700
Subject: [PATCH 28/55] Build fixes

---
 package.json      |  5 ++--
 webpack.config.js | 30 ++++++++++++----------
 yarn.lock         | 65 ++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 84 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 3614da244..5b28d349a 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
         "eslint-plugin-standard": "^4.0.1",
         "fork-ts-checker-webpack-plugin": "^5.0.6",
         "redux-devtools-extension": "^2.13.8",
+        "source-map-loader": "^1.0.1",
         "style-loader": "^1.2.1",
         "svg-url-loader": "^6.0.0",
         "tailwindcss": "^1.4.6",
@@ -99,12 +100,12 @@
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {
-        "clean": "rm -rf public/assets/*.{js,css,map}",
+        "clean": "cd public/assets && find . \\( -name \"*.js\" -o -name \"*.map\" \\) -type f -delete",
         "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
         "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 cross-env TSC_WATCHFILE=UseFsEventsWithFallbackDynamicPolling 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"
+        "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"
     },
     "browserslist": [
         "> 0.5%",
diff --git a/webpack.config.js b/webpack.config.js
index 780461bd7..2efa27154 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,14 +10,13 @@ module.exports = {
     cache: true,
     target: 'web',
     mode: process.env.NODE_ENV,
-    context: __dirname,
     devtool: isProduction ? false : (process.env.DEVTOOL || 'eval-source-map'),
     performance: {
         hints: false,
     },
     entry: ['react-hot-loader/patch', './resources/scripts/index.tsx'],
     output: {
-        path: path.resolve(__dirname, '/public/assets'),
+        path: path.join(__dirname, '/public/assets'),
         filename: isProduction ? 'bundle.[chunkhash:8].js' : 'bundle.[hash:8].js',
         chunkFilename: isProduction ? '[name].[chunkhash:8].js' : '[name].[hash:8].js',
         publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
@@ -26,7 +25,7 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.ts(x?)$/,
+                test: /\.tsx?$/,
                 exclude: /node_modules/,
                 loader: 'babel-loader',
                 options: {
@@ -38,27 +37,32 @@ module.exports = {
                 use: [ 'style-loader', 'css-loader' ],
             },
             {
-                test: /\.(png|jpe?g|gif)$/,
+                test: /\.(png|jp(e?)g|gif)$/,
                 loader: 'file-loader',
                 options: {
-                    name: 'images/[name].[hash].[ext]',
+                    name: 'images/[name].[hash:8].[ext]',
                 },
             },
             {
                 test: /\.svg$/,
                 loader: 'svg-url-loader',
+            },
+            {
+                test: /\.js$/,
+                enforce: 'pre',
+                loader: 'source-map-loader',
             }
-            // {
-            //     enforce: 'pre',
-            //     test: /\.js$/,
-            //     loader: 'source-map-loader',
-            // },
         ],
     },
+    stats: {
+        // Ignore warnings emitted by "source-map-loader" when trying to parse source maps from
+        // JS plugins we use, namely brace editor.
+        warningsFilter: [/Failed to parse source map/],
+    },
     resolve: {
         extensions: ['.ts', '.tsx', '.js', '.json'],
         alias: {
-            '@': path.resolve(__dirname, 'resources/scripts'),
+            '@': path.join(__dirname, '/resources/scripts'),
         },
         symlinks: false,
     },
@@ -66,7 +70,7 @@ module.exports = {
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         !isProduction ? new ForkTsCheckerWebpackPlugin({
             eslint: {
-                files: './resources/scripts/**/*.{ts,tsx}',
+                files: `${path.join(__dirname, '/resources/scripts')}/**/*.{ts,tsx}`,
             },
         }) : null,
         process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin() : null
@@ -97,7 +101,7 @@ module.exports = {
     },
     devServer: {
         compress: true,
-        contentBase: 'public',
+        contentBase: path.join(__dirname, '/public'),
         publicPath: (process.env.PUBLIC_PATH || '') + '/assets/',
         allowedHosts: [
             '.pterodactyl.test',
diff --git a/yarn.lock b/yarn.lock
index 1f46e2f7b..272d5b83f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1322,6 +1322,11 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
 
+abab@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
+  integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -2385,6 +2390,15 @@ cyclist@~0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
 
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
 date-fns@^2.14.0:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
@@ -3776,6 +3790,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.2.tgz#af6d628dccfb463b7364d97f715e4b74b8c8c2b8"
+  integrity sha512-kERHXvpSaB4aU3eANwidg79K8FlrN77m8G9V+0vOR3HYaRifrlwMEpT7ZBJqLSEIHnEgJTHcWK82wwLwwKwtag==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -4351,6 +4372,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
 lodash.toarray@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -5442,7 +5468,7 @@ punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
@@ -6179,6 +6205,17 @@ source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
+source-map-loader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-1.0.1.tgz#703df5345b0816734f0336c1ccee8af66e082061"
+  integrity sha512-DE4CJyfCVoxFLsHyuVE9Sjcib8cs5qdmOq3wcev1Un/r6F2AfQJDhag4rzpPPA48A2QZyV3CTbc+NGoFMfKIOQ==
+  dependencies:
+    data-urls "^2.0.0"
+    iconv-lite "^0.5.1"
+    loader-utils "^2.0.0"
+    schema-utils "^2.6.6"
+    source-map "^0.6.0"
+
 source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
@@ -6691,6 +6728,13 @@ toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
 
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
@@ -6974,6 +7018,11 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
 webpack-assets-manifest@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-3.1.1.tgz#39bbc3bf2ee57fcd8ba07cda51c9ba4a3c6ae1de"
@@ -7133,6 +7182,20 @@ websocket-extensions@>=0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
+whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^8.0.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.1.0.tgz#c628acdcf45b82274ce7281ee31dd3c839791771"
+  integrity sha512-vEIkwNi9Hqt4TV9RdnaBPNt+E2Sgmo3gePebCRgZ1R7g6d23+53zCTnuB0amKI4AXq6VM8jj2DUAa0S1vjJxkw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^5.0.0"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"

From cbea4078fbc319689f5f6ae923d4b4f63fa3f5d6 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 21:46:49 -0700
Subject: [PATCH 29/55] Remove lodash deps to reduce bundle size more

---
 package.json                                  | 12 +++----
 .../dashboard/search/SearchModal.tsx          |  3 +-
 .../components/elements/InputError.tsx        |  2 +-
 .../scripts/components/server/StatGraphs.tsx  |  4 +--
 resources/scripts/helpers.ts                  |  2 ++
 resources/scripts/plugins/useDeepMemo.ts      |  2 +-
 webpack.config.js                             |  5 ++-
 yarn.lock                                     | 35 ++++++++++---------
 8 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 5b28d349a..910b95576 100644
--- a/package.json
+++ b/package.json
@@ -1,15 +1,17 @@
 {
     "name": "pterodactyl-panel",
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.19",
+        "@fortawesome/fontawesome-svg-core": "1.2.19",
         "@fortawesome/free-solid-svg-icons": "^5.9.0",
-        "@fortawesome/react-fontawesome": "^0.1.4",
+        "@fortawesome/react-fontawesome": "0.1.4",
         "@types/react-google-recaptcha": "^1.1.1",
         "axios": "^0.19.2",
         "ayu-ace": "^2.0.4",
         "brace": "^0.11.1",
         "chart.js": "^2.8.0",
         "date-fns": "^2.14.0",
+        "debounce": "^1.2.0",
+        "deepmerge": "^4.2.2",
         "easy-peasy": "^3.3.1",
         "events": "^3.0.0",
         "formik": "^2.1.4",
@@ -18,11 +20,11 @@
         "i18next-localstorage-backend": "^3.0.0",
         "i18next-xhr-backend": "^3.2.2",
         "jquery": "^3.3.1",
-        "lodash-es": "^4.17.15",
         "path": "^0.12.7",
         "query-string": "^6.7.0",
         "react": "^16.13.1",
         "react-dom": "npm:@hot-loader/react-dom",
+        "react-fast-compare": "^3.2.0",
         "react-google-recaptcha": "^2.0.1",
         "react-hot-loader": "^4.12.21",
         "react-i18next": "^11.2.1",
@@ -52,10 +54,8 @@
         "@babel/preset-typescript": "^7.7.4",
         "@babel/runtime": "^7.7.5",
         "@types/chart.js": "^2.8.5",
+        "@types/debounce": "^1.2.0",
         "@types/events": "^3.0.0",
-        "@types/feather-icons": "^4.7.0",
-        "@types/lodash": "^4.14.119",
-        "@types/lodash-es": "^4.17.3",
         "@types/node": "^12.6.9",
         "@types/query-string": "^6.3.0",
         "@types/react": "^16.9.41",
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index ac4c2b1bd..e58900694 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/resources/scripts/components/dashboard/search/SearchModal.tsx
@@ -3,7 +3,7 @@ import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { Field, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
 import { object, string } from 'yup';
-import { debounce } from 'lodash-es';
+import debounce from 'debounce';
 import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import InputSpinner from '@/components/elements/InputSpinner';
 import getServers from '@/api/getServers';
@@ -57,6 +57,7 @@ export default ({ ...props }: Props) => {
         setLoading(true);
         setSubmitting(false);
         clearFlashes('search');
+
         getServers(term)
             .then(servers => setServers(servers.items.filter((_, index) => index < 5)))
             .catch(error => {
diff --git a/resources/scripts/components/elements/InputError.tsx b/resources/scripts/components/elements/InputError.tsx
index 02758350e..3b810454b 100644
--- a/resources/scripts/components/elements/InputError.tsx
+++ b/resources/scripts/components/elements/InputError.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import capitalize from 'lodash-es/capitalize';
 import { FormikErrors, FormikTouched } from 'formik';
 import tw from 'twin.macro';
+import { capitalize } from '@/helpers';
 
 interface Props {
     errors: FormikErrors<any>;
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index 6a162ee05..eea25d7f5 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import Chart, { ChartConfiguration } from 'chart.js';
 import { ServerContext } from '@/state/server';
 import { bytesToMegabytes } from '@/helpers';
-import merge from 'lodash-es/merge';
+import merge from 'deepmerge';
 import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
@@ -59,7 +59,7 @@ const chartDefaults: ChartConfiguration = {
 };
 
 const createDefaultChart = (ctx: CanvasRenderingContext2D, options?: ChartConfiguration): Chart => new Chart(ctx, {
-    ...merge({}, chartDefaults, options),
+    ...merge(chartDefaults, options || {}),
     data: {
         labels: Array(20).fill(''),
         datasets: [
diff --git a/resources/scripts/helpers.ts b/resources/scripts/helpers.ts
index f8cf94848..d6d4712b0 100644
--- a/resources/scripts/helpers.ts
+++ b/resources/scripts/helpers.ts
@@ -13,3 +13,5 @@ export const bytesToMegabytes = (bytes: number) => Math.floor(bytes / 1000 / 100
 export const randomInt = (low: number, high: number) => Math.floor(Math.random() * (high - low) + low);
 
 export const cleanDirectoryPath = (path: string) => path.replace(/(^#\/*)|(\/(\/*))|(^$)/g, '/');
+
+export const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
diff --git a/resources/scripts/plugins/useDeepMemo.ts b/resources/scripts/plugins/useDeepMemo.ts
index 0ad6bb7df..ccf602853 100644
--- a/resources/scripts/plugins/useDeepMemo.ts
+++ b/resources/scripts/plugins/useDeepMemo.ts
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import isEqual from 'lodash-es/isEqual';
+import isEqual from 'react-fast-compare';
 
 export const useDeepMemo = <T, K> (fn: () => T, key: K): T => {
     const ref = useRef<{ key: K, value: T }>();
diff --git a/webpack.config.js b/webpack.config.js
index 2efa27154..0b2bd5037 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -73,7 +73,10 @@ module.exports = {
                 files: `${path.join(__dirname, '/resources/scripts')}/**/*.{ts,tsx}`,
             },
         }) : null,
-        process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin() : null
+        process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin({
+            analyzerHost: '0.0.0.0',
+            analyzerPort: 8081,
+        }) : null
     ].filter(p => p),
     optimization: {
         usedExports: true,
diff --git a/yarn.lock b/yarn.lock
index 272d5b83f..3baad2306 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -892,9 +892,10 @@
   version "0.2.19"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz#754a0f85e1290858152e1c05700ab502b11197f1"
 
-"@fortawesome/fontawesome-svg-core@^1.2.19":
+"@fortawesome/fontawesome-svg-core@1.2.19":
   version "1.2.19"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz#0eca1ce9285c3d99e6e340633ee8f615f9d1a2e0"
+  integrity sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.19"
 
@@ -904,9 +905,10 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "^0.2.19"
 
-"@fortawesome/react-fontawesome@^0.1.4":
+"@fortawesome/react-fontawesome@0.1.4":
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz#18d61d9b583ca289a61aa7dccc05bd164d6bc9ad"
+  integrity sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==
   dependencies:
     humps "^2.0.1"
     prop-types "^15.5.10"
@@ -935,6 +937,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/debounce@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
+  integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -943,10 +950,6 @@
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
 
-"@types/feather-icons@^4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
-
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -980,16 +983,6 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/lodash-es@^4.17.3":
-  version "4.17.3"
-  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.3.tgz#87eb0b3673b076b8ee655f1890260a136af09a2d"
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*", "@types/lodash@^4.14.119":
-  version "4.14.141"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.141.tgz#d81f4d0c562abe28713406b571ffb27692a82ae6"
-
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2411,6 +2404,7 @@ date-now@^0.1.4:
 debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
 
 debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
@@ -3759,6 +3753,7 @@ https-browserify@^1.0.0:
 humps@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
 
 i18next-chained-backend@^2.0.0:
   version "2.0.0"
@@ -4355,7 +4350,7 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash-es@^4.17.11, lodash-es@^4.17.14, lodash-es@^4.17.15:
+lodash-es@^4.17.11, lodash-es@^4.17.14:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
 
@@ -5407,6 +5402,7 @@ promise-inflight@^1.0.1:
 prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
     loose-envify "^1.4.0"
     object-assign "^4.1.1"
@@ -5568,6 +5564,11 @@ react-fast-compare@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
 
+react-fast-compare@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-google-recaptcha@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz#3276b29659493f7ca2a5b7739f6c239293cdf1d8"

From e9f553dede453d8b3ee88f5e1291c7e6c6cf9188 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 21:57:35 -0700
Subject: [PATCH 30/55] Reduce chart bundle size

---
 webpack.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 0b2bd5037..ddef4d9aa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -66,6 +66,11 @@ module.exports = {
         },
         symlinks: false,
     },
+    externals: {
+        // Mark moment as an external to exclude it from the Chart.js build since we don't need to use
+        // it for anything.
+        moment: 'moment',
+    },
     plugins: [
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         !isProduction ? new ForkTsCheckerWebpackPlugin({

From becad7b3c77b8fe9cb170a4ff6ca2e679af83baf Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 22:16:06 -0700
Subject: [PATCH 31/55] Cut out all of the unused ace editor modes;
 significantly reduces bundle size

---
 .../scripts/components/elements/AceEditor.tsx | 30 ++-----------------
 resources/scripts/modes.js                    | 25 ++++++++++++++++
 webpack.config.js                             |  3 ++
 3 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 resources/scripts/modes.js

diff --git a/resources/scripts/components/elements/AceEditor.tsx b/resources/scripts/components/elements/AceEditor.tsx
index 9f9866388..0b4ebca95 100644
--- a/resources/scripts/components/elements/AceEditor.tsx
+++ b/resources/scripts/components/elements/AceEditor.tsx
@@ -3,6 +3,8 @@ import ace, { Editor } from 'brace';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Select from '@/components/elements/Select';
+// @ts-ignore
+import modes from '@/modes';
 
 // @ts-ignore
 require('brace/ext/modelist');
@@ -18,32 +20,6 @@ const EditorContainer = styled.div`
     }
 `;
 
-const modes: { [k: string]: string } = {
-    assembly_x86: 'Assembly (x86)',
-    c_cpp: 'C++',
-    coffee: 'Coffeescript',
-    css: 'CSS',
-    dockerfile: 'Dockerfile',
-    golang: 'Go',
-    html: 'HTML',
-    ini: 'Ini',
-    java: 'Java',
-    javascript: 'Javascript',
-    json: 'JSON',
-    kotlin: 'Kotlin',
-    lua: 'Luascript',
-    perl: 'Perl',
-    php: 'PHP',
-    properties: 'Properties',
-    python: 'Python',
-    ruby: 'Ruby',
-    plain_text: 'Plaintext',
-    toml: 'TOML',
-    typescript: 'Typescript',
-    xml: 'XML',
-    yaml: 'YAML',
-};
-
 Object.keys(modes).forEach(mode => require(`brace/mode/${mode}`));
 
 export interface Props {
@@ -117,7 +93,7 @@ export default ({ style, initialContent, initialModePath, fetchContent, onConten
                     >
                         {
                             Object.keys(modes).map(key => (
-                                <option key={key} value={key}>{modes[key]}</option>
+                                <option key={key} value={key}>{(modes as { [k: string]: string })[key]}</option>
                             ))
                         }
                     </Select>
diff --git a/resources/scripts/modes.js b/resources/scripts/modes.js
new file mode 100644
index 000000000..e5f4bd04f
--- /dev/null
+++ b/resources/scripts/modes.js
@@ -0,0 +1,25 @@
+module.exports = {
+    assembly_x86: 'Assembly (x86)',
+    c_cpp: 'C++',
+    coffee: 'Coffeescript',
+    css: 'CSS',
+    dockerfile: 'Dockerfile',
+    golang: 'Go',
+    html: 'HTML',
+    ini: 'Ini',
+    java: 'Java',
+    javascript: 'Javascript',
+    json: 'JSON',
+    kotlin: 'Kotlin',
+    lua: 'Luascript',
+    perl: 'Perl',
+    php: 'PHP',
+    properties: 'Properties',
+    python: 'Python',
+    ruby: 'Ruby',
+    plain_text: 'Plaintext',
+    toml: 'TOML',
+    typescript: 'Typescript',
+    xml: 'XML',
+    yaml: 'YAML',
+};
diff --git a/webpack.config.js b/webpack.config.js
index ddef4d9aa..a4d533687 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,12 @@
 const path = require('path');
+const webpack = require('webpack');
 const AssetsManifestPlugin = require('webpack-assets-manifest');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const isProduction = process.env.NODE_ENV === 'production';
+const modes = Object.keys(require('./resources/scripts/modes'));
 
 module.exports = {
     cache: true,
@@ -72,6 +74,7 @@ module.exports = {
         moment: 'moment',
     },
     plugins: [
+        new webpack.ContextReplacementPlugin(/brace[/\\](mode|worker)/, new RegExp(`^\.\/(${modes.join('|')})$`)),
         new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         !isProduction ? new ForkTsCheckerWebpackPlugin({
             eslint: {

From db7f3e5fc09f2ae4469918b6a87812057c32c691 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 22:36:28 -0700
Subject: [PATCH 32/55] Fix console and charting

---
 .../scripts/components/server/Console.tsx     |  1 +
 .../scripts/components/server/StatGraphs.tsx  | 44 ++++++-------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/resources/scripts/components/server/Console.tsx b/resources/scripts/components/server/Console.tsx
index 4ab66f960..49fb59cf0 100644
--- a/resources/scripts/components/server/Console.tsx
+++ b/resources/scripts/components/server/Console.tsx
@@ -6,6 +6,7 @@ import { ServerContext } from '@/state/server';
 import styled from 'styled-components/macro';
 import { usePermissions } from '@/plugins/usePermissions';
 import tw from 'twin.macro';
+import 'xterm/dist/xterm.css';
 
 const theme = {
     background: 'transparent',
diff --git a/resources/scripts/components/server/StatGraphs.tsx b/resources/scripts/components/server/StatGraphs.tsx
index eea25d7f5..44bd59f10 100644
--- a/resources/scripts/components/server/StatGraphs.tsx
+++ b/resources/scripts/components/server/StatGraphs.tsx
@@ -7,7 +7,7 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
 import { faMemory, faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
 
-const chartDefaults: ChartConfiguration = {
+const chartDefaults = (ticks?: Chart.TickOptions | undefined): ChartConfiguration => ({
     type: 'line',
     options: {
         legend: {
@@ -45,21 +45,17 @@ const chartDefaults: ChartConfiguration = {
                     zeroLineColor: 'rgba(15, 178, 184, 0.45)',
                     zeroLineWidth: 3,
                 },
-                ticks: {
+                ticks: merge(ticks || {}, {
                     fontSize: 10,
                     fontFamily: '"IBM Plex Mono", monospace',
                     fontColor: 'rgb(229, 232, 235)',
                     min: 0,
                     beginAtZero: true,
                     maxTicksLimit: 5,
-                },
+                }),
             } ],
         },
     },
-};
-
-const createDefaultChart = (ctx: CanvasRenderingContext2D, options?: ChartConfiguration): Chart => new Chart(ctx, {
-    ...merge(chartDefaults, options || {}),
     data: {
         labels: Array(20).fill(''),
         datasets: [
@@ -84,18 +80,12 @@ export default () => {
             return;
         }
 
-        setMemory(createDefaultChart(node.getContext('2d')!, {
-            options: {
-                scales: {
-                    yAxes: [ {
-                        ticks: {
-                            callback: (value) => `${value}Mb  `,
-                            suggestedMax: limits.memory,
-                        },
-                    } ],
-                },
-            },
-        }));
+        setMemory(
+            new Chart(node.getContext('2d')!, chartDefaults({
+                callback: (value) => `${value}Mb  `,
+                suggestedMax: limits.memory,
+            }))
+        );
     }, []);
 
     const cpuRef = useCallback<(node: HTMLCanvasElement | null) => void>(node => {
@@ -103,17 +93,11 @@ export default () => {
             return;
         }
 
-        setCpu(createDefaultChart(node.getContext('2d')!, {
-            options: {
-                scales: {
-                    yAxes: [ {
-                        ticks: {
-                            callback: (value) => `${value}%  `,
-                        },
-                    } ],
-                },
-            },
-        }));
+        setCpu(
+            new Chart(node.getContext('2d')!, chartDefaults({
+                callback: (value) => `${value}%`,
+            })),
+        );
     }, []);
 
     const statsListener = (data: string) => {

From cbdede75a76b92da2784adf1e19dc0b29cf07f4b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 22:38:34 -0700
Subject: [PATCH 33/55] Fix suspense spinner to make it indistinguishable from
 other loading

---
 resources/scripts/components/elements/Spinner.tsx     |  2 +-
 .../scripts/components/elements/SuspenseSpinner.tsx   | 11 ++---------
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx
index 316062960..127ab6524 100644
--- a/resources/scripts/components/elements/Spinner.tsx
+++ b/resources/scripts/components/elements/Spinner.tsx
@@ -34,7 +34,7 @@ const Spinner = ({ centered, ...props }: Props) => (
     centered ?
         <div
             css={[
-                tw`flex justify-center`,
+                tw`flex justify-center items-center`,
                 props.size === 'large' ? tw`m-20` : tw`m-6`,
             ]}
         >
diff --git a/resources/scripts/components/elements/SuspenseSpinner.tsx b/resources/scripts/components/elements/SuspenseSpinner.tsx
index fca1e91b2..3e7098cad 100644
--- a/resources/scripts/components/elements/SuspenseSpinner.tsx
+++ b/resources/scripts/components/elements/SuspenseSpinner.tsx
@@ -1,15 +1,8 @@
 import React, { Suspense } from 'react';
 import Spinner from '@/components/elements/Spinner';
-import tw from 'twin.macro';
 
-const SuspenseSpinner = ({ children }: { children?: React.ReactNode }) => (
-    <Suspense
-        fallback={
-            <div css={tw`mx-4 w-3/4 mr-4 flex items-center justify-center`}>
-                <Spinner centered/>
-            </div>
-        }
-    >
+const SuspenseSpinner: React.FC = ({ children }) => (
+    <Suspense fallback={<Spinner size={'large'} centered/>}>
         {children}
     </Suspense>
 );

From 06ece0e62433278a764a3f29035c7ed656e4b2f9 Mon Sep 17 00:00:00 2001
From: DarthShmev <34663790+DarthShmev@users.noreply.github.com>
Date: Sun, 5 Jul 2020 15:48:02 -0400
Subject: [PATCH 34/55] Fix AuthenticateServerAccess middleware spelling issue.

---
 .../Middleware/Api/Client/Server/AuthenticateServerAccess.php   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Http/Middleware/Api/Client/Server/AuthenticateServerAccess.php b/app/Http/Middleware/Api/Client/Server/AuthenticateServerAccess.php
index 1525755cf..8c10b22d2 100644
--- a/app/Http/Middleware/Api/Client/Server/AuthenticateServerAccess.php
+++ b/app/Http/Middleware/Api/Client/Server/AuthenticateServerAccess.php
@@ -65,7 +65,7 @@ class AuthenticateServerAccess
         }
 
         if ($server->suspended) {
-            throw new AccessDeniedHttpException('This server is currenty suspended and the functionality requested is unavailable.');
+            throw new AccessDeniedHttpException('This server is currently suspended and the functionality requested is unavailable.');
         }
 
         if (! $server->isInstalled()) {

From 28992c5e43aefb494284e8467de45daecfbe6e30 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sun, 5 Jul 2020 13:56:04 -0700
Subject: [PATCH 35/55] Speed up animations throughout the panel

---
 resources/scripts/TransitionRouter.tsx                        | 2 +-
 resources/scripts/components/dashboard/search/SearchModal.tsx | 3 +--
 resources/scripts/components/elements/DropdownMenu.tsx        | 2 +-
 resources/scripts/components/elements/InputSpinner.tsx        | 2 +-
 resources/scripts/components/elements/Modal.tsx               | 4 ++--
 resources/scripts/components/elements/PageContentBlock.tsx    | 2 +-
 resources/scripts/components/elements/ProgressBar.tsx         | 2 +-
 resources/scripts/components/server/WebsocketHandler.tsx      | 2 +-
 .../components/server/databases/DatabasesContainer.tsx        | 2 +-
 .../scripts/components/server/files/FileDropdownMenu.tsx      | 2 +-
 .../scripts/components/server/files/FileManagerContainer.tsx  | 2 +-
 resources/scripts/routers/ServerRouter.tsx                    | 2 +-
 12 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/resources/scripts/TransitionRouter.tsx b/resources/scripts/TransitionRouter.tsx
index 19c06d43a..227f7dcdc 100644
--- a/resources/scripts/TransitionRouter.tsx
+++ b/resources/scripts/TransitionRouter.tsx
@@ -17,7 +17,7 @@ const TransitionRouter: React.FC = ({ children }) => (
     <Route
         render={({ location }) => (
             <StyledSwitchTransition>
-                <Fade timeout={250} key={location.key} in appear unmountOnExit>
+                <Fade timeout={150} key={location.key} in appear unmountOnExit>
                     <section>
                         {children}
                     </section>
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index e58900694..8cdfb1b7f 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/resources/scripts/components/dashboard/search/SearchModal.tsx
@@ -22,8 +22,7 @@ interface Values {
 }
 
 const ServerResult = styled(Link)`
-    ${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline`};
-    transition: all 250ms linear;
+    ${tw`flex items-center bg-neutral-900 p-4 rounded border-l-4 border-neutral-900 no-underline transition-all duration-150`};
 
     &:hover {
         ${tw`shadow border-cyan-500`};
diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 8637fa8ec..05b3d3c7c 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -61,7 +61,7 @@ const DropdownMenu = ({ renderToggle, children }: Props) => {
     return (
         <div>
             {renderToggle(onClickHandler)}
-            <Fade timeout={250} in={visible} unmountOnExit>
+            <Fade timeout={150} in={visible} unmountOnExit>
                 <div
                     ref={menu}
                     onClick={e => {
diff --git a/resources/scripts/components/elements/InputSpinner.tsx b/resources/scripts/components/elements/InputSpinner.tsx
index d1273435f..ce4843dff 100644
--- a/resources/scripts/components/elements/InputSpinner.tsx
+++ b/resources/scripts/components/elements/InputSpinner.tsx
@@ -9,7 +9,7 @@ const InputSpinner = ({ visible, children }: { visible: boolean, children: React
             appear
             unmountOnExit
             in={visible}
-            timeout={250}
+            timeout={150}
         >
             <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                 <Spinner size={'small'}/>
diff --git a/resources/scripts/components/elements/Modal.tsx b/resources/scripts/components/elements/Modal.tsx
index 672333ecf..f242fbacc 100644
--- a/resources/scripts/components/elements/Modal.tsx
+++ b/resources/scripts/components/elements/Modal.tsx
@@ -62,7 +62,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
     }, [ render ]);
 
     return (
-        <Fade timeout={250} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
+        <Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
             <ModalMask
                 onClick={e => {
                     if (isDismissable && closeOnBackground) {
@@ -87,7 +87,7 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
                         <Spinner/>
                     </div>
                     }
-                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-250`}>
+                    <div css={tw`bg-neutral-800 p-6 rounded shadow-md overflow-y-scroll transition-all duration-150`}>
                         {children}
                     </div>
                 </ModalContainer>
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 6613b6e51..9503839ff 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
 const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
-    <CSSTransition timeout={250} classNames={'fade'} appear in>
+    <CSSTransition timeout={150} classNames={'fade'} appear in>
         <>
             <ContentContainer css={tw`my-10`} className={className}>
                 {children}
diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx
index a40b92705..64ee732b7 100644
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/resources/scripts/components/elements/ProgressBar.tsx
@@ -61,7 +61,7 @@ export default () => {
     return (
         <div className={'w-full fixed'} style={{ height: '2px' }}>
             <CSSTransition
-                timeout={250}
+                timeout={150}
                 appear
                 in={visible}
                 unmountOnExit
diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx
index b2dd6e84e..fe43e56d5 100644
--- a/resources/scripts/components/server/WebsocketHandler.tsx
+++ b/resources/scripts/components/server/WebsocketHandler.tsx
@@ -67,7 +67,7 @@ export default () => {
 
     return (
         error ?
-            <CSSTransition timeout={250} in appear classNames={'fade'}>
+            <CSSTransition timeout={150} in appear classNames={'fade'}>
                 <div css={tw`bg-red-500 py-2`}>
                     <ContentContainer css={tw`flex items-center justify-center`}>
                         <Spinner size={'small'}/>
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index 164f2edef..486072598 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -40,7 +40,7 @@ export default () => {
             {(!databases.length && loading) ?
                 <Spinner size={'large'} centered/>
                 :
-                <Fade timeout={250}>
+                <Fade timeout={150}>
                     <>
                         {databases.length > 0 ?
                             databases.map((database, index) => (
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 53b817d0e..a1953470b 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -138,7 +138,7 @@ export default ({ uuid }: { uuid: string }) => {
                 />
                 <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
             </div>
-            <Fade timeout={250} in={menuVisible} unmountOnExit classNames={'fade'}>
+            <Fade timeout={150} in={menuVisible} unmountOnExit classNames={'fade'}>
                 <div
                     ref={menu}
                     onClick={e => {
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index ea5b16573..e97bb37f0 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -70,7 +70,7 @@ export default () => {
                                     This directory seems to be empty.
                                 </p>
                                 :
-                                <CSSTransition classNames={'fade'} timeout={250} appear in>
+                                <CSSTransition classNames={'fade'} timeout={150} appear in>
                                     <React.Fragment>
                                         <div>
                                             {files.length > 250 ?
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index cf4cbec8a..baa9723a4 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -69,7 +69,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                     <Spinner size={'large'} centered/>
                 :
                 <>
-                    <CSSTransition timeout={250} classNames={'fade'} appear in>
+                    <CSSTransition timeout={150} classNames={'fade'} appear in>
                         <SubNavigation>
                             <div>
                                 <NavLink to={`${match.url}`} exact>Console</NavLink>

From f0e18ba6f7493178e5fc7f31a8970908fab5a3a9 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Mon, 6 Jul 2020 20:05:42 -0700
Subject: [PATCH 36/55] Code cleanup

---
 .../AllocationRepositoryInterface.php         | 27 -------------
 .../Nodes/AllocationController.php            | 39 ++++++++-----------
 .../Eloquent/AllocationRepository.php         | 36 -----------------
 .../Servers/ServerCreationService.php         |  4 +-
 4 files changed, 19 insertions(+), 87 deletions(-)

diff --git a/app/Contracts/Repository/AllocationRepositoryInterface.php b/app/Contracts/Repository/AllocationRepositoryInterface.php
index 6f038a853..b02ef66a4 100644
--- a/app/Contracts/Repository/AllocationRepositoryInterface.php
+++ b/app/Contracts/Repository/AllocationRepositoryInterface.php
@@ -3,36 +3,9 @@
 namespace Pterodactyl\Contracts\Repository;
 
 use Illuminate\Support\Collection;
-use Illuminate\Contracts\Pagination\LengthAwarePaginator;
 
 interface AllocationRepositoryInterface extends RepositoryInterface
 {
-    /**
-     * Set an array of allocation IDs to be assigned to a specific server.
-     *
-     * @param int|null $server
-     * @param array $ids
-     * @return int
-     */
-    public function assignAllocationsToServer(int $server = null, array $ids): int;
-
-    /**
-     * Return all of the allocations for a specific node.
-     *
-     * @param int $node
-     * @return \Illuminate\Support\Collection
-     */
-    public function getAllocationsForNode(int $node): Collection;
-
-    /**
-     * Return all of the allocations for a node in a paginated format.
-     *
-     * @param int $node
-     * @param int $perPage
-     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
-     */
-    public function getPaginatedAllocationsForNode(int $node, int $perPage = 100): LengthAwarePaginator;
-
     /**
      * Return all of the unique IPs that exist for a given node.
      *
diff --git a/app/Http/Controllers/Api/Application/Nodes/AllocationController.php b/app/Http/Controllers/Api/Application/Nodes/AllocationController.php
index cc1a32ff8..01ec37fe1 100644
--- a/app/Http/Controllers/Api/Application/Nodes/AllocationController.php
+++ b/app/Http/Controllers/Api/Application/Nodes/AllocationController.php
@@ -3,11 +3,10 @@
 namespace Pterodactyl\Http\Controllers\Api\Application\Nodes;
 
 use Pterodactyl\Models\Node;
-use Illuminate\Http\Response;
+use Illuminate\Http\JsonResponse;
 use Pterodactyl\Models\Allocation;
 use Pterodactyl\Services\Allocations\AssignmentService;
 use Pterodactyl\Services\Allocations\AllocationDeletionService;
-use Pterodactyl\Contracts\Repository\AllocationRepositoryInterface;
 use Pterodactyl\Transformers\Api\Application\AllocationTransformer;
 use Pterodactyl\Http\Controllers\Api\Application\ApplicationApiController;
 use Pterodactyl\Http\Requests\Api\Application\Allocations\GetAllocationsRequest;
@@ -26,41 +25,32 @@ class AllocationController extends ApplicationApiController
      */
     private $deletionService;
 
-    /**
-     * @var \Pterodactyl\Contracts\Repository\AllocationRepositoryInterface
-     */
-    private $repository;
-
     /**
      * AllocationController constructor.
      *
      * @param \Pterodactyl\Services\Allocations\AssignmentService $assignmentService
      * @param \Pterodactyl\Services\Allocations\AllocationDeletionService $deletionService
-     * @param \Pterodactyl\Contracts\Repository\AllocationRepositoryInterface $repository
      */
     public function __construct(
         AssignmentService $assignmentService,
-        AllocationDeletionService $deletionService,
-        AllocationRepositoryInterface $repository
+        AllocationDeletionService $deletionService
     ) {
         parent::__construct();
 
         $this->assignmentService = $assignmentService;
         $this->deletionService = $deletionService;
-        $this->repository = $repository;
     }
 
     /**
      * Return all of the allocations that exist for a given node.
      *
      * @param \Pterodactyl\Http\Requests\Api\Application\Allocations\GetAllocationsRequest $request
+     * @param \Pterodactyl\Models\Node $node
      * @return array
      */
-    public function index(GetAllocationsRequest $request): array
+    public function index(GetAllocationsRequest $request, Node $node): array
     {
-        $allocations = $this->repository->getPaginatedAllocationsForNode(
-            $request->getModel(Node::class)->id, 50
-        );
+        $allocations = $node->allocations()->paginate(50);
 
         return $this->fractal->collection($allocations)
             ->transformWith($this->getTransformer(AllocationTransformer::class))
@@ -71,32 +61,35 @@ class AllocationController extends ApplicationApiController
      * Store new allocations for a given node.
      *
      * @param \Pterodactyl\Http\Requests\Api\Application\Allocations\StoreAllocationRequest $request
-     * @return \Illuminate\Http\Response
+     * @param \Pterodactyl\Models\Node $node
+     * @return \Illuminate\Http\JsonResponse
      *
      * @throws \Pterodactyl\Exceptions\Service\Allocation\CidrOutOfRangeException
      * @throws \Pterodactyl\Exceptions\Service\Allocation\InvalidPortMappingException
      * @throws \Pterodactyl\Exceptions\Service\Allocation\PortOutOfRangeException
      * @throws \Pterodactyl\Exceptions\Service\Allocation\TooManyPortsInRangeException
      */
-    public function store(StoreAllocationRequest $request): Response
+    public function store(StoreAllocationRequest $request, Node $node): JsonResponse
     {
-        $this->assignmentService->handle($request->getModel(Node::class), $request->validated());
+        $this->assignmentService->handle($node, $request->validated());
 
-        return response('', 204);
+        return new JsonResponse([], JsonResponse::HTTP_NO_CONTENT);
     }
 
     /**
      * Delete a specific allocation from the Panel.
      *
      * @param \Pterodactyl\Http\Requests\Api\Application\Allocations\DeleteAllocationRequest $request
-     * @return \Illuminate\Http\Response
+     * @param \Pterodactyl\Models\Node $node
+     * @param \Pterodactyl\Models\Allocation $allocation
+     * @return \Illuminate\Http\JsonResponse
      *
      * @throws \Pterodactyl\Exceptions\Service\Allocation\ServerUsingAllocationException
      */
-    public function delete(DeleteAllocationRequest $request): Response
+    public function delete(DeleteAllocationRequest $request, Node $node, Allocation $allocation): JsonResponse
     {
-        $this->deletionService->handle($request->getModel(Allocation::class));
+        $this->deletionService->handle($allocation);
 
-        return response('', 204);
+        return new JsonResponse([], JsonResponse::HTTP_NO_CONTENT);
     }
 }
diff --git a/app/Repositories/Eloquent/AllocationRepository.php b/app/Repositories/Eloquent/AllocationRepository.php
index 920b5c135..cc7efb23b 100644
--- a/app/Repositories/Eloquent/AllocationRepository.php
+++ b/app/Repositories/Eloquent/AllocationRepository.php
@@ -5,7 +5,6 @@ namespace Pterodactyl\Repositories\Eloquent;
 use Illuminate\Support\Collection;
 use Pterodactyl\Models\Allocation;
 use Illuminate\Database\Eloquent\Builder;
-use Illuminate\Contracts\Pagination\LengthAwarePaginator;
 use Pterodactyl\Contracts\Repository\AllocationRepositoryInterface;
 
 class AllocationRepository extends EloquentRepository implements AllocationRepositoryInterface
@@ -20,41 +19,6 @@ class AllocationRepository extends EloquentRepository implements AllocationRepos
         return Allocation::class;
     }
 
-    /**
-     * Set an array of allocation IDs to be assigned to a specific server.
-     *
-     * @param int|null $server
-     * @param array $ids
-     * @return int
-     */
-    public function assignAllocationsToServer(int $server = null, array $ids): int
-    {
-        return $this->getBuilder()->whereIn('id', $ids)->update(['server_id' => $server]);
-    }
-
-    /**
-     * Return all of the allocations for a specific node.
-     *
-     * @param int $node
-     * @return \Illuminate\Support\Collection
-     */
-    public function getAllocationsForNode(int $node): Collection
-    {
-        return $this->getBuilder()->where('node_id', $node)->get($this->getColumns());
-    }
-
-    /**
-     * Return all of the allocations for a node in a paginated format.
-     *
-     * @param int $node
-     * @param int $perPage
-     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
-     */
-    public function getPaginatedAllocationsForNode(int $node, int $perPage = 100): LengthAwarePaginator
-    {
-        return $this->getBuilder()->where('node_id', $node)->paginate($perPage, $this->getColumns());
-    }
-
     /**
      * Return all of the unique IPs that exist for a given node.
      *
diff --git a/app/Services/Servers/ServerCreationService.php b/app/Services/Servers/ServerCreationService.php
index b84bed7c5..09638547b 100644
--- a/app/Services/Servers/ServerCreationService.php
+++ b/app/Services/Servers/ServerCreationService.php
@@ -270,7 +270,9 @@ class ServerCreationService
             $records = array_merge($records, $data['allocation_additional']);
         }
 
-        $this->allocationRepository->assignAllocationsToServer($server->id, $records);
+        $this->allocationRepository->updateWhereIn('id', $records, [
+            'server_id' => $server->id,
+        ]);
     }
 
     /**

From d3c749ac56f1125976378bee7237efae16931c2b Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Mon, 6 Jul 2020 21:25:00 -0700
Subject: [PATCH 37/55] Code cleanup & fix frontend searching servers; closes
 #2100

---
 .../Repository/ServerRepositoryInterface.php  | 11 ----
 .../Api/Client/ClientApiController.php        | 32 +++++++++
 .../Api/Client/ClientController.php           | 52 ++++++++-------
 app/Http/Controllers/Base/IndexController.php | 11 +---
 .../Requests/Api/Client/GetServersRequest.php | 26 ++++++++
 .../Server/ServerDataComposer.php             | 38 -----------
 app/Http/ViewComposers/ServerListComposer.php | 51 --------------
 app/Models/User.php                           | 18 +++++
 app/Providers/ViewComposerServiceProvider.php |  7 --
 .../Eloquent/EloquentRepository.php           | 51 ++++++++++++++
 .../Eloquent/ServerRepository.php             | 52 ---------------
 composer.json                                 |  1 +
 composer.lock                                 | 66 ++++++++++++++++++-
 resources/scripts/api/getServers.ts           |  4 +-
 14 files changed, 226 insertions(+), 194 deletions(-)
 delete mode 100644 app/Http/ViewComposers/Server/ServerDataComposer.php
 delete mode 100644 app/Http/ViewComposers/ServerListComposer.php

diff --git a/app/Contracts/Repository/ServerRepositoryInterface.php b/app/Contracts/Repository/ServerRepositoryInterface.php
index 8851c5798..13a931764 100644
--- a/app/Contracts/Repository/ServerRepositoryInterface.php
+++ b/app/Contracts/Repository/ServerRepositoryInterface.php
@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Contracts\Repository;
 
-use Pterodactyl\Models\User;
 use Pterodactyl\Models\Server;
 use Illuminate\Support\Collection;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
@@ -107,16 +106,6 @@ interface ServerRepositoryInterface extends RepositoryInterface, SearchableInter
      */
     public function getDaemonServiceData(Server $server, bool $refresh = false): array;
 
-    /**
-     * Return a paginated list of servers that a user can access at a given level.
-     *
-     * @param \Pterodactyl\Models\User $user
-     * @param int $level
-     * @param bool|int $paginate
-     * @return \Illuminate\Pagination\LengthAwarePaginator|\Illuminate\Database\Eloquent\Collection
-     */
-    public function filterUserAccessServers(User $user, int $level, $paginate = 25);
-
     /**
      * Return a server by UUID.
      *
diff --git a/app/Http/Controllers/Api/Client/ClientApiController.php b/app/Http/Controllers/Api/Client/ClientApiController.php
index 7e3046179..b3d0d0ea3 100644
--- a/app/Http/Controllers/Api/Client/ClientApiController.php
+++ b/app/Http/Controllers/Api/Client/ClientApiController.php
@@ -10,6 +10,38 @@ use Pterodactyl\Http\Controllers\Api\Application\ApplicationApiController;
 
 abstract class ClientApiController extends ApplicationApiController
 {
+    /**
+     * Returns only the includes which are valid for the given transformer.
+     *
+     * @param \Pterodactyl\Transformers\Api\Client\BaseClientTransformer $transformer
+     * @param array $merge
+     * @return string[]
+     */
+    protected function getIncludesForTransformer(BaseClientTransformer $transformer, array $merge = [])
+    {
+        $filtered = array_filter($this->parseIncludes(), function ($datum) use ($transformer) {
+            return in_array($datum, $transformer->getAvailableIncludes());
+        });
+
+        return array_merge($filtered, $merge);
+    }
+
+    /**
+     * Returns the parsed includes for this request.
+     */
+    protected function parseIncludes()
+    {
+        $includes = $this->request->query('include');
+
+        if (! is_string($includes)) {
+            return $includes;
+        }
+
+        return array_map(function ($item) {
+            return trim($item);
+        }, explode(',', $includes));
+    }
+
     /**
      * Return an instance of an application transformer.
      *
diff --git a/app/Http/Controllers/Api/Client/ClientController.php b/app/Http/Controllers/Api/Client/ClientController.php
index b673ac5bf..300770aa5 100644
--- a/app/Http/Controllers/Api/Client/ClientController.php
+++ b/app/Http/Controllers/Api/Client/ClientController.php
@@ -3,7 +3,9 @@
 namespace Pterodactyl\Http\Controllers\Api\Client;
 
 use Pterodactyl\Models\User;
+use Pterodactyl\Models\Server;
 use Pterodactyl\Models\Permission;
+use Spatie\QueryBuilder\QueryBuilder;
 use Pterodactyl\Repositories\Eloquent\ServerRepository;
 use Pterodactyl\Transformers\Api\Client\ServerTransformer;
 use Pterodactyl\Http\Requests\Api\Client\GetServersRequest;
@@ -36,32 +38,36 @@ class ClientController extends ClientApiController
      */
     public function index(GetServersRequest $request): array
     {
-        // Check for the filter parameter on the request.
-        switch ($request->input('filter')) {
-            case 'all':
-                $filter = User::FILTER_LEVEL_ALL;
-                break;
-            case 'admin':
-                $filter = User::FILTER_LEVEL_ADMIN;
-                break;
-            case 'owner':
-                $filter = User::FILTER_LEVEL_OWNER;
-                break;
-            case 'subuser-of':
-            default:
-                $filter = User::FILTER_LEVEL_SUBUSER;
-                break;
+        $user = $request->user();
+        $level = $request->getFilterLevel();
+        $transformer = $this->getTransformer(ServerTransformer::class);
+
+        // Start the query builder and ensure we eager load any requested relationships from the request.
+        $builder = Server::query()->with($this->getIncludesForTransformer($transformer, ['node']));
+
+        if ($level === User::FILTER_LEVEL_OWNER) {
+            $builder = $builder->where('owner_id', $request->user()->id);
+        }
+        // If set to all, display all servers they can access, including those they access as an
+        // admin. If set to subuser, only return the servers they can access because they are owner,
+        // or marked as a subuser of the server.
+        elseif (($level === User::FILTER_LEVEL_ALL && ! $user->root_admin) || $level === User::FILTER_LEVEL_SUBUSER) {
+            $builder = $builder->whereIn('id', $user->accessibleServers()->pluck('id')->all());
+        }
+        // If set to admin, only display the servers a user can access because they are an administrator.
+        // This means only servers the user would not have access to if they were not an admin (because they
+        // are not an owner or subuser) are returned.
+        elseif ($level === User::FILTER_LEVEL_ADMIN && $user->root_admin) {
+            $builder = $builder->whereNotIn('id', $user->accessibleServers()->pluck('id')->all());
         }
 
-        $servers = $this->repository
-            ->setSearchTerm($request->input('query'))
-            ->filterUserAccessServers(
-                $request->user(), $filter, config('pterodactyl.paginate.frontend.servers')
-            );
+        $builder = QueryBuilder::for($builder)->allowedFilters(
+            'uuid', 'name', 'external_id'
+        );
 
-        return $this->fractal->collection($servers)
-            ->transformWith($this->getTransformer(ServerTransformer::class))
-            ->toArray();
+        $servers = $builder->paginate(min($request->query('per_page', 50), 100))->appends($request->query());
+
+        return $this->fractal->transformWith($transformer)->collection($servers)->toArray();
     }
 
     /**
diff --git a/app/Http/Controllers/Base/IndexController.php b/app/Http/Controllers/Base/IndexController.php
index f62de118e..41ff988f7 100644
--- a/app/Http/Controllers/Base/IndexController.php
+++ b/app/Http/Controllers/Base/IndexController.php
@@ -2,8 +2,6 @@
 
 namespace Pterodactyl\Http\Controllers\Base;
 
-use Illuminate\Http\Request;
-use Pterodactyl\Models\User;
 use Pterodactyl\Http\Controllers\Controller;
 use Pterodactyl\Contracts\Repository\ServerRepositoryInterface;
 
@@ -27,15 +25,10 @@ class IndexController extends Controller
     /**
      * Returns listing of user's servers.
      *
-     * @param \Illuminate\Http\Request $request
      * @return \Illuminate\View\View
      */
-    public function index(Request $request)
+    public function index()
     {
-        $servers = $this->repository->setSearchTerm($request->input('query'))->filterUserAccessServers(
-            $request->user(), User::FILTER_LEVEL_ALL, config('pterodactyl.paginate.frontend.servers')
-        );
-
-        return view('templates/base.core', ['servers' => $servers]);
+        return view('templates/base.core');
     }
 }
diff --git a/app/Http/Requests/Api/Client/GetServersRequest.php b/app/Http/Requests/Api/Client/GetServersRequest.php
index 9b4601f25..c28f0a946 100644
--- a/app/Http/Requests/Api/Client/GetServersRequest.php
+++ b/app/Http/Requests/Api/Client/GetServersRequest.php
@@ -2,6 +2,8 @@
 
 namespace Pterodactyl\Http\Requests\Api\Client;
 
+use Pterodactyl\Models\User;
+
 class GetServersRequest extends ClientApiRequest
 {
     /**
@@ -11,4 +13,28 @@ class GetServersRequest extends ClientApiRequest
     {
         return true;
     }
+
+    /**
+     * Return the filtering method for servers when the client base endpoint is requested.
+     *
+     * @return int
+     */
+    public function getFilterLevel(): int
+    {
+        switch ($this->input('type')) {
+            case 'all':
+                return User::FILTER_LEVEL_ALL;
+                break;
+            case 'admin':
+                return User::FILTER_LEVEL_ADMIN;
+                break;
+            case 'owner':
+                return User::FILTER_LEVEL_OWNER;
+                break;
+            case 'subuser-of':
+            default:
+                return User::FILTER_LEVEL_SUBUSER;
+                break;
+        }
+    }
 }
diff --git a/app/Http/ViewComposers/Server/ServerDataComposer.php b/app/Http/ViewComposers/Server/ServerDataComposer.php
deleted file mode 100644
index 9e1858645..000000000
--- a/app/Http/ViewComposers/Server/ServerDataComposer.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-
-namespace Pterodactyl\Http\ViewComposers\Server;
-
-use Illuminate\View\View;
-use Illuminate\Http\Request;
-
-class ServerDataComposer
-{
-    /**
-     * @var \Illuminate\Http\Request
-     */
-    protected $request;
-
-    /**
-     * ServerDataComposer constructor.
-     *
-     * @param \Illuminate\Http\Request $request
-     */
-    public function __construct(Request $request)
-    {
-        $this->request = $request;
-    }
-
-    /**
-     * Attach server data to a view automatically.
-     *
-     * @param \Illuminate\View\View $view
-     */
-    public function compose(View $view)
-    {
-        $server = $this->request->get('server');
-
-        $view->with('server', $server);
-        $view->with('node', object_get($server, 'node'));
-        $view->with('daemon_token', $this->request->get('server_token'));
-    }
-}
diff --git a/app/Http/ViewComposers/ServerListComposer.php b/app/Http/ViewComposers/ServerListComposer.php
deleted file mode 100644
index 9b57884aa..000000000
--- a/app/Http/ViewComposers/ServerListComposer.php
+++ /dev/null
@@ -1,51 +0,0 @@
-<?php
-
-namespace Pterodactyl\Http\ViewComposers;
-
-use Illuminate\View\View;
-use Illuminate\Http\Request;
-use Pterodactyl\Models\User;
-use Pterodactyl\Contracts\Repository\ServerRepositoryInterface;
-
-class ServerListComposer
-{
-    /**
-     * @var \Illuminate\Http\Request
-     */
-    private $request;
-
-    /**
-     * @var \Pterodactyl\Contracts\Repository\ServerRepositoryInterface
-     */
-    private $repository;
-
-    /**
-     * ServerListComposer constructor.
-     *
-     * @param \Illuminate\Http\Request $request
-     * @param \Pterodactyl\Contracts\Repository\ServerRepositoryInterface $repository
-     */
-    public function __construct(Request $request, ServerRepositoryInterface $repository)
-    {
-        $this->request = $request;
-        $this->repository = $repository;
-    }
-
-    /**
-     * Attach a list of servers the user can access to the view.
-     *
-     * @param \Illuminate\View\View $view
-     */
-    public function compose(View $view)
-    {
-        if (! $this->request->user()) {
-            return;
-        }
-
-        $servers = $this->repository
-            ->setColumns(['id', 'owner_id', 'uuidShort', 'name', 'description'])
-            ->filterUserAccessServers($this->request->user(), User::FILTER_LEVEL_SUBUSER, false);
-
-        $view->with('sidebarServerList', $servers);
-    }
-}
diff --git a/app/Models/User.php b/app/Models/User.php
index 408ceead3..360fa3913 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -7,6 +7,7 @@ use Illuminate\Support\Collection;
 use Illuminate\Validation\Rules\In;
 use Illuminate\Auth\Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Database\Eloquent\Builder;
 use Pterodactyl\Models\Traits\Searchable;
 use Illuminate\Auth\Passwords\CanResetPassword;
 use Pterodactyl\Traits\Helpers\AvailableLanguages;
@@ -260,4 +261,21 @@ class User extends Model implements
     {
         return $this->hasMany(RecoveryToken::class);
     }
+
+    /**
+     * Returns all of the servers that a user can access by way of being the owner of the
+     * server, or because they are assigned as a subuser for that server.
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function accessibleServers()
+    {
+        return $this->hasMany(Server::class, 'owner_id')
+            ->select('servers.*')
+            ->leftJoin('subusers', 'subusers.server_id', '=', 'servers.id')
+            ->where(function (Builder $builder) {
+                $builder->where('servers.owner_id', $this->id)->orWhere('subusers.user_id', $this->id);
+            })
+            ->groupBy('servers.id');
+    }
 }
diff --git a/app/Providers/ViewComposerServiceProvider.php b/app/Providers/ViewComposerServiceProvider.php
index 9490234f3..9f484e006 100644
--- a/app/Providers/ViewComposerServiceProvider.php
+++ b/app/Providers/ViewComposerServiceProvider.php
@@ -4,8 +4,6 @@ namespace Pterodactyl\Providers;
 
 use Illuminate\Support\ServiceProvider;
 use Pterodactyl\Http\ViewComposers\AssetComposer;
-use Pterodactyl\Http\ViewComposers\ServerListComposer;
-use Pterodactyl\Http\ViewComposers\Server\ServerDataComposer;
 
 class ViewComposerServiceProvider extends ServiceProvider
 {
@@ -15,10 +13,5 @@ class ViewComposerServiceProvider extends ServiceProvider
     public function boot()
     {
         $this->app->make('view')->composer('*', AssetComposer::class);
-
-        $this->app->make('view')->composer('server.*', ServerDataComposer::class);
-
-        // Add data to make the sidebar work when viewing a server.
-        $this->app->make('view')->composer(['server.*'], ServerListComposer::class);
     }
 }
diff --git a/app/Repositories/Eloquent/EloquentRepository.php b/app/Repositories/Eloquent/EloquentRepository.php
index 73e671cc6..34b5247af 100644
--- a/app/Repositories/Eloquent/EloquentRepository.php
+++ b/app/Repositories/Eloquent/EloquentRepository.php
@@ -2,9 +2,11 @@
 
 namespace Pterodactyl\Repositories\Eloquent;
 
+use Illuminate\Http\Request;
 use Webmozart\Assert\Assert;
 use Illuminate\Support\Collection;
 use Pterodactyl\Repositories\Repository;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Database\Query\Expression;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
@@ -15,6 +17,53 @@ use Pterodactyl\Contracts\Repository\Attributes\SearchableInterface;
 
 abstract class EloquentRepository extends Repository implements RepositoryInterface
 {
+    /**
+     * @var bool
+     */
+    protected $useRequestFilters = false;
+
+    /**
+     * Determines if the repository function should use filters off the request object
+     * present when returning results. This allows repository methods to be called in API
+     * context's such that we can pass through ?filter[name]=Dane&sort=desc for example.
+     *
+     * @param bool $usingFilters
+     * @return $this
+     */
+    public function usingRequestFilters($usingFilters = true)
+    {
+        $this->useRequestFilters = $usingFilters;
+
+        return $this;
+    }
+
+    /**
+     * Returns the request instance.
+     *
+     * @return \Illuminate\Http\Request
+     */
+    protected function request()
+    {
+        return $this->app->make(Request::class);
+    }
+
+    /**
+     * Paginate the response data based on the page para.
+     *
+     * @param \Illuminate\Database\Eloquent\Builder $instance
+     * @param int $default
+     *
+     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
+     */
+    protected function paginate(Builder $instance, int $default = 50)
+    {
+        if (! $this->useRequestFilters) {
+            return $instance->paginate($default);
+        }
+
+        return $instance->paginate($this->request()->query('per_page', $default));
+    }
+
     /**
      * Return an instance of the eloquent model bound to this
      * repository instance.
@@ -236,6 +285,7 @@ abstract class EloquentRepository extends Repository implements RepositoryInterf
      * Return all records associated with the given model.
      *
      * @return \Illuminate\Support\Collection
+     * @deprecated Just use the model
      */
     public function all(): Collection
     {
@@ -313,6 +363,7 @@ abstract class EloquentRepository extends Repository implements RepositoryInterf
      * Get the amount of entries in the database.
      *
      * @return int
+     * @deprecated just use the count method off a model
      */
     public function count(): int
     {
diff --git a/app/Repositories/Eloquent/ServerRepository.php b/app/Repositories/Eloquent/ServerRepository.php
index e3e398d5e..a64f68db9 100644
--- a/app/Repositories/Eloquent/ServerRepository.php
+++ b/app/Repositories/Eloquent/ServerRepository.php
@@ -2,7 +2,6 @@
 
 namespace Pterodactyl\Repositories\Eloquent;
 
-use Pterodactyl\Models\User;
 use Pterodactyl\Models\Server;
 use Illuminate\Support\Collection;
 use Illuminate\Database\Eloquent\Builder;
@@ -226,43 +225,6 @@ class ServerRepository extends EloquentRepository implements ServerRepositoryInt
         ];
     }
 
-    /**
-     * Return a paginated list of servers that a user can access at a given level.
-     *
-     * @param \Pterodactyl\Models\User $user
-     * @param int $level
-     * @param bool|int $paginate
-     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator|\Illuminate\Database\Eloquent\Collection
-     */
-    public function filterUserAccessServers(User $user, int $level, $paginate = 25)
-    {
-        $instance = $this->getBuilder()->select($this->getColumns())->with(['user', 'node', 'allocation']);
-
-        // If access level is set to owner, only display servers
-        // that the user owns.
-        if ($level === User::FILTER_LEVEL_OWNER) {
-            $instance->where('owner_id', $user->id);
-        }
-
-        // If set to all, display all servers they can access, including
-        // those they access as an admin. If set to subuser, only return
-        // the servers they can access because they are owner, or marked
-        // as a subuser of the server.
-        elseif (($level === User::FILTER_LEVEL_ALL && ! $user->root_admin) || $level === User::FILTER_LEVEL_SUBUSER) {
-            $instance->whereIn('id', $this->getUserAccessServers($user->id));
-        }
-
-        // If set to admin, only display the servers a user can access
-        // as an administrator (leaves out owned and subuser of).
-        elseif ($level === User::FILTER_LEVEL_ADMIN && $user->root_admin) {
-            $instance->whereNotIn('id', $this->getUserAccessServers($user->id));
-        }
-
-        $instance->search($this->getSearchTerm());
-
-        return $paginate ? $instance->paginate($paginate) : $instance->get();
-    }
-
     /**
      * Return a server by UUID.
      *
@@ -339,20 +301,6 @@ class ServerRepository extends EloquentRepository implements ServerRepositoryInt
         return ! $this->getBuilder()->where('uuid', '=', $uuid)->orWhere('uuidShort', '=', $short)->exists();
     }
 
-    /**
-     * Return an array of server IDs that a given user can access based
-     * on owner and subuser permissions.
-     *
-     * @param int $user
-     * @return int[]
-     */
-    private function getUserAccessServers(int $user): array
-    {
-        return $this->getBuilder()->select('id')->where('owner_id', $user)->union(
-            $this->app->make(SubuserRepository::class)->getBuilder()->select('server_id')->where('user_id', $user)
-        )->pluck('id')->all();
-    }
-
     /**
      * Get the amount of servers that are suspended.
      *
diff --git a/composer.json b/composer.json
index 0ccfab915..a07a9ae85 100644
--- a/composer.json
+++ b/composer.json
@@ -37,6 +37,7 @@
         "psy/psysh": "^0.10.4",
         "s1lentium/iptools": "^1.1",
         "spatie/laravel-fractal": "^5.7",
+        "spatie/laravel-query-builder": "^2.8",
         "staudenmeir/belongs-to-through": "^2.10",
         "symfony/yaml": "^4.4",
         "webmozart/assert": "^1.9"
diff --git a/composer.lock b/composer.lock
index 7593ee4b4..6df479deb 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "155b8e930e604c0476fa975b1084ca3f",
+    "content-hash": "d05ab995e4aff4b847ff2a027924065c",
     "packages": [
         {
             "name": "appstract/laravel-blade-directives",
@@ -3361,6 +3361,70 @@
             ],
             "time": "2020-03-02T18:40:49+00:00"
         },
+        {
+            "name": "spatie/laravel-query-builder",
+            "version": "2.8.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-query-builder.git",
+                "reference": "2737b2298e8bfeb632a80013646943307bf31775"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-query-builder/zipball/2737b2298e8bfeb632a80013646943307bf31775",
+                "reference": "2737b2298e8bfeb632a80013646943307bf31775",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "~5.6.34|~5.7.0|~5.8.0|^6.0|^7.0",
+                "illuminate/http": "~5.6.34|~5.7.0|~5.8.0|^6.0|^7.0",
+                "illuminate/support": "~5.6.34|~5.7.0|~5.8.0|^6.0|^7.0",
+                "php": "^7.1"
+            },
+            "require-dev": {
+                "ext-json": "*",
+                "orchestra/testbench": "~3.6.0|~3.7.0|~3.8.0|^4.0|^5.0",
+                "phpunit/phpunit": "^7.0|^8.0|^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\QueryBuilder\\QueryBuilderServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\QueryBuilder\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Alex Vanderbist",
+                    "email": "alex@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Easily build Eloquent queries from API requests",
+            "homepage": "https://github.com/spatie/laravel-query-builder",
+            "keywords": [
+                "laravel-query-builder",
+                "spatie"
+            ],
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                }
+            ],
+            "time": "2020-05-25T09:36:37+00:00"
+        },
         {
             "name": "staudenmeir/belongs-to-through",
             "version": "v2.10",
diff --git a/resources/scripts/api/getServers.ts b/resources/scripts/api/getServers.ts
index 42b2d501b..1be6fe9ff 100644
--- a/resources/scripts/api/getServers.ts
+++ b/resources/scripts/api/getServers.ts
@@ -6,8 +6,8 @@ export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult
         http.get('/api/client', {
             params: {
                 include: [ 'allocation' ],
-                filter: includeAdmin ? 'all' : undefined,
-                query,
+                type: includeAdmin ? 'all' : undefined,
+                'filter[name]': query,
             },
         })
             .then(({ data }) => resolve({

From 7b5139b2b196dbae8c992bb99f34627accef2fcb Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Wed, 8 Jul 2020 21:04:45 -0700
Subject: [PATCH 38/55] [Breaking] Return all server allocations in API
 response

---
 app/Transformers/Api/Client/ServerTransformer.php | 13 +++++++++----
 resources/scripts/api/server/getServer.ts         | 12 ++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/Transformers/Api/Client/ServerTransformer.php b/app/Transformers/Api/Client/ServerTransformer.php
index 50d45e276..360ba20fa 100644
--- a/app/Transformers/Api/Client/ServerTransformer.php
+++ b/app/Transformers/Api/Client/ServerTransformer.php
@@ -5,6 +5,7 @@ namespace Pterodactyl\Transformers\Api\Client;
 use Pterodactyl\Models\Egg;
 use Pterodactyl\Models\Server;
 use Pterodactyl\Models\Subuser;
+use Pterodactyl\Models\Allocation;
 
 class ServerTransformer extends BaseClientTransformer
 {
@@ -41,10 +42,14 @@ class ServerTransformer extends BaseClientTransformer
                 'port' => $server->node->daemonSFTP,
             ],
             'description' => $server->description,
-            'allocation' => [
-                'ip' => $server->allocation->alias,
-                'port' => $server->allocation->port,
-            ],
+            'allocations' => $server->allocations->map(function (Allocation $allocation) use ($server) {
+                return [
+                    'ip' => $allocation->ip,
+                    'ip_alias' => $allocation->ip_alias,
+                    'port' => $allocation->port,
+                    'is_default' => $allocation->id === $server->allocation_id,
+                ];
+            }),
             'limits' => [
                 'memory' => $server->memory,
                 'swap' => $server->swap,
diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index bd4f90ba8..0bd0b7798 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -45,12 +45,12 @@ export const rawDataToServerObject = (data: any): Server => ({
         port: data.sftp_details.port,
     },
     description: data.description ? ((data.description.length > 0) ? data.description : null) : null,
-    allocations: [ {
-        ip: data.allocation.ip,
-        alias: null,
-        port: data.allocation.port,
-        default: true,
-    } ],
+    allocations: (data.allocations || []).map((datum: any) => ({
+        ip: datum.ip,
+        alias: datum.ip_alias,
+        port: datum.port,
+        default: datum.is_default,
+    })),
     limits: { ...data.limits },
     featureLimits: { ...data.feature_limits },
     isSuspended: data.is_suspended,

From 5c18fd1f0c28e027db3f420919362424caa2944f Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Wed, 8 Jul 2020 21:42:37 -0700
Subject: [PATCH 39/55] Show allocated ports on settings page

---
 resources/scripts/api/server/getServer.ts     |  4 +-
 .../components/dashboard/ServerRow.tsx        |  2 +-
 .../dashboard/search/SearchModal.tsx          |  2 +-
 .../settings/ServerAllocationsContainer.tsx   | 63 +++++++++++++++++++
 .../server/settings/SettingsContainer.tsx     | 14 +++--
 5 files changed, 75 insertions(+), 10 deletions(-)
 create mode 100644 resources/scripts/components/server/settings/ServerAllocationsContainer.tsx

diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index 0bd0b7798..fd4534287 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -4,7 +4,7 @@ export interface Allocation {
     ip: string;
     alias: string | null;
     port: number;
-    default: boolean;
+    isDefault: boolean;
 }
 
 export interface Server {
@@ -49,7 +49,7 @@ export const rawDataToServerObject = (data: any): Server => ({
         ip: datum.ip,
         alias: datum.ip_alias,
         port: datum.port,
-        default: datum.is_default,
+        isDefault: datum.is_default,
     })),
     limits: { ...data.limits },
     featureLimits: { ...data.feature_limits },
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 481d85317..a438750e7 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -65,7 +65,7 @@ export default ({ server }: { server: Server }) => {
                     <FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
                     <p css={tw`text-sm text-neutral-400 ml-2`}>
                         {
-                            server.allocations.filter(alloc => alloc.default).map(allocation => (
+                            server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
                             ))
                         }
diff --git a/resources/scripts/components/dashboard/search/SearchModal.tsx b/resources/scripts/components/dashboard/search/SearchModal.tsx
index 8cdfb1b7f..1461b8013 100644
--- a/resources/scripts/components/dashboard/search/SearchModal.tsx
+++ b/resources/scripts/components/dashboard/search/SearchModal.tsx
@@ -112,7 +112,7 @@ export default ({ ...props }: Props) => {
                                     <p css={tw`text-sm`}>{server.name}</p>
                                     <p css={tw`mt-1 text-xs text-neutral-400`}>
                                         {
-                                            server.allocations.filter(alloc => alloc.default).map(allocation => (
+                                            server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
                                             ))
                                         }
diff --git a/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx b/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx
new file mode 100644
index 000000000..3e76d5d9d
--- /dev/null
+++ b/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { ServerContext } from '@/state/server';
+import tw from 'twin.macro';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components/macro';
+
+const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
+const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
+
+const Row = styled.div`
+    ${tw`flex items-center py-2 pl-4 pr-5 border-l-4 border-transparent transition-colors duration-150`};
+    
+    & svg {
+        ${tw`transition-colors duration-150`};
+    }
+    
+    &:hover {
+        ${tw`border-cyan-400`};
+        
+        svg {
+            ${tw`text-neutral-100`};
+        }
+        
+        ${Label} {
+            ${tw`text-neutral-200`};
+        }
+    }
+`;
+
+export default () => {
+    const allocations = ServerContext.useStoreState(state => state.server.data!.allocations);
+
+    return (
+        <TitledGreyBox title={'Allocated Ports'}>
+            {allocations.map(({ ip, port, alias, isDefault }, index) => (
+                <Row key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
+                    <div css={tw`mr-4 text-neutral-400`}>
+                        <FontAwesomeIcon icon={faNetworkWired}/>
+                    </div>
+                    <div css={tw`mr-4`}>
+                        <Code>{alias || ip}</Code>
+                        <Label>IP Address</Label>
+                    </div>
+                    <div>
+                        <Code>:{port}</Code>
+                        <Label>Port</Label>
+                    </div>
+                    <div css={tw`flex-1 text-right`}>
+                        {isDefault ?
+                            <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
+                                Default
+                            </span>
+                            :
+                            null
+                        }
+                    </div>
+                </Row>
+            ))}
+        </TitledGreyBox>
+    );
+};
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index 2be5a8b93..6f632ad19 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -13,6 +13,7 @@ import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import { LinkButton } from '@/components/elements/Button';
+import ServerAllocationsContainer from '@/components/server/settings/ServerAllocationsContainer';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@@ -22,9 +23,9 @@ export default () => {
         <PageContentBlock>
             <FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
             <div css={tw`md:flex`}>
-                <Can action={'file.sftp'}>
-                    <div css={tw`w-full md:flex-1 md:mr-10`}>
-                        <TitledGreyBox title={'SFTP Details'}>
+                <div css={tw`w-full md:flex-1 md:mr-10`}>
+                    <Can action={'file.sftp'}>
+                        <TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
                             <div>
                                 <Label>Server Address</Label>
                                 <Input
@@ -59,9 +60,7 @@ export default () => {
                                 </div>
                             </div>
                         </TitledGreyBox>
-                    </div>
-                </Can>
-                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
+                    </Can>
                     <Can action={'settings.rename'}>
                         <div css={tw`mb-6 md:mb-10`}>
                             <RenameServerBox/>
@@ -71,6 +70,9 @@ export default () => {
                         <ReinstallServerBox/>
                     </Can>
                 </div>
+                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
+                    <ServerAllocationsContainer/>
+                </div>
             </div>
         </PageContentBlock>
     );

From bfb28f949da6d1aace63d996d8b98fc509b56fd6 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 19:17:24 -0700
Subject: [PATCH 40/55] [Breaking] Return server allocations automatically as a
 relation object

---
 .../Api/Client/ClientApiController.php        |  4 ++-
 .../Api/Client/AllocationTransformer.php      |  6 ++--
 .../Api/Client/ServerTransformer.php          | 29 ++++++++++++++-----
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/Http/Controllers/Api/Client/ClientApiController.php b/app/Http/Controllers/Api/Client/ClientApiController.php
index b3d0d0ea3..56c3db1f7 100644
--- a/app/Http/Controllers/Api/Client/ClientApiController.php
+++ b/app/Http/Controllers/Api/Client/ClientApiController.php
@@ -28,10 +28,12 @@ abstract class ClientApiController extends ApplicationApiController
 
     /**
      * Returns the parsed includes for this request.
+     *
+     * @return string[]
      */
     protected function parseIncludes()
     {
-        $includes = $this->request->query('include');
+        $includes = $this->request->query('include') ?? [];
 
         if (! is_string($includes)) {
             return $includes;
diff --git a/app/Transformers/Api/Client/AllocationTransformer.php b/app/Transformers/Api/Client/AllocationTransformer.php
index 055afdae3..8f83aac7e 100644
--- a/app/Transformers/Api/Client/AllocationTransformer.php
+++ b/app/Transformers/Api/Client/AllocationTransformer.php
@@ -24,13 +24,11 @@ class AllocationTransformer extends BaseClientTransformer
      */
     public function transform(Allocation $model)
     {
-        $model->loadMissing('server');
-
         return [
             'ip' => $model->ip,
-            'alias' => $model->ip_alias,
+            'ip_alias' => $model->ip_alias,
             'port' => $model->port,
-            'default' => $model->getRelation('server')->allocation_id === $model->id,
+            'is_default' => $model->server->allocation_id === $model->id,
         ];
     }
 }
diff --git a/app/Transformers/Api/Client/ServerTransformer.php b/app/Transformers/Api/Client/ServerTransformer.php
index 360ba20fa..148fd8990 100644
--- a/app/Transformers/Api/Client/ServerTransformer.php
+++ b/app/Transformers/Api/Client/ServerTransformer.php
@@ -9,6 +9,11 @@ use Pterodactyl\Models\Allocation;
 
 class ServerTransformer extends BaseClientTransformer
 {
+    /**
+     * @var string[]
+     */
+    protected $defaultIncludes = ['allocations'];
+
     /**
      * @var array
      */
@@ -42,14 +47,6 @@ class ServerTransformer extends BaseClientTransformer
                 'port' => $server->node->daemonSFTP,
             ],
             'description' => $server->description,
-            'allocations' => $server->allocations->map(function (Allocation $allocation) use ($server) {
-                return [
-                    'ip' => $allocation->ip,
-                    'ip_alias' => $allocation->ip_alias,
-                    'port' => $allocation->port,
-                    'is_default' => $allocation->id === $server->allocation_id,
-                ];
-            }),
             'limits' => [
                 'memory' => $server->memory,
                 'swap' => $server->swap,
@@ -67,6 +64,22 @@ class ServerTransformer extends BaseClientTransformer
         ];
     }
 
+    /**
+     * Returns the allocations associated with this server.
+     *
+     * @param \Pterodactyl\Models\Server $server
+     * @return \League\Fractal\Resource\Collection
+     * @throws \Pterodactyl\Exceptions\Transformer\InvalidTransformerLevelException
+     */
+    public function includeAllocations(Server $server)
+    {
+        return $this->collection(
+            $server->allocations,
+            $this->makeTransformer(AllocationTransformer::class),
+            Allocation::RESOURCE_NAME
+        );
+    }
+
     /**
      * Returns the egg associated with this server.
      *

From fc9054312d94bb977bf602ee9a8fa1a929673f78 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 19:56:46 -0700
Subject: [PATCH 41/55] Support modifying the primary allocation for a server

---
 .../Api/Client/Servers/NetworkController.php  | 54 ++++++++++--
 .../Network/SetPrimaryAllocationRequest.php   | 28 ++++++
 package.json                                  |  1 +
 resources/scripts/api/http.ts                 |  9 +-
 resources/scripts/api/server/getServer.ts     | 14 ++-
 .../server/network/getServerAllocations.ts    |  9 ++
 .../network/setPrimaryServerAllocation.ts     |  9 ++
 resources/scripts/api/transformers.ts         |  9 ++
 .../scripts/components/elements/Button.tsx    |  1 +
 .../components/elements/PageContentBlock.tsx  |  6 +-
 .../server/network/NetworkContainer.tsx       | 85 +++++++++++++++++++
 .../settings/ServerAllocationsContainer.tsx   | 63 --------------
 .../server/settings/SettingsContainer.tsx     |  6 +-
 resources/scripts/routers/ServerRouter.tsx    |  5 ++
 resources/scripts/state/flashes.ts            |  8 ++
 routes/api-client.php                         |  1 +
 yarn.lock                                     |  9 +-
 17 files changed, 230 insertions(+), 87 deletions(-)
 create mode 100644 app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
 create mode 100644 resources/scripts/api/server/network/getServerAllocations.ts
 create mode 100644 resources/scripts/api/server/network/setPrimaryServerAllocation.ts
 create mode 100644 resources/scripts/api/transformers.ts
 create mode 100644 resources/scripts/components/server/network/NetworkContainer.tsx
 delete mode 100644 resources/scripts/components/server/settings/ServerAllocationsContainer.tsx

diff --git a/app/Http/Controllers/Api/Client/Servers/NetworkController.php b/app/Http/Controllers/Api/Client/Servers/NetworkController.php
index fbea03033..e1421750e 100644
--- a/app/Http/Controllers/Api/Client/Servers/NetworkController.php
+++ b/app/Http/Controllers/Api/Client/Servers/NetworkController.php
@@ -3,10 +3,14 @@
 namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
 
 use Pterodactyl\Models\Server;
+use Pterodactyl\Exceptions\DisplayException;
+use Pterodactyl\Repositories\Eloquent\ServerRepository;
+use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Pterodactyl\Repositories\Eloquent\AllocationRepository;
 use Pterodactyl\Transformers\Api\Client\AllocationTransformer;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Network\GetNetworkRequest;
+use Pterodactyl\Http\Requests\Api\Client\Servers\Network\SetPrimaryAllocationRequest;
 
 class NetworkController extends ClientApiController
 {
@@ -15,16 +19,25 @@ class NetworkController extends ClientApiController
      */
     private $repository;
 
+    /**
+     * @var \Pterodactyl\Repositories\Eloquent\ServerRepository
+     */
+    private $serverRepository;
+
     /**
      * NetworkController constructor.
      *
      * @param \Pterodactyl\Repositories\Eloquent\AllocationRepository $repository
+     * @param \Pterodactyl\Repositories\Eloquent\ServerRepository $serverRepository
      */
-    public function __construct(AllocationRepository $repository)
-    {
+    public function __construct(
+        AllocationRepository $repository,
+        ServerRepository $serverRepository
+    ) {
         parent::__construct();
 
         $this->repository = $repository;
+        $this->serverRepository = $serverRepository;
     }
 
     /**
@@ -37,11 +50,40 @@ class NetworkController extends ClientApiController
      */
     public function index(GetNetworkRequest $request, Server $server): array
     {
-        $allocations = $this->repository->findWhere([
-            ['server_id', '=', $server->id],
-        ]);
+        return $this->fractal->collection($server->allocations)
+            ->transformWith($this->getTransformer(AllocationTransformer::class))
+            ->toArray();
+    }
 
-        return $this->fractal->collection($allocations)
+    /**
+     * Set the primary allocation for a server.
+     *
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Network\SetPrimaryAllocationRequest $request
+     * @param \Pterodactyl\Models\Server $server
+     * @return array
+     *
+     * @throws \Pterodactyl\Exceptions\DisplayException
+     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
+     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
+     */
+    public function storePrimary(SetPrimaryAllocationRequest $request, Server $server): array
+    {
+        try {
+            /** @var \Pterodactyl\Models\Allocation $allocation */
+            $allocation = $this->repository->findFirstWhere([
+                'server_id' => $server->id,
+                'ip' => $request->input('ip'),
+                'port' => $request->input('port'),
+            ]);
+        } catch (ModelNotFoundException $exception) {
+            throw new DisplayException(
+                'The IP and port you selected are not available for this server.'
+            );
+        }
+
+        $this->serverRepository->update($server->id, ['allocation_id' => $allocation->id]);
+
+        return $this->fractal->item($allocation)
             ->transformWith($this->getTransformer(AllocationTransformer::class))
             ->toArray();
     }
diff --git a/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
new file mode 100644
index 000000000..545c9f440
--- /dev/null
+++ b/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Pterodactyl\Http\Requests\Api\Client\Servers\Network;
+
+use Pterodactyl\Models\Permission;
+use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
+
+class SetPrimaryAllocationRequest extends ClientApiRequest
+{
+    /**
+     * @return string
+     */
+    public function permission(): string
+    {
+        return Permission::ACTION_ALLOCIATION_UPDATE;
+    }
+
+    /**
+     * @return array
+     */
+    public function rules(): array
+    {
+        return [
+            'ip' => 'required|string',
+            'port' => 'required|numeric|min:1024|max:65535',
+        ];
+    }
+}
diff --git a/package.json b/package.json
index 910b95576..99bcf0d37 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
         "sockette": "^2.0.6",
         "styled-components": "^5.1.1",
         "styled-components-breakpoint": "^3.0.0-preview.20",
+        "swr": "^0.2.3",
         "uuid": "^3.3.2",
         "xterm": "^3.14.4",
         "xterm-addon-attach": "^0.1.0",
diff --git a/resources/scripts/api/http.ts b/resources/scripts/api/http.ts
index 21111ba9b..9ac1b64f8 100644
--- a/resources/scripts/api/http.ts
+++ b/resources/scripts/api/http.ts
@@ -75,12 +75,15 @@ export interface FractalResponseData {
     object: string;
     attributes: {
         [k: string]: any;
-        relationships?: {
-            [k: string]: FractalResponseData;
-        };
+        relationships?: Record<string, FractalResponseData | FractalResponseList>;
     };
 }
 
+export interface FractalResponseList {
+    object: 'list';
+    data: FractalResponseData[];
+}
+
 export interface PaginatedResult<T> {
     items: T[];
     pagination: PaginationDataSet;
diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index fd4534287..34765337f 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -1,4 +1,5 @@
-import http from '@/api/http';
+import http, { FractalResponseData, FractalResponseList } from '@/api/http';
+import { rawDataToServerAllocation } from '@/api/transformers';
 
 export interface Allocation {
     ip: string;
@@ -35,7 +36,7 @@ export interface Server {
     isInstalling: boolean;
 }
 
-export const rawDataToServerObject = (data: any): Server => ({
+export const rawDataToServerObject = ({ attributes: data }: FractalResponseData): Server => ({
     id: data.identifier,
     uuid: data.uuid,
     name: data.name,
@@ -45,23 +46,18 @@ export const rawDataToServerObject = (data: any): Server => ({
         port: data.sftp_details.port,
     },
     description: data.description ? ((data.description.length > 0) ? data.description : null) : null,
-    allocations: (data.allocations || []).map((datum: any) => ({
-        ip: datum.ip,
-        alias: datum.ip_alias,
-        port: datum.port,
-        isDefault: datum.is_default,
-    })),
     limits: { ...data.limits },
     featureLimits: { ...data.feature_limits },
     isSuspended: data.is_suspended,
     isInstalling: data.is_installing,
+    allocations: ((data.relationships?.allocations as FractalResponseList | undefined)?.data || []).map(rawDataToServerAllocation),
 });
 
 export default (uuid: string): Promise<[ Server, string[] ]> => {
     return new Promise((resolve, reject) => {
         http.get(`/api/client/servers/${uuid}`)
             .then(({ data }) => resolve([
-                rawDataToServerObject(data.attributes),
+                rawDataToServerObject(data),
                 // eslint-disable-next-line camelcase
                 data.meta?.is_server_owner ? [ '*' ] : (data.meta?.user_permissions || []),
             ]))
diff --git a/resources/scripts/api/server/network/getServerAllocations.ts b/resources/scripts/api/server/network/getServerAllocations.ts
new file mode 100644
index 000000000..47ffcec91
--- /dev/null
+++ b/resources/scripts/api/server/network/getServerAllocations.ts
@@ -0,0 +1,9 @@
+import http from '@/api/http';
+import { rawDataToServerAllocation } from '@/api/transformers';
+import { Allocation } from '@/api/server/getServer';
+
+export default async (uuid: string): Promise<Allocation[]> => {
+    const { data } = await http.get(`/api/client/servers/${uuid}/network`);
+
+    return (data.data || []).map(rawDataToServerAllocation);
+};
diff --git a/resources/scripts/api/server/network/setPrimaryServerAllocation.ts b/resources/scripts/api/server/network/setPrimaryServerAllocation.ts
new file mode 100644
index 000000000..f63f2d521
--- /dev/null
+++ b/resources/scripts/api/server/network/setPrimaryServerAllocation.ts
@@ -0,0 +1,9 @@
+import { Allocation } from '@/api/server/getServer';
+import http from '@/api/http';
+import { rawDataToServerAllocation } from '@/api/transformers';
+
+export default async (uuid: string, ip: string, port: number): Promise<Allocation> => {
+    const { data } = await http.put(`/api/client/servers/${uuid}/network/primary`, { ip, port });
+
+    return rawDataToServerAllocation(data);
+};
diff --git a/resources/scripts/api/transformers.ts b/resources/scripts/api/transformers.ts
new file mode 100644
index 000000000..2aad632b2
--- /dev/null
+++ b/resources/scripts/api/transformers.ts
@@ -0,0 +1,9 @@
+import { Allocation } from '@/api/server/getServer';
+import { FractalResponseData } from '@/api/http';
+
+export const rawDataToServerAllocation = (data: FractalResponseData): Allocation => ({
+    ip: data.attributes.ip,
+    alias: data.attributes.ip_alias,
+    port: data.attributes.port,
+    isDefault: data.attributes.is_default,
+});
diff --git a/resources/scripts/components/elements/Button.tsx b/resources/scripts/components/elements/Button.tsx
index b9ac57c4e..300f1a9ea 100644
--- a/resources/scripts/components/elements/Button.tsx
+++ b/resources/scripts/components/elements/Button.tsx
@@ -68,6 +68,7 @@ const ButtonStyle = styled.button<Omit<Props, 'isLoading'>>`
         &:hover:not(:disabled) {
             ${tw`border-neutral-500 text-neutral-100`};
             ${props => props.color === 'red' && tw`bg-red-500 border-red-600 text-red-50`};
+            ${props => props.color === 'primary' && tw`bg-primary-500 border-primary-600 text-primary-50`};
             ${props => props.color === 'green' && tw`bg-green-500 border-green-600 text-green-50`};
         }
     `};
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 9503839ff..f32c42ce2 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
+import FlashMessageRender from '@/components/FlashMessageRender';
 
-const PageContentBlock: React.FC<{ className?: string }> = ({ children, className }) => (
+const PageContentBlock: React.FC<{ showFlashKey?: string; className?: string }> = ({ children, showFlashKey, className }) => (
     <CSSTransition timeout={150} classNames={'fade'} appear in>
         <>
             <ContentContainer css={tw`my-10`} className={className}>
+                {showFlashKey &&
+                <FlashMessageRender byKey={showFlashKey} css={tw`mb-4`}/>
+                }
                 {children}
             </ContentContainer>
             <ContentContainer css={tw`mb-4`}>
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
new file mode 100644
index 000000000..776713ee9
--- /dev/null
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import tw from 'twin.macro';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components/macro';
+import PageContentBlock from '@/components/elements/PageContentBlock';
+import GreyRowBox from '@/components/elements/GreyRowBox';
+import Button from '@/components/elements/Button';
+import Can from '@/components/elements/Can';
+import useServer from '@/plugins/useServer';
+import useSWR from 'swr';
+import getServerAllocations from '@/api/server/network/getServerAllocations';
+import { Allocation } from '@/api/server/getServer';
+import Spinner from '@/components/elements/Spinner';
+import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
+import useFlash from '@/plugins/useFlash';
+import { httpErrorToHuman } from '@/api/http';
+
+const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
+const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
+
+const NetworkContainer = () => {
+    const server = useServer();
+    const { clearFlashes, clearAndAddError } = useFlash();
+    const { data, error, mutate } = useSWR<Allocation[]>(server.uuid, key => getServerAllocations(key), { initialData: server.allocations });
+
+    const setPrimaryAllocation = (ip: string, port: number) => {
+        clearFlashes('server:network');
+
+        mutate(data?.map(a => (a.ip === ip && a.port === port) ? { ...a, isDefault: true } : { ...a, isDefault: false }), false);
+
+        setPrimaryServerAllocation(server.uuid, ip, port)
+            .catch(error => clearAndAddError({ key: 'server:network', message: httpErrorToHuman(error) }));
+    };
+
+    useEffect(() => {
+        if (error) {
+            clearAndAddError({ key: 'server:network', message: error });
+        }
+    }, [ error ]);
+
+    return (
+        <PageContentBlock showFlashKey={'server:network'}>
+            {!data ?
+                <Spinner size={'large'} centered/>
+                :
+                data.map(({ ip, port, alias, isDefault }, index) => (
+                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
+                        <div css={tw`pl-4 pr-6 text-neutral-400`}>
+                            <FontAwesomeIcon icon={faNetworkWired}/>
+                        </div>
+                        <div css={tw`mr-4`}>
+                            <Code>{alias || ip}</Code>
+                            <Label>IP Address</Label>
+                        </div>
+                        <div>
+                            <Code>:{port}</Code>
+                            <Label>Port</Label>
+                        </div>
+                        <div css={tw`flex-1 text-right`}>
+                            {isDefault ?
+                                <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
+                                    Primary
+                                </span>
+                                :
+                                <Can action={'allocations.update'}>
+                                    <Button
+                                        isSecondary
+                                        size={'xsmall'}
+                                        color={'primary'}
+                                        onClick={() => setPrimaryAllocation(ip, port)}
+                                    >
+                                        Make Primary
+                                    </Button>
+                                </Can>
+                            }
+                        </div>
+                    </GreyRowBox>
+                ))
+            }
+        </PageContentBlock>
+    );
+};
+
+export default NetworkContainer;
diff --git a/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx b/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx
deleted file mode 100644
index 3e76d5d9d..000000000
--- a/resources/scripts/components/server/settings/ServerAllocationsContainer.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import TitledGreyBox from '@/components/elements/TitledGreyBox';
-import { ServerContext } from '@/state/server';
-import tw from 'twin.macro';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
-import styled from 'styled-components/macro';
-
-const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
-const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
-
-const Row = styled.div`
-    ${tw`flex items-center py-2 pl-4 pr-5 border-l-4 border-transparent transition-colors duration-150`};
-    
-    & svg {
-        ${tw`transition-colors duration-150`};
-    }
-    
-    &:hover {
-        ${tw`border-cyan-400`};
-        
-        svg {
-            ${tw`text-neutral-100`};
-        }
-        
-        ${Label} {
-            ${tw`text-neutral-200`};
-        }
-    }
-`;
-
-export default () => {
-    const allocations = ServerContext.useStoreState(state => state.server.data!.allocations);
-
-    return (
-        <TitledGreyBox title={'Allocated Ports'}>
-            {allocations.map(({ ip, port, alias, isDefault }, index) => (
-                <Row key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
-                    <div css={tw`mr-4 text-neutral-400`}>
-                        <FontAwesomeIcon icon={faNetworkWired}/>
-                    </div>
-                    <div css={tw`mr-4`}>
-                        <Code>{alias || ip}</Code>
-                        <Label>IP Address</Label>
-                    </div>
-                    <div>
-                        <Code>:{port}</Code>
-                        <Label>Port</Label>
-                    </div>
-                    <div css={tw`flex-1 text-right`}>
-                        {isDefault ?
-                            <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
-                                Default
-                            </span>
-                            :
-                            null
-                        }
-                    </div>
-                </Row>
-            ))}
-        </TitledGreyBox>
-    );
-};
diff --git a/resources/scripts/components/server/settings/SettingsContainer.tsx b/resources/scripts/components/server/settings/SettingsContainer.tsx
index 6f632ad19..e060fedf8 100644
--- a/resources/scripts/components/server/settings/SettingsContainer.tsx
+++ b/resources/scripts/components/server/settings/SettingsContainer.tsx
@@ -13,7 +13,6 @@ import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import { LinkButton } from '@/components/elements/Button';
-import ServerAllocationsContainer from '@/components/server/settings/ServerAllocationsContainer';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@@ -61,6 +60,8 @@ export default () => {
                             </div>
                         </TitledGreyBox>
                     </Can>
+                </div>
+                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
                     <Can action={'settings.rename'}>
                         <div css={tw`mb-6 md:mb-10`}>
                             <RenameServerBox/>
@@ -70,9 +71,6 @@ export default () => {
                         <ReinstallServerBox/>
                     </Can>
                 </div>
-                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
-                    <ServerAllocationsContainer/>
-                </div>
             </div>
         </PageContentBlock>
     );
diff --git a/resources/scripts/routers/ServerRouter.tsx b/resources/scripts/routers/ServerRouter.tsx
index baa9723a4..9df270eaa 100644
--- a/resources/scripts/routers/ServerRouter.tsx
+++ b/resources/scripts/routers/ServerRouter.tsx
@@ -24,6 +24,7 @@ import { useStoreState } from 'easy-peasy';
 import useServer from '@/plugins/useServer';
 import ScreenBlock from '@/components/screens/ScreenBlock';
 import SubNavigation from '@/components/elements/SubNavigation';
+import NetworkContainer from '@/components/server/network/NetworkContainer';
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
     const { rootAdmin } = useStoreState(state => state.user.data!);
@@ -88,6 +89,9 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                 <Can action={'backup.*'}>
                                     <NavLink to={`${match.url}/backups`}>Backups</NavLink>
                                 </Can>
+                                <Can action={'allocations.*'}>
+                                    <NavLink to={`${match.url}/network`}>Network</NavLink>
+                                </Can>
                                 <Can action={[ 'settings.*', 'file.sftp' ]} matchAny>
                                     <NavLink to={`${match.url}/settings`}>Settings</NavLink>
                                 </Can>
@@ -125,6 +129,7 @@ const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>)
                                     />
                                     <Route path={`${match.path}/users`} component={UsersContainer} exact/>
                                     <Route path={`${match.path}/backups`} component={BackupContainer} exact/>
+                                    <Route path={`${match.path}/network`} component={NetworkContainer} exact/>
                                     <Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
                                     <Route path={'*'} component={NotFound}/>
                                 </Switch>
diff --git a/resources/scripts/state/flashes.ts b/resources/scripts/state/flashes.ts
index 09b641c10..96b30824f 100644
--- a/resources/scripts/state/flashes.ts
+++ b/resources/scripts/state/flashes.ts
@@ -5,6 +5,7 @@ export interface FlashStore {
     items: FlashMessage[];
     addFlash: Action<FlashStore, FlashMessage>;
     addError: Action<FlashStore, { message: string; key?: string }>;
+    clearAndAddError: Action<FlashStore, { message: string, key: string }>;
     clearFlashes: Action<FlashStore, string | void>;
 }
 
@@ -18,12 +19,19 @@ export interface FlashMessage {
 
 const flashes: FlashStore = {
     items: [],
+
     addFlash: action((state, payload) => {
         state.items.push(payload);
     }),
+
     addError: action((state, payload) => {
         state.items.push({ type: 'error', title: 'Error', ...payload });
     }),
+
+    clearAndAddError: action((state, payload) => {
+        state.items = [ { type: 'error', title: 'Error', ...payload } ];
+    }),
+
     clearFlashes: action((state, payload) => {
         state.items = payload ? state.items.filter(flashes => flashes.key !== payload) : [];
     }),
diff --git a/routes/api-client.php b/routes/api-client.php
index 9f6b2c075..9bea11952 100644
--- a/routes/api-client.php
+++ b/routes/api-client.php
@@ -76,6 +76,7 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
 
     Route::group(['prefix' => '/network'], function () {
         Route::get('/', 'Servers\NetworkController@index');
+        Route::put('/primary', 'Servers\NetworkController@storePrimary');
     });
 
     Route::group(['prefix' => '/users'], function () {
diff --git a/yarn.lock b/yarn.lock
index 3baad2306..62c1da6fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3113,7 +3113,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-fast-deep-equal@^2.0.1:
+fast-deep-equal@2.0.1, fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
@@ -6534,6 +6534,13 @@ svg-url-loader@^6.0.0:
     file-loader "~6.0.0"
     loader-utils "~2.0.0"
 
+swr@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.2.3.tgz#e0fb260d27f12fafa2388312083368f45127480d"
+  integrity sha512-JhuuD5ojqgjAQpZAhoPBd8Di0Mr1+ykByVKuRJdtKaxkUX/y8kMACWKkLgLQc8pcDOKEAnbIreNjU7HfqI9nHQ==
+  dependencies:
+    fast-deep-equal "2.0.1"
+
 symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"

From 9c3b9a0faef063db6ea343b96b31c16e5763c9a8 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 20:00:05 -0700
Subject: [PATCH 42/55] Fix error handling and simplify showing http errors

---
 .../components/server/network/NetworkContainer.tsx   | 12 +++++++-----
 resources/scripts/state/flashes.ts                   |  7 ++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index 776713ee9..4d83e2185 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -14,28 +14,30 @@ import { Allocation } from '@/api/server/getServer';
 import Spinner from '@/components/elements/Spinner';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import useFlash from '@/plugins/useFlash';
-import { httpErrorToHuman } from '@/api/http';
 
 const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 const NetworkContainer = () => {
     const server = useServer();
-    const { clearFlashes, clearAndAddError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { data, error, mutate } = useSWR<Allocation[]>(server.uuid, key => getServerAllocations(key), { initialData: server.allocations });
 
     const setPrimaryAllocation = (ip: string, port: number) => {
         clearFlashes('server:network');
 
-        mutate(data?.map(a => (a.ip === ip && a.port === port) ? { ...a, isDefault: true } : { ...a, isDefault: false }), false);
+        mutate(data?.map(a => (a.ip === ip && a.port === port) ? { ...a, isDefault: true } : {
+            ...a,
+            isDefault: false,
+        }), false);
 
         setPrimaryServerAllocation(server.uuid, ip, port)
-            .catch(error => clearAndAddError({ key: 'server:network', message: httpErrorToHuman(error) }));
+            .catch(error => clearAndAddHttpError({ key: 'server:network', error }));
     };
 
     useEffect(() => {
         if (error) {
-            clearAndAddError({ key: 'server:network', message: error });
+            clearAndAddHttpError({ key: 'server:network', error });
         }
     }, [ error ]);
 
diff --git a/resources/scripts/state/flashes.ts b/resources/scripts/state/flashes.ts
index 96b30824f..8e4fb258e 100644
--- a/resources/scripts/state/flashes.ts
+++ b/resources/scripts/state/flashes.ts
@@ -1,11 +1,12 @@
 import { Action, action } from 'easy-peasy';
 import { FlashMessageType } from '@/components/MessageBox';
+import { httpErrorToHuman } from '@/api/http';
 
 export interface FlashStore {
     items: FlashMessage[];
     addFlash: Action<FlashStore, FlashMessage>;
     addError: Action<FlashStore, { message: string; key?: string }>;
-    clearAndAddError: Action<FlashStore, { message: string, key: string }>;
+    clearAndAddHttpError: Action<FlashStore, { error: any, key: string }>;
     clearFlashes: Action<FlashStore, string | void>;
 }
 
@@ -28,8 +29,8 @@ const flashes: FlashStore = {
         state.items.push({ type: 'error', title: 'Error', ...payload });
     }),
 
-    clearAndAddError: action((state, payload) => {
-        state.items = [ { type: 'error', title: 'Error', ...payload } ];
+    clearAndAddHttpError: action((state, { key, error }) => {
+        state.items = [ { type: 'error', title: 'Error', key, message: httpErrorToHuman(error) } ];
     }),
 
     clearFlashes: action((state, payload) => {

From 2278927fb6e712b74840269d2e927e0d9225b6a9 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 20:36:08 -0700
Subject: [PATCH 43/55] Update allocations to support ids; protect endpoints;
 support notes

---
 ...er.php => NetworkAllocationController.php} | 73 ++++++++++++++-----
 .../Server/AllocationBelongsToServer.php      | 33 +++++++++
 .../Client/SubstituteClientApiBindings.php    | 14 +---
 .../Network/DeleteAllocationRequest.php       | 17 +++++
 .../Network/SetPrimaryAllocationRequest.php   | 18 +----
 .../Network/UpdateAllocationRequest.php       | 28 +++++++
 app/Models/Allocation.php                     |  2 +
 app/Models/Permission.php                     |  8 +-
 .../Api/Application/AllocationTransformer.php |  1 +
 .../Api/Client/AllocationTransformer.php      |  2 +
 ...01845_add_notes_column_for_allocations.php | 32 ++++++++
 resources/scripts/api/server/getServer.ts     |  2 +
 .../server/network/deleteServerAllocation.ts  |  4 +
 .../server/network/getServerAllocations.ts    |  2 +-
 .../network/setPrimaryServerAllocation.ts     |  4 +-
 .../network/setServerAllocationNotes.ts       |  9 +++
 resources/scripts/api/transformers.ts         |  2 +
 .../server/network/NetworkContainer.tsx       | 19 ++---
 routes/api-client.php                         |  9 ++-
 19 files changed, 217 insertions(+), 62 deletions(-)
 rename app/Http/Controllers/Api/Client/Servers/{NetworkController.php => NetworkAllocationController.php} (54%)
 create mode 100644 app/Http/Middleware/Api/Client/Server/AllocationBelongsToServer.php
 create mode 100644 app/Http/Requests/Api/Client/Servers/Network/DeleteAllocationRequest.php
 create mode 100644 app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
 create mode 100644 database/migrations/2020_07_09_201845_add_notes_column_for_allocations.php
 create mode 100644 resources/scripts/api/server/network/deleteServerAllocation.ts
 create mode 100644 resources/scripts/api/server/network/setServerAllocationNotes.ts

diff --git a/app/Http/Controllers/Api/Client/Servers/NetworkController.php b/app/Http/Controllers/Api/Client/Servers/NetworkAllocationController.php
similarity index 54%
rename from app/Http/Controllers/Api/Client/Servers/NetworkController.php
rename to app/Http/Controllers/Api/Client/Servers/NetworkAllocationController.php
index e1421750e..162d815d9 100644
--- a/app/Http/Controllers/Api/Client/Servers/NetworkController.php
+++ b/app/Http/Controllers/Api/Client/Servers/NetworkAllocationController.php
@@ -3,16 +3,19 @@
 namespace Pterodactyl\Http\Controllers\Api\Client\Servers;
 
 use Pterodactyl\Models\Server;
+use Illuminate\Http\JsonResponse;
+use Pterodactyl\Models\Allocation;
 use Pterodactyl\Exceptions\DisplayException;
 use Pterodactyl\Repositories\Eloquent\ServerRepository;
-use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Pterodactyl\Repositories\Eloquent\AllocationRepository;
 use Pterodactyl\Transformers\Api\Client\AllocationTransformer;
 use Pterodactyl\Http\Controllers\Api\Client\ClientApiController;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Network\GetNetworkRequest;
+use Pterodactyl\Http\Requests\Api\Client\Servers\Network\DeleteAllocationRequest;
+use Pterodactyl\Http\Requests\Api\Client\Servers\Network\UpdateAllocationRequest;
 use Pterodactyl\Http\Requests\Api\Client\Servers\Network\SetPrimaryAllocationRequest;
 
-class NetworkController extends ClientApiController
+class NetworkAllocationController extends ClientApiController
 {
     /**
      * @var \Pterodactyl\Repositories\Eloquent\AllocationRepository
@@ -58,33 +61,67 @@ class NetworkController extends ClientApiController
     /**
      * Set the primary allocation for a server.
      *
-     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Network\SetPrimaryAllocationRequest $request
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Network\UpdateAllocationRequest $request
      * @param \Pterodactyl\Models\Server $server
+     * @param \Pterodactyl\Models\Allocation $allocation
      * @return array
      *
-     * @throws \Pterodactyl\Exceptions\DisplayException
-     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      * @throws \Pterodactyl\Exceptions\Model\DataValidationException
+     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      */
-    public function storePrimary(SetPrimaryAllocationRequest $request, Server $server): array
+    public function update(UpdateAllocationRequest $request, Server $server, Allocation $allocation): array
     {
-        try {
-            /** @var \Pterodactyl\Models\Allocation $allocation */
-            $allocation = $this->repository->findFirstWhere([
-                'server_id' => $server->id,
-                'ip' => $request->input('ip'),
-                'port' => $request->input('port'),
-            ]);
-        } catch (ModelNotFoundException $exception) {
-            throw new DisplayException(
-                'The IP and port you selected are not available for this server.'
-            );
-        }
+        $allocation = $this->repository->update($allocation->id, [
+            'notes' => $request->input('notes'),
+        ]);
 
+        return $this->fractal->item($allocation)
+            ->transformWith($this->getTransformer(AllocationTransformer::class))
+            ->toArray();
+    }
+
+    /**
+     * Set the primary allocation for a server.
+     *
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Network\SetPrimaryAllocationRequest $request
+     * @param \Pterodactyl\Models\Server $server
+     * @param \Pterodactyl\Models\Allocation $allocation
+     * @return array
+     *
+     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
+     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
+     */
+    public function setPrimary(SetPrimaryAllocationRequest $request, Server $server, Allocation $allocation): array
+    {
         $this->serverRepository->update($server->id, ['allocation_id' => $allocation->id]);
 
         return $this->fractal->item($allocation)
             ->transformWith($this->getTransformer(AllocationTransformer::class))
             ->toArray();
     }
+
+    /**
+     * Delete an allocation from a server.
+     *
+     * @param \Pterodactyl\Http\Requests\Api\Client\Servers\Network\DeleteAllocationRequest $request
+     * @param \Pterodactyl\Models\Server $server
+     * @param \Pterodactyl\Models\Allocation $allocation
+     * @return \Illuminate\Http\JsonResponse
+     *
+     * @throws \Pterodactyl\Exceptions\DisplayException
+     * @throws \Pterodactyl\Exceptions\Model\DataValidationException
+     * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
+     */
+    public function delete(DeleteAllocationRequest $request, Server $server, Allocation $allocation)
+    {
+        if ($allocation->id === $server->allocation_id) {
+            throw new DisplayException(
+                'Cannot delete the primary allocation for a server.'
+            );
+        }
+
+        $this->repository->update($allocation->id, ['server_id' => null, 'notes' => null]);
+
+        return new JsonResponse([], JsonResponse::HTTP_NO_CONTENT);
+    }
 }
diff --git a/app/Http/Middleware/Api/Client/Server/AllocationBelongsToServer.php b/app/Http/Middleware/Api/Client/Server/AllocationBelongsToServer.php
new file mode 100644
index 000000000..d027d563c
--- /dev/null
+++ b/app/Http/Middleware/Api/Client/Server/AllocationBelongsToServer.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Pterodactyl\Http\Middleware\Api\Client\Server;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+
+class AllocationBelongsToServer
+{
+    /**
+     * Ensure that the allocation found in the URL belongs to the server being queried.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @param \Closure $next
+     * @return mixed
+     *
+     * @throws \Symfony\Component\HttpKernel\Exception\NotFoundHttpException
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        /** @var \Pterodactyl\Models\Server $server */
+        $server = $request->route()->parameter('server');
+        /** @var \Pterodactyl\Models\Allocation|null $allocation */
+        $allocation = $request->route()->parameter('allocation');
+
+        if ($allocation && $allocation->server_id !== $server->id) {
+            throw new NotFoundHttpException;
+        }
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Middleware/Api/Client/SubstituteClientApiBindings.php b/app/Http/Middleware/Api/Client/SubstituteClientApiBindings.php
index 81ed6b401..0bd40eee5 100644
--- a/app/Http/Middleware/Api/Client/SubstituteClientApiBindings.php
+++ b/app/Http/Middleware/Api/Client/SubstituteClientApiBindings.php
@@ -4,12 +4,12 @@ namespace Pterodactyl\Http\Middleware\Api\Client;
 
 use Closure;
 use Pterodactyl\Models\Backup;
+use Pterodactyl\Models\Database;
 use Illuminate\Container\Container;
 use Pterodactyl\Contracts\Extensions\HashidsInterface;
 use Pterodactyl\Http\Middleware\Api\ApiSubstituteBindings;
 use Pterodactyl\Exceptions\Repository\RecordNotFoundException;
 use Pterodactyl\Contracts\Repository\ServerRepositoryInterface;
-use Pterodactyl\Contracts\Repository\DatabaseRepositoryInterface;
 
 class SubstituteClientApiBindings extends ApiSubstituteBindings
 {
@@ -43,17 +43,9 @@ class SubstituteClientApiBindings extends ApiSubstituteBindings
         });
 
         $this->router->bind('database', function ($value) use ($request) {
-            try {
-                $id = Container::getInstance()->make(HashidsInterface::class)->decodeFirst($value);
+            $id = Container::getInstance()->make(HashidsInterface::class)->decodeFirst($value);
 
-                return Container::getInstance()->make(DatabaseRepositoryInterface::class)->findFirstWhere([
-                    ['id', '=', $id],
-                ]);
-            } catch (RecordNotFoundException $exception) {
-                $request->attributes->set('is_missing_model', true);
-
-                return null;
-            }
+            return Database::query()->where('id', $id)->firstOrFail();
         });
 
         $this->router->model('backup', Backup::class, function ($value) {
diff --git a/app/Http/Requests/Api/Client/Servers/Network/DeleteAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/DeleteAllocationRequest.php
new file mode 100644
index 000000000..9c0d911f0
--- /dev/null
+++ b/app/Http/Requests/Api/Client/Servers/Network/DeleteAllocationRequest.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace Pterodactyl\Http\Requests\Api\Client\Servers\Network;
+
+use Pterodactyl\Models\Permission;
+use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
+
+class DeleteAllocationRequest extends ClientApiRequest
+{
+    /**
+     * @return string
+     */
+    public function permission(): string
+    {
+        return Permission::ACTION_ALLOCATION_DELETE;
+    }
+}
diff --git a/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
index 545c9f440..f698f18ee 100644
--- a/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
+++ b/app/Http/Requests/Api/Client/Servers/Network/SetPrimaryAllocationRequest.php
@@ -2,27 +2,13 @@
 
 namespace Pterodactyl\Http\Requests\Api\Client\Servers\Network;
 
-use Pterodactyl\Models\Permission;
-use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
-
-class SetPrimaryAllocationRequest extends ClientApiRequest
+class SetPrimaryAllocationRequest extends UpdateAllocationRequest
 {
-    /**
-     * @return string
-     */
-    public function permission(): string
-    {
-        return Permission::ACTION_ALLOCIATION_UPDATE;
-    }
-
     /**
      * @return array
      */
     public function rules(): array
     {
-        return [
-            'ip' => 'required|string',
-            'port' => 'required|numeric|min:1024|max:65535',
-        ];
+        return [];
     }
 }
diff --git a/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
new file mode 100644
index 000000000..1424cad14
--- /dev/null
+++ b/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Pterodactyl\Http\Requests\Api\Client\Servers\Network;
+
+use Pterodactyl\Models\Allocation;
+use Pterodactyl\Models\Permission;
+use Pterodactyl\Http\Requests\Api\Client\ClientApiRequest;
+
+class UpdateAllocationRequest extends ClientApiRequest
+{
+    /**
+     * @return string
+     */
+    public function permission(): string
+    {
+        return Permission::ACTION_ALLOCATION_UPDATE;
+    }
+
+    /**
+     * @return array
+     */
+    public function rules(): array
+    {
+        return [
+            'notes' => Allocation::$validationRules['notes'],
+        ];
+    }
+}
diff --git a/app/Models/Allocation.php b/app/Models/Allocation.php
index 5f2435624..81e596523 100644
--- a/app/Models/Allocation.php
+++ b/app/Models/Allocation.php
@@ -9,6 +9,7 @@ namespace Pterodactyl\Models;
  * @property string|null $ip_alias
  * @property int $port
  * @property int|null $server_id
+ * @property string|null $notes
  * @property \Carbon\Carbon|null $created_at
  * @property \Carbon\Carbon|null $updated_at
  *
@@ -60,6 +61,7 @@ class Allocation extends Model
         'port' => 'required|numeric|between:1024,65553',
         'ip_alias' => 'nullable|string',
         'server_id' => 'nullable|exists:servers,id',
+        'notes' => 'nullable|string|max:256',
     ];
 
     /**
diff --git a/app/Models/Permission.php b/app/Models/Permission.php
index 772ae5e49..af3dc5cf9 100644
--- a/app/Models/Permission.php
+++ b/app/Models/Permission.php
@@ -44,7 +44,9 @@ class Permission extends Model
     const ACTION_BACKUP_DOWNLOAD = 'backup.download';
 
     const ACTION_ALLOCATION_READ = 'allocation.read';
-    const ACTION_ALLOCIATION_UPDATE = 'allocation.update';
+    const ACTION_ALLOCATION_CREATE = 'allocation.create';
+    const ACTION_ALLOCATION_UPDATE = 'allocation.update';
+    const ACTION_ALLOCATION_DELETE = 'allocation.delete';
 
     const ACTION_FILE_READ = 'file.read';
     const ACTION_FILE_CREATE = 'file.create';
@@ -157,7 +159,9 @@ class Permission extends Model
             'description' => 'Permissions that control a user\'s ability to modify the port allocations for this server.',
             'keys' => [
                 'read' => 'Allows a user to view the allocations assigned to this server.',
-                'update' => 'Allows a user to modify the allocations assigned to this server.',
+                'create' => 'Allows a user to assign additional allocations to the server.',
+                'update' => 'Allows a user to change the primary server allocation and attach notes to each allocation.',
+                'delete' => 'Allows a user to delete an allocation from the server.',
             ],
         ],
 
diff --git a/app/Transformers/Api/Application/AllocationTransformer.php b/app/Transformers/Api/Application/AllocationTransformer.php
index e4fa1bb57..d0c71e634 100644
--- a/app/Transformers/Api/Application/AllocationTransformer.php
+++ b/app/Transformers/Api/Application/AllocationTransformer.php
@@ -39,6 +39,7 @@ class AllocationTransformer extends BaseTransformer
             'ip' => $allocation->ip,
             'alias' => $allocation->ip_alias,
             'port' => $allocation->port,
+            'notes' => $allocation->notes,
             'assigned' => ! is_null($allocation->server_id),
         ];
     }
diff --git a/app/Transformers/Api/Client/AllocationTransformer.php b/app/Transformers/Api/Client/AllocationTransformer.php
index 8f83aac7e..57f72eaf3 100644
--- a/app/Transformers/Api/Client/AllocationTransformer.php
+++ b/app/Transformers/Api/Client/AllocationTransformer.php
@@ -25,9 +25,11 @@ class AllocationTransformer extends BaseClientTransformer
     public function transform(Allocation $model)
     {
         return [
+            'id' => $model->id,
             'ip' => $model->ip,
             'ip_alias' => $model->ip_alias,
             'port' => $model->port,
+            'notes' => $model->notes,
             'is_default' => $model->server->allocation_id === $model->id,
         ];
     }
diff --git a/database/migrations/2020_07_09_201845_add_notes_column_for_allocations.php b/database/migrations/2020_07_09_201845_add_notes_column_for_allocations.php
new file mode 100644
index 000000000..ed71f9c24
--- /dev/null
+++ b/database/migrations/2020_07_09_201845_add_notes_column_for_allocations.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddNotesColumnForAllocations extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('allocations', function (Blueprint $table) {
+            $table->string('notes')->nullable()->after('server_id');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('allocations', function (Blueprint $table) {
+            $table->dropColumn('notes');
+        });
+    }
+}
diff --git a/resources/scripts/api/server/getServer.ts b/resources/scripts/api/server/getServer.ts
index 34765337f..7072033f1 100644
--- a/resources/scripts/api/server/getServer.ts
+++ b/resources/scripts/api/server/getServer.ts
@@ -2,9 +2,11 @@ import http, { FractalResponseData, FractalResponseList } from '@/api/http';
 import { rawDataToServerAllocation } from '@/api/transformers';
 
 export interface Allocation {
+    id: number;
     ip: string;
     alias: string | null;
     port: number;
+    notes: string | null;
     isDefault: boolean;
 }
 
diff --git a/resources/scripts/api/server/network/deleteServerAllocation.ts b/resources/scripts/api/server/network/deleteServerAllocation.ts
new file mode 100644
index 000000000..92fd4b30a
--- /dev/null
+++ b/resources/scripts/api/server/network/deleteServerAllocation.ts
@@ -0,0 +1,4 @@
+import { Allocation } from '@/api/server/getServer';
+import http from '@/api/http';
+
+export default async (uuid: string, id: number): Promise<Allocation> => await http.delete(`/api/client/servers/${uuid}/network/allocations/${id}`);
diff --git a/resources/scripts/api/server/network/getServerAllocations.ts b/resources/scripts/api/server/network/getServerAllocations.ts
index 47ffcec91..7309bd266 100644
--- a/resources/scripts/api/server/network/getServerAllocations.ts
+++ b/resources/scripts/api/server/network/getServerAllocations.ts
@@ -3,7 +3,7 @@ import { rawDataToServerAllocation } from '@/api/transformers';
 import { Allocation } from '@/api/server/getServer';
 
 export default async (uuid: string): Promise<Allocation[]> => {
-    const { data } = await http.get(`/api/client/servers/${uuid}/network`);
+    const { data } = await http.get(`/api/client/servers/${uuid}/network/allocations`);
 
     return (data.data || []).map(rawDataToServerAllocation);
 };
diff --git a/resources/scripts/api/server/network/setPrimaryServerAllocation.ts b/resources/scripts/api/server/network/setPrimaryServerAllocation.ts
index f63f2d521..27c09b722 100644
--- a/resources/scripts/api/server/network/setPrimaryServerAllocation.ts
+++ b/resources/scripts/api/server/network/setPrimaryServerAllocation.ts
@@ -2,8 +2,8 @@ import { Allocation } from '@/api/server/getServer';
 import http from '@/api/http';
 import { rawDataToServerAllocation } from '@/api/transformers';
 
-export default async (uuid: string, ip: string, port: number): Promise<Allocation> => {
-    const { data } = await http.put(`/api/client/servers/${uuid}/network/primary`, { ip, port });
+export default async (uuid: string, id: number): Promise<Allocation> => {
+    const { data } = await http.post(`/api/client/servers/${uuid}/network/allocations/${id}/primary`);
 
     return rawDataToServerAllocation(data);
 };
diff --git a/resources/scripts/api/server/network/setServerAllocationNotes.ts b/resources/scripts/api/server/network/setServerAllocationNotes.ts
new file mode 100644
index 000000000..4531dc751
--- /dev/null
+++ b/resources/scripts/api/server/network/setServerAllocationNotes.ts
@@ -0,0 +1,9 @@
+import { Allocation } from '@/api/server/getServer';
+import http from '@/api/http';
+import { rawDataToServerAllocation } from '@/api/transformers';
+
+export default async (uuid: string, id: number, notes: string | null): Promise<Allocation> => {
+    const { data } = await http.post(`/api/client/servers/${uuid}/network/allocations/${id}`, { notes });
+
+    return rawDataToServerAllocation(data);
+};
diff --git a/resources/scripts/api/transformers.ts b/resources/scripts/api/transformers.ts
index 2aad632b2..eb54b62fe 100644
--- a/resources/scripts/api/transformers.ts
+++ b/resources/scripts/api/transformers.ts
@@ -2,8 +2,10 @@ import { Allocation } from '@/api/server/getServer';
 import { FractalResponseData } from '@/api/http';
 
 export const rawDataToServerAllocation = (data: FractalResponseData): Allocation => ({
+    id: data.attributes.id,
     ip: data.attributes.ip,
     alias: data.attributes.ip_alias,
     port: data.attributes.port,
+    notes: data.attributes.notes,
     isDefault: data.attributes.is_default,
 });
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index 4d83e2185..dcf92ef88 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -23,16 +23,17 @@ const NetworkContainer = () => {
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { data, error, mutate } = useSWR<Allocation[]>(server.uuid, key => getServerAllocations(key), { initialData: server.allocations });
 
-    const setPrimaryAllocation = (ip: string, port: number) => {
+    const setPrimaryAllocation = (id: number) => {
         clearFlashes('server:network');
 
-        mutate(data?.map(a => (a.ip === ip && a.port === port) ? { ...a, isDefault: true } : {
-            ...a,
-            isDefault: false,
-        }), false);
+        const initial = data;
+        mutate(data?.map(a => a.id === id ? { ...a, isDefault: true } : { ...a, isDefault: false }), false);
 
-        setPrimaryServerAllocation(server.uuid, ip, port)
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }));
+        setPrimaryServerAllocation(server.uuid, id)
+            .catch(error => {
+                clearAndAddHttpError({ key: 'server:network', error });
+                mutate(initial, false);
+            });
     };
 
     useEffect(() => {
@@ -46,7 +47,7 @@ const NetworkContainer = () => {
             {!data ?
                 <Spinner size={'large'} centered/>
                 :
-                data.map(({ ip, port, alias, isDefault }, index) => (
+                data.map(({ id, ip, port, alias, isDefault }, index) => (
                     <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
                         <div css={tw`pl-4 pr-6 text-neutral-400`}>
                             <FontAwesomeIcon icon={faNetworkWired}/>
@@ -70,7 +71,7 @@ const NetworkContainer = () => {
                                         isSecondary
                                         size={'xsmall'}
                                         color={'primary'}
-                                        onClick={() => setPrimaryAllocation(ip, port)}
+                                        onClick={() => setPrimaryAllocation(id)}
                                     >
                                         Make Primary
                                     </Button>
diff --git a/routes/api-client.php b/routes/api-client.php
index 9bea11952..31d6d104e 100644
--- a/routes/api-client.php
+++ b/routes/api-client.php
@@ -2,6 +2,7 @@
 
 use Illuminate\Support\Facades\Route;
 use Pterodactyl\Http\Middleware\Api\Client\Server\AuthenticateServerAccess;
+use Pterodactyl\Http\Middleware\Api\Client\Server\AllocationBelongsToServer;
 
 /*
 |--------------------------------------------------------------------------
@@ -74,9 +75,11 @@ Route::group(['prefix' => '/servers/{server}', 'middleware' => [AuthenticateServ
         Route::delete('/{schedule}/tasks/{task}', 'Servers\ScheduleTaskController@delete');
     });
 
-    Route::group(['prefix' => '/network'], function () {
-        Route::get('/', 'Servers\NetworkController@index');
-        Route::put('/primary', 'Servers\NetworkController@storePrimary');
+    Route::group(['prefix' => '/network', 'middleware' => [AllocationBelongsToServer::class]], function () {
+        Route::get('/allocations', 'Servers\NetworkAllocationController@index');
+        Route::post('/allocations/{allocation}', 'Servers\NetworkAllocationController@update');
+        Route::post('/allocations/{allocation}/primary', 'Servers\NetworkAllocationController@setPrimary');
+        Route::delete('/allocations/{allocation}', 'Servers\NetworkAllocationController@delete');
     });
 
     Route::group(['prefix' => '/users'], function () {

From 82d7fa1c5393afcc9a1937f7273183e1d7098ddd Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 21:00:03 -0700
Subject: [PATCH 44/55] Support setting notes on allocations; closes #561

---
 resources/scripts/api/getServers.ts           |  2 +-
 .../scripts/components/elements/Input.tsx     |  7 ++--
 .../server/network/NetworkContainer.tsx       | 41 +++++++++++++++----
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/resources/scripts/api/getServers.ts b/resources/scripts/api/getServers.ts
index 1be6fe9ff..8dd8ed22a 100644
--- a/resources/scripts/api/getServers.ts
+++ b/resources/scripts/api/getServers.ts
@@ -11,7 +11,7 @@ export default (query?: string, includeAdmin?: boolean): Promise<PaginatedResult
             },
         })
             .then(({ data }) => resolve({
-                items: (data.data || []).map((datum: any) => rawDataToServerObject(datum.attributes)),
+                items: (data.data || []).map((datum: any) => rawDataToServerObject(datum)),
                 pagination: getPaginationSet(data.meta.pagination),
             }))
             .catch(reject);
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index c548aad3e..e29eaf6e9 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -36,7 +36,8 @@ const checkboxStyle = css<Props>`
 
 const inputStyle = css<Props>`
     // Reset to normal styling.
-    ${tw`appearance-none w-full min-w-0`};
+    resize: none;
+    ${tw`appearance-none outline-none w-full min-w-0`};
     ${tw`p-3 border rounded text-sm transition-all duration-150`};
     ${tw`bg-neutral-600 border-neutral-500 hover:border-neutral-400 text-neutral-200 shadow-none`};
     
@@ -49,8 +50,8 @@ const inputStyle = css<Props>`
         ${tw`shadow-none`};
     }
     
-    &:focus {
-        ${tw`shadow-md border-neutral-400`};
+    &:not(:disabled):not(:read-only):focus {
+        ${tw`shadow-md border-primary-400`};
     }
 
     &:disabled {
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index dcf92ef88..75ff4d418 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import tw from 'twin.macro';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
@@ -14,14 +14,19 @@ import { Allocation } from '@/api/server/getServer';
 import Spinner from '@/components/elements/Spinner';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import useFlash from '@/plugins/useFlash';
+import { Textarea } from '@/components/elements/Input';
+import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
+import { debounce } from 'debounce';
+import InputSpinner from '@/components/elements/InputSpinner';
 
 const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 const NetworkContainer = () => {
-    const server = useServer();
+    const { uuid, allocations } = useServer();
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const { data, error, mutate } = useSWR<Allocation[]>(server.uuid, key => getServerAllocations(key), { initialData: server.allocations });
+    const [ loading, setLoading ] = useState<false | number>(false);
+    const { data, error, mutate } = useSWR<Allocation[]>(uuid, key => getServerAllocations(key), { initialData: allocations });
 
     const setPrimaryAllocation = (id: number) => {
         clearFlashes('server:network');
@@ -29,13 +34,25 @@ const NetworkContainer = () => {
         const initial = data;
         mutate(data?.map(a => a.id === id ? { ...a, isDefault: true } : { ...a, isDefault: false }), false);
 
-        setPrimaryServerAllocation(server.uuid, id)
+        setPrimaryServerAllocation(uuid, id)
             .catch(error => {
                 clearAndAddHttpError({ key: 'server:network', error });
                 mutate(initial, false);
             });
     };
 
+    const setAllocationNotes = debounce((id: number, notes: string) => {
+        setLoading(id);
+        clearFlashes('server:network');
+
+        setServerAllocationNotes(uuid, id, notes)
+            .then(() => mutate(data?.map(a => a.id === id ? { ...a, notes } : a), false))
+            .catch(error => {
+                clearAndAddHttpError({ key: 'server:network', error });
+            })
+            .then(() => setLoading(false));
+    }, 750);
+
     useEffect(() => {
         if (error) {
             clearAndAddHttpError({ key: 'server:network', error });
@@ -47,8 +64,8 @@ const NetworkContainer = () => {
             {!data ?
                 <Spinner size={'large'} centered/>
                 :
-                data.map(({ id, ip, port, alias, isDefault }, index) => (
-                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
+                data.map(({ id, ip, port, alias, notes, isDefault }, index) => (
+                    <GreyRowBox key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined} $hoverable={false}>
                         <div css={tw`pl-4 pr-6 text-neutral-400`}>
                             <FontAwesomeIcon icon={faNetworkWired}/>
                         </div>
@@ -60,7 +77,17 @@ const NetworkContainer = () => {
                             <Code>:{port}</Code>
                             <Label>Port</Label>
                         </div>
-                        <div css={tw`flex-1 text-right`}>
+                        <div css={tw`px-8 flex-1 self-start`}>
+                            <InputSpinner visible={loading === id}>
+                                <Textarea
+                                    css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
+                                    placeholder={'Notes'}
+                                    defaultValue={notes || undefined}
+                                    onChange={e => setAllocationNotes(id, e.currentTarget.value)}
+                                />
+                            </InputSpinner>
+                        </div>
+                        <div css={tw`w-32 text-right`}>
                             {isDefault ?
                                 <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
                                     Primary

From 4122486468ce178acb821ff022de0eaa898642af Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 9 Jul 2020 21:32:31 -0700
Subject: [PATCH 45/55] Fix failing tests (which caught a bug in the new client
 query)

---
 app/Models/RecoveryToken.php                  |  5 ++++
 app/Models/User.php                           |  4 ++--
 .../Api/Client/ClientControllerTest.php       |  6 ++---
 .../Api/Client/TwoFactorControllerTest.php    | 24 +++++++++++++++++--
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/app/Models/RecoveryToken.php b/app/Models/RecoveryToken.php
index 7be74f53c..5cd00a9d0 100644
--- a/app/Models/RecoveryToken.php
+++ b/app/Models/RecoveryToken.php
@@ -17,6 +17,11 @@ class RecoveryToken extends Model
      */
     const UPDATED_AT = null;
 
+    /**
+     * @var bool
+     */
+    public $timestamps = true;
+
     /**
      * @var bool
      */
diff --git a/app/Models/User.php b/app/Models/User.php
index 360fa3913..baff65b6f 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -266,11 +266,11 @@ class User extends Model implements
      * Returns all of the servers that a user can access by way of being the owner of the
      * server, or because they are assigned as a subuser for that server.
      *
-     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     * @return \Illuminate\Database\Eloquent\Builder
      */
     public function accessibleServers()
     {
-        return $this->hasMany(Server::class, 'owner_id')
+        return Server::query()
             ->select('servers.*')
             ->leftJoin('subusers', 'subusers.server_id', '=', 'servers.id')
             ->where(function (Builder $builder) {
diff --git a/tests/Integration/Api/Client/ClientControllerTest.php b/tests/Integration/Api/Client/ClientControllerTest.php
index 1561f59cf..82aeb564d 100644
--- a/tests/Integration/Api/Client/ClientControllerTest.php
+++ b/tests/Integration/Api/Client/ClientControllerTest.php
@@ -35,7 +35,7 @@ class ClientControllerTest extends ClientApiIntegrationTestCase
         $response->assertJsonPath('data.0.attributes.identifier', $servers[0]->uuidShort);
         $response->assertJsonPath('data.0.attributes.server_owner', true);
         $response->assertJsonPath('meta.pagination.total', 1);
-        $response->assertJsonPath('meta.pagination.per_page', config('pterodactyl.paginate.frontend.servers'));
+        $response->assertJsonPath('meta.pagination.per_page', 50);
     }
 
     /**
@@ -54,7 +54,7 @@ class ClientControllerTest extends ClientApiIntegrationTestCase
             $this->createServerModel(['user_id' => $users[2]->id]),
         ];
 
-        $response = $this->actingAs($users[0])->getJson('/api/client?filter=all');
+        $response = $this->actingAs($users[0])->getJson('/api/client?type=all');
 
         $response->assertOk();
         $response->assertJsonCount(3, 'data');
@@ -117,7 +117,7 @@ class ClientControllerTest extends ClientApiIntegrationTestCase
             'permissions' => [Permission::ACTION_WEBSOCKET_CONNECT],
         ]);
 
-        $response = $this->actingAs($users[0])->getJson('/api/client?filter=owner');
+        $response = $this->actingAs($users[0])->getJson('/api/client?type=owner');
 
         $response->assertOk();
         $response->assertJsonCount(1, 'data');
diff --git a/tests/Integration/Api/Client/TwoFactorControllerTest.php b/tests/Integration/Api/Client/TwoFactorControllerTest.php
index 8344d2b96..189a94fa1 100644
--- a/tests/Integration/Api/Client/TwoFactorControllerTest.php
+++ b/tests/Integration/Api/Client/TwoFactorControllerTest.php
@@ -6,6 +6,8 @@ use Carbon\Carbon;
 use Pterodactyl\Models\User;
 use Illuminate\Http\Response;
 use PragmaRX\Google2FA\Google2FA;
+use Pterodactyl\Models\RecoveryToken;
+use PHPUnit\Framework\ExpectationFailedException;
 
 class TwoFactorControllerTest extends ClientApiIntegrationTestCase
 {
@@ -89,11 +91,29 @@ class TwoFactorControllerTest extends ClientApiIntegrationTestCase
             'code' => $token,
         ]);
 
-        $response->assertStatus(Response::HTTP_NO_CONTENT);
+        $response->assertOk();
+        $response->assertJsonPath('object', 'recovery_tokens');
 
         $user = $user->refresh();
-
         $this->assertTrue($user->use_totp);
+
+        $tokens = RecoveryToken::query()->where('user_id', $user->id)->get();
+        $this->assertCount(10, $tokens);
+        $this->assertStringStartsWith('$2y$10$', $tokens[0]->token);
+
+        $tokens = $tokens->pluck('token')->toArray();
+
+        foreach ($response->json('attributes.tokens') as $raw) {
+            foreach ($tokens as $hashed) {
+                if (password_verify($raw, $hashed)) {
+                    continue 2;
+                }
+            }
+
+            throw new ExpectationFailedException(
+                sprintf('Failed asserting that token [%s] exists as a hashed value in recovery_tokens table.', $raw)
+            );
+        }
     }
 
     /**

From f2cb41c074b9e67d1944e01fa83bf5601b84dbbb Mon Sep 17 00:00:00 2001
From: DarthShmev <34663790+DarthShmev@users.noreply.github.com>
Date: Fri, 10 Jul 2020 11:37:55 -0400
Subject: [PATCH 46/55] Remove colon from port field on allocations page.
 Closes #2160

---
 .../scripts/components/server/network/NetworkContainer.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index 75ff4d418..1723f9352 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -74,7 +74,7 @@ const NetworkContainer = () => {
                             <Label>IP Address</Label>
                         </div>
                         <div>
-                            <Code>:{port}</Code>
+                            <Code>{port}</Code>
                             <Label>Port</Label>
                         </div>
                         <div css={tw`px-8 flex-1 self-start`}>

From a430ebb89e9d73815b3d66f1113caf372e2b9b4d Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 21:17:28 -0700
Subject: [PATCH 47/55] Add test coverage for allocation routes

---
 .../Network/UpdateAllocationRequest.php       |   4 +-
 .../Client/ClientApiIntegrationTestCase.php   |   6 +-
 .../NetworkAllocationControllerTest.php       | 212 ++++++++++++++++++
 3 files changed, 220 insertions(+), 2 deletions(-)
 create mode 100644 tests/Integration/Api/Client/Server/NetworkAllocationControllerTest.php

diff --git a/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php b/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
index 1424cad14..766a66b78 100644
--- a/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
+++ b/app/Http/Requests/Api/Client/Servers/Network/UpdateAllocationRequest.php
@@ -21,8 +21,10 @@ class UpdateAllocationRequest extends ClientApiRequest
      */
     public function rules(): array
     {
+        $rules = Allocation::getRules();
+
         return [
-            'notes' => Allocation::$validationRules['notes'],
+            'notes' => array_merge($rules['notes'], ['present']),
         ];
     }
 }
diff --git a/tests/Integration/Api/Client/ClientApiIntegrationTestCase.php b/tests/Integration/Api/Client/ClientApiIntegrationTestCase.php
index e6dbf0974..e893c17b9 100644
--- a/tests/Integration/Api/Client/ClientApiIntegrationTestCase.php
+++ b/tests/Integration/Api/Client/ClientApiIntegrationTestCase.php
@@ -15,6 +15,7 @@ use Pterodactyl\Models\Subuser;
 use Pterodactyl\Models\Location;
 use Pterodactyl\Models\Schedule;
 use Illuminate\Support\Collection;
+use Pterodactyl\Models\Allocation;
 use Pterodactyl\Tests\Integration\IntegrationTestCase;
 use Pterodactyl\Transformers\Api\Client\BaseClientTransformer;
 
@@ -53,7 +54,7 @@ abstract class ClientApiIntegrationTestCase extends IntegrationTestCase
      */
     protected function link($model, $append = null): string
     {
-        Assert::isInstanceOfAny($model, [Server::class, Schedule::class, Task::class]);
+        Assert::isInstanceOfAny($model, [Server::class, Schedule::class, Task::class, Allocation::class]);
 
         $link = '';
         switch (get_class($model)) {
@@ -66,6 +67,9 @@ abstract class ClientApiIntegrationTestCase extends IntegrationTestCase
             case Task::class:
                 $link = "/api/client/servers/{$model->schedule->server->uuid}/schedules/{$model->schedule->id}/tasks/{$model->id}";
                 break;
+            case Allocation::class:
+                $link = "/api/client/servers/{$model->server->uuid}/network/allocations/{$model->id}";
+                break;
         }
 
         return $link . ($append ? '/' . ltrim($append, '/') : '');
diff --git a/tests/Integration/Api/Client/Server/NetworkAllocationControllerTest.php b/tests/Integration/Api/Client/Server/NetworkAllocationControllerTest.php
new file mode 100644
index 000000000..b019b3e62
--- /dev/null
+++ b/tests/Integration/Api/Client/Server/NetworkAllocationControllerTest.php
@@ -0,0 +1,212 @@
+<?php
+
+namespace Pterodactyl\Tests\Integration\Api\Client\Server;
+
+use Pterodactyl\Models\User;
+use Illuminate\Http\Response;
+use Pterodactyl\Models\Server;
+use Pterodactyl\Models\Allocation;
+use Pterodactyl\Models\Permission;
+use Pterodactyl\Tests\Integration\Api\Client\ClientApiIntegrationTestCase;
+
+class NetworkAllocationControllerTest extends ClientApiIntegrationTestCase
+{
+    /**
+     * Test that a servers allocations are returned in the expected format.
+     */
+    public function testServerAllocationsAreReturned()
+    {
+        [$user, $server] = $this->generateTestAccount();
+        $allocation = $this->getAllocation($server);
+
+        $response = $this->actingAs($user)->getJson($this->link($server, '/network/allocations'));
+
+        $response->assertOk();
+        $response->assertJsonPath('object', 'list');
+        $response->assertJsonCount(1, 'data');
+
+        $this->assertJsonTransformedWith($response->json('data.0.attributes'), $allocation);
+    }
+
+    /**
+     * Test that allocations cannot be returned without the required user permissions.
+     */
+    public function testServerAllocationsAreNotReturnedWithoutPermission()
+    {
+        [$user, $server] = $this->generateTestAccount();
+        $user2 = factory(User::class)->create();
+
+        $server->owner_id = $user2->id;
+        $server->save();
+
+        $this->actingAs($user)->getJson($this->link($server, '/network/allocations'))
+            ->assertNotFound();
+
+        [$user, $server] = $this->generateTestAccount([Permission::ACTION_ALLOCATION_CREATE]);
+
+        $this->actingAs($user)->getJson($this->link($server, '/network/allocations'))
+            ->assertForbidden();
+    }
+
+    /**
+     * Tests that notes on an allocation can be set correctly.
+     *
+     * @param array $permissions
+     * @dataProvider updatePermissionsDataProvider
+     */
+    public function testAllocationNotesCanBeUpdated(array $permissions)
+    {
+        [$user, $server] = $this->generateTestAccount($permissions);
+        $allocation = $this->getAllocation($server);
+
+        $this->assertNull($allocation->notes);
+
+        $this->actingAs($user)->postJson($this->link($allocation), [])
+            ->assertStatus(Response::HTTP_UNPROCESSABLE_ENTITY)
+            ->assertJsonPath('errors.0.code', 'present');
+
+        $this->actingAs($user)->postJson($this->link($allocation), ['notes' => 'Test notes'])
+            ->assertOk()
+            ->assertJsonPath('object', Allocation::RESOURCE_NAME)
+            ->assertJsonPath('attributes.notes', 'Test notes');
+
+        $allocation = $allocation->refresh();
+
+        $this->assertSame('Test notes', $allocation->notes);
+
+        $this->actingAs($user)->postJson($this->link($allocation), ['notes' => null])
+            ->assertOk()
+            ->assertJsonPath('object', Allocation::RESOURCE_NAME)
+            ->assertJsonPath('attributes.notes', null);
+
+        $allocation = $allocation->refresh();
+
+        $this->assertNull($allocation->notes);
+    }
+
+    public function testAllocationNotesCannotBeUpdatedByInvalidUsers()
+    {
+        [$user, $server] = $this->generateTestAccount();
+        $user2 = factory(User::class)->create();
+
+        $server->owner_id = $user2->id;
+        $server->save();
+
+        $this->actingAs($user)->postJson($this->link($this->getAllocation($server)))
+            ->assertNotFound();
+
+        [$user, $server] = $this->generateTestAccount([Permission::ACTION_ALLOCATION_CREATE]);
+
+        $this->actingAs($user)->postJson($this->link($this->getAllocation($server)))
+            ->assertForbidden();
+    }
+
+    /**
+     * @param array $permissions
+     * @dataProvider updatePermissionsDataProvider
+     */
+    public function testPrimaryAllocationCanBeModified(array $permissions)
+    {
+        [$user, $server] = $this->generateTestAccount($permissions);
+        $allocation = $this->getAllocation($server);
+        $allocation2 = $this->getAllocation($server);
+
+        $server->allocation_id = $allocation->id;
+        $server->save();
+
+        $this->actingAs($user)->postJson($this->link($allocation2, '/primary'))
+            ->assertOk();
+
+        $server = $server->refresh();
+
+        $this->assertSame($allocation2->id, $server->allocation_id);
+    }
+
+    public function testPrimaryAllocationCannotBeModifiedByInvalidUser()
+    {
+        [$user, $server] = $this->generateTestAccount();
+        $user2 = factory(User::class)->create();
+
+        $server->owner_id = $user2->id;
+        $server->save();
+
+        $this->actingAs($user)->postJson($this->link($this->getAllocation($server), '/primary'))
+            ->assertNotFound();
+
+        [$user, $server] = $this->generateTestAccount([Permission::ACTION_ALLOCATION_CREATE]);
+
+        $this->actingAs($user)->postJson($this->link($this->getAllocation($server), '/primary'))
+            ->assertForbidden();
+    }
+
+    /**
+     * @param array $permissions
+     * @dataProvider deletePermissionsDataProvider
+     */
+    public function testAllocationCanBeDeleted(array $permissions)
+    {
+        [$user, $server] = $this->generateTestAccount($permissions);
+        $allocation = $this->getAllocation($server);
+        $allocation2 = $this->getAllocation($server);
+
+        $allocation2->notes = 'Filled notes';
+        $allocation2->save();
+
+        $server->allocation_id = $allocation->id;
+        $server->save();
+
+        $this->actingAs($user)->deleteJson($this->link($allocation))
+            ->assertStatus(Response::HTTP_BAD_REQUEST)
+            ->assertJsonPath('errors.0.code', 'DisplayException')
+            ->assertJsonPath('errors.0.detail', 'Cannot delete the primary allocation for a server.');
+
+        $this->actingAs($user)->deleteJson($this->link($allocation2))
+            ->assertStatus(Response::HTTP_NO_CONTENT);
+
+        $server = $server->refresh();
+        $allocation2 = $allocation2->refresh();
+
+        $this->assertSame($allocation->id, $server->allocation_id);
+        $this->assertNull($allocation2->server_id);
+        $this->assertNull($allocation2->notes);
+    }
+
+    public function testAllocationCannotBeDeletedByInvalidUser()
+    {
+        [$user, $server] = $this->generateTestAccount();
+        $user2 = factory(User::class)->create();
+
+        $server->owner_id = $user2->id;
+        $server->save();
+
+        $this->actingAs($user)->deleteJson($this->link($this->getAllocation($server)))
+            ->assertNotFound();
+
+        [$user, $server] = $this->generateTestAccount([Permission::ACTION_ALLOCATION_CREATE]);
+
+        $this->actingAs($user)->deleteJson($this->link($this->getAllocation($server)))
+            ->assertForbidden();
+    }
+
+    public function updatePermissionsDataProvider()
+    {
+        return [[[]], [[Permission::ACTION_ALLOCATION_UPDATE]]];
+    }
+
+    public function deletePermissionsDataProvider()
+    {
+        return [[[]], [[Permission::ACTION_ALLOCATION_DELETE]]];
+    }
+
+    /**
+     * @param \Pterodactyl\Models\Server $server
+     * @return \Pterodactyl\Models\Allocation
+     */
+    protected function getAllocation(Server $server): Allocation
+    {
+        return factory(Allocation::class)->create([
+            'server_id' => $server->id,
+            'node_id' => $server->node_id,
+        ]);
+    }
+}

From fdec3cea80cf29573c1d8da5a9cf446e9bc3e248 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 22:10:41 -0700
Subject: [PATCH 48/55] Fix nested directories being created incorrectly

---
 app/Http/Controllers/Api/Client/Servers/FileController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Http/Controllers/Api/Client/Servers/FileController.php b/app/Http/Controllers/Api/Client/Servers/FileController.php
index 4e916974d..55ebde5f2 100644
--- a/app/Http/Controllers/Api/Client/Servers/FileController.php
+++ b/app/Http/Controllers/Api/Client/Servers/FileController.php
@@ -159,7 +159,7 @@ class FileController extends ClientApiController
     {
         $this->fileRepository
             ->setServer($server)
-            ->createDirectory($request->input('name'), $request->input('directory', '/'));
+            ->createDirectory($request->input('name'), $request->input('root', '/'));
 
         return Response::create('', Response::HTTP_NO_CONTENT);
     }

From 2692e98cd849b86ceffa765634bfc012e1f79441 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 22:10:51 -0700
Subject: [PATCH 49/55] Massive speed improvements to filemanager

---
 .../scripts/api/server/files/loadDirectory.ts |  34 ++--
 .../server/files/FileManagerContainer.tsx     | 146 ++++++++----------
 .../components/server/files/FileObjectRow.tsx |  47 +++---
 .../server/files/NewDirectoryButton.tsx       |  54 ++++---
 4 files changed, 138 insertions(+), 143 deletions(-)

diff --git a/resources/scripts/api/server/files/loadDirectory.ts b/resources/scripts/api/server/files/loadDirectory.ts
index 7c73c58a9..720486dd3 100644
--- a/resources/scripts/api/server/files/loadDirectory.ts
+++ b/resources/scripts/api/server/files/loadDirectory.ts
@@ -14,23 +14,21 @@ export interface FileObject {
     modifiedAt: Date;
 }
 
-export default (uuid: string, directory?: string): Promise<FileObject[]> => {
-    return new Promise((resolve, reject) => {
-        http.get(`/api/client/servers/${uuid}/files/list`, {
-            params: { directory },
-        })
-            .then(response => resolve((response.data.data || []).map((item: any): FileObject => ({
-                uuid: v4(),
-                name: item.attributes.name,
-                mode: item.attributes.mode,
-                size: Number(item.attributes.size),
-                isFile: item.attributes.is_file,
-                isSymlink: item.attributes.is_symlink,
-                isEditable: item.attributes.is_editable,
-                mimetype: item.attributes.mimetype,
-                createdAt: new Date(item.attributes.created_at),
-                modifiedAt: new Date(item.attributes.modified_at),
-            }))))
-            .catch(reject);
+export default async (uuid: string, directory?: string): Promise<FileObject[]> => {
+    const { data } = await http.get(`/api/client/servers/${uuid}/files/list`, {
+        params: { directory },
     });
+
+    return (data.data || []).map((item: any): FileObject => ({
+        uuid: v4(),
+        name: item.attributes.name,
+        mode: item.attributes.mode,
+        size: Number(item.attributes.size),
+        isFile: item.attributes.is_file,
+        isSymlink: item.attributes.is_symlink,
+        isEditable: item.attributes.is_editable,
+        mimetype: item.attributes.mimetype,
+        createdAt: new Date(item.attributes.created_at),
+        modifiedAt: new Date(item.attributes.modified_at),
+    }));
 };
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index e97bb37f0..35fc034e0 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import FlashMessageRender from '@/components/FlashMessageRender';
-import { ServerContext } from '@/state/server';
-import { Actions, useStoreActions } from 'easy-peasy';
-import { ApplicationStore } from '@/state';
+import React, { useEffect } from 'react';
 import { httpErrorToHuman } from '@/api/http';
 import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
 import FileObjectRow from '@/components/server/files/FileObjectRow';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
-import { FileObject } from '@/api/server/files/loadDirectory';
+import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import useSWR from 'swr';
+import useServer from '@/plugins/useServer';
+import { cleanDirectoryPath } from '@/helpers';
+import { ServerContext } from '@/state/server';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -23,94 +23,72 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 };
 
 export default () => {
-    const [ error, setError ] = useState('');
-    const [ loading, setLoading ] = useState(true);
-    const { clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-    const { id } = ServerContext.useStoreState(state => state.server.data!);
-    const { contents: files } = ServerContext.useStoreState(state => state.files);
-    const { getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
+    const { hash } = useLocation();
+    const { id, uuid } = useServer();
+    const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
-    const loadContents = () => {
-        setError('');
-        clearFlashes();
-        setLoading(true);
-        getDirectoryContents(window.location.hash)
-            .then(() => setLoading(false))
-            .catch(error => {
-                console.error(error.message, { error });
-                setError(httpErrorToHuman(error));
-            });
-    };
+    const { data: files, error, mutate } = useSWR(
+        `${uuid}:files:${hash}`,
+        () => loadDirectory(uuid, cleanDirectoryPath(window.location.hash)),
+    );
 
     useEffect(() => {
-        loadContents();
-    }, []);
+        setDirectory(hash.length > 0 ? hash : '/');
+    }, [ hash ]);
 
     if (error) {
         return (
-            <ServerError
-                message={error}
-                onRetry={() => loadContents()}
-            />
+            <ServerError message={httpErrorToHuman(error)} onRetry={() => mutate()}/>
         );
     }
 
     return (
-        <PageContentBlock>
-            <FlashMessageRender byKey={'files'} css={tw`mb-4`}/>
-            <React.Fragment>
-                <FileManagerBreadcrumbs/>
-                {
-                    loading ?
-                        <Spinner size={'large'} centered/>
-                        :
-                        <React.Fragment>
-                            {!files.length ?
-                                <p css={tw`text-sm text-neutral-400 text-center`}>
-                                    This directory seems to be empty.
-                                </p>
-                                :
-                                <CSSTransition classNames={'fade'} timeout={150} appear in>
-                                    <React.Fragment>
-                                        <div>
-                                            {files.length > 250 ?
-                                                <React.Fragment>
-                                                    <div css={tw`rounded bg-yellow-400 mb-px p-3`}>
-                                                        <p css={tw`text-yellow-900 text-sm text-center`}>
-                                                            This directory is too large to display in the browser,
-                                                            limiting the output to the first 250 files.
-                                                        </p>
-                                                    </div>
-                                                    {
-                                                        sortFiles(files.slice(0, 250)).map(file => (
-                                                            <FileObjectRow key={file.uuid} file={file}/>
-                                                        ))
-                                                    }
-                                                </React.Fragment>
-                                                :
-                                                sortFiles(files).map(file => (
-                                                    <FileObjectRow key={file.uuid} file={file}/>
-                                                ))
-                                            }
+        <PageContentBlock showFlashKey={'files'}>
+            <FileManagerBreadcrumbs/>
+            {
+                !files ?
+                    <Spinner size={'large'} centered/>
+                    :
+                    <>
+                        {!files.length ?
+                            <p css={tw`text-sm text-neutral-400 text-center`}>
+                                This directory seems to be empty.
+                            </p>
+                            :
+                            <CSSTransition classNames={'fade'} timeout={150} appear in>
+                                <React.Fragment>
+                                    <div>
+                                        {files.length > 250 &&
+                                        <div css={tw`rounded bg-yellow-400 mb-px p-3`}>
+                                            <p css={tw`text-yellow-900 text-sm text-center`}>
+                                                This directory is too large to display in the browser,
+                                                limiting the output to the first 250 files.
+                                            </p>
                                         </div>
-                                    </React.Fragment>
-                                </CSSTransition>
-                            }
-                            <Can action={'file.create'}>
-                                <div css={tw`flex justify-end mt-8`}>
-                                    <NewDirectoryButton/>
-                                    <Button
-                                        // @ts-ignore
-                                        as={Link}
-                                        to={`/server/${id}/files/new${window.location.hash}`}
-                                    >
-                                        New File
-                                    </Button>
-                                </div>
-                            </Can>
-                        </React.Fragment>
-                }
-            </React.Fragment>
+                                        }
+                                        {
+                                            sortFiles(files.slice(0, 250)).map(file => (
+                                                <FileObjectRow key={file.uuid} file={file}/>
+                                            ))
+                                        }
+                                    </div>
+                                </React.Fragment>
+                            </CSSTransition>
+                        }
+                        <Can action={'file.create'}>
+                            <div css={tw`flex justify-end mt-8`}>
+                                <NewDirectoryButton/>
+                                <Button
+                                    // @ts-ignore
+                                    as={Link}
+                                    to={`/server/${id}/files/new${window.location.hash}`}
+                                >
+                                    New File
+                                </Button>
+                            </div>
+                        </Can>
+                    </>
+            }
         </PageContentBlock>
     );
 };
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index d7b323b31..e6f15aed2 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -2,41 +2,46 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileAlt, faFileImport, faFolder } from '@fortawesome/free-solid-svg-icons';
 import { bytesToHuman, cleanDirectoryPath } from '@/helpers';
 import { differenceInHours, format, formatDistanceToNow } from 'date-fns';
-import React from 'react';
+import React, { memo } from 'react';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
 import { ServerContext } from '@/state/server';
 import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import tw from 'twin.macro';
+import isEqual from 'react-fast-compare';
+import styled from 'styled-components/macro';
 
-export default ({ file }: { file: FileObject }) => {
+const Row = styled.div`
+    ${tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`};
+`;
+
+const FileObjectRow = ({ file }: { file: FileObject }) => {
     const directory = ServerContext.useStoreState(state => state.files.directory);
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     const history = useHistory();
     const match = useRouteMatch();
 
+    const onRowClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        // Don't rely on the onClick to work with the generated URL. Because of the way this
+        // component re-renders you'll get redirected into a nested directory structure since
+        // it'll cause the directory variable to update right away when you click.
+        //
+        // Just trust me future me, leave this be.
+        if (!file.isFile) {
+            e.preventDefault();
+
+            history.push(`#${cleanDirectoryPath(`${directory}/${file.name}`)}`);
+            setDirectory(`${directory}/${file.name}`);
+        }
+    };
+
     return (
-        <div
-            key={file.name}
-            css={tw`flex bg-neutral-700 rounded-sm mb-px text-sm hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600`}
-        >
+        <Row key={file.name}>
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
-                onClick={e => {
-                    // Don't rely on the onClick to work with the generated URL. Because of the way this
-                    // component re-renders you'll get redirected into a nested directory structure since
-                    // it'll cause the directory variable to update right away when you click.
-                    //
-                    // Just trust me future me, leave this be.
-                    if (!file.isFile) {
-                        e.preventDefault();
-
-                        history.push(`#${cleanDirectoryPath(`${directory}/${file.name}`)}`);
-                        setDirectory(`${directory}/${file.name}`);
-                    }
-                }}
+                onClick={onRowClick}
             >
                 <div css={tw`flex-none text-neutral-400 mr-4 text-lg pl-3`}>
                     {file.isFile ?
@@ -65,6 +70,8 @@ export default ({ file }: { file: FileObject }) => {
                 </div>
             </NavLink>
             <FileDropdownMenu uuid={file.uuid}/>
-        </div>
+        </Row>
     );
 };
+
+export default memo(FileObjectRow, (prevProps, nextProps) => isEqual(prevProps.file, nextProps.file));
diff --git a/resources/scripts/components/server/files/NewDirectoryButton.tsx b/resources/scripts/components/server/files/NewDirectoryButton.tsx
index 79e55f881..d1f23c022 100644
--- a/resources/scripts/components/server/files/NewDirectoryButton.tsx
+++ b/resources/scripts/components/server/files/NewDirectoryButton.tsx
@@ -9,6 +9,11 @@ import createDirectory from '@/api/server/files/createDirectory';
 import v4 from 'uuid/v4';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import { mutate } from 'swr';
+import useServer from '@/plugins/useServer';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import { useLocation } from 'react-router';
+import useFlash from '@/plugins/useFlash';
 
 interface Values {
     directoryName: string;
@@ -18,37 +23,44 @@ const schema = object().shape({
     directoryName: string().required('A valid directory name must be provided.'),
 });
 
-export default () => {
-    const [ visible, setVisible ] = useState(false);
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
-    const directory = ServerContext.useStoreState(state => state.files.directory);
-    const pushFile = ServerContext.useStoreActions(actions => actions.files.pushFile);
+const generateDirectoryData = (name: string): FileObject => ({
+    uuid: v4(),
+    name: name,
+    mode: '0644',
+    size: 0,
+    isFile: false,
+    isEditable: false,
+    isSymlink: false,
+    mimetype: '',
+    createdAt: new Date(),
+    modifiedAt: new Date(),
+});
 
-    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        createDirectory(uuid, directory, values.directoryName)
+export default () => {
+    const { uuid } = useServer();
+    const { hash } = useLocation();
+    const { clearAndAddHttpError } = useFlash();
+    const [ visible, setVisible ] = useState(false);
+    const directory = ServerContext.useStoreState(state => state.files.directory);
+
+    const submit = ({ directoryName }: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        createDirectory(uuid, directory, directoryName)
             .then(() => {
-                pushFile({
-                    uuid: v4(),
-                    name: values.directoryName,
-                    mode: '0644',
-                    size: 0,
-                    isFile: false,
-                    isEditable: false,
-                    isSymlink: false,
-                    mimetype: '',
-                    createdAt: new Date(),
-                    modifiedAt: new Date(),
-                });
+                mutate(
+                    `${uuid}:files:${hash}`,
+                    (data: FileObject[]) => [ ...data, generateDirectoryData(directoryName) ],
+                );
                 setVisible(false);
             })
             .catch(error => {
                 console.error(error);
                 setSubmitting(false);
+                clearAndAddHttpError({ key: 'files', error });
             });
     };
 
     return (
-        <React.Fragment>
+        <>
             <Formik
                 onSubmit={submit}
                 validationSchema={schema}
@@ -91,6 +103,6 @@ export default () => {
             <Button isSecondary css={tw`mr-2`} onClick={() => setVisible(true)}>
                 Create Directory
             </Button>
-        </React.Fragment>
+        </>
     );
 };

From 5da9824fb7133474b48cfab1d713c77725e6260e Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 22:38:07 -0700
Subject: [PATCH 50/55] Continue with file manager code cleanup

---
 .../server/files/FileDropdownMenu.tsx         | 209 ++++++------------
 .../server/files/FileManagerContainer.tsx     |  13 +-
 .../components/server/files/FileObjectRow.tsx |   2 +-
 .../scripts/plugins/useFileManagerSwr.ts      |  15 ++
 4 files changed, 89 insertions(+), 150 deletions(-)
 create mode 100644 resources/scripts/plugins/useFileManagerSwr.ts

diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index a1953470b..69f98a89c 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { createRef, useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faCopy,
@@ -7,6 +7,7 @@ import {
     faLevelUpAlt,
     faPencilAlt,
     faTrashAlt,
+    IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
@@ -14,182 +15,110 @@ import { join } from 'path';
 import deleteFile from '@/api/server/files/deleteFile';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import copyFile from '@/api/server/files/copyFile';
-import { httpErrorToHuman } from '@/api/http';
 import Can from '@/components/elements/Can';
 import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
 import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
-import Fade from '@/components/elements/Fade';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import DropdownMenu from '@/components/elements/DropdownMenu';
+import styled from 'styled-components/macro';
 
 type ModalType = 'rename' | 'move';
 
-export default ({ uuid }: { uuid: string }) => {
-    const menu = createRef<HTMLDivElement>();
-    const menuButton = createRef<HTMLDivElement>();
-    const [ menuVisible, setMenuVisible ] = useState(false);
+const StyledRow = styled.div<{ $danger?: boolean }>`
+    ${tw`p-2 flex items-center rounded`};
+    ${props => props.$danger ? tw`hover:bg-red-100 hover:text-red-700` : tw`hover:bg-neutral-100 hover:text-neutral-700`};
+`;
+
+interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: IconDefinition;
+    title: string;
+    $danger?: boolean;
+}
+
+const Row = ({ icon, title, ...props }: RowProps) => (
+    <StyledRow {...props}>
+        <FontAwesomeIcon icon={icon} css={tw`text-xs`}/>
+        <span css={tw`ml-2`}>{title}</span>
+    </StyledRow>
+);
+
+export default ({ file }: { file: FileObject }) => {
     const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
-    const [ posX, setPosX ] = useState(0);
 
-    const server = useServer();
-    const { addError, clearFlashes } = useFlash();
+    const { uuid } = useServer();
+    const { mutate } = useFileManagerSwr();
+    const { clearAndAddHttpError, clearFlashes } = useFlash();
 
-    const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const { removeFile, getDirectoryContents } = ServerContext.useStoreActions(actions => actions.files);
-
-    if (!file) {
-        return null;
-    }
-
-    const windowListener = (e: MouseEvent) => {
-        if (e.button === 2 || !menuVisible || !menu.current) {
-            return;
-        }
-
-        if (e.target === menu.current || menu.current.contains(e.target as Node)) {
-            return;
-        }
-
-        if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
-            setMenuVisible(false);
-        }
-    };
 
     const doDeletion = () => {
-        setShowSpinner(true);
         clearFlashes('files');
-        deleteFile(server.uuid, join(directory, file.name))
-            .then(() => removeFile(uuid))
-            .catch(error => {
-                console.error('Error while attempting to delete a file.', error);
-                addError({ key: 'files', message: httpErrorToHuman(error) });
-                setShowSpinner(false);
-            });
+
+        // For UI speed, immediately remove the file from the listing before calling the deletion function.
+        // If the delete actually fails, we'll fetch the current directory contents again automatically.
+        mutate(files => files.filter(f => f.uuid !== file.uuid), false);
+
+        deleteFile(uuid, join(directory, file.name)).catch(error => {
+            mutate();
+            clearAndAddHttpError({ key: 'files', error });
+        });
     };
 
     const doCopy = () => {
         setShowSpinner(true);
         clearFlashes('files');
-        copyFile(server.uuid, join(directory, file.name))
-            .then(() => getDirectoryContents(directory))
+
+        copyFile(uuid, join(directory, file.name))
+            .then(() => mutate())
             .catch(error => {
-                console.error('Error while attempting to copy file.', error);
-                addError({ key: 'files', message: httpErrorToHuman(error) });
                 setShowSpinner(false);
+                clearAndAddHttpError({ key: 'files', error });
             });
     };
 
     const doDownload = () => {
         setShowSpinner(true);
         clearFlashes('files');
-        getFileDownloadUrl(server.uuid, join(directory, file.name))
+
+        getFileDownloadUrl(uuid, join(directory, file.name))
             .then(url => {
                 // @ts-ignore
                 window.location = url;
             })
-            .catch(error => {
-                console.error(error);
-                addError({ key: 'files', message: httpErrorToHuman(error) });
-            })
+            .catch(error => clearAndAddHttpError({ key: 'files', error }))
             .then(() => setShowSpinner(false));
     };
 
-    useEffect(() => {
-        menuVisible
-            ? document.addEventListener('click', windowListener)
-            : document.removeEventListener('click', windowListener);
-
-        if (menuVisible && menu.current) {
-            menu.current.setAttribute(
-                'style', `margin-top: -0.35rem; left: ${Math.round(posX - menu.current.clientWidth)}px`,
-            );
-        }
-    }, [ menuVisible ]);
-
-    useEffect(() => () => {
-        document.removeEventListener('click', windowListener);
-    }, []);
-
     return (
-        <div key={`dropdown:${file.uuid}`}>
-            <div
-                ref={menuButton}
-                css={tw`p-3 hover:text-white`}
-                onClick={e => {
-                    e.preventDefault();
-                    if (!menuVisible) {
-                        setPosX(e.clientX);
-                    }
-                    setModal(null);
-                    setMenuVisible(!menuVisible);
-                }}
-            >
-                <FontAwesomeIcon icon={faEllipsisH}/>
-                <RenameFileModal
-                    file={file}
-                    visible={modal === 'rename' || modal === 'move'}
-                    useMoveTerminology={modal === 'move'}
-                    onDismissed={() => {
-                        setModal(null);
-                        setMenuVisible(false);
-                    }}
-                />
-                <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
-            </div>
-            <Fade timeout={150} in={menuVisible} unmountOnExit classNames={'fade'}>
-                <div
-                    ref={menu}
-                    onClick={e => {
-                        e.stopPropagation();
-                        setMenuVisible(false);
-                    }}
-                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
-                >
-                    <Can action={'file.update'}>
-                        <div
-                            onClick={() => setModal('rename')}
-                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
-                        >
-                            <FontAwesomeIcon icon={faPencilAlt} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Rename</span>
-                        </div>
-                        <div
-                            onClick={() => setModal('move')}
-                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
-                        >
-                            <FontAwesomeIcon icon={faLevelUpAlt} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Move</span>
-                        </div>
-                    </Can>
-                    <Can action={'file.create'}>
-                        <div
-                            onClick={() => doCopy()}
-                            css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
-                        >
-                            <FontAwesomeIcon icon={faCopy} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Copy</span>
-                        </div>
-                    </Can>
-                    <div
-                        css={tw`hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded`}
-                        onClick={() => doDownload()}
-                    >
-                        <FontAwesomeIcon icon={faFileDownload} css={tw`text-xs`}/>
-                        <span css={tw`ml-2`}>Download</span>
-                    </div>
-                    <Can action={'file.delete'}>
-                        <div
-                            onClick={() => doDeletion()}
-                            css={tw`hover:text-red-700 p-2 flex items-center hover:bg-red-100 rounded`}
-                        >
-                            <FontAwesomeIcon icon={faTrashAlt} css={tw`text-xs`}/>
-                            <span css={tw`ml-2`}>Delete</span>
-                        </div>
-                    </Can>
+        <DropdownMenu
+            renderToggle={onClick => (
+                <div onClick={onClick}>
+                    <FontAwesomeIcon icon={faEllipsisH}/>
+                    <RenameFileModal
+                        file={file}
+                        visible={!!modal}
+                        useMoveTerminology={modal === 'move'}
+                        onDismissed={() => setModal(null)}
+                    />
+                    <SpinnerOverlay visible={showSpinner} fixed size={'large'}/>
                 </div>
-            </Fade>
-        </div>
+            )}
+        >
+            <Can action={'file.update'}>
+                <Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/>
+                <Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/>
+            </Can>
+            <Can action={'file.create'}>
+                <Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
+            </Can>
+            <Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
+            <Can action={'file.delete'}>
+                <Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
+            </Can>
+        </DropdownMenu>
     );
 };
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 35fc034e0..1a1d1c75d 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -4,7 +4,7 @@ import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
 import FileObjectRow from '@/components/server/files/FileObjectRow';
 import FileManagerBreadcrumbs from '@/components/server/files/FileManagerBreadcrumbs';
-import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
+import { FileObject } from '@/api/server/files/loadDirectory';
 import NewDirectoryButton from '@/components/server/files/NewDirectoryButton';
 import { Link, useLocation } from 'react-router-dom';
 import Can from '@/components/elements/Can';
@@ -12,10 +12,9 @@ import PageContentBlock from '@/components/elements/PageContentBlock';
 import ServerError from '@/components/screens/ServerError';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
-import useSWR from 'swr';
 import useServer from '@/plugins/useServer';
-import { cleanDirectoryPath } from '@/helpers';
 import { ServerContext } from '@/state/server';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 
 const sortFiles = (files: FileObject[]): FileObject[] => {
     return files.sort((a, b) => a.name.localeCompare(b.name))
@@ -23,15 +22,11 @@ const sortFiles = (files: FileObject[]): FileObject[] => {
 };
 
 export default () => {
+    const { id } = useServer();
     const { hash } = useLocation();
-    const { id, uuid } = useServer();
+    const { data: files, error, mutate } = useFileManagerSwr();
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
-    const { data: files, error, mutate } = useSWR(
-        `${uuid}:files:${hash}`,
-        () => loadDirectory(uuid, cleanDirectoryPath(window.location.hash)),
-    );
-
     useEffect(() => {
         setDirectory(hash.length > 0 ? hash : '/');
     }, [ hash ]);
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index e6f15aed2..66ed8ca09 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -69,7 +69,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => {
                     }
                 </div>
             </NavLink>
-            <FileDropdownMenu uuid={file.uuid}/>
+            <FileDropdownMenu file={file}/>
         </Row>
     );
 };
diff --git a/resources/scripts/plugins/useFileManagerSwr.ts b/resources/scripts/plugins/useFileManagerSwr.ts
new file mode 100644
index 000000000..c127aaeee
--- /dev/null
+++ b/resources/scripts/plugins/useFileManagerSwr.ts
@@ -0,0 +1,15 @@
+import useSWR from 'swr';
+import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
+import { cleanDirectoryPath } from '@/helpers';
+import useServer from '@/plugins/useServer';
+import { useLocation } from 'react-router';
+
+export default () => {
+    const { uuid } = useServer();
+    const { hash } = useLocation();
+
+    return useSWR<FileObject[]>(
+        `${uuid}:files:${hash}`,
+        () => loadDirectory(uuid, cleanDirectoryPath(hash)),
+    );
+};

From fa9800fa8851168d9683b7fb5b5086f2f0c53d89 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 22:53:52 -0700
Subject: [PATCH 51/55] Fix some SWR funkiness

---
 .../server/files/FileDropdownMenu.tsx         |  2 +-
 .../server/files/FileManagerContainer.tsx     |  4 ++
 .../server/files/RenameFileModal.tsx          | 42 +++++++++----------
 .../scripts/plugins/useFileManagerSwr.ts      |  4 ++
 4 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 69f98a89c..443d50a82 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -96,7 +96,7 @@ export default ({ file }: { file: FileObject }) => {
     return (
         <DropdownMenu
             renderToggle={onClick => (
-                <div onClick={onClick}>
+                <div css={tw`p-3 hover:text-white`} onClick={onClick}>
                     <FontAwesomeIcon icon={faEllipsisH}/>
                     <RenameFileModal
                         file={file}
diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 1a1d1c75d..eeed24078 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -28,6 +28,10 @@ export default () => {
     const setDirectory = ServerContext.useStoreActions(actions => actions.files.setDirectory);
 
     useEffect(() => {
+        // We won't automatically mutate the store when the component re-mounts, otherwise because of
+        // my (horrible) programming this fires off way more than we intend it to.
+        mutate();
+
         setDirectory(hash.length > 0 ? hash : '/');
     }, [ hash ]);
 
diff --git a/resources/scripts/components/server/files/RenameFileModal.tsx b/resources/scripts/components/server/files/RenameFileModal.tsx
index 9b001cba0..d7b9d3e8a 100644
--- a/resources/scripts/components/server/files/RenameFileModal.tsx
+++ b/resources/scripts/components/server/files/RenameFileModal.tsx
@@ -8,6 +8,9 @@ import { ServerContext } from '@/state/server';
 import { FileObject } from '@/api/server/files/loadDirectory';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import useServer from '@/plugins/useServer';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import useFlash from '@/plugins/useFlash';
 
 interface FormikValues {
     name: string;
@@ -16,37 +19,34 @@ interface FormikValues {
 type Props = RequiredModalProps & { file: FileObject; useMoveTerminology?: boolean };
 
 export default ({ file, useMoveTerminology, ...props }: Props) => {
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const { uuid } = useServer();
+    const { mutate } = useFileManagerSwr();
+    const { clearAndAddHttpError } = useFlash();
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const { pushFile, removeFile } = ServerContext.useStoreActions(actions => actions.files);
 
-    const submit = (values: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
+    const submit = ({ name }: FormikValues, { setSubmitting }: FormikHelpers<FormikValues>) => {
+        const len = name.split('/').length;
+        if (!useMoveTerminology && len === 1) {
+            // Rename the file within this directory.
+            mutate(files => files.map(f => f.uuid === file.uuid ? { ...f, name } : f), false);
+        } else if ((useMoveTerminology || len > 1) && file.uuid.length) {
+            // Remove the file from this directory since they moved it elsewhere.
+            mutate(files => files.filter(f => f.uuid !== file.uuid), false);
+        }
+
         const renameFrom = join(directory, file.name);
-        const renameTo = join(directory, values.name);
-
+        const renameTo = join(directory, name);
         renameFile(uuid, { renameFrom, renameTo })
-            .then(() => {
-                if (!useMoveTerminology && values.name.split('/').length === 1) {
-                    pushFile({ ...file, name: values.name });
-                }
-
-                if ((useMoveTerminology || values.name.split('/').length > 1) && file.uuid.length > 0) {
-                    removeFile(file.uuid);
-                }
-
-                props.onDismissed();
-            })
+            .then(() => props.onDismissed())
             .catch(error => {
+                mutate();
                 setSubmitting(false);
-                console.error(error);
+                clearAndAddHttpError({ key: 'files', error });
             });
     };
 
     return (
-        <Formik
-            onSubmit={submit}
-            initialValues={{ name: file.name }}
-        >
+        <Formik onSubmit={submit} initialValues={{ name: file.name }}>
             {({ isSubmitting, values }) => (
                 <Modal {...props} dismissable={!isSubmitting} showSpinnerOverlay={isSubmitting}>
                     <Form css={tw`m-0`}>
diff --git a/resources/scripts/plugins/useFileManagerSwr.ts b/resources/scripts/plugins/useFileManagerSwr.ts
index c127aaeee..50b69478a 100644
--- a/resources/scripts/plugins/useFileManagerSwr.ts
+++ b/resources/scripts/plugins/useFileManagerSwr.ts
@@ -11,5 +11,9 @@ export default () => {
     return useSWR<FileObject[]>(
         `${uuid}:files:${hash}`,
         () => loadDirectory(uuid, cleanDirectoryPath(hash)),
+        {
+            revalidateOnMount: false,
+            refreshInterval: 0,
+        }
     );
 };

From 6188b9287cc76dd083a8dbb5b6637759427bb4e4 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Fri, 10 Jul 2020 23:09:37 -0700
Subject: [PATCH 52/55] Remove unused code

---
 resources/scripts/state/server/files.ts | 40 +------------------------
 resources/scripts/state/server/index.ts |  1 -
 2 files changed, 1 insertion(+), 40 deletions(-)

diff --git a/resources/scripts/state/server/files.ts b/resources/scripts/state/server/files.ts
index 7944d8c3d..d6f137b28 100644
--- a/resources/scripts/state/server/files.ts
+++ b/resources/scripts/state/server/files.ts
@@ -1,51 +1,13 @@
-import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
-import { action, Action, thunk, Thunk } from 'easy-peasy';
-import { ServerStore } from '@/state/server/index';
+import { action, Action } from 'easy-peasy';
 import { cleanDirectoryPath } from '@/helpers';
 
 export interface ServerFileStore {
     directory: string;
-    contents: FileObject[];
-    getDirectoryContents: Thunk<ServerFileStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
-    setContents: Action<ServerFileStore, FileObject[]>;
-    pushFile: Action<ServerFileStore, FileObject>;
-    removeFile: Action<ServerFileStore, string>;
     setDirectory: Action<ServerFileStore, string>;
 }
 
 const files: ServerFileStore = {
     directory: '/',
-    contents: [],
-
-    getDirectoryContents: thunk(async (actions, payload, { getStoreState }) => {
-        const server = getStoreState().server.data;
-        if (!server) {
-            return;
-        }
-
-        const contents = await loadDirectory(server.uuid, cleanDirectoryPath(payload));
-
-        actions.setDirectory(payload.length === 0 ? '/' : payload);
-        actions.setContents(contents);
-    }),
-
-    setContents: action((state, payload) => {
-        state.contents = payload;
-    }),
-
-    pushFile: action((state, payload) => {
-        const matchIndex = state.contents.findIndex(file => file.uuid === payload.uuid);
-        if (matchIndex < 0) {
-            state.contents = state.contents.concat(payload);
-            return;
-        }
-
-        state.contents[matchIndex] = payload;
-    }),
-
-    removeFile: action((state, payload) => {
-        state.contents = state.contents.filter(file => file.uuid !== payload);
-    }),
 
     setDirectory: action((state, payload) => {
         state.directory = cleanDirectoryPath(payload);
diff --git a/resources/scripts/state/server/index.ts b/resources/scripts/state/server/index.ts
index f0d3c66db..cecb01acb 100644
--- a/resources/scripts/state/server/index.ts
+++ b/resources/scripts/state/server/index.ts
@@ -77,7 +77,6 @@ export const ServerContext = createContextStore<ServerStore>({
         state.databases.data = [];
         state.subusers.data = [];
         state.files.directory = '/';
-        state.files.contents = [];
         state.backups.data = [];
         state.schedules.data = [];
 

From 117c1b1778dcf2a730e471667626be45329a35ae Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 11 Jul 2020 11:12:59 -0700
Subject: [PATCH 53/55] Support right click to use file context menu

---
 .../components/elements/DropdownMenu.tsx      | 119 +++++++++++-------
 .../server/files/FileDropdownMenu.tsx         |  14 ++-
 .../components/server/files/FileObjectRow.tsx |   8 +-
 resources/scripts/plugins/useEventListener.ts |   2 +-
 4 files changed, 94 insertions(+), 49 deletions(-)

diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index 05b3d3c7c..b32976e1c 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { createRef } from 'react';
 import styled from 'styled-components/macro';
 import tw from 'twin.macro';
 import Fade from '@/components/elements/Fade';
@@ -17,64 +17,93 @@ export const DropdownButtonRow = styled.button<{ danger?: boolean }>`
     }
 `;
 
-const DropdownMenu = ({ renderToggle, children }: Props) => {
-    const menu = useRef<HTMLDivElement>(null);
-    const [ posX, setPosX ] = useState(0);
-    const [ visible, setVisible ] = useState(false);
+interface State {
+    posX: number;
+    visible: boolean;
+}
 
-    const onClickHandler = (e: React.MouseEvent<any, MouseEvent>) => {
+class DropdownMenu extends React.PureComponent<Props, State> {
+    menu = createRef<HTMLDivElement>();
+
+    state: State = {
+        posX: 0,
+        visible: false,
+    };
+
+    componentWillUnmount () {
+        this.removeListeners();
+    }
+
+    componentDidUpdate (prevProps: Readonly<Props>, prevState: Readonly<State>) {
+        const menu = this.menu.current;
+
+        if (this.state.visible && !prevState.visible && menu) {
+            document.addEventListener('click', this.windowListener);
+            document.addEventListener('contextmenu', this.contextMenuListener);
+            menu.setAttribute(
+                'style', `left: ${Math.round(this.state.posX - menu.clientWidth)}px`,
+            );
+        }
+
+        if (!this.state.visible && prevState.visible) {
+            this.removeListeners();
+        }
+    }
+
+    removeListeners = () => {
+        document.removeEventListener('click', this.windowListener);
+        document.removeEventListener('contextmenu', this.contextMenuListener);
+    };
+
+    onClickHandler = (e: React.MouseEvent<any, MouseEvent>) => {
         e.preventDefault();
-
-        !visible && setPosX(e.clientX);
-        setVisible(s => !s);
+        this.triggerMenu(e.clientX);
     };
 
-    const windowListener = (e: MouseEvent) => {
-        if (e.button === 2 || !visible || !menu.current) {
+    contextMenuListener = () => this.setState({ visible: false });
+
+    windowListener = (e: MouseEvent) => {
+        const menu = this.menu.current;
+
+        console.log('windowListener:', e.button);
+
+        if (e.button === 2 || !this.state.visible || !menu) {
             return;
         }
 
-        if (e.target === menu.current || menu.current.contains(e.target as Node)) {
+        if (e.target === menu || menu.contains(e.target as Node)) {
             return;
         }
 
-        if (e.target !== menu.current && !menu.current.contains(e.target as Node)) {
-            setVisible(false);
+        if (e.target !== menu && !menu.contains(e.target as Node)) {
+            this.setState({ visible: false });
         }
     };
 
-    useEffect(() => {
-        if (!visible || !menu.current) {
-            return;
-        }
+    triggerMenu = (posX: number) => this.setState(s => ({
+        posX: !s.visible ? posX : s.posX,
+        visible: !s.visible,
+    }));
 
-        document.addEventListener('click', windowListener);
-        menu.current.setAttribute(
-            'style', `left: ${Math.round(posX - menu.current.clientWidth)}px`,
+    render () {
+        return (
+            <div>
+                {this.props.renderToggle(this.onClickHandler)}
+                <Fade timeout={150} in={this.state.visible} unmountOnExit>
+                    <div
+                        ref={this.menu}
+                        onClick={e => {
+                            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`}
+                    >
+                        {this.props.children}
+                    </div>
+                </Fade>
+            </div>
         );
-
-        return () => {
-            document.removeEventListener('click', windowListener);
-        };
-    }, [ visible ]);
-
-    return (
-        <div>
-            {renderToggle(onClickHandler)}
-            <Fade timeout={150} in={visible} unmountOnExit>
-                <div
-                    ref={menu}
-                    onClick={e => {
-                        e.stopPropagation();
-                        setVisible(false);
-                    }}
-                    css={tw`absolute bg-white p-2 rounded border border-neutral-700 shadow-lg text-neutral-500 min-w-48`}
-                >
-                    {children}
-                </div>
-            </Fade>
-        </div>
-    );
-};
+    }
+}
 
 export default DropdownMenu;
diff --git a/resources/scripts/components/server/files/FileDropdownMenu.tsx b/resources/scripts/components/server/files/FileDropdownMenu.tsx
index 443d50a82..c03e5396e 100644
--- a/resources/scripts/components/server/files/FileDropdownMenu.tsx
+++ b/resources/scripts/components/server/files/FileDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faCopy,
@@ -24,6 +24,7 @@ import { FileObject } from '@/api/server/files/loadDirectory';
 import useFileManagerSwr from '@/plugins/useFileManagerSwr';
 import DropdownMenu from '@/components/elements/DropdownMenu';
 import styled from 'styled-components/macro';
+import useEventListener from '@/plugins/useEventListener';
 
 type ModalType = 'rename' | 'move';
 
@@ -46,15 +47,21 @@ const Row = ({ icon, title, ...props }: RowProps) => (
 );
 
 export default ({ file }: { file: FileObject }) => {
+    const onClickRef = useRef<DropdownMenu>(null);
     const [ showSpinner, setShowSpinner ] = useState(false);
     const [ modal, setModal ] = useState<ModalType | null>(null);
 
     const { uuid } = useServer();
     const { mutate } = useFileManagerSwr();
     const { clearAndAddHttpError, clearFlashes } = useFlash();
-
     const directory = ServerContext.useStoreState(state => state.files.directory);
 
+    useEventListener(`pterodactyl:files:ctx:${file.uuid}`, (e: CustomEvent) => {
+        if (onClickRef.current) {
+            onClickRef.current.triggerMenu(e.detail);
+        }
+    });
+
     const doDeletion = () => {
         clearFlashes('files');
 
@@ -95,6 +102,7 @@ export default ({ file }: { file: FileObject }) => {
 
     return (
         <DropdownMenu
+            ref={onClickRef}
             renderToggle={onClick => (
                 <div css={tw`p-3 hover:text-white`} onClick={onClick}>
                     <FontAwesomeIcon icon={faEllipsisH}/>
@@ -112,9 +120,11 @@ export default ({ file }: { file: FileObject }) => {
                 <Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'}/>
                 <Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'}/>
             </Can>
+            {file.isFile &&
             <Can action={'file.create'}>
                 <Row onClick={doCopy} icon={faCopy} title={'Copy'}/>
             </Can>
+            }
             <Row onClick={doDownload} icon={faFileDownload} title={'Download'}/>
             <Can action={'file.delete'}>
                 <Row onClick={doDeletion} icon={faTrashAlt} title={'Delete'} $danger/>
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
index 66ed8ca09..2f097e1b9 100644
--- a/resources/scripts/components/server/files/FileObjectRow.tsx
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -37,7 +37,13 @@ const FileObjectRow = ({ file }: { file: FileObject }) => {
     };
 
     return (
-        <Row key={file.name}>
+        <Row
+            key={file.name}
+            onContextMenu={e => {
+                e.preventDefault();
+                window.dispatchEvent(new CustomEvent(`pterodactyl:files:ctx:${file.uuid}`, { detail: e.clientX }));
+            }}
+        >
             <NavLink
                 to={`${match.url}/${file.isFile ? 'edit/' : ''}#${cleanDirectoryPath(`${directory}/${file.name}`)}`}
                 css={tw`flex flex-1 text-neutral-300 no-underline p-3`}
diff --git a/resources/scripts/plugins/useEventListener.ts b/resources/scripts/plugins/useEventListener.ts
index feb281ea4..1328fffff 100644
--- a/resources/scripts/plugins/useEventListener.ts
+++ b/resources/scripts/plugins/useEventListener.ts
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 
-export default (eventName: string, handler: any, element: any = window) => {
+export default (eventName: string, handler: (e: Event | CustomEvent | UIEvent | any) => void, element: any = window) => {
     const savedHandler = useRef<any>(null);
 
     useEffect(() => {

From c63382532e0f1e31e844b72c2a5632bee87b6398 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 11 Jul 2020 11:19:27 -0700
Subject: [PATCH 54/55] Update DropdownMenu.tsx

---
 resources/scripts/components/elements/DropdownMenu.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index b32976e1c..b64333c00 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -64,9 +64,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {
 
     windowListener = (e: MouseEvent) => {
         const menu = this.menu.current;
-
-        console.log('windowListener:', e.button);
-
+        
         if (e.button === 2 || !this.state.visible || !menu) {
             return;
         }

From 34a46a388fe19cad6f94d32a9a3baca61a0c4f64 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 11 Jul 2020 11:19:38 -0700
Subject: [PATCH 55/55] Update DropdownMenu.tsx

---
 resources/scripts/components/elements/DropdownMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/scripts/components/elements/DropdownMenu.tsx b/resources/scripts/components/elements/DropdownMenu.tsx
index b64333c00..ccf16ee6e 100644
--- a/resources/scripts/components/elements/DropdownMenu.tsx
+++ b/resources/scripts/components/elements/DropdownMenu.tsx
@@ -64,7 +64,7 @@ class DropdownMenu extends React.PureComponent<Props, State> {
 
     windowListener = (e: MouseEvent) => {
         const menu = this.menu.current;
-        
+
         if (e.button === 2 || !this.state.visible || !menu) {
             return;
         }