Style ConsumersList

app/soapbox/features/auth_login/components/consumers-list.tsx

@@ -1,7 +1,8 @@
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { HStack } from 'soapbox/components/ui';
+import { Card, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
 import ConsumerButton from './consumer-button';
@@ -15,11 +16,16 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.size > 0) {
     return (
-      <HStack space={2}>
+      <Card className='p-4 sm:rounded-xl bg-gray-50'>
-        {providers.map(provider => (
+        <Text size='xs' theme='muted'>
-          <ConsumerButton provider={provider} />
+          <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
-        ))}
+        </Text>
-      </HStack>
+        <HStack space={2}>
+          {providers.map(provider => (
+            <ConsumerButton provider={provider} />
+          ))}
+        </HStack>
+      </Card>
     );
   } else {
     return null;

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

@@ -31,7 +31,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
         <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
-      <Stack className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' space={3}>
+      <Stack className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto' space={5}>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText={intl.formatMessage(messages.username)}>
             <Input