fix: nft responsiveness

coinbase · Nov 6, 2024 · 3de525b · 3de525b
1 parent 69d9b93
commit 3de525b
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 39 deletions.
diff --git a/src/nft/components/NFTCard.tsx b/src/nft/components/NFTCard.tsx
@@ -57,7 +57,7 @@ export function NFTCard({
               color.foreground,
               pressable.default,
               border.radius,
-              'flex w-full max-w-[500px] flex-col items-stretch border p-4 text-left',
+              'flex w-full max-w-[500px] flex-col items-stretch border p-4 text-left sm:w-[500px]',
               `hover:border-[${border.defaultActive}]`,
               className,
             )}

diff --git a/src/nft/components/NFTMintCard.tsx b/src/nft/components/NFTMintCard.tsx
@@ -52,7 +52,7 @@ export function NFTMintCard({
               background.default,
               border.defaultActive,
               border.radius,
-              'flex w-full max-w-[500px] flex-col border px-6 py-4',
+              'flex w-full max-w-[500px] flex-col border px-6 py-4 sm:w-[500px]',
               className,
             )}
             data-testid="ockNFTMintCard_Container"

diff --git a/src/nft/components/view/NFTImage.test.tsx b/src/nft/components/view/NFTImage.test.tsx
@@ -88,18 +88,6 @@ describe('NFTImage', () => {
     );
   });
 
-  it('should hide the svg on transition end', async () => {
-    (useNFTContext as Mock).mockReturnValue({
-      imageUrl: 'transitionend',
-      description: 'Test NFT Image',
-    });
-    const { getByTestId, queryByTestId } = render(<NFTImage />);
-    await act(async () => {
-      fireEvent.transitionEnd(getByTestId('ockNFTImage'));
-    });
-    expect(queryByTestId('ock-defaultNFTSvg')).toBeNull();
-  });
-
   it('should retry loading the image when retry button is clicked', async () => {
     (useNFTContext as Mock).mockReturnValue({
       imageUrl: 'error',

diff --git a/src/nft/components/view/NFTImage.tsx b/src/nft/components/view/NFTImage.tsx
@@ -22,7 +22,6 @@ export function NFTImage({
   const { imageUrl, description } = useNFTContext();
   const [loaded, setLoaded] = useState(false);
   const [error, setError] = useState(false);
-  const [transitionEnded, setTransitionEnded] = useState(false);
 
   const loadImage = useCallback(() => {
     if (imageUrl) {
@@ -55,43 +54,33 @@ export function NFTImage({
     loadImage();
   }, [loadImage]);
 
-  const handleTransitionEnd = useCallback(() => {
-    setTransitionEnded(true);
-  }, []);
-
   return (
     <div
       className={cn(
-        'relative flex h-[450px] max-h-screen items-center justify-center',
+        'grid aspect-square w-full',
+        '[&>*]:col-start-1 [&>*]:col-end-1 [&>*]:row-start-1 [&>*]:row-end-1',
         className,
       )}
     >
-      {error && (
-        <div className="absolute top-[60%] z-10">
-          <button type="button" onClick={handleRetry}>
-            retry
-          </button>
-        </div>
-      )}
-      {!transitionEnded && (
-        <div
-          className={`absolute inset-0 ${loaded ? 'opacity-0' : 'opacity-100'} transition-[opacity] duration-500 ease-in-out`}
-        >
-          {defaultNFTSvg}
-        </div>
-      )}
+      <div className="flex items-center justify-center">{defaultNFTSvg}</div>
       <img
         data-testid="ockNFTImage"
         src={imageUrl}
         alt={description}
         decoding="async"
         className={cn(
-          'max-h-[450px] transition-[opacity] duration-500 ease-in-out',
-          `${loaded ? 'opacity-100' : 'opacity-0'}`,
+          'transition-opacity duration-500 ease-in-out',
+          loaded ? 'opacity-100' : 'opacity-0',
           { 'h-full w-full object-cover': square },
         )}
-        onTransitionEnd={handleTransitionEnd}
       />
+      {error && (
+        <div className="flex items-center justify-center">
+          <button type="button" onClick={handleRetry} className="z-10 mt-[60%]">
+            retry
+          </button>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/nft/components/view/NFTVideo.tsx b/src/nft/components/view/NFTVideo.tsx
@@ -49,7 +49,7 @@ export function NFTVideo({
   return (
     <div
       className={cn(
-        'relative flex h-[450px] max-h-screen items-center justify-center',
+        'relative flex h-full max-h-screen items-center justify-center',
         className,
       )}
     >

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -13,7 +13,7 @@ export const text = {
   label1: 'ock-font-family font-semibold text-sm leading-5',
   label2: 'ock-font-family text-sm leading-5',
   legal: 'ock-font-family text-xs leading-4',
-  title1: 'ock-font-family font-semibold text-[1.75rem] leading-9',
+  title1: 'ock-font-family font-semibold text-2xl leading-9',
   title3: 'ock-font-family font-semibold text-xl leading-7',
 } as const;