clients/web: chase some Material UI icons to reduce bundle size

Related to #4539

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/benefits/ClientPage.tsx

@@ -217,7 +217,7 @@ const BenefitRow = ({ benefit, organization }: BenefitRowProps) => {
         className="flex flex-row items-start gap-x-3 align-middle"
       >
         <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-          {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
+          {resolveBenefitIcon(benefit.type, 'h-3 w-3')}
         </span>
         <span className="text-sm">{benefit.description}</span>
       </div>

clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/products/benefits/ClientPage.tsx

@@ -193,7 +193,7 @@ const BenefitRow = ({ benefit, organization }: BenefitRowProps) => {
         className="flex flex-row items-start gap-x-3 align-middle"
       >
         <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-          {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
+          {resolveBenefitIcon(benefit.type, 'h-3 w-3')}
         </span>
         <span className="text-sm">{benefit.description}</span>
       </div>

clients/apps/web/src/app/providers.tsx

@@ -10,9 +10,13 @@ import { ThemeProvider } from 'next-themes'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import PostHog from 'posthog-js-lite'
-import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
-
-import { createContext } from 'react'
+import {
+  createContext,
+  PropsWithChildren,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 
 const stub = (): never => {
   throw new Error(

clients/apps/web/src/components/Benefit/BenefitGrant.tsx

@@ -232,7 +232,7 @@ export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
       <div className="flex flex-row items-center gap-x-4">
         <div className="flex flex-row items-center gap-x-2 text-xs text-blue-500 dark:text-white">
           <span className="dark:bg-polar-700 flex h-8 w-8 flex-row items-center justify-center rounded-full bg-blue-50 text-sm">
-            {resolveBenefitIcon(benefit.type, 'small')}
+            {resolveBenefitIcon(benefit.type, 'h-3 w-3')}
           </span>
         </div>
         <div className="flex flex-col">

clients/apps/web/src/components/Benefit/utils.tsx

@@ -1,43 +1,33 @@
-import {
-  CheckOutlined,
-  FileDownloadOutlined,
-  GitHub,
-  KeyOutlined,
-  WebOutlined,
-} from '@mui/icons-material'
 import { BenefitType } from '@polar-sh/api'
+import { Check, Download, Globe, Key } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
+import GitHubIcon from '../Icons/GitHubIcon'
 
 export type CreatableBenefit = BenefitType
 
 export const resolveBenefitCategoryIcon = (
   type?: BenefitType,
-  fontSize: 'small' | 'inherit' | 'large' | 'medium' = 'small',
   className?: string,
 ) => {
   const cn = twMerge('h-4 w-4', className)
   switch (type) {
     case BenefitType.ADS:
-      return <WebOutlined className={cn} fontSize={fontSize} />
+      return <Globe className={cn} />
     case BenefitType.DISCORD:
       return <DiscordIcon className={cn} />
     case BenefitType.GITHUB_REPOSITORY:
-      return <GitHub className={cn} fontSize={fontSize} />
+      return <GitHubIcon className={cn} />
     case BenefitType.DOWNLOADABLES:
-      return <FileDownloadOutlined className={cn} fontSize={fontSize} />
+      return <Download className={cn} />
     case BenefitType.LICENSE_KEYS:
-      return <KeyOutlined className={cn} fontSize={fontSize} />
+      return <Key className={cn} />
     default:
-      return <CheckOutlined className={cn} fontSize={fontSize} />
+      return <Check className={cn} />
   }
 }
 
-export const resolveBenefitIcon = (
-  type: BenefitType,
-  fontSize: 'small' | 'inherit' | 'large' | 'medium' = 'small',
-  className?: string,
-) => {
-  return resolveBenefitCategoryIcon(type, fontSize, className)
+export const resolveBenefitIcon = (type: BenefitType, className?: string) => {
+  return resolveBenefitCategoryIcon(type, className)
 }
 
 export const resolveBenefitTypeDisplayName = (type: BenefitType | 'usage') => {

clients/apps/web/src/components/Checkout/Checkout.tsx

@@ -1,22 +1,21 @@
 'use client'
 
-import { CheckoutForm, CheckoutPricing } from '@polar-sh/checkout/components'
-import ShadowBox, {
-  ShadowBoxOnMd,
-} from '@polar-sh/ui/components/atoms/ShadowBox'
-import { CheckoutCard } from './CheckoutCard'
-import CheckoutProductInfo from './CheckoutProductInfo'
-
 import { CONFIG } from '@/utils/config'
+import { CheckoutForm, CheckoutPricing } from '@polar-sh/checkout/components'
 import { PolarEmbedCheckout } from '@polar-sh/checkout/embed'
 import { useCheckoutFulfillmentListener } from '@polar-sh/checkout/hooks'
 import { useCheckout, useCheckoutForm } from '@polar-sh/checkout/providers'
 import type { CheckoutConfirmStripe } from '@polar-sh/sdk/models/components/checkoutconfirmstripe'
 import type { CheckoutPublicConfirmed } from '@polar-sh/sdk/models/components/checkoutpublicconfirmed'
+import ShadowBox, {
+  ShadowBoxOnMd,
+} from '@polar-sh/ui/components/atoms/ShadowBox'
 import type { Stripe, StripeElements } from '@stripe/stripe-js'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
 import { useCallback, useMemo, useState } from 'react'
+import { CheckoutCard } from './CheckoutCard'
+import CheckoutProductInfo from './CheckoutProductInfo'
 
 export interface CheckoutProps {
   embed?: boolean

clients/apps/web/src/components/Checkout/Embed/CheckoutEmbedClose.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { XMarkIcon } from '@heroicons/react/24/outline'
 import { PolarEmbedCheckout } from '@polar-sh/checkout/embed'
 import type { CheckoutPublic } from '@polar-sh/sdk/models/components/checkoutpublic'
+import { X } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
 
 interface CheckoutEmbedCloseProps {
@@ -43,7 +43,7 @@ const CheckoutEmbedClose: React.FC<
       className="dark:bg-polar-950 fixed right-2 top-2 rounded-full bg-transparent bg-white p-2 shadow-xl md:right-4 md:top-4 dark:text-white"
       onClick={onClose}
     >
-      <XMarkIcon className="h-4 w-4 md:h-6 md:w-6" />
+      <X className="h-4 w-4 md:h-6 md:w-6" />
     </button>
   )
 }

clients/apps/web/src/components/Layout/Public/BrandingMenu.tsx

@@ -1,12 +1,6 @@
 'use client'
 
 import LogoIcon from '@/components/Brand/LogoIcon'
-import {
-  ArrowDownwardOutlined,
-  ContentPasteOutlined,
-} from '@mui/icons-material'
-import Link from 'next/link'
-
 import LogoType from '@/components/Brand/LogoType'
 import { useOutsideClick } from '@/utils/useOutsideClick'
 import {
@@ -16,6 +10,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from '@polar-sh/ui/components/ui/dropdown-menu'
+import { ArrowDown, Clipboard } from 'lucide-react'
+import Link from 'next/link'
 import { MouseEventHandler, useCallback, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
@@ -79,14 +75,14 @@ export const BrandingMenu = ({
             className="flex flex-row gap-x-3"
             onClick={handleCopyLogoToClipboard}
           >
-            <ContentPasteOutlined fontSize="inherit" />
+            <Clipboard className="h-3 w-3" />
             <span>Copy Logo as SVG</span>
           </DropdownMenuItem>
           <DropdownMenuItem
             className="flex flex-row gap-x-3"
             onClick={() => setBrandingMenuOpen(false)}
           >
-            <ArrowDownwardOutlined fontSize="inherit" />
+            <ArrowDown className="h-3 w-3" />
             <Link href="/assets/brand/polar_brand.zip">
               Download Branding Assets
             </Link>

clients/apps/web/src/components/Products/BenefitList.tsx

@@ -1,9 +1,5 @@
-import {
-  AddOutlined,
-  KeyboardArrowRight,
-  KeyboardArrowUp,
-} from '@mui/icons-material'
 import { BenefitType } from '@polar-sh/api'
+import { ChevronDown, ChevronUp, Plus } from 'lucide-react'
 import React, { ReactNode, useState } from 'react'
 import { resolveBenefitIcon } from '../Benefit/utils'
 
@@ -50,7 +46,7 @@ export const BenefitList = ({
       {shown.map((benefit) => (
         <BenefitRow
           key={benefit.id}
-          icon={resolveBenefitIcon(benefit.type, 'small')}
+          icon={resolveBenefitIcon(benefit.type, 'h-3 w-3')}
         >
           {benefit.description}
         </BenefitRow>
@@ -61,35 +57,29 @@ export const BenefitList = ({
             toggled.map((benefit) => (
               <BenefitRow
                 key={benefit.id}
-                icon={resolveBenefitIcon(benefit.type, 'small')}
+                icon={resolveBenefitIcon(benefit.type, 'h-3 w-3')}
               >
                 {benefit.description}
               </BenefitRow>
             ))}
 
           {!toggle && (
-            <BenefitRow
-              key="show"
-              icon={<AddOutlined fontSize="small" className="h-3 w-3" />}
-            >
+            <BenefitRow key="show" icon={<Plus className="h-3 w-3" />}>
               {toggled.length} more benefits
             </BenefitRow>
           )}
 
           {toggle && (
             <a href="#" onClick={onToggle}>
               {showAll && (
-                <BenefitRow
-                  key="hide"
-                  icon={<KeyboardArrowUp fontSize="small" />}
-                >
+                <BenefitRow key="hide" icon={<ChevronUp className="h-3 w-3" />}>
                   Show less
                 </BenefitRow>
               )}
               {!showAll && (
                 <BenefitRow
                   key="show"
-                  icon={<KeyboardArrowRight fontSize="small" />}
+                  icon={<ChevronDown className="h-3 w-3" />}
                 >
                   Show {toggled.length} more benefits
                 </BenefitRow>

clients/apps/web/src/components/Products/ProductBenefitsForm.tsx

@@ -270,7 +270,7 @@ const BenefitsContainer = ({
         role="button"
       >
         <div className="flex flex-row items-center gap-x-3">
-          {resolveBenefitCategoryIcon(type, 'small', 'h-4 w-4')}
+          {resolveBenefitCategoryIcon(type, 'h-4 w-4')}
           <span>{title}</span>
         </div>
         <span className="flex flex-row items-center gap-x-4">

clients/apps/web/src/components/Subscriptions/ChangePlanModal.tsx

@@ -222,7 +222,7 @@ const ChangePlanModal = ({
                 {addedBenefits.map((benefit) => (
                   <div key={benefit.id} className="flex flex-row align-middle">
                     <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-                      {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
+                      {resolveBenefitIcon(benefit.type, 'h-3 w-3')}
                     </span>
                     <span className="ml-2 text-sm">{benefit.description}</span>
                   </div>
@@ -239,7 +239,7 @@ const ChangePlanModal = ({
                 {removedBenefits.map((benefit) => (
                   <div key={benefit.id} className="flex flex-row align-middle">
                     <span className="dark:bg-polar-700 flex h-6 w-6 shrink-0 flex-row items-center justify-center rounded-full bg-blue-50 text-2xl text-blue-500 dark:text-white">
-                      {resolveBenefitIcon(benefit.type, 'inherit', 'h-3 w-3')}
+                      {resolveBenefitIcon(benefit.type, 'h-3 w-3')}
                     </span>
                     <span className="ml-2 text-sm">{benefit.description}</span>
                   </div>