From 97a4bfec2870a2a9cb0c01e85d40d9a5adbaf553 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 6 May 2022 19:21:52 -0500
Subject: [PATCH] Captcha: improve style

---
 app/soapbox/features/auth_login/components/captcha.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/captcha.tsx b/app/soapbox/features/auth_login/components/captcha.tsx
index ea9f1e3a1..dcd51209c 100644
--- a/app/soapbox/features/auth_login/components/captcha.tsx
+++ b/app/soapbox/features/auth_login/components/captcha.tsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { fetchCaptcha } from 'soapbox/actions/auth';
-import { Text, Input } from 'soapbox/components/ui';
+import { Stack, Text, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 const noOp = () => {};
@@ -106,8 +106,10 @@ const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange,
   const intl = useIntl();
 
   return (
-    <div className='captcha' >
-      <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
+    <Stack space={2}>
+      <div className='flex items-center justify-center bg-white w-full border border-solid border-gray-300 dark:border-gray-600 rounded-md'>
+        <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
+      </div>
 
       <Input
         type='text'
@@ -120,7 +122,7 @@ const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange,
         onChange={onChange}
         required
       />
-    </div>
+    </Stack>
   );
 };