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