Skip to content

Commit 82cf070

Browse files
DaneEverittDaneEveritt
committed
Fix styling on 2fa codes modal
1 parent 1c97dd4 commit 82cf070

File tree

2 files changed

+33
-29
lines changed

2 files changed

+33
-29
lines changed

‎resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { ApplicationStore } from '@/state';
99
import { httpErrorToHuman } from '@/api/http';
1010
import FlashMessageRender from '@/components/FlashMessageRender';
1111
import Field from '@/components/elements/Field';
12+
import tw from 'twin.macro';
13+
import Button from '@/components/elements/Button';
1214

1315
interface Values {
1416
code: string;
@@ -64,7 +66,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
6466
.matches(/^(\d){6}$/, 'Authenticator code must be 6 digits.'),
6567
})}
6668
>
67-
{({ isSubmitting, isValid }) => (
69+
{({ isSubmitting }) => (
6870
<Modal
6971
{...props}
7072
onDismissed={dismiss}
@@ -75,47 +77,47 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
7577
>
7678
{recoveryTokens.length > 0 ?
7779
<>
78-
<h2 className={'mb-4'}>Two-factor authentication enabled</h2>
79-
<p className={'text-neutral-300'}>
80+
<h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
81+
<p css={tw`text-neutral-300`}>
8082
Two-factor authentication has been enabled on your account. Should you loose access to
81-
this device you'll need to use on of the codes displayed below in order to access your
83+
this device you&apos;ll need to use on of the codes displayed below in order to access your
8284
account.
8385
</p>
84-
<p className={'text-neutral-300 mt-4'}>
86+
<p css={tw`text-neutral-300 mt-4`}>
8587
<strong>These codes will not be displayed again.</strong> Please take note of them now
8688
by storing them in a secure repository such as a password manager.
8789
</p>
88-
<pre className={'mt-4 rounded font-mono bg-neutral-900 p-4'}>
89-
{recoveryTokens.map(token => <code key={token} className={'block mb-1'}>{token}</code>)}
90+
<pre css={tw`text-sm mt-4 rounded font-mono bg-neutral-900 p-4`}>
91+
{recoveryTokens.map(token => <code key={token} css={tw`block mb-1`}>{token}</code>)}
9092
</pre>
91-
<div className={'text-right'}>
92-
<button className={'mt-6 btn btn-lg btn-primary'} onClick={dismiss}>
93+
<div css={tw`text-right`}>
94+
<Button css={tw`mt-6`} size={'large'} onClick={dismiss}>
9395
Close
94-
</button>
96+
</Button>
9597
</div>
9698
</>
9799
:
98-
<Form className={'mb-0'}>
99-
<FlashMessageRender className={'mb-6'} byKey={'account:two-factor'}/>
100-
<div className={'flex flex-wrap'}>
101-
<div className={'w-full md:flex-1'}>
102-
<div className={'w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto'}>
100+
<Form css={tw`mb-0`}>
101+
<FlashMessageRender css={tw`mb-6`} byKey={'account:two-factor'}/>
102+
<div css={tw`flex flex-wrap`}>
103+
<div css={tw`w-full md:flex-1`}>
104+
<div css={tw`w-32 h-32 md:w-64 md:h-64 bg-neutral-600 p-2 rounded mx-auto`}>
103105
{!token || !token.length ?
104106
<img
105107
src={'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='}
106-
className={'w-64 h-64 rounded'}
108+
css={tw`w-64 h-64 rounded`}
107109
/>
108110
:
109111
<img
110112
src={`https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${token}`}
111113
onLoad={() => setLoading(false)}
112-
className={'w-full h-full shadow-none rounded-0'}
114+
css={tw`w-full h-full shadow-none rounded-none`}
113115
/>
114116
}
115117
</div>
116118
</div>
117-
<div className={'w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col'}>
118-
<div className={'flex-1'}>
119+
<div css={tw`w-full mt-6 md:mt-0 md:flex-1 md:flex md:flex-col`}>
120+
<div css={tw`flex-1`}>
119121
<Field
120122
id={'code'}
121123
name={'code'}
@@ -125,10 +127,10 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
125127
autoFocus={!loading}
126128
/>
127129
</div>
128-
<div className={'mt-6 md:mt-0 text-right'}>
129-
<button className={'btn btn-primary btn-sm'} disabled={!isValid}>
130+
<div css={tw`mt-6 md:mt-0 text-right`}>
131+
<Button>
130132
Setup
131-
</button>
133+
</Button>
132134
</div>
133135
</div>
134136
</div>

‎resources/scripts/components/elements/ConfirmationModal.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
3+
import tw from 'twin.macro';
4+
import Button from '@/components/elements/Button';
35

46
type Props = {
57
title: string;
@@ -16,15 +18,15 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
1618
showSpinnerOverlay={showSpinnerOverlay}
1719
onDismissed={() => onDismissed()}
1820
>
19-
<h3 className={'mb-6'}>{title}</h3>
20-
<p className={'text-sm'}>{children}</p>
21-
<div className={'flex items-center justify-end mt-8'}>
22-
<button className={'btn btn-secondary btn-sm'} onClick={() => onDismissed()}>
21+
<h3 css={tw`mb-6`}>{title}</h3>
22+
<p css={tw`text-sm`}>{children}</p>
23+
<div css={tw`flex items-center justify-end mt-8`}>
24+
<Button isSecondary onClick={() => onDismissed()}>
2325
Cancel
24-
</button>
25-
<button className={'btn btn-red btn-sm ml-4'} onClick={() => onConfirmed()}>
26+
</Button>
27+
<Button color={'red'} css={tw`ml-4`} onClick={() => onConfirmed()}>
2628
{buttonText}
27-
</button>
29+
</Button>
2830
</div>
2931
</Modal>
3032
);

0 commit comments

Comments
 (0)