Move remote sign in button to sign in page

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

src/components/sidebar-menu.tsx

@@ -34,7 +34,6 @@ const messages = defineMessages({
   developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
   drafts: { id: 'navigation.drafts', defaultMessage: 'Drafts' },
   addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
-  addRemoteAccount: { id: 'profile_dropdown.add_remote_account', defaultMessage: 'Add account from remote instance' },
   followRequests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
 });
@@ -363,11 +362,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                           <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
-
-                        <NavLink className='flex items-center space-x-1 py-2' to='/login/external' onClick={handleClose}>
-                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/outline/external-link.svg')} />
-                          <Text size='sm' weight='medium'>{intl.formatMessage(messages.addRemoteAccount)}</Text>
-                        </NavLink>
                       </div>
                     )}
                   </Stack>

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',

src/locales/en.json

@@ -1030,7 +1030,6 @@
   "navigation.notifications": "Notifications",
   "navigation.search": "Search",
   "navigation_bar.account_aliases": "Account aliases",
-  "navigation_bar.account_migration": "Move account",
   "navigation_bar.blocks": "Blocks",
   "navigation_bar.compose": "Compose a post",
   "navigation_bar.compose_direct": "Direct message",
@@ -1052,7 +1051,6 @@
   "navigation_bar.followed_tags": "Followed hashtags",
   "navigation_bar.import_data": "Import data",
   "navigation_bar.in_reply_to": "In reply to",
-  "navigation_bar.invites": "Invites",
   "navigation_bar.logout": "Logout",
   "navigation_bar.mutes": "Mutes",
   "navigation_bar.preferences": "Preferences",