[C-3955] Migrate primary buttons to harmony (#7794)

packages/common/src/store/ui/modals/artist-pick-modal.ts

@@ -0,0 +1,23 @@
+import { ID } from '~/models/Identifiers'
+import { Nullable } from '~/utils/typeUtils'
+
+import { createModal } from './createModal'
+
+export type ArtistPickModalState = {
+  trackId: Nullable<ID>
+}
+
+const artistPickModal = createModal<ArtistPickModalState>({
+  reducerPath: 'ArtistPick',
+  initialState: {
+    isOpen: false,
+    trackId: null
+  },
+  sliceSelector: (state) => state.ui.modals
+})
+
+export const {
+  hook: useArtistPickModal,
+  reducer: artistPickModalReducer,
+  actions: artistPickModalActions
+} = artistPickModal

packages/common/src/store/ui/modals/index.ts

@@ -18,3 +18,4 @@ export * from './premium-content-purchase-modal'
 export * from './usdc-manual-transfer-modal'
 export * from './add-funds-modal'
 export * from './wait-for-download-modal'
+export * from './artist-pick-modal'

packages/common/src/store/ui/modals/parentSlice.ts

@@ -61,7 +61,8 @@ export const initialState: BasicModalsState = {
   AddFundsModal: { isOpen: false },
   Welcome: { isOpen: false },
   CoinflowWithdraw: { isOpen: false },
-  WaitForDownloadModal: { isOpen: false }
+  WaitForDownloadModal: { isOpen: false },
+  ArtistPick: { isOpen: false }
 }
 
 const slice = createSlice({

packages/common/src/store/ui/modals/reducers.ts

@@ -1,6 +1,7 @@
 import { Action, combineReducers, Reducer } from '@reduxjs/toolkit'
 
 import { addFundsModalReducer } from './add-funds-modal'
+import { artistPickModalReducer } from './artist-pick-modal'
 import { coinflowOnrampModalReducer } from './coinflow-onramp-modal'
 import { coinflowWithdrawModalReducer } from './coinflow-withdraw-modal'
 import { createChatModalReducer } from './create-chat-modal'
@@ -45,7 +46,8 @@ const combinedReducers = combineReducers({
   PremiumContentPurchaseModal: premiumContentPurchaseModalReducer,
   CoinflowOnramp: coinflowOnrampModalReducer,
   CoinflowWithdraw: coinflowWithdrawModalReducer,
-  WaitForDownloadModal: waitForDownloadModalReducer
+  WaitForDownloadModal: waitForDownloadModalReducer,
+  ArtistPick: artistPickModalReducer
 })
 
 /**

packages/common/src/store/ui/modals/types.ts

@@ -3,6 +3,7 @@ import { Action } from '@reduxjs/toolkit'
 import { ModalSource } from '~/models/Analytics'
 
 import { AddFundsModalState } from './add-funds-modal'
+import { ArtistPickModalState } from './artist-pick-modal'
 import { CoinflowOnrampModalState } from './coinflow-onramp-modal'
 import { CoinflowWithdrawModalState } from './coinflow-withdraw-modal'
 import { EditPlaylistModalState } from './edit-playlist-modal'
@@ -81,6 +82,7 @@ export type Modals =
   | 'Welcome'
   | 'CoinflowWithdraw'
   | 'WaitForDownloadModal'
+  | 'ArtistPick'
 
 export type BasicModalsState = {
   [modal in Modals]: BaseModalState
@@ -101,6 +103,7 @@ export type StatefulModalsState = {
   PremiumContentPurchaseModal: PremiumContentPurchaseModalState
   CoinflowWithdraw: CoinflowWithdrawModalState
   WaitForDownloadModal: WaitForDownloadModalState
+  ArtistPick: ArtistPickModalState
 }
 
 export type ModalsState = BasicModalsState & StatefulModalsState

packages/harmony/src/components/button/BaseButton/types.ts

@@ -34,12 +34,12 @@ export type BaseButtonProps = {
   /**
    * Optional icon element to include on the left side of the button
    */
-  iconLeft?: IconComponent
+  iconLeft?: IconComponent | null
 
   /**
    * Optional icon element to include on the right side of the button
    */
-  iconRight?: IconComponent
+  iconRight?: IconComponent | null
 
   /**
    * When true, do not override icon's fill colors

packages/harmony/src/components/button/Button/Button.tsx

@@ -144,6 +144,30 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       })
     }
 
+    const commonHoverStyles: CSSObject = {
+      backgroundColor: themeColors.neutral.n25
+    }
+
+    const commonActiveStyles: CSSObject = {
+      backgroundColor: themeColors.neutral.n100
+    }
+
+    const commonStyles: CSSObject = {
+      backgroundColor: themeColors.special.white,
+      color: themeColors.text.default,
+      boxShadow: `0 0 0 1px inset ${themeColors.border.strong}`,
+
+      '&:hover': commonHoverStyles,
+      '&:active': commonActiveStyles,
+
+      ...(_isHovered && commonHoverStyles),
+      ...(_isPressed && commonActiveStyles),
+      ...(isDisabled && {
+        backgroundColor: themeColors.neutral.n150,
+        boxShadow: 'none'
+      })
+    }
+
     const destructiveHoverStyles: CSSObject = {
       backgroundColor: themeColors.special.red,
       color: themeColors.static.white
@@ -195,6 +219,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         ? tertiaryStyles
         : variant === 'destructive'
         ? destructiveStyles
+        : variant === 'common'
+        ? commonStyles
         : primaryStyles),
 
       '::before': {
@@ -208,12 +234,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         backgroundColor: 'rgba(0, 0, 0, 0)'
       },
 
-      ...(variant !== 'tertiary' && {
-        ':hover': hoverStyles,
-        ':active': activeStyles,
-        ...(_isHovered && hoverStyles),
-        ...(_isPressed && activeStyles)
-      })
+      ...(variant !== 'tertiary' &&
+        variant !== 'common' && {
+          ':hover': hoverStyles,
+          ':active': activeStyles,
+          ...(_isHovered && hoverStyles),
+          ...(_isPressed && activeStyles)
+        })
     }
 
     const iconCss =

packages/harmony/src/components/button/Button/types.ts

@@ -6,7 +6,12 @@ import { BaseButtonProps } from '../BaseButton/types'
 
 export type HTMLButtonProps = ComponentPropsWithoutRef<'button'>
 
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'destructive'
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'destructive'
+  | 'common'
 
 export type ButtonSize = 'small' | 'default' | 'large'
 

packages/harmony/src/components/modal/ModalFooter.module.css

@@ -3,6 +3,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--harmony-unit-6);
-  padding-top: var(--harmony-unit-6);
+  padding: var(--harmony-spacing-xl);
+  gap: var(--harmony-spacing-s);
 }

packages/harmony/src/components/text/Text/constants.ts

@@ -10,6 +10,19 @@ export const variantTagMap = {
     l: 'h2',
     m: 'h3',
     s: 'h4'
+  },
+  title: {
+    xl: 'h5',
+    l: 'h5',
+    m: 'h5',
+    s: 'h5'
+  },
+  label: {
+    xl: 'p',
+    l: 'p',
+    m: 'p',
+    s: 'p',
+    xs: 'p'
   }
 }
 

packages/web/src/app/web-player/WebPlayer.jsx

@@ -45,7 +45,6 @@ import Navigator from 'components/nav/Navigator'
 import TopLevelPage from 'components/nav/mobile/TopLevelPage'
 import Notice from 'components/notice/Notice'
 import { NotificationPage } from 'components/notification'
-import PinnedTrackConfirmation from 'components/pin-track-confirmation/PinTrackConfirmation'
 import PlayBarProvider from 'components/play-bar/PlayBarProvider'
 import { RewardClaimedToast } from 'components/reward-claimed-toast/RewardClaimedToast'
 import DesktopRoute from 'components/routes/DesktopRoute'
@@ -75,7 +74,7 @@ import FeedPage from 'pages/feed-page/FeedPage'
 import FollowersPage from 'pages/followers-page/FollowersPage'
 import FollowingPage from 'pages/following-page/FollowingPage'
 import HistoryPage from 'pages/history-page/HistoryPage'
-import NotFoundPage from 'pages/not-found-page/NotFoundPage'
+import { NotFoundPage } from 'pages/not-found-page/NotFoundPage'
 import NotificationUsersPage from 'pages/notification-users-page/NotificationUsersPage'
 import { PayAndEarnPage } from 'pages/pay-and-earn-page/PayAndEarnPage'
 import { TableType } from 'pages/pay-and-earn-page/types'
@@ -999,7 +998,6 @@ class WebPlayer extends Component {
           <RewardClaimedToast />
           {/* Non-mobile */}
           {!isMobile ? <Visualizer /> : null}
-          {!isMobile ? <PinnedTrackConfirmation /> : null}
           {!isMobile ? <DevModeMananger /> : null}
           {/* Mobile-only */}
           {isMobile ? (

packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.module.css

@@ -35,11 +35,6 @@
   line-height: 150%;
 }
 
-.doneButton {
-  align-self: center;
-  width: 100%;
-}
-
 .markdownFrame {
   background: var(--background);
   box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.1);

packages/web/src/components/ai-attribution-settings-modal/AiAttributionSettingsModal.tsx

@@ -9,9 +9,10 @@ import {
   ModalContent,
   ModalHeader,
   ModalTitle,
-  IconRobot
+  IconRobot,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType, MarkdownViewer } from '@audius/stems'
+import { MarkdownViewer } from '@audius/stems'
 import { useDispatch } from 'react-redux'
 
 import { useModalState } from 'common/hooks/useModalState'
@@ -84,21 +85,13 @@ export const AiAttributionSettingsModal = () => {
           />
         </div>
         {allowAiAttribution ? (
-          <Button
-            text={messages.disable}
-            type={ButtonType.COMMON}
-            size={ButtonSize.MEDIUM}
-            className={styles.doneButton}
-            onClick={handleSubmit}
-          />
+          <Button variant='secondary' onClick={handleSubmit} fullWidth>
+            {messages.disable}
+          </Button>
         ) : (
-          <Button
-            text={messages.accept}
-            type={ButtonType.PRIMARY}
-            size={ButtonSize.MEDIUM}
-            className={styles.doneButton}
-            onClick={handleSubmit}
-          />
+          <Button variant='primary' onClick={handleSubmit} fullWidth>
+            {messages.accept}
+          </Button>
         )}
       </ModalContent>
     </Modal>

packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.module.css

@@ -47,16 +47,6 @@
   margin-top: 16px;
 }
 
-.mainButton {
-  border-radius: 32px;
-}
-
-.mainButton span {
-  color: var(--primary) !important;
-  font-size: var(--font-l) !important;
-  font-weight: var(--font-bold) !important;
-}
-
 .notNow {
   margin-top: 15px;
   color: white;

packages/web/src/components/artist-pick-modal/ArtistPickModal.tsx

@@ -0,0 +1,88 @@
+import {
+  accountSelectors,
+  tracksSocialActions,
+  useArtistPickModal
+} from '@audius/common/store'
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalContentText,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle
+} from '@audius/harmony'
+import { useDispatch } from 'react-redux'
+
+import { useSelector } from 'utils/reducer'
+
+const { setArtistPick, unsetArtistPick } = tracksSocialActions
+const getAccountUser = accountSelectors.getAccountUser
+
+const messagesMap = {
+  add: {
+    title: 'Set your Artist Pick',
+    description:
+      'This track will appear at the top of your profile, above your recent uploads, until you change or remove it.',
+    confirm: 'Set Track'
+  },
+  update: {
+    title: 'Change your artist pick?',
+    description:
+      'This track will appear at the top of your profile and replace your previously picked track.',
+    confirm: 'Change Track'
+  },
+  remove: {
+    title: 'Unset as Artist Pick',
+    description:
+      'Are you sure you want to remove your pick? This track will be displayed based on its release date.',
+    confirm: 'Unset Track'
+  }
+}
+
+export const ArtistPickModal = () => {
+  const {
+    isOpen,
+    onClose,
+    data: { trackId }
+  } = useArtistPickModal()
+  const dispatch = useDispatch()
+
+  const currentArtistPickId = useSelector(
+    (state) => getAccountUser(state)?.artist_pick_track_id
+  )
+
+  const action = !currentArtistPickId ? 'add' : trackId ? 'update' : 'remove'
+
+  const messages = messagesMap[action]
+
+  const handleSubmit = () => {
+    if (trackId) {
+      dispatch(setArtistPick(trackId))
+    } else {
+      dispatch(unsetArtistPick())
+    }
+    onClose()
+  }
+
+  return (
+    <Modal size='small' isOpen={isOpen} onClose={onClose}>
+      <ModalHeader>
+        <ModalTitle title={messages.title} />
+      </ModalHeader>
+      <ModalContent>
+        <ModalContentText css={{ textAlign: 'center' }}>
+          {messages.description}
+        </ModalContentText>
+      </ModalContent>
+      <ModalFooter>
+        <Button variant='secondary' onClick={onClose} fullWidth>
+          Cancel
+        </Button>
+        <Button variant='primary' onClick={handleSubmit} fullWidth>
+          {messages.confirm}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}

packages/web/src/components/artist-recommendations/ArtistRecommendations.tsx

@@ -275,9 +275,9 @@ export const ArtistRecommendations = forwardRef<
         <FollowButton
           isDisabled={isLoading}
           following={isFollowingAll}
-          invertedColor={true}
-          messages={messages}
+          invertedColor
           size='full'
+          messages={messages}
           onFollow={handleFollowAll}
           onUnfollow={handleUnfollowAll}
         />