[C-2587] Fix playlist update tooltip (#3700)

AudiusProject · Jul 5, 2023 · 61927c4 · 61927c4
1 parent 597f21c
commit 61927c4
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 18 deletions.
diff --git a/packages/mobile/src/components/suggested-tracks/SuggestedTracks.tsx b/packages/mobile/src/components/suggested-tracks/SuggestedTracks.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from 'react'
+
 import type { UserTrackMetadata } from '@audius/common'
 import { SquareSizes, useGetSuggestedTracks } from '@audius/common'
 import { View } from 'react-native'
@@ -114,13 +116,10 @@ export const SuggestedTracks = () => {
       <View>
         <Divider />
         {suggestedTracks?.map((suggestedTrack) => (
-          <>
-            <SuggestedTrack
-              key={suggestedTrack.track_id}
-              track={suggestedTrack}
-            />
+          <Fragment key={suggestedTrack.track_id}>
+            <SuggestedTrack track={suggestedTrack} />
             <Divider />
-          </>
+          </Fragment>
         ))}
       </View>
       <TextButton

diff --git a/packages/web/src/components/collection/desktop/EditButton.tsx b/packages/web/src/components/collection/desktop/EditButton.tsx
@@ -16,7 +16,7 @@ type EditButtonProps = Partial<ButtonProps> & {
 }
 
 export const EditButton = (props: EditButtonProps) => {
-  const { collectionId } = props
+  const { collectionId, ...other } = props
   const dispatch = useDispatch()
 
   const handleEdit = useCallback(
@@ -30,7 +30,7 @@ export const EditButton = (props: EditButtonProps) => {
       text={messages.edit}
       leftIcon={<IconPencil />}
       onClick={handleEdit}
-      {...props}
+      {...other}
     />
   )
 }
diff --git a/packages/web/src/components/nav/desktop/PlaylistLibrary/PlaylistUpdateDot.module.css b/packages/web/src/components/nav/desktop/PlaylistLibrary/PlaylistUpdateDot.module.css
@@ -2,7 +2,3 @@
   position: absolute;
   left: calc(var(--unit-3) * -1);
 }
-
-.tooltip :global(.ant-tooltip-arrow) {
-  left: var(--unit-6);
-}
diff --git a/packages/web/src/components/nav/desktop/PlaylistLibrary/PlaylistUpdateDot.tsx b/packages/web/src/components/nav/desktop/PlaylistLibrary/PlaylistUpdateDot.tsx
@@ -8,11 +8,9 @@ const messages = { recentlyUpdatedTooltip: 'Recently Updated' }
 export const PlaylistUpdateDot = () => {
   return (
     <Tooltip
-      className={styles.tooltip}
-      shouldWrapContent={true}
-      shouldDismissOnClick={false}
       mouseEnterDelay={0.1}
       text={messages.recentlyUpdatedTooltip}
+      placement='right'
     >
       <UpdateDot className={styles.root} />
     </Tooltip>

diff --git a/packages/web/src/pages/collection-page/components/desktop/SuggestedTracks.tsx b/packages/web/src/pages/collection-page/components/desktop/SuggestedTracks.tsx
@@ -1,3 +1,5 @@
+import { Fragment } from 'react'
+
 import {
   SquareSizes,
   Status,
@@ -67,12 +69,12 @@ export const SuggestedTracks = () => {
           <LoadingSpinner className={styles.loading} />
         ) : null}
         {suggestedTracks?.map((suggestedTrack) => (
-          <>
-            <li key={suggestedTrack.track_id}>
+          <Fragment key={suggestedTrack.track_id}>
+            <li>
               <SuggestedTrack track={suggestedTrack} />
             </li>
             {divider}
-          </>
+          </Fragment>
         ))}
         {divider}
       </ul>