Update header section in TipAudioModal

AudiusProject · Jul 27, 2022 · 49926ba · 49926ba
1 parent 55850d2
commit 49926ba
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 48 deletions.
diff --git a/packages/web/src/components/tipping/tip-audio/TipAudio.module.css b/packages/web/src/components/tipping/tip-audio/TipAudio.module.css
@@ -8,9 +8,14 @@
   margin-left: 8px;
 }
 
+.modalHeader {
+  border-bottom: 1px solid var(--neutral-light-6);
+}
+
 .modalBody {
   width: 488px;
   height: 492px;
+  max-height: 95vh;
 }
 
 .modalContentContainer {
@@ -28,13 +33,24 @@
   align-items: center;
 }
 
+.modalTitleIcon {
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+}
+
+.dismissButton {
+  color: var(--neutral-light-4);
+}
+
 .container > div {
   margin-top: 24px;
   margin-bottom: 24px;
 }
 
 .container {
   width: 100%;
+  padding: 0 var(--unit-6);
 }
 
 .flexCenter {

diff --git a/packages/web/src/components/tipping/tip-audio/TipAudioModal.tsx b/packages/web/src/components/tipping/tip-audio/TipAudioModal.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from 'react'
 
+import { Modal, ModalHeader, ModalTitle } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 import { animated, Transition } from 'react-spring/renderprops'
 import { usePrevious } from 'react-use'
@@ -11,7 +12,6 @@ import { getSendStatus } from 'common/store/tipping/selectors'
 import { resetSend } from 'common/store/tipping/slice'
 import { TippingSendStatus } from 'common/store/tipping/types'
 import { getBalance } from 'common/store/wallet/slice'
-import ModalDrawer from 'pages/audio-rewards-page/components/modals/ModalDrawer'
 
 import { ConfirmSendTip } from './ConfirmSendTip'
 import { SendTip } from './SendTip'
@@ -36,42 +36,22 @@ const GoldBadgeIconImage = () => (
   />
 )
 
-const titlesMap: { [key in TippingSendStatus]?: JSX.Element | string } = {
-  SEND: (
-    <div className={styles.tipIconTextContainer}>
-      <GoldBadgeIconImage />
-      <span className={styles.tipText}>{messages.sendATip}</span>
-    </div>
-  ),
-  CONFIRM: (
-    <div className={styles.tipIconTextContainer}>
-      <GoldBadgeIconImage />
-      <span className={styles.tipText}>{messages.confirm}</span>
-    </div>
-  ),
-  SENDING: (
-    <div className={styles.tipIconTextContainer}>
-      <GoldBadgeIconImage />
-      <span className={styles.tipText}>{messages.sending}</span>
-    </div>
-  ),
-  CONVERTING: (
-    <div className={styles.tipIconTextContainer}>
-      <span className={styles.tipText}>{messages.holdOn}</span>
-    </div>
-  ),
-  ERROR: (
-    <div className={styles.tipIconTextContainer}>
-      <GoldBadgeIconImage />
-      <span className={styles.tipText}>{messages.confirm}</span>
-    </div>
-  ),
-  SUCCESS: (
-    <div className={styles.tipIconTextContainer}>
-      <IconVerifiedGreen width={24} height={24} />
-      <span className={styles.tipText}>{messages.tipSent}</span>
-    </div>
-  )
+const titleMessagesMap: { [key in TippingSendStatus]?: string } = {
+  SEND: messages.sendATip,
+  CONFIRM: messages.confirm,
+  SENDING: messages.sending,
+  CONVERTING: messages.holdOn,
+  ERROR: messages.confirm,
+  SUCCESS: messages.tipSent
+}
+
+const titleIconsMap = {
+  SEND: <GoldBadgeIconImage />,
+  CONFIRM: <GoldBadgeIconImage />,
+  SENDING: <GoldBadgeIconImage />,
+  CONVERTING: null,
+  ERROR: <GoldBadgeIconImage />,
+  SUCCESS: <IconVerifiedGreen width={24} height={24} />
 }
 
 const renderModalContent = (pageNumber: number) => {
@@ -140,20 +120,26 @@ export const TipAudioModal = () => {
       : previousScreenTransition
 
   return (
-    <ModalDrawer
+    <Modal
       isOpen={sendStatus !== null}
       onClose={onClose}
       bodyClassName={styles.modalBody}
-      showTitleHeader
-      title={sendStatus ? titlesMap[sendStatus] : ''}
-      showDismissButton={
-        sendStatus !== 'SENDING' && sendStatus !== 'CONVERTING'
-      }
       dismissOnClickOutside={
         sendStatus !== 'SENDING' && sendStatus !== 'CONVERTING'
-      }
-      contentHorizontalPadding={24}
-      useGradientTitle={false}>
+      }>
+      <ModalHeader
+        className={styles.modalHeader}
+        onClose={onClose}
+        dismissButtonClassName={styles.dismissButton}
+        showDismissButton={
+          sendStatus !== 'SENDING' && sendStatus !== 'CONVERTING'
+        }>
+        <ModalTitle
+          title={sendStatus ? titleMessagesMap[sendStatus] : ''}
+          icon={sendStatus ? titleIconsMap[sendStatus] : null}
+          iconClassName={styles.modalTitleIcon}
+        />
+      </ModalHeader>
       <div className={styles.modalContentContainer}>
         <Transition
           items={sendStatus !== null ? statusOrder[sendStatus] : 0}
@@ -164,12 +150,12 @@ export const TipAudioModal = () => {
           unique={true}>
           {(item) => (style) =>
             (
-              <animated.div style={{ ...style }}>
+              <animated.div style={{ ...style, width: '100%' }}>
                 {renderModalContent(item)}
               </animated.div>
             )}
         </Transition>
       </div>
-    </ModalDrawer>
+    </Modal>
   )
 }