[C-4028] Harmony QA (#7919)

AudiusProject · Mar 25, 2024 · eeb6e19 · eeb6e19
1 parent fc94c44
commit eeb6e19
Show file tree

Hide file tree

Showing 30 changed files with 285 additions and 469 deletions.
diff --git a/packages/harmony/src/components/button/IconButton/IconButton.tsx b/packages/harmony/src/components/button/IconButton/IconButton.tsx
@@ -13,7 +13,10 @@ export type IconButtonProps = {
   'aria-label': string
   iconCss?: CSSObject
 } & Pick<IconProps, 'color' | 'size' | 'shadow' | 'height' | 'width'> &
-  Pick<BaseButtonProps, 'onClick' | 'disabled' | 'className' | 'type'>
+  Pick<
+    BaseButtonProps,
+    'onClick' | 'disabled' | 'className' | 'type' | 'children'
+  >
 
 /**
  * The icon component allows you to pass in an icon and
@@ -30,6 +33,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       height,
       width,
       iconCss,
+      children,
       ...other
     } = props
     const { disabled } = other
@@ -72,6 +76,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           width={width}
           css={iconCss}
         />
+        {children}
       </BaseButton>
     )
   }

diff --git a/packages/harmony/src/components/popup-menu/PopupMenu.module.css b/packages/harmony/src/components/popup-menu/PopupMenu.module.css
@@ -18,7 +18,7 @@
   color: var(--harmony-neutral);
 }
 
-.item .icon {
+.icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,10 +32,10 @@
 
 .item:hover {
   cursor: pointer;
-  color: var(--harmony-white);
+  color: var(--harmony-static-white);
   background: var(--harmony-secondary);
 }
 
 .item:hover path {
-  fill: var(--harmony-white);
+  fill: var(--harmony-static-white);
 }
diff --git a/packages/harmony/src/components/popup-menu/PopupMenu.tsx b/packages/harmony/src/components/popup-menu/PopupMenu.tsx
@@ -106,11 +106,11 @@ export const PopupMenu = forwardRef<HTMLDivElement, PopupMenuProps>(
                   onClick={handleMenuItemClick(item)}
                   tabIndex={i === 0 ? 0 : -1}
                 >
-                  {item.icon && (
+                  {item.icon ? (
                     <div className={cn(styles.icon, item.iconClassName)}>
                       {item.icon}
                     </div>
-                  )}
+                  ) : null}
                   {item.text}
                 </li>
               ))}

diff --git a/packages/web/src/components/buy-audio-modal/components/CoinbaseBuyAudioButton.module.css b/packages/web/src/components/buy-audio-modal/components/CoinbaseBuyAudioButton.module.css
@@ -1,7 +1,3 @@
-.coinbasePayButton {
-  width: 100%;
-}
-
 .tooltip :global(.ant-tooltip-inner) {
   border-radius: 8px;
   padding: 12px 24px;

diff --git a/packages/web/src/components/buy-audio-modal/components/CoinbaseBuyAudioButton.tsx b/packages/web/src/components/buy-audio-modal/components/CoinbaseBuyAudioButton.tsx
@@ -89,7 +89,6 @@ export const CoinbaseBuyAudioButton = () => {
       <div>
         <OnRampButton
           provider={OnRampProvider.COINBASE}
-          className={styles.coinbasePayButton}
           disabled={isDisabled}
           onClick={handleClick}
         />

diff --git a/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.module.css b/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.module.css
@@ -1,7 +1,3 @@
-.button {
-  width: 100%;
-}
-
 .tooltip :global(.ant-tooltip-inner) {
   border-radius: 8px;
   padding: 12px 24px;

diff --git a/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.tsx b/packages/web/src/components/buy-audio-modal/components/StripeBuyAudioButton.tsx
@@ -72,7 +72,6 @@ export const StripeBuyAudioButton = () => {
       <div>
         <OnRampButton
           disabled={belowThreshold}
-          className={styles.button}
           provider={OnRampProvider.STRIPE}
           onClick={handleClick}
         />

diff --git a/packages/web/src/components/image-selection/ImageSelectionButton.jsx b/packages/web/src/components/image-selection/ImageSelectionButton.jsx
@@ -13,7 +13,7 @@ import ImageSelectionPopup from './ImageSelectionPopup'
 import { ImageSelectionProps, ImageSelectionDefaults } from './PropTypes'
 
 const messages = {
-  add: 'Add',
+  add: 'Add Artwork',
   change: 'Change',
   remove: 'Remove'
 }
@@ -79,7 +79,6 @@ const ImageSelectionButton = ({
         <>
           <Button
             variant='tertiary'
-            size='small'
             ref={anchorRefProp ? undefined : anchorRefInner}
             className={cn(buttonClassName, {
               [styles.hide]: showModal
@@ -112,7 +111,6 @@ const ImageSelectionButton = ({
           >
             <Button
               variant='tertiary'
-              size='small'
               className={cn(styles.noPopup, {
                 [styles.hide]: hasImage
               })}

diff --git a/packages/web/src/components/nav-banner/NavBanner.tsx b/packages/web/src/components/nav-banner/NavBanner.tsx
@@ -1,16 +1,17 @@
 import { ReactElement } from 'react'
 
 import { removeNullable } from '@audius/common/utils'
-import {
-  IconButton,
-  PopupMenu,
-  IconSort as SortIcon,
-  useTheme
-} from '@audius/harmony'
+import { Button, PopupMenu, IconSort as SortIcon } from '@audius/harmony'
 import cn from 'classnames'
 
 import styles from './NavBanner.module.css'
 
+const messages = {
+  sortByRecent: 'Sort by Recent',
+  sortByPopular: 'Sort by Popular',
+  openSortButton: 'Toggle Sort Mode'
+}
+
 type NavBannerProps = {
   tabs?: ReactElement
   dropdownDisabled?: boolean
@@ -34,18 +35,16 @@ const NavBanner = (props: NavBannerProps) => {
     empty
   } = props
 
-  const { cornerRadius, color } = useTheme()
-
   const menuItems = [
     onSortByRecent
       ? {
-          text: 'Sort by Recent',
+          text: messages.sortByRecent,
           onClick: onSortByRecent
         }
       : null,
     onSortByPopular
       ? {
-          text: 'Sort by Popular',
+          text: messages.sortByPopular,
           onClick: onSortByPopular
         }
       : null
@@ -69,21 +68,12 @@ const NavBanner = (props: NavBannerProps) => {
                   items={menuItems}
                   anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                   renderTrigger={(ref, triggerPopup) => (
-                    <IconButton
-                      aria-label='open'
+                    <Button
                       ref={ref}
-                      css={{
-                        borderRadius: cornerRadius.s,
-                        backgroundColor: color.background.white,
-                        '&:hover': {
-                          backgroundColor: color.secondary.secondary,
-                          path: {
-                            fill: color.icon.staticWhite
-                          }
-                        }
-                      }}
-                      icon={SortIcon}
-                      color='subdued'
+                      size='small'
+                      variant='secondary'
+                      iconLeft={SortIcon}
+                      aria-label={messages.openSortButton}
                       onClick={() => triggerPopup()}
                     />
                   )}

diff --git a/packages/web/src/components/nav/desktop/LeftNav.tsx b/packages/web/src/components/nav/desktop/LeftNav.tsx
@@ -38,8 +38,8 @@ import { AccountDetails } from './AccountDetails'
 import { ConnectInstagram } from './ConnectInstagram'
 import { GroupHeader } from './GroupHeader'
 import styles from './LeftNav.module.css'
+import { LeftNavCTA } from './LeftNavCTA'
 import { LeftNavDroppable, LeftNavLink } from './LeftNavLink'
-import { NavButton } from './NavButton'
 import { NavHeader } from './NavHeader'
 import { NowPlayingArtworkTile } from './NowPlayingArtworkTile'
 import { PlaylistLibrary } from './PlaylistLibrary'
@@ -211,7 +211,7 @@ const LeftNav = (props: NavColumnProps) => {
         </div>
         <div className={styles.navAnchor}>
           {profileCompletionMeter}
-          <NavButton />
+          <LeftNavCTA />
           <NowPlayingArtworkTile />
         </div>
       </ClientOnly>

diff --git a/.../src/components/nav/desktop/NavButton.tsx → ...src/components/nav/desktop/LeftNavCTA.tsx b/.../src/components/nav/desktop/NavButton.tsx → ...src/components/nav/desktop/LeftNavCTA.tsx
@@ -28,7 +28,7 @@ const messages = {
   uploading: 'Uploading...'
 }
 
-export const NavButton = () => {
+export const LeftNavCTA = () => {
   const dispatch = useDispatch()
   const record = useRecord()
   const isSignedIn = useSelector((state: AppState) => !!getAccountUser(state))

diff --git a/packages/web/src/components/nav/desktop/NavHeader.module.css b/packages/web/src/components/nav/desktop/NavHeader.module.css
@@ -14,94 +14,6 @@ svg.logo.matrixLogo path {
   fill: url(#matrixHeaderGradient) !important;
 }
 
-.headerIconContainer {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.headerIconWrapper {
-  position: relative;
-  cursor: pointer;
-  height: 24px;
-  width: 24px;
-  border: 1px solid var(--harmony-n-100);
-  border-radius: 50%;
-  margin-left: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all ease-in-out 0.07s;
-  background-color: var(--harmony-n-50);
-}
-
-.headerIconWrapper:global(.active),
-.headerIconWrapper:hover {
-  background-color: var(--harmony-s-100);
-  transform: scale3d(1.1, 1.1, 1.1);
-}
-
-.headerIconWrapper:active {
-  transform: scale3d(0.99, 0.99, 0.99);
-}
-
-.headerIconWrapper.iconNotification.active {
-  background-color: var(--harmony-orange);
-}
-
-.headerIconWrapper.iconNotification.active:hover,
-.headerIconWrapper.iconNotification.active:active {
-  background-color: var(--harmony-orange);
-}
-
-.headerIconWrapper:global(.active) svg path,
-.headerIconWrapper.iconNotification.active svg path {
-  fill: var(--harmony-static-white);
-}
-
-.headerIconWrapper.iconNotification.notificationsOpen,
-.headerIconWrapper.iconNotification.notificationsOpen:hover,
-.headerIconWrapper.iconNotification.notificationsOpen.active:hover,
-.headerIconWrapper.iconNotification.notificationsOpen:active,
-.headerIconWrapper.iconNotification.notificationsOpen.active:active {
-  background-color: var(--harmony-secondary);
-}
-
-.headerIconWrapper.iconNotification.notificationsOpen svg path {
-  fill: var(--harmony-static-white);
-}
-
-.headerIconWrapper:hover svg path,
-.headerIconWrapper:active svg path {
-  fill: var(--harmony-static-white);
-}
-
-.headerIconWrapper svg {
-  height: 20px;
-  width: 20px;
-}
-
-.headerIconWrapper svg path {
-  fill: var(--harmony-n-400);
-}
-
-.iconTag {
-  position: absolute;
-  top: -7px;
-  right: 0px;
-  transform: translateX(50%);
-  border-radius: 8px;
-  background-color: #d0021b;
-  color: #ffffff;
-  font-size: 11px;
-  font-weight: bold;
-  letter-spacing: 0.07px;
-  line-height: 14px;
-  text-transform: uppercase;
-  padding: 0px 6px;
-}
-
 .earlyAccess {
   font-size: 10px;
   position: absolute;