Migrate layout icons to Lucide

Author: buberdds

.changelog/2384.trivial.md

@@ -0,0 +1 @@
+Migrate icons to Lucide

src/app/components/Balance/FiatMoneyAmount.tsx

@@ -1,16 +1,16 @@
-import WarningIcon from '@mui/icons-material/WarningAmber'
 import { useTranslation } from 'react-i18next'
 import { FC } from 'react'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import { FiatValueInfo } from './hooks'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
+import { TriangleAlert } from 'lucide-react'
 
 export const FiatMoneyWarning: FC<{ unknownTickers: string[] }> = ({ unknownTickers }) => {
   const { t } = useTranslation()
   return (
     <Tooltip title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}>
-      <WarningIcon />
+      <TriangleAlert />
     </Tooltip>
   )
 }

src/app/components/CardEmptyState/index.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
-import ReportProblemIcon from '@mui/icons-material/ReportProblem'
+import { TriangleAlert } from 'lucide-react'
 import { COLORS } from '../../../styles/theme/colors'
 
 type CardEmptyStateProps = {
@@ -10,7 +10,7 @@ type CardEmptyStateProps = {
 
 export const CardEmptyState: FC<CardEmptyStateProps> = ({ label, action }) => (
   <div className="flex flex-col justify-center items-center flex-1 gap-3 text-center px-1 pt-8 pb-16 sm:px-4 sm:pt-16 sm:pb-32">
-    <ReportProblemIcon sx={{ color: COLORS.warningColor, fontSize: '60px' }} />
+    <TriangleAlert size={60} color={COLORS.warningColor} />
     <Typography className="block align-middle text-gray-700">
       {label}
       {action}

src/app/components/MuiIcons/PivotTable.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import { Icon, IconNode } from 'lucide-react'
+
+// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/PivotTableChart.js#L6
+const pivotTableNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M10 8h11V5c0-1.1-.9-2-2-2h-9zM3 8h5V3H5c-1.1 0-2 .9-2 2zm2 13h3V10H3v9c0 1.1.9 2 2 2m8 1-4-4 4-4zm1-9 4-4 4 4zm.58 6H13v-2h1.58c1.33 0 2.42-1.08 2.42-2.42V13h2v1.58c0 2.44-1.98 4.42-4.42 4.42',
+
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+]
+
+export const PivotTable: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
+  return <Icon iconNode={pivotTableNode} size={size} className={className} />
+}

src/app/components/MuiIcons/X.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+import { Icon, IconNode } from 'lucide-react'
+
+// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/X.js#L6
+const xNode: IconNode = [
+  [
+    'path',
+    {
+      d: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+      fill: 'currentColor',
+      stroke: 'none',
+    },
+  ],
+]
+
+export const X: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
+  return <Icon iconNode={xNode} size={size} className={className} />
+}

src/app/components/TableLayoutButton/index.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
-import PivotTableChartIcon from '@mui/icons-material/PivotTableChart'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
+import { PivotTable } from '../MuiIcons/PivotTable'
 
 export enum TableLayout {
   Horizontal = 'horizontal',
@@ -21,13 +21,12 @@ export const TableLayoutButton: FC<TableLayoutButtonProps> = ({ tableView, setTa
     <Tooltip side="left" title={t('tableLayoutButton.changeView')}>
       <Button
         variant="ghost"
-        size="icon"
         onClick={() => {
           setTableView(tableView === TableLayout.Horizontal ? TableLayout.Vertical : TableLayout.Horizontal)
         }}
         className="hover:bg-black/[0.04]"
       >
-        <PivotTableChartIcon fontSize="medium" />
+        <PivotTable className="min-h-6 min-w-6" />
       </Button>
     </Tooltip>
   )

src/app/components/XProfileWidget/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classes from './XProfileWidget.module.css'
-import XIcon from '@mui/icons-material/X'
+import { X } from '../MuiIcons/X'
 
 export const XProfileWidget: React.FC<{ handle: string }> = ({ handle }) => {
   // Clean the handle (remove '@' if present)
@@ -27,7 +27,7 @@ export const XProfileWidget: React.FC<{ handle: string }> = ({ handle }) => {
           </div>
         </div>
         at
-        <XIcon />
+        <X />
       </div>
     </a>
   )

src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx

@@ -4,10 +4,8 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
-import FilterNoneIcon from '@mui/icons-material/FilterNone'
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
+import { CircleOff } from 'lucide-react'
 import { Runtime, useGetRuntimeStatus } from 'oasis-nexus/api'
-import { COLORS } from '../../../styles/theme/colors'
 import { useRuntimeFreshness } from '../../components/OfflineBanner/hook'
 import { BlockLink } from '../../components/Blocks/BlockLink'
 import { RouterLinkCircle } from '../../components/StyledLinks'
@@ -243,7 +241,7 @@ const PanelButton: FC<PanelButtonProps> = ({ activePanel, ariaLabel, panel, setP
       {panel === activePanel ? (
         <div className="rounded-full w-[10px] h-[10px] bg-chart-5" />
       ) : (
-        <RadioButtonUncheckedIcon sx={{ color: COLORS.brandDark, fontSize: '10px' }} />
+        <div className="rounded-full w-[10px] h-[10px] border border-chart-5" />
       )}
     </Button>
   )
@@ -266,10 +264,10 @@ const ChartsContainer: FC<ChartsContainerProps> = ({ children, status }) => {
       <div className="flex flex-1 flex-col items-center gap-2">
         {status && <div className="w-full">{children}</div>}
         {!status && (
-          <>
-            <FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
+          <span className="flex flex-col gap-2 items-center text-center text-muted-foreground">
+            <CircleOff size={30} className="text-muted-foreground" />
             {t('paratimes.noData')}
-          </>
+          </span>
         )}
       </div>
     </div>

src/app/pages/ParatimeDashboardPage/Nodes.tsx

@@ -1,10 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
-import OfflineBoltIcon from '@mui/icons-material/OfflineBolt'
+import { Zap } from 'lucide-react'
 import { Info } from 'lucide-react'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
 import { useGetRuntimeStatus } from '../../../oasis-nexus/api'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { RuntimeScope } from '../../../types/searchScope'
@@ -27,7 +26,9 @@ export const Nodes: FC<{ scope: RuntimeScope }> = ({ scope }) => {
       <div className="flex items-center justify-center h-full">
         {isFetched && activeNodes !== undefined && (
           <>
-            <OfflineBoltIcon fontSize="large" sx={{ color: COLORS.eucalyptus, mr: 3 }} />
+            <div className="rounded-full w-8 h-8 bg-[#4cd4a9] flex items-center justify-center mr-4">
+              <Zap color="white" size={20} />
+            </div>
             <Typography className="text-primary text-center text-2xl font-semibold">
               {t('nodes.value', { value: activeNodes })}
             </Typography>

src/app/pages/RoflAppDetailsPage/EmptyStateCard.tsx

@@ -1,15 +1,14 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import DataObjectIcon from '@mui/icons-material/DataObject'
-import { COLORS } from '../../../styles/theme/colors'
+import { Braces } from 'lucide-react'
 
 export const EmptyStateCard: FC = () => {
   const { t } = useTranslation()
 
   return (
     <div className="flex flex-col justify-center items-center gap-2 min-h-[150px] sm:min-h-[200px]">
-      <DataObjectIcon sx={{ color: COLORS.grayMedium, fontSize: 40, opacity: 0.5 }} />
-      <span className="text-gray-500 font-semibold text-center opacity-50">{t('rofl.noData')}</span>
+      <Braces className="text-sidebar-ring" />
+      <span className="text-sidebar-ring font-semibold text-center">{t('rofl.noData')}</span>
     </div>
   )
 }