Minor UI fixes for leaving audius modal (#3895)

AudiusProject · Aug 16, 2023 · 30cc8f1 · 30cc8f1
1 parent 970f411
commit 30cc8f1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.module.css
@@ -1,19 +1,14 @@
-.modalBody {
-  width: 480px;
-}
-
-.text {
-  font-size: var(--font-l);
-  font-weight: var(--font-medium);
-}
-
 .content > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--unit-6);
 }
 
+.hint {
+  align-self: stretch;
+}
+
 .hintContent {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx b/packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx
@@ -32,13 +32,15 @@ export const LeavingAudiusModal = () => {
   const { link } = data
   const handleOpen = useCallback(() => {
     window.open(link, '_blank', 'noreferrer,noopener')
-  }, [link])
+    onClose()
+  }, [link, onClose])
   return (
     <Modal
       bodyClassName={styles.modalBody}
       isOpen={isOpen}
       onClose={onClose}
       onClosed={onClosed}
+      size={'small'}
     >
       <ModalHeader>
         <ModalTitle
@@ -50,6 +52,7 @@ export const LeavingAudiusModal = () => {
       <ModalContent className={styles.content}>
         <Text>{messages.body}</Text>
         <HelpCallout
+          className={styles.hint}
           contentClassName={styles.hintContent}
           icon={<IconExternalLink />}
           content={link}