Captcha: improve styles

app/soapbox/features/auth_login/components/captcha.tsx

@@ -1,13 +1,17 @@
 import { Map as ImmutableMap } from 'immutable';
 import React, { useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { fetchCaptcha } from 'soapbox/actions/auth';
-import { TextInput } from 'soapbox/features/forms';
+import { Text, Input } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 const noOp = () => {};
 
+const messages = defineMessages({
+  placeholder: { id: 'registration.captcha.placeholder', defaultMessage: 'Enter the pictured text' },
+});
+
 interface ICaptchaField {
   name?: string,
   value: string,
@@ -71,7 +75,9 @@ const CaptchaField: React.FC<ICaptchaField> = ({
   case 'native':
     return (
       <div>
-        <p>{<FormattedMessage id='registration.captcha.hint' defaultMessage='Click the image to get a new captcha' />}</p>
+        <Text>
+          <FormattedMessage id='registration.captcha.hint' defaultMessage='Click the image to get a new captcha' />
+        </Text>
 
         <NativeCaptchaField
           captcha={captcha}
@@ -96,21 +102,27 @@ interface INativeCaptchaField {
   value: string,
 }
 
-const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange, onClick, name, value }) => (
+const NativeCaptchaField: React.FC<INativeCaptchaField> = ({ captcha, onChange, onClick, name, value }) => {
-  <div className='captcha' >
+  const intl = useIntl();
-    <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
+
-    <TextInput
+  return (
-      placeholder='Enter the pictured text'
+    <div className='captcha' >
-      name={name}
+      <img alt='captcha' src={captcha.get('url')} onClick={onClick} />
-      value={value}
+
-      autoComplete='off'
+      <Input
-      autoCorrect='off'
+        type='text'
-      autoCapitalize='off'
+        placeholder={intl.formatMessage(messages.placeholder)}
-      onChange={onChange}
+        name={name}
-      required
+        value={value}
-    />
+        autoComplete='off'
-  </div>
+        autoCorrect='off'
-);
+        autoCapitalize='off'
+        onChange={onChange}
+        required
+      />
+    </div>
+  );
+};
 
 export {
   CaptchaField as default,