Move remote sign in button to sign in page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/features/auth-login/components/consumers-list.tsx

@@ -16,7 +16,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.length > 0) {
     return (
-      <Card className='bg-gray-50 p-4 black:bg-black sm:rounded-xl dark:bg-primary-800'>
+      <Card className='bg-gray-50 black:bg-black sm:rounded-xl dark:bg-primary-800'>
         <Text size='xs' theme='muted'>
           <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
         </Text>

src/features/auth-login/components/login-page.tsx

@@ -6,6 +6,7 @@ import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { closeModal } from 'soapbox/actions/modals';
 import { BigCard } from 'soapbox/components/big-card';
+import { Button, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
 import { isStandalone } from 'soapbox/utils/state';
@@ -73,8 +74,21 @@ const LoginPage = () => {
 
   return (
     <BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
-      <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />
-      <ConsumersList />
+      <Stack space={4}>
+        <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />
+        <ConsumersList />
+
+        <div className={'flex items-center gap-2.5 before:flex-1 before:border-b before:border-gray-300 before:content-[\'\'] after:flex-1 after:border-b after:border-gray-300 after:content-[\'\'] before:black:border-gray-800 after:black:border-gray-800 before:dark:border-gray-600 after:dark:border-gray-600'}>
+          <Text align='center'>
+            <FormattedMessage id='login_form.divider' defaultMessage='or' />
+          </Text>
+        </div>
+
+        <Button className='w-full' theme='secondary' to='/login/external'>
+          <FormattedMessage id='login_form.external' defaultMessage='Sign in from remote instance' />
+        </Button>
+
+      </Stack>
     </BigCard>
   );
 };

src/features/ui/components/profile-dropdown.tsx

@@ -17,7 +17,6 @@ import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
-  addRemoteAccount: { id: 'profile_dropdown.add_remote_account', defaultMessage: 'Add account from remote instance' },
   theme: { id: 'profile_dropdown.theme', defaultMessage: 'Theme' },
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
 });
@@ -91,12 +90,6 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
       icon: require('@tabler/icons/outline/plus.svg'),
     });
 
-    menu.push({
-      text: intl.formatMessage(messages.addRemoteAccount),
-      to: '/login/external',
-      icon: require('@tabler/icons/outline/external-link.svg'),
-    });
-
     menu.push({
       text: intl.formatMessage(messages.logout, { acct: account.acct }),
       to: '/logout',