Merge branch 'improve-mobile-for-edit-profile' into 'develop'

Stack avatar/header file picker on mobile

See merge request soapbox-pub/soapbox-fe!1313

app/soapbox/features/edit_profile/components/profile-preview.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import StillImage from 'soapbox/components/still_image';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IProfilePreview {
+  account: Account,
+}
+
+/** Displays a preview of the user's account, including avatar, banner, etc. */
+const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
+  const { displayFqn } = useSoapboxConfig();
+
+  return (
+    <div className='bg-white dark:bg-slate-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
+      <div>
+        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-slate-900/50'>
+          <StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
+        </div>
+      </div>
+
+      <HStack space={3} alignItems='center' className='p-3'>
+        <div className='relative'>
+          <div className='h-12 w-12 bg-gray-400 rounded-full'>
+            <StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
+          </div>
+
+          {!account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>}
+        </div>
+
+        <Stack className='truncate'>
+          <Text weight='medium' size='sm' truncate>
+            {account.display_name}
+          </Text>
+          <Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
+        </Stack>
+      </HStack>
+    </div>
+  );
+};
+
+export default ProfilePreview;

app/soapbox/features/edit_profile/components/profile_preview.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import StillImage from 'soapbox/components/still_image';
-import VerificationBadge from 'soapbox/components/verification_badge';
-import { useSoapboxConfig } from 'soapbox/hooks';
-
-import type { Account } from 'soapbox/types/entities';
-
-interface IProfilePreview {
-  account: Account,
-}
-
-/** Displays a preview of the user's account, including avatar, banner, etc. */
-const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
-  const { displayFqn } = useSoapboxConfig();
-
-  return (
-    <div className='card h-card'>
-      <Link to={`/@${account.acct}`}>
-        <div className='card__img'>
-          <StillImage alt='' src={account.header} />
-        </div>
-        <div className='card__bar'>
-          <div className='avatar'>
-            <StillImage alt='' className='u-photo' src={account.avatar} width='48' height='48' />
-          </div>
-          <div className='display-name'>
-            <span style={{ display: 'none' }}>{account.username}</span>
-            <bdi>
-              <strong className='emojify p-name'>
-                {account.display_name}
-                {account.verified && <VerificationBadge />}
-              </strong>
-            </bdi>
-            <span>@{displayFqn ? account.fqn : account.acct}</span>
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-};
-
-export default ProfilePreview;

app/soapbox/features/edit_profile/index.tsx

@@ -14,7 +14,7 @@ import resizeImage from 'soapbox/utils/resize_image';
 import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack } from '../../components/ui';
 import Streamfield from '../../components/ui/streamfield/streamfield';
 
-import ProfilePreview from './components/profile_preview';
+import ProfilePreview from './components/profile-preview';
 
 import type { Account } from 'soapbox/types/entities';
 
@@ -377,7 +377,7 @@ const EditProfile: React.FC = () => {
           />
         </FormGroup>
 
-        <div className='grid grid-cols-2 gap-4'>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
           <ProfilePreview account={previewAccount} />
 
           <div className='space-y-4'>