Revert "[C-3967] Migrate common buttons to harmony (#7832)"

This reverts commit a70643a.
AudiusProject · Mar 18, 2024 · e9c098e · e9c098e
1 parent 5784841
commit e9c098e
Show file tree

Hide file tree

Showing 42 changed files with 863 additions and 262 deletions.
diff --git a/packages/web/src/components/collectibles/components/CollectibleDetailsModal.tsx b/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,
+  Button as HarmonyButton,
   ModalContent,
   ModalContentText,
   ModalFooter,
@@ -31,9 +31,9 @@ import {
   IconLink,
   IconShare,
   IconLogoCircleSOL,
-  IconLogoCircleETH,
-  Flex
+  IconLogoCircleETH
 } 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>
             )}
 
-            <Flex gap='m' wrap='wrap'>
+            <div className={styles.detailsButtonContainer}>
               <Toast
                 text={collectibleMessages.copied}
                 fillParent={false}
@@ -299,40 +299,46 @@ const CollectibleDetailsModal = ({
                 tooltipClassName={styles.shareTooltip}
               >
                 <Button
-                  variant='common'
-                  size='small'
+                  className={styles.detailsButton}
+                  textClassName={styles.detailsButtonText}
+                  iconClassName={styles.detailsButtonIcon}
                   onClick={() => copyToClipboard(shareUrl)}
-                  iconLeft={IconShare}
-                >
-                  Share
-                </Button>
+                  text='Share'
+                  type={ButtonType.COMMON_ALT}
+                  size={ButtonSize.SMALL}
+                  leftIcon={<IconShare />}
+                />
               </Toast>
 
               <Button
-                variant='common'
-                size='small'
+                className={styles.detailsButton}
+                textClassName={styles.detailsButtonText}
+                iconClassName={styles.detailsButtonIcon}
                 onClick={() => setIsEmbedModalOpen?.(true)}
-                iconLeft={IconEmbed}
-              >
-                Embed
-              </Button>
+                text='Embed'
+                type={ButtonType.COMMON_ALT}
+                size={ButtonSize.SMALL}
+                leftIcon={<IconEmbed />}
+              />
 
               {isCollectibleOptionEnabled &&
                 isUserOnTheirProfile &&
                 collectible.mediaType === CollectibleMediaType.IMAGE && (
                   <Button
-                    variant='common'
-                    size='small'
+                    className={styles.detailsButton}
+                    textClassName={styles.detailsButtonText}
+                    iconClassName={styles.detailsButtonIcon}
                     onClick={() => {
                       setIsModalOpen(false)
                       setIsPicConfirmaModalOpen(true)
                     }}
-                    iconLeft={IconImage}
-                  >
-                    Set As Profile Pic
-                  </Button>
+                    text='Set As Profile Pic'
+                    type={ButtonType.COMMON_ALT}
+                    size={ButtonSize.SMALL}
+                    leftIcon={<IconImage />}
+                  />
                 )}
-            </Flex>
+            </div>
           </div>
         </div>
       </Modal>
@@ -354,16 +360,20 @@ const CollectibleDetailsModal = ({
         </ModalContent>
 
         <ModalFooter>
-          <Button
+          <HarmonyButton
             variant='secondary'
             onClick={() => setIsPicConfirmaModalOpen(false)}
             fullWidth
           >
             {collectibleMessages.setAsProfilePickCancel}
-          </Button>
-          <Button variant='primary' onClick={onClickProfPicUpload} fullWidth>
+          </HarmonyButton>
+          <HarmonyButton
+            variant='primary'
+            onClick={onClickProfPicUpload}
+            fullWidth
+          >
             {collectibleMessages.setAsProfilePickConfirm}
-          </Button>
+          </HarmonyButton>
         </ModalFooter>
       </Modal>
 
@@ -448,13 +458,15 @@ const CollectibleDetailsModal = ({
             )}
 
             <Button
-              variant='common'
-              size='small'
+              className={cn(styles.detailsButton, styles.mobileDetailsButton)}
+              textClassName={styles.detailsButtonText}
+              iconClassName={styles.detailsButtonIcon}
               onClick={handleMobileShareClick}
-              iconLeft={IconShare}
-            >
-              Share
-            </Button>
+              text='Share'
+              type={ButtonType.COMMON_ALT}
+              size={ButtonSize.SMALL}
+              leftIcon={<IconShare />}
+            />
           </div>
         </div>
       </Drawer>

diff --git a/packages/web/src/components/collectibles/components/CollectiblesPage.module.css b/packages/web/src/components/collectibles/components/CollectiblesPage.module.css
@@ -19,6 +19,10 @@
   padding: 0 24px;
 }
 
+.header button {
+  min-width: 82px;
+}
+
 .headerText {
   display: flex;
   flex-direction: column;
@@ -294,6 +298,33 @@
   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;
@@ -637,6 +668,10 @@
   margin-bottom: 16px;
 }
 
+.mobile .header button {
+  width: 100%;
+}
+
 .mobile .content {
   padding: 0 12px;
 }
@@ -685,6 +720,16 @@
   padding: 0 12px;
 }
 
+.mobileButtonContainer {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.mobileButtonContainer .detailsButton {
+  flex: 1 1 0;
+}
+
 @keyframes fadeInVisible {
   from {
     opacity: 0;

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

diff --git a/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx b/packages/web/src/components/collection/desktop/OverflowMenuButton.tsx
@@ -6,19 +6,21 @@ import {
   usersSocialActions,
   CommonState
 } from '@audius/common/store'
-import { Button, IconKebabHorizontal } from '@audius/harmony'
+import { IconKebabHorizontal } from '@audius/harmony'
+import { Button, ButtonType } from '@audius/stems'
 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',
-  moreOptions: 'More Options'
+  unfollow: 'Unfollow User'
 }
 
 type OverflowMenuButtonProps = {
@@ -81,11 +83,12 @@ export const OverflowMenuButton = (props: OverflowMenuButtonProps) => {
     <Menu menu={overflowMenu}>
       {(ref, triggerPopup) => (
         <Button
-          variant='secondary'
           ref={ref}
-          aria-label={messages.moreOptions}
-          iconLeft={IconKebabHorizontal}
+          leftIcon={<IconKebabHorizontal />}
           onClick={() => triggerPopup()}
+          text={null}
+          textClassName={styles.buttonTextFormatting}
+          type={ButtonType.COMMON}
         />
       )}
     </Menu>

diff --git a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.module.css b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.module.css
@@ -0,0 +1,3 @@
+.availabilityButton {
+  margin-top: 18px;
+}
diff --git a/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx b/packages/web/src/components/data-entry/AccessAndSaleTriggerLegacy.tsx
@@ -22,9 +22,9 @@ import {
   IconVisibilityHidden,
   IconSpecialAccess,
   IconVisibilityPublic,
-  IconCart,
-  Button
+  IconCart
 } 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,6 +52,7 @@ import {
   SpecialAccessType
 } from 'pages/upload-page/fields/types'
 
+import styles from './AccessAndSaleTriggerLegacy.module.css'
 import { ContextualMenu } from './ContextualMenu'
 
 const { getUserId } = accountSelectors
@@ -390,15 +391,14 @@ export const AccessAndSaleTriggerLegacy = (
       renderValue={() => null}
       previewOverride={(toggleMenu) => (
         <Button
-          variant='common'
-          size='small'
-          css={(theme) => ({ marginTop: theme.spacing.l })}
+          className={styles.availabilityButton}
+          type={ButtonType.COMMON_ALT}
           name='availabilityModal'
+          text={availabilityButtonTitle}
+          size={ButtonSize.SMALL}
           onClick={toggleMenu}
-          iconLeft={AvailabilityIcon}
-        >
-          {availabilityButtonTitle}
-        </Button>
+          leftIcon={<AvailabilityIcon />}
+        />
       )}
     />
   )