[C-3877] Remove web icon component (#7674)

packages/harmony/src/components/icon.ts

@@ -2,15 +2,7 @@ import type { ComponentType, SVGProps } from 'react'
 
 import type { IconColors } from '../foundations/color/semantic'
 import type { ShadowOptions } from '../foundations/shadows'
-
-export const iconSizes = {
-  xs: 14,
-  s: 16,
-  m: 20,
-  l: 24,
-  xl: 30,
-  '2xl': 32
-}
+import { iconSizes } from '../foundations/spacing'
 
 type IconSize = keyof typeof iconSizes
 

packages/harmony/src/foundations/spacing/spacing.ts

@@ -43,5 +43,15 @@ export const spacing = {
   '5xl': 128
 }
 
+export const iconSizes = {
+  xs: 14,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 30,
+  '2xl': 32,
+  '3xl': 40
+}
+
 export type Spacing = typeof spacing
 export type SpacingOptions = keyof Spacing

packages/harmony/src/foundations/theme/theme.ts

@@ -3,21 +3,12 @@ import { colorTheme } from '../color'
 import { CornerRadius, cornerRadius } from '../corner-radius'
 import { Motion, motion, Spring, spring } from '../motion'
 import { Shadows, shadows } from '../shadows'
-import { Spacing, spacing } from '../spacing'
+import { Spacing, spacing, iconSizes } from '../spacing'
 import { typography } from '../typography'
 import type { Typography } from '../typography'
 
 import type { Theme } from './types'
 
-const iconSizes = {
-  xs: 14,
-  s: 16,
-  m: 20,
-  l: 24,
-  xl: 30,
-  '2xl': 32
-}
-
 const commonFoundations = {
   shadows,
   typography,

packages/stems/src/index.ts

@@ -6,7 +6,6 @@ import './assets/styles/shadows.css'
 import './assets/styles/transforms.css'
 import './assets/styles/layers.css'
 
-// export * from './components/Icons'
 export * from './styles/colors'
 export * from './styles/types'
 export * from './utils/styles'

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

@@ -24,7 +24,6 @@ import {
 } from 'formik'
 import { useToggle } from 'react-use'
 
-import { Icon } from 'components/Icon'
 import { HelperText } from 'components/data-entry/HelperText'
 import { Tile } from 'components/tile'
 import { Text } from 'components/typography'
@@ -115,10 +114,10 @@ type SelectedValueProps = {
 }
 
 export const SelectedValue = (props: SelectedValueProps) => {
-  const { label, icon, children } = props
+  const { label, icon: Icon, children } = props
   return (
     <span className={styles.selectedValue}>
-      {icon ? <Icon icon={icon} size='small' /> : null}
+      {Icon ? <Icon size='s' color='default' /> : null}
       {label ? <Text strength='strong'>{label}</Text> : null}
       {children}
     </span>
@@ -189,7 +188,7 @@ export const ContextualMenu = <FormValues extends FormikValues = FormikValues>(
           <Text className={styles.title} variant='title' size='large'>
             {label}
           </Text>
-          <Icon icon={IconCaretRight} color='neutralLight4' />
+          <IconCaretRight color='subdued' size='s' />
         </div>
         <Text className={styles.description}>{description}</Text>
       </div>

packages/web/src/components/leaving-audius-modal/LeavingAudiusModal.tsx

@@ -12,7 +12,6 @@ import {
   IconInfo
 } from '@audius/harmony'
 
-import { Icon } from 'components/Icon'
 import { Text } from 'components/typography'
 
 import { HelpCallout } from '../help-callout/HelpCallout'
@@ -42,7 +41,7 @@ export const LeavingAudiusModal = () => {
       size={'small'}
     >
       <ModalHeader>
-        <ModalTitle icon={<Icon icon={IconInfo} />} title={messages.title} />
+        <ModalTitle icon={<IconInfo />} title={messages.title} />
       </ModalHeader>
       <ModalContent className={styles.content}>
         <Text>{messages.body}</Text>

packages/web/src/components/nav/desktop/NavPopupMenu.tsx

@@ -17,7 +17,6 @@ import cn from 'classnames'
 import { useDispatch } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
-import { Icon } from 'components/Icon'
 import { AudioBalancePill } from 'components/audio-balance-pill/AUDIOBalancePill'
 import { NotificationDot } from 'components/notification-dot'
 import { USDCBalancePill } from 'components/usdc-balance-pill/USDCBalancePill'
@@ -88,7 +87,7 @@ const NavPopupMenu = () => {
           </div>
         ),
         onClick: () => navigate(PAYMENTS_PAGE),
-        icon: <Icon icon={IconDonate} />,
+        icon: <IconDonate size='s' />,
         iconClassName: styles.payAndEarnIcon
       }
     : null
@@ -156,7 +155,7 @@ const NavPopupMenu = () => {
                 ref={anchorRef}
                 onClick={() => triggerPopup()}
               >
-                <Icon icon={IconKebabHorizontal} />
+                <IconKebabHorizontal size='s' />
               </div>
               {showNotificationBubble ? (
                 <NotificationDot

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.module.css

@@ -12,14 +12,6 @@
   border: none;
 }
 
-.title {
-  align-items: center;
-  display: flex;
-  gap: var(--unit-2);
-  justify-content: center;
-  letter-spacing: 0.5px;
-}
-
 .content {
   padding: 0 0;
 }

packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx

@@ -32,18 +32,17 @@ import {
   ModalHeader,
   ModalFooter,
   Flex,
-  IconCart
+  IconCart,
+  ModalTitle
 } from '@audius/harmony'
 import cn from 'classnames'
 import { Formik, useField, useFormikContext } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { useHistoryContext } from 'app/HistoryProvider'
-import { Icon } from 'components/Icon'
 import { ModalForm } from 'components/modal-form/ModalForm'
 import { LockedTrackDetailsTile } from 'components/track/LockedTrackDetailsTile'
-import { Text } from 'components/typography'
 import { USDCManualTransfer } from 'components/usdc-manual-transfer/USDCManualTransfer'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { useIsUSDCEnabled } from 'hooks/useIsUSDCEnabled'
@@ -128,16 +127,7 @@ const RenderForm = ({
         onClose={onClose}
         showDismissButton={!isMobile}
       >
-        <Text
-          variant='label'
-          color='neutralLight2'
-          size='xLarge'
-          strength='strong'
-          className={styles.title}
-        >
-          <Icon size='large' icon={IconCart} />
-          {messages.completePurchase}
-        </Text>
+        <ModalTitle icon={<IconCart />} title={messages.completePurchase} />
       </ModalHeader>
       <ModalContentPages
         contentClassName={styles.content}

packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFields.tsx

@@ -13,10 +13,9 @@ import {
 import { PurchaseMethod, PurchaseVendor } from '@audius/common/models'
 import { IntKeys, FeatureFlags } from '@audius/common/services'
 import { PurchaseContentStage } from '@audius/common/store'
-import { Flex, IconCheck } from '@audius/harmony'
+import { Flex, IconValidationCheck } from '@audius/harmony'
 import { useField } from 'formik'
 
-import { Icon } from 'components/Icon'
 import { PaymentMethod } from 'components/payment-method/PaymentMethod'
 import { Text } from 'components/typography'
 
@@ -25,7 +24,6 @@ import { usePurchaseSummaryValues } from '../hooks/usePurchaseSummaryValues'
 
 import { PayExtraFormSection } from './PayExtraFormSection'
 import { PayToUnlockInfo } from './PayToUnlockInfo'
-import styles from './PurchaseContentFormFields.module.css'
 import { PurchaseSummaryTable } from './PurchaseSummaryTable'
 
 const messages = {
@@ -96,9 +94,7 @@ export const PurchaseContentFormFields = ({
   if (isPurchased) {
     return (
       <Flex alignItems='center' justifyContent='center' gap='m' p='m'>
-        <div className={styles.completionCheck}>
-          <Icon icon={IconCheck} size='xxSmall' color='white' />
-        </div>
+        <IconValidationCheck size='m' />
         <Text variant='heading' size='small'>
           {messages.purchaseSuccessful}
         </Text>

packages/web/src/components/premium-content-purchase-modal/components/PurchaseContentFormFooter.tsx

@@ -13,7 +13,6 @@ import { formatPrice } from '@audius/common/utils'
 import { Button, IconCaretRight, IconError, PlainButton } from '@audius/harmony'
 
 import { make } from 'common/store/analytics/actions'
-import { Icon } from 'components/Icon'
 import { TwitterShareButton } from 'components/twitter-share-button/TwitterShareButton'
 import { Text } from 'components/typography'
 import { fullTrackPage } from 'utils/route'
@@ -39,7 +38,7 @@ const ContentPurchaseError = ({
 }) => {
   return (
     <Text className={styles.errorContainer} color='accentRed'>
-      <Icon icon={IconError} size='medium' />
+      <IconError size='m' color='danger' />
       {usePurchaseContentErrorMessage(code)}
     </Text>
   )