fix: mobile layout & skeleton improvements (#22)

Co-authored-by: martines3000 <domajnko.martin@gmail.com>
lutralabs · Jul 4, 2024 · c1a721b · c1a721b
1 parent a64c541
commit c1a721b
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 44 deletions.
diff --git a/packages/dapp/src/components/EndorseForm/EndorsementModal.tsx b/packages/dapp/src/components/EndorseForm/EndorsementModal.tsx
@@ -46,16 +46,18 @@ export const EndorsementModal = ({
               </DialogDescription>
             </DialogHeader>
 
-            <div className="p-4 bg-contain bg-no-repeat gap-y-2 md:w-[600px] md:h-[316px] bg-share-bg flex justify-start items-center">
-              <div className="flex flex-col gap-y-4 ml-4">
-                <div className="flex items-center justify-center">
-                  {endorsee}
-                </div>
-                <div className="md:text-xl font-medium">
-                  {endorsementType === 'Based energy 🔵' ? 'for' : 'as a'}
-                </div>
-                <div className="md:text-3xl text-md font-semibold text-primary-500">
-                  {endorsementType}
+            <div className="flex justify-center">
+              <div className="p-4 bg-contain bg-no-repeat w-[300px] h-[158px] gap-y-2 md:w-[600px] md:h-[316px] sm:w-[450px] sm:h-[237px] bg-share-bg flex justify-start items-center">
+                <div className="flex flex-col gap-y-1 md:gap-y-4 ml-4">
+                  <div className="flex items-center justify-center">
+                    {endorsee}
+                  </div>
+                  <div className="md:text-xl font-medium">
+                    {endorsementType === 'Based energy 🔵' ? 'for' : 'as a'}
+                  </div>
+                  <div className="md:text-3xl text-md font-semibold text-primary-500">
+                    {endorsementType}
+                  </div>
                 </div>
               </div>
             </div>

diff --git a/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx b/packages/dapp/src/components/Endorsee/EndorseeBadge.tsx
@@ -112,12 +112,26 @@ export const EndorseeBadge = ({
                 avatar={user.avatar}
                 address={user.address}
                 size="2xl"
+                className="md:block hidden"
+              />
+              <ProfileAvatar
+                avatar={user.avatar}
+                address={user.address}
+                size="lg"
+                className="sm:block hidden md:hidden"
+              />
+              <ProfileAvatar
+                avatar={user.avatar}
+                address={user.address}
+                size="md"
+                className="sm:hidden block"
               />
             </Link>
             <div className={'absolute -bottom-2 -right-2'}>
               <MemoizedSVG
                 fill={PLATFORM_DATA[user.type].color as string}
                 className={cn(
+                  'md:block hidden',
                   'p-1 rounded-full',
                   user.type === PlatformType.lens && 'bg-green-100',
                   user.type === PlatformType.farcaster && 'bg-purple-100',
@@ -128,10 +142,24 @@ export const EndorseeBadge = ({
                 width={30}
                 height={30}
               />
+              <MemoizedSVG
+                fill={PLATFORM_DATA[user.type].color as string}
+                className={cn(
+                  'md:hidden block',
+                  'p-1 rounded-full',
+                  user.type === PlatformType.lens && 'bg-green-100',
+                  user.type === PlatformType.farcaster && 'bg-purple-100',
+                  user.type === PlatformType.ens ||
+                    (user.type === PlatformType.ethereum && 'bg-blue-100')
+                )}
+                src={PLATFORM_DATA[user.type].icon as string}
+                width={20}
+                height={20}
+              />
             </div>
           </div>
-          <div className="w-full sm:ml-4">
-            <div className="text-xl sm:text-3xl font-semibold max-sm:text-center">
+          <div className="w-full ml-2 sm:ml-4">
+            <div className="text-lg sm:text-3xl font-semibold max-sm:text-center">
               {user.handle}
             </div>
             <div className="flex items-center text-sm sm:text-md text-gray-600 font-normal max-sm:justify-center gap-x-1">

diff --git a/packages/dapp/src/components/EndorsementView/Details.tsx b/packages/dapp/src/components/EndorsementView/Details.tsx
@@ -9,12 +9,11 @@ import {
 } from '@/components/ui/tooltip';
 import { InformationCircleIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import { DocumentDuplicateIcon } from '@heroicons/react/24/outline';
 import { EXPLORERS } from '@/lib/contracts/explorers';
-import { useAccount } from 'wagmi';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { CopyIcon } from '../CopyIcon';
+import { formatAddress } from '@/utils';
 
 dayjs.extend(relativeTime);
 
@@ -35,7 +34,7 @@ const LabelField = ({
   description,
 }: { label: string; description: string }) => {
   return (
-    <div className="flex flex-col gap-y-1">
+    <div className="flex flex-col gap-y-1 max-sm:mt-4">
       <div className="flex items-center gap-x-1">
         <TooltipProvider>
           <Tooltip>
@@ -66,7 +65,7 @@ export const Details = ({
 }: DetailsProps) => {
   return (
     <div>
-      <div className="grid grid-cols-[35%_65%] gap-y-2 mt-4">
+      <div className="grid max-sm:grid-cols-1 sm:grid-cols-[35%_65%] gap-y-2 mt-4">
         <LabelField label="Endorser" description="The endorser" />
         {endorserAvatar}
         <LabelField
@@ -79,7 +78,7 @@ export const Details = ({
             prefetch={false}
             className="flex items-center overflow-hidden cursor-pointer text-primary-500 hover:underline hover:text-primary-600 animated-transition "
           >
-            {endorserAddress}
+            {formatAddress(endorserAddress)}
           </Link>
           <CopyIcon value={endorserAddress} />
         </div>
@@ -101,7 +100,7 @@ export const Details = ({
           description="Revoked endorsements are no longer valid"
         />
         <div className="">{revoked ? 'Invalid' : 'Valid'}</div>
-        <hr className="col-span-2 my-2" />
+        <hr className="sm:col-span-2 my-2 max-sm:mt-4" />
         <LabelField
           label="Timestamp"
           description="When the endorsement has been made."

diff --git a/...onents/EndorsementView/FeedNavigation.tsx → ...EndorsementView/EndorsementNavigation.tsx b/...onents/EndorsementView/FeedNavigation.tsx → ...EndorsementView/EndorsementNavigation.tsx
@@ -3,19 +3,21 @@
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
 
-type FeedNavigationProps = {
+type EndorsementNavigationProps = {
   endorsementTab: string;
 };
 
-export const FeedNavigation = ({ endorsementTab }: FeedNavigationProps) => {
+export const EndorsementNavigation = ({
+  endorsementTab,
+}: EndorsementNavigationProps) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const params = new URLSearchParams(searchParams);
   params.delete('endorsementTab');
 
   return (
     <div className="px-2">
-      <div className="gap-1 border-1 max-w-[244px] border-gray-200 shadow-sm max-sm:flex max-sm:flex-col sm:items-center justify-center rounded-md p-1 text-muted-foreground grid grid-cols-2 bg-gray-100">
+      <div className="gap-1 border-1 max-w-[244px] border-gray-200 shadow-sm sm:items-center justify-center rounded-md p-1 text-muted-foreground grid grid-cols-2 bg-gray-100">
         <Link
           className="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
           href={`${pathname}?${params.toString()}&endorsementTab=overview`}

diff --git a/packages/dapp/src/components/EndorsementView/Overview.tsx b/packages/dapp/src/components/EndorsementView/Overview.tsx
@@ -8,6 +8,7 @@ import { MemoizedImage } from '../MemoizedImage';
 import { Input } from '../ui/input';
 import { Button } from '../ui/button';
 import { usePathname, useSearchParams } from 'next/navigation';
+import { Skeleton } from '../ui/skeleton';
 
 type OverviewProps = {
   endorser: string;
@@ -115,7 +116,7 @@ export const Overview = ({
           </div>
         </div>
         <div className="mt-4 flex items-center gap-x-2">
-          <Input value={fullPath} />
+          <Input value={fullPath} readOnly />
           <Button
             size="lg"
             variant="outline"
@@ -128,3 +129,12 @@ export const Overview = ({
     </div>
   );
 };
+
+export const OverviewSkeleton = () => {
+  return (
+    <div>
+      <Skeleton className="md:w-[600px] md:h-[316px] bg-gray-200 rounded-sm" />
+      <Skeleton className="w-full mt-4 h-24 bg-gray-200 rounded-sm" />
+    </div>
+  );
+};
diff --git a/packages/dapp/src/components/EndorsementView/index.tsx b/packages/dapp/src/components/EndorsementView/index.tsx
@@ -1,10 +1,10 @@
 import { getAttestation } from '@/lib/eas';
 import { Suspense } from 'react';
 import { EndorsementViewAvatar } from './EndorsementViewAvatar';
-import { Overview } from './Overview';
+import { Overview, OverviewSkeleton } from './Overview';
 import { getPropertyValue } from '@/utils/getPropertyValue';
 import { Skeleton } from '../ui/skeleton';
-import { FeedNavigation } from './FeedNavigation';
+import { EndorsementNavigation } from './EndorsementNavigation';
 import { Details } from './Details';
 
 type EndorsementViewProps = {
@@ -71,7 +71,7 @@ export const EndorsementView = async ({
 
   return (
     <div className="overflow-hidden">
-      <FeedNavigation endorsementTab={_tab} />
+      <EndorsementNavigation endorsementTab={_tab} />
       <Suspense
         key={_tab}
         fallback={
@@ -82,27 +82,35 @@ export const EndorsementView = async ({
       >
         <div className="p-4">
           {_tab === 'overview' && (
-            <Overview
-              endorser={endorser}
-              endorserAvatar={endorserAvatar}
-              endorsee={displayName}
-              endorseeAvatar={avatar}
-              endorsementType={endorsementType}
-              comment={comment}
-            />
+            <Suspense fallback={<OverviewSkeleton />}>
+              <Overview
+                endorser={endorser}
+                endorserAvatar={endorserAvatar}
+                endorsee={displayName}
+                endorseeAvatar={avatar}
+                endorsementType={endorsementType}
+                comment={comment}
+              />
+            </Suspense>
           )}
           {_tab === 'details' && (
-            <Details
-              chainId={chainId}
-              endorserAvatar={endorserAvatar}
-              endorserAddress={endorser}
-              endorsementType={endorsementType as string}
-              comment={comment}
-              timestamp={timestamp}
-              txid={txid}
-              revoked={revoked}
-              uid={id}
-            />
+            <Suspense
+              fallback={
+                <Skeleton className="w-full h-48 bg-gray-200 rounded-sm" />
+              }
+            >
+              <Details
+                chainId={chainId}
+                endorserAvatar={endorserAvatar}
+                endorserAddress={endorser}
+                endorsementType={endorsementType as string}
+                comment={comment}
+                timestamp={timestamp}
+                txid={txid}
+                revoked={revoked}
+                uid={id}
+              />
+            </Suspense>
           )}
         </div>
       </Suspense>