Kind of get account stuff working; IDE is throwing a fit right now

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;
+    }
 `;

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

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>

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>

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;

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>

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