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] 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