From 2b41e5f25787f4ea0bbc76b4fc01249e6075f5e2 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 5 May 2022 09:36:49 -0400
Subject: [PATCH] Stack avatar/header file picker on mobile

---
 .../components/profile-preview.tsx            | 46 +++++++++++++++++++
 .../components/profile_preview.tsx            | 44 ------------------
 app/soapbox/features/edit_profile/index.tsx   |  4 +-
 3 files changed, 48 insertions(+), 46 deletions(-)
 create mode 100644 app/soapbox/features/edit_profile/components/profile-preview.tsx
 delete mode 100644 app/soapbox/features/edit_profile/components/profile_preview.tsx

diff --git a/app/soapbox/features/edit_profile/components/profile-preview.tsx b/app/soapbox/features/edit_profile/components/profile-preview.tsx
new file mode 100644
index 000000000..2f355fe64
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/edit_profile/components/profile_preview.tsx b/app/soapbox/features/edit_profile/components/profile_preview.tsx
deleted file mode 100644
index e750bb273..000000000
--- a/app/soapbox/features/edit_profile/components/profile_preview.tsx
+++ /dev/null
@@ -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;
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 9ce2f2985..6a174a022 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/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'>