[C-3967] Migrate common buttons to harmony

packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx

@@ -17,7 +17,7 @@ import {
 } from '@audius/common/store'
 import { formatDateWithTimezoneOffset } from '@audius/common/utils'
 import {
-  Button as HarmonyButton,
+  Button,
   ModalContent,
   ModalContentText,
   ModalFooter,
@@ -31,9 +31,9 @@ import {
   IconLink,
   IconShare,
   IconLogoCircleSOL,
-  IconLogoCircleETH
+  IconLogoCircleETH,
+  Flex
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -289,7 +289,7 @@ const CollectibleDetailsModal = ({
               </a>
             )}
 
-            <div className={styles.detailsButtonContainer}>
+            <Flex gap='m' wrap='wrap'>
               <Toast
                 text={collectibleMessages.copied}
                 fillParent={false}
@@ -299,46 +299,40 @@ const CollectibleDetailsModal = ({
                 tooltipClassName={styles.shareTooltip}
               >
                 <Button
-                  className={styles.detailsButton}
-                  textClassName={styles.detailsButtonText}
-                  iconClassName={styles.detailsButtonIcon}
+                  variant='common'
+                  size='small'
                   onClick={() => copyToClipboard(shareUrl)}
-                  text='Share'
-                  type={ButtonType.COMMON_ALT}
-                  size={ButtonSize.SMALL}
-                  leftIcon={<IconShare />}
-                />
+                  iconLeft={IconShare}
+                >
+                  Share
+                </Button>
               </Toast>
 
               <Button
-                className={styles.detailsButton}
-                textClassName={styles.detailsButtonText}
-                iconClassName={styles.detailsButtonIcon}
+                variant='common'
+                size='small'
                 onClick={() => setIsEmbedModalOpen?.(true)}
-                text='Embed'
-                type={ButtonType.COMMON_ALT}
-                size={ButtonSize.SMALL}
-                leftIcon={<IconEmbed />}
-              />
+                iconLeft={IconEmbed}
+              >
+                Embed
+              </Button>
 
               {isCollectibleOptionEnabled &&
                 isUserOnTheirProfile &&
                 collectible.mediaType === CollectibleMediaType.IMAGE && (
                   <Button
-                    className={styles.detailsButton}
-                    textClassName={styles.detailsButtonText}
-                    iconClassName={styles.detailsButtonIcon}
+                    variant='common'
+                    size='small'
                     onClick={() => {
                       setIsModalOpen(false)
                       setIsPicConfirmaModalOpen(true)
                     }}
-                    text='Set As Profile Pic'
-                    type={ButtonType.COMMON_ALT}
-                    size={ButtonSize.SMALL}
-                    leftIcon={<IconImage />}
-                  />
+                    iconLeft={IconImage}
+                  >
+                    Set As Profile Pic
+                  </Button>
                 )}
-            </div>
+            </Flex>
           </div>
         </div>
       </Modal>
@@ -360,20 +354,16 @@ const CollectibleDetailsModal = ({
         </ModalContent>
 
         <ModalFooter>
-          <HarmonyButton
+          <Button
             variant='secondary'
             onClick={() => setIsPicConfirmaModalOpen(false)}
             fullWidth
           >
             {collectibleMessages.setAsProfilePickCancel}
-          </HarmonyButton>
-          <HarmonyButton
-            variant='primary'
-            onClick={onClickProfPicUpload}
-            fullWidth
-          >
+          </Button>
+          <Button variant='primary' onClick={onClickProfPicUpload} fullWidth>
             {collectibleMessages.setAsProfilePickConfirm}
-          </HarmonyButton>
+          </Button>
         </ModalFooter>
       </Modal>
 
@@ -458,15 +448,13 @@ const CollectibleDetailsModal = ({
             )}
 
             <Button
-              className={cn(styles.detailsButton, styles.mobileDetailsButton)}
-              textClassName={styles.detailsButtonText}
-              iconClassName={styles.detailsButtonIcon}
+              variant='common'
+              size='small'
               onClick={handleMobileShareClick}
-              text='Share'
-              type={ButtonType.COMMON_ALT}
-              size={ButtonSize.SMALL}
-              leftIcon={<IconShare />}
-            />
+              iconLeft={IconShare}
+            >
+              Share
+            </Button>
           </div>
         </div>
       </Drawer>

packages/web/src/components/collectibles/components/CollectiblesPage.module.css

@@ -19,10 +19,6 @@
   padding: 0 24px;
 }
 
-.header button {
-  min-width: 82px;
-}
-
 .headerText {
   display: flex;
   flex-direction: column;
@@ -298,33 +294,6 @@
   color: var(--neutral-light-2);
 }
 
-.detailsButtonContainer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.detailsButton {
-  padding: 0 var(--unit-4);
-}
-.detailsButton .detailsButtonText {
-  color: var(--neutral-light-4);
-  font-size: var(--font-m);
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-.detailsButton .detailsButtonIcon {
-  margin-right: var(--unit-1) !important;
-}
-.detailsButton .detailsButtonIcon path {
-  fill: var(--neutral-light-4);
-}
-
-.detailsButton.mobileDetailsButton {
-  width: 100%;
-  height: var(--unit-9);
-}
-
 .nftModal {
   display: flex;
   align-items: flex-start;
@@ -668,10 +637,6 @@
   margin-bottom: 16px;
 }
 
-.mobile .header button {
-  width: 100%;
-}
-
 .mobile .content {
   padding: 0 12px;
 }
@@ -720,16 +685,6 @@
   padding: 0 12px;
 }
 
-.mobileButtonContainer {
-  display: flex;
-  gap: 8px;
-  width: 100%;
-}
-
-.mobileButtonContainer .detailsButton {
-  flex: 1 1 0;
-}
-
 @keyframes fadeInVisible {
   from {
     opacity: 0;

packages/web/src/components/collectibles/components/CollectiblesPage.tsx

@@ -22,9 +22,10 @@ import {
   IconPencil,
   IconShare,
   PopupMenu,
-  PopupMenuItem
+  PopupMenuItem,
+  Button,
+  Flex
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import cn from 'classnames'
 import {
   DragDropContext,
@@ -95,7 +96,8 @@ export const collectibleMessages = {
   setAsProfilePicDescription:
     'Are you sure you want to change your profile picture?',
   setAsProfilePickCancel: 'Nevermind',
-  setAsProfilePickConfirm: 'Yes'
+  setAsProfilePickConfirm: 'Yes',
+  collectibleOptions: 'Collectible Options'
 }
 
 const dedupe = (list: any[]) => {
@@ -582,42 +584,40 @@ const CollectiblesPage = (props: CollectiblesPageProps) => {
           </div>
 
           {isMobile ? (
-            <div className={styles.mobileButtonContainer}>
+            <Flex gap='s' w='100%'>
               {isUserOnTheirProfile && (
                 <Button
-                  className={styles.detailsButton}
-                  textClassName={styles.detailsButtonText}
-                  iconClassName={styles.detailsButtonIcon}
+                  variant='common'
+                  size='small'
                   onClick={handleEditClick}
-                  text='Edit'
-                  type={ButtonType.COMMON_ALT}
-                  size={ButtonSize.SMALL}
-                  leftIcon={<IconPencil />}
-                />
+                  iconLeft={IconPencil}
+                  fullWidth
+                >
+                  Edit
+                </Button>
               )}
               <Button
-                className={styles.detailsButton}
-                textClassName={styles.detailsButtonText}
-                iconClassName={styles.detailsButtonIcon}
+                variant='common'
+                size='small'
                 onClick={handleShareClick}
-                text='Share'
-                type={ButtonType.COMMON_ALT}
-                size={ButtonSize.SMALL}
-                leftIcon={<IconShare />}
-              />
-            </div>
+                iconLeft={IconShare}
+                fullWidth
+              >
+                Share
+              </Button>
+            </Flex>
           ) : (
             <PopupMenu
               items={overflowMenuItems}
               anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
               renderTrigger={(anchorRef, triggerPopup) => (
                 <Button
-                  leftIcon={<IconKebabHorizontal />}
+                  variant='secondary'
+                  size='small'
+                  iconLeft={IconKebabHorizontal}
+                  aria-label={collectibleMessages.collectibleOptions}
                   ref={anchorRef}
                   onClick={() => triggerPopup()}
-                  text={null}
-                  size={ButtonSize.SMALL}
-                  type={ButtonType.COMMON}
                 />
               )}
               zIndex={zIndex.NAVIGATOR_POPUP}

packages/web/src/components/collection/desktop/OverflowMenuButton.tsx

@@ -6,21 +6,19 @@ import {
   usersSocialActions,
   CommonState
 } from '@audius/common/store'
-import { IconKebabHorizontal } from '@audius/harmony'
-import { Button, ButtonType } from '@audius/stems'
+import { Button, IconKebabHorizontal } from '@audius/harmony'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { CollectionMenuProps } from 'components/menu/CollectionMenu'
 import Menu from 'components/menu/Menu'
 
-import styles from './CollectionHeader.module.css'
-
 const { getCollection, getUser } = collectionPageSelectors
 const { followUser, unfollowUser } = usersSocialActions
 
 const messages = {
   follow: 'Follow User',
-  unfollow: 'Unfollow User'
+  unfollow: 'Unfollow User',
+  moreOptions: 'More Options'
 }
 
 type OverflowMenuButtonProps = {
@@ -83,12 +81,11 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
     <Menu menu={overflowMenu}>
       {(ref, triggerPopup) => (
         <Button
+          variant='secondary'
           ref={ref}
-          leftIcon={<IconKebabHorizontal />}
+          aria-label={messages.moreOptions}
+          iconLeft={IconKebabHorizontal}
           onClick={() => triggerPopup()}
-          text={null}
-          textClassName={styles.buttonTextFormatting}
-          type={ButtonType.COMMON}
         />
       )}
     </Menu>

packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx

@@ -22,9 +22,9 @@ import {
   IconVisibilityHidden,
   IconSpecialAccess,
   IconVisibilityPublic,
-  IconCart
+  IconCart,
+  Button
 } from '@audius/harmony'
-import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import { set, get } from 'lodash'
 import { useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
@@ -52,7 +52,6 @@ import {
   SpecialAccessType
 } from 'pages/upload-page/fields/types'
 
-import styles from './AccessAndSaleTriggerLegacy.module.css'
 import { ContextualMenu } from './ContextualMenu'
 
 const { getUserId } = accountSelectors
@@ -391,14 +390,15 @@ export const AccessAndSaleTriggerLegacy = (
       renderValue={() => null}
       previewOverride={(toggleMenu) => (
         <Button
-          className={styles.availabilityButton}
-          type={ButtonType.COMMON_ALT}
+          variant='common'
+          size='small'
+          css={(theme) => ({ marginTop: theme.spacing.l })}
           name='availabilityModal'
-          text={availabilityButtonTitle}
-          size={ButtonSize.SMALL}
           onClick={toggleMenu}
-          leftIcon={<AvailabilityIcon />}
-        />
+          iconLeft={AvailabilityIcon}
+        >
+          {availabilityButtonTitle}
+        </Button>
       )}
     />
   )