From 609eb543ba991827107913b75845024fb05e5e01 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 11 Aug 2022 19:56:48 -0500
Subject: [PATCH] Style ConsumersList

---
 .../auth_login/components/consumers-list.tsx   | 18 ++++++++++++------
 .../auth_login/components/login_form.tsx       |  2 +-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/auth_login/components/consumers-list.tsx b/app/soapbox/features/auth_login/components/consumers-list.tsx
index 368bc63f48..84f65d900a 100644
--- a/app/soapbox/features/auth_login/components/consumers-list.tsx
+++ b/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}>
-        {providers.map(provider => (
-          <ConsumerButton provider={provider} />
-        ))}
-      </HStack>
+      <Card className='p-4 sm:rounded-xl bg-gray-50'>
+        <Text size='xs' theme='muted'>
+          <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
+        </Text>
+        <HStack space={2}>
+          {providers.map(provider => (
+            <ConsumerButton provider={provider} />
+          ))}
+        </HStack>
+      </Card>
     );
   } else {
     return null;
diff --git a/app/soapbox/features/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index 24e4e37401..5b1f6f7334 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/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