[C-5820] Update trending rewards modal UI (#11504)

AudiusProject · Mar 5, 2025 · ae7c5c6 · ae7c5c6
1 parent 3c02192
commit ae7c5c6
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 313 deletions.
diff --git a/packages/harmony/src/foundations/shadows/shadows.ts b/packages/harmony/src/foundations/shadows/shadows.ts
@@ -7,6 +7,7 @@ export type ShadowOptions =
   | 'special'
   | 'drop'
   | 'flat'
+  | 'inset'
 
 export const shadows = {
   near: '0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 0px 6px 0px rgba(0, 0, 0, 0.02)',
@@ -18,7 +19,8 @@ export const shadows = {
     '0px 1.34018px 8px 0px rgba(0, 0, 0, 0.2), 0px 6px 15px 0px rgba(0, 0, 0, 0.1)',
   special: '0px 1px 20px -3px #565776',
   flat: undefined,
-  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))'
+  drop: 'drop-shadow(0px 1.34018px 8px rgba(0, 0, 0, 0.2)) drop-shadow(0px 6px 15px rgba(0, 0, 0, 0.1))',
+  inset: '0px 0px 8px 0px rgba(0, 0, 0, 0.10) inset'
 }
 
 export type Shadows = typeof shadows
diff --git a/packages/web/src/components/add-funds-modal/AddFundsModal.tsx b/packages/web/src/components/add-funds-modal/AddFundsModal.tsx
@@ -84,7 +84,6 @@ export const AddFundsModal = () => {
       isOpen={isOpen}
       onClosed={handleClosed}
       bodyClassName={styles.modal}
-      useGradientTitle={false}
       dismissOnClickOutside={!inProgress}
       isFullscreen={false}
     >

diff --git a/packages/web/src/components/locked-content-modal/LockedContentModal.tsx b/packages/web/src/components/locked-content-modal/LockedContentModal.tsx
@@ -48,7 +48,6 @@ export const LockedContentModal = () => {
       bodyClassName={styles.modalBody}
       dismissOnClickOutside
       isFullscreen={false}
-      useGradientTitle={false}
     >
       <ModalHeader
         className={cn(styles.modalHeader, { [styles.mobile]: isMobile })}

diff --git a/packages/web/src/components/modal-drawer/ModalDrawer.module.css b/packages/web/src/components/modal-drawer/ModalDrawer.module.css
@@ -1,46 +1,4 @@
-.modalHeader {
-  background: var(--harmony-gradient);
-}
-
-.modalTitle {
-  color: var(--harmony-white);
-  font-size: 24px;
-}
-
 .modalBody {
   width: 720px;
   max-height: 95vh;
 }
-
-.modalBody.gradientHeader path {
-  fill: var(--harmony-white);
-}
-
-.drawer {
-  padding: 32px 12px;
-  width: 100%;
-  max-height: 95vh;
-}
-
-.titleContainer {
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: center;
-}
-
-.drawerTitle {
-  font-weight: var(--harmony-font-bold);
-  font-size: var(--harmony-font-l);
-  line-height: 22px;
-  text-align: center;
-  color: var(--harmony-neutral);
-}
-
-.drawerGradientTitle {
-  font-weight: 900;
-  font-size: 28px;
-  line-height: 49px;
-  background: var(--harmony-gradient);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
diff --git a/packages/web/src/components/modal-drawer/ModalDrawer.tsx b/packages/web/src/components/modal-drawer/ModalDrawer.tsx
@@ -1,4 +1,12 @@
-import { Modal, ModalProps } from '@audius/harmony'
+import {
+  Flex,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalProps,
+  ModalTitle,
+  Text
+} from '@audius/harmony'
 import cn from 'classnames'
 
 import Drawer, { DrawerProps } from 'components/drawer/Drawer'
@@ -7,15 +15,22 @@ import { useIsMobile } from 'hooks/useIsMobile'
 import styles from './ModalDrawer.module.css'
 
 type ModalDrawerProps = ModalProps &
-  DrawerProps & { useGradientTitle?: boolean }
+  DrawerProps &
+  (
+    | { newModal?: false }
+    | {
+        newModal?: boolean
+        title?: string
+        icon?: React.ReactNode
+      }
+  )
 
 /**
  * Either a modal or a drawer.
  * Not fully generic (has some built in styles) - can
  * pull this out later if it's more broadly useful.
  */
 const ModalDrawer = (props: ModalDrawerProps) => {
-  const gradientTitle = props.useGradientTitle ?? true
   const isMobile = useIsMobile()
   if (isMobile) {
     return (
@@ -29,50 +44,39 @@ const ModalDrawer = (props: ModalDrawerProps) => {
         zIndex={props.zIndex}
         shouldClose={props.shouldClose}
       >
-        <div className={cn(styles.drawer, props.wrapperClassName)}>
-          <div className={styles.titleContainer}>
-            <span
-              className={cn({
-                [props.titleClassName!]: !!props.titleClassName,
-                [styles.drawerGradientTitle]: gradientTitle,
-                [styles.drawerTitle]: !gradientTitle
-              })}
-            >
+        <Flex column h='100%' gap='l'>
+          <Flex pt='l' pb='s' justifyContent='center'>
+            <Text variant='label' size='l' strength='strong' color='subdued'>
               {props.title}
-            </span>
-          </div>
-          {props.children}
-        </div>
+            </Text>
+          </Flex>
+          <Flex pv='2xl' ph='l' h='100%'>
+            {props.children}
+          </Flex>
+        </Flex>
       </Drawer>
     )
   }
 
+  if (!props.newModal) {
+    return (
+      <Modal
+        {...props}
+        bodyClassName={cn(styles.modalBody, {
+          [props.bodyClassName!]: !!props.bodyClassName
+        })}
+      />
+    )
+  }
+
+  const { title, icon, children, isOpen, onClose, onClosed, size } = props
+
   return (
-    <Modal
-      isOpen={props.isOpen}
-      onClose={props.onClose}
-      onClosed={props.onClosed}
-      showTitleHeader={props.showTitleHeader}
-      showDismissButton={props.showDismissButton}
-      dismissOnClickOutside={props.dismissOnClickOutside}
-      title={props.title}
-      contentHorizontalPadding={props.contentHorizontalPadding}
-      titleClassName={cn(props.titleClassName ? props.titleClassName : '', {
-        [styles.modalTitle]: gradientTitle
-      })}
-      headerContainerClassName={cn(
-        props.headerContainerClassName ? props.headerContainerClassName : '',
-        {
-          [styles.modalHeader]: gradientTitle
-        }
-      )}
-      bodyClassName={cn(styles.modalBody, {
-        [styles.gradientHeader]: gradientTitle,
-        [props.bodyClassName!]: !!props.bodyClassName
-      })}
-      zIndex={props.zIndex}
-    >
-      {props.children}
+    <Modal isOpen={isOpen} onClose={onClose} onClosed={onClosed} size={size}>
+      <ModalHeader>
+        <ModalTitle title={title} icon={icon} />
+      </ModalHeader>
+      <ModalContent>{children}</ModalContent>
     </Modal>
   )
 }

diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -338,7 +338,6 @@ export const PremiumContentPurchaseModal = () => {
       onClosed={handleClosed}
       bodyClassName={styles.modal}
       isFullscreen
-      useGradientTitle={false}
       dismissOnClickOutside
       zIndex={zIndex.PREMIUM_CONTENT_PURCHASE_MODAL}
       wrapperClassName={isMobile ? styles.mobileWrapper : undefined}

diff --git a/packages/web/src/components/rewards/modals/TrendingRewards.module.css b/packages/web/src/components/rewards/modals/TrendingRewards.module.css