feat: create TopReaderBadgeModal

[omBratteng]

Changes

Depends on dailydotdev/daily-api#2376

TODO:

• Download image

Events

Did you introduce any new tracking events?

https://docs.google.com/spreadsheets/d/18Lv7zXges9QfVX5VYL1a-Hyl0e1sQ3sLr0OK8YZWKXI/edit?gid=1801144038#gid=1801144038

Experiment

Did you introduce any new experiments?

Manual Testing

Caution

Please make sure existing components are not breaking/affected by this PR

AS-662

Preview domain

https://as-662-top-reader-modal.preview.app.daily.dev

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
daily-webapp	✅ Ready (Inspect)	Visit Preview	Nov 1, 2024 11:37am

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
storybook	⬜️ Ignored (Inspect)		Nov 1, 2024 11:37am

[rebelchris]

Minor questions

[rebelchris]

Why do we need this specific condition, the modals have their generic use-case for mobile/desktop buttons already right?

[omBratteng]

In the design, the close button is at the bottom. Usually they're a X button at the top right. And when it's on mobile, it already comes with close button on the drawer, so I need to hide it.

[omBratteng]

I can set displayCloseButton: false on drawerProps and then always render this button instead.

[omBratteng]

diff --git a/packages/shared/src/components/modals/badges/TopReaderBadgeModal.tsx b/packages/shared/src/components/modals/badges/TopReaderBadgeModal.tsx
index e535994f..578d9a7d 100644
--- a/packages/shared/src/components/modals/badges/TopReaderBadgeModal.tsx
+++ b/packages/shared/src/components/modals/badges/TopReaderBadgeModal.tsx
@@ -86,6 +86,9 @@ const TopReaderBadgeModal = (
       isDrawerOnMobile
       onAfterClose={() => onAfterClose(topReaderBadge.keyword.value)}
       onAfterOpen={() => onAfterOpen(topReaderBadge.keyword.value)}
+      drawerProps={{
+        displayCloseButton: false,
+      }}
     >
       <Modal.Body className="flex flex-col items-center justify-center gap-4 text-center">
         <h1 className="font-bold typo-title1">
@@ -108,15 +111,13 @@ const TopReaderBadgeModal = (
           Download badge
         </Button>
 
-        {!isMobile && (
-          <Button
-            className="w-full max-w-80"
-            variant={ButtonVariant.Float}
-            onClick={onRequestClose}
-          >
-            Close
-          </Button>
-        )}
+        <Button
+          className={classNames('w-full', !isMobile && 'max-w-80')}
+          variant={ButtonVariant.Float}
+          onClick={onRequestClose}
+        >
+          Close
+        </Button>
       </Modal.Body>
     </Modal>
   );

[rebelchris]

Yeah guess it's easier in case they change copy or something silly 🤪

[omBratteng]

Changed to hide drawer button and use inline button instead.