Skip to content

Commit d4e80a5

Browse files
buberddsbuberdds
authored
Merge pull request #2384 from oasisprotocol/mz/icons-2
Migrate icons to Lucide
2 parents 8efa5e6 + 0723c10 commit d4e80a5

File tree

11 files changed

+75
-49
lines changed

11 files changed

+75
-49
lines changed

‎.changelog/2384.trivial.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Migrate icons to Lucide

‎src/app/components/Balance/FiatMoneyAmount.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import WarningIcon from '@mui/icons-material/WarningAmber'
21
import { useTranslation } from 'react-i18next'
32
import { FC } from 'react'
43
import { CoinGeckoReferral } from '../CoinGeckoReferral'
54
import { FiatValueInfo } from './hooks'
65
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
76
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
7+
import { TriangleAlert } from 'lucide-react'
88

99
export const FiatMoneyWarning: FC<{ unknownTickers: string[] }> = ({ unknownTickers }) => {
1010
const { t } = useTranslation()
1111
return (
1212
<Tooltip title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}>
13-
<WarningIcon />
13+
<TriangleAlert />
1414
</Tooltip>
1515
)
1616
}

‎src/app/components/CardEmptyState/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, ReactNode } from 'react'
22
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
3-
import ReportProblemIcon from '@mui/icons-material/ReportProblem'
3+
import { TriangleAlert } from 'lucide-react'
44
import { COLORS } from '../../../styles/theme/colors'
55

66
type CardEmptyStateProps = {
@@ -10,7 +10,7 @@ type CardEmptyStateProps = {
1010

1111
export const CardEmptyState: FC<CardEmptyStateProps> = ({ label, action }) => (
1212
<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">
13-
<ReportProblemIcon sx={{ color: COLORS.warningColor, fontSize: '60px' }} />
13+
<TriangleAlert size={60} color={COLORS.warningColor} />
1414
<Typography className="block align-middle text-gray-700">
1515
{label}
1616
{action}

‎src/app/components/MuiIcons/PivotTable.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { FC } from 'react'
2+
import { Icon, IconNode } from 'lucide-react'
3+
4+
// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/PivotTableChart.js#L6
5+
const pivotTableNode: IconNode = [
6+
[
7+
'path',
8+
{
9+
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',
10+
11+
fill: 'currentColor',
12+
stroke: 'none',
13+
},
14+
],
15+
]
16+
17+
export const PivotTable: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
18+
return <Icon iconNode={pivotTableNode} size={size} className={className} />
19+
}

‎src/app/components/MuiIcons/X.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { FC } from 'react'
2+
import { Icon, IconNode } from 'lucide-react'
3+
4+
// From https://github.com/mui/material-ui/blob/4c336b8bd492749117a34947db44b0157a44c18b/packages/mui-icons-material/lib/esm/X.js#L6
5+
const xNode: IconNode = [
6+
[
7+
'path',
8+
{
9+
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',
10+
fill: 'currentColor',
11+
stroke: 'none',
12+
},
13+
],
14+
]
15+
16+
export const X: FC<{ className?: string; size?: number }> = ({ className, size = 24 }) => {
17+
return <Icon iconNode={xNode} size={size} className={className} />
18+
}

‎src/app/components/RuntimeTransactionMethod/index.tsx‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { TFunction } from 'i18next'
4-
import TextSnippetIcon from '@mui/icons-material/TextSnippet'
5-
import FileCopyIcon from '@mui/icons-material/FileCopy'
6-
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
7-
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
8-
import { ArrowRight } from 'lucide-react'
9-
import MemoryIcon from '@mui/icons-material/Memory'
10-
import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
11-
import LanIcon from '@mui/icons-material/Lan'
12-
import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
13-
import DeveloperBoard from '@mui/icons-material/DeveloperBoard'
14-
import DeveloperBoardOffIcon from '@mui/icons-material/DeveloperBoardOff'
15-
import LockIcon from '@mui/icons-material/Lock'
4+
import { DeveloperBoard } from '../MuiIcons/DeveloperBoard'
5+
import { DeveloperBoardOff } from '../MuiIcons/DeveloperBoardOff'
166
import { MethodIcon } from '../ConsensusTransactionMethod'
177
import {
188
GetRuntimeTransactionsParams,
@@ -24,6 +14,7 @@ import {
2414
import { paraTimesConfig } from '../../../config'
2515
import { exhaustedTypeWarning } from '../../../types/errors'
2616
import { RuntimeTxMethodFilteringType } from '../../hooks/useCommonParams'
17+
import { ArrowRight, ArrowUp, ArrowDown, Cpu, CircleHelp, Network, Files, Lock, FileText } from 'lucide-react'
2718

2819
const getRuntimeTransactionLabel = (t: TFunction, method: KnownRuntimeTxMethod) => {
2920
// TODO: when adding new types here, please also update knownRuntimeTxMethods below.
@@ -123,52 +114,52 @@ const getRuntimeTransactionIcon = (method: KnownRuntimeTxMethod, label: string,
123114

124115
switch (method) {
125116
case 'evm.Call':
126-
return <MethodIcon icon={<TextSnippetIcon />} {...props} />
117+
return <MethodIcon icon={<FileText />} {...props} />
127118
case 'evm.Create':
128-
return <MethodIcon icon={<FileCopyIcon />} {...props} />
119+
return <MethodIcon icon={<Files />} {...props} />
129120
case 'consensus.Deposit':
130-
return <MethodIcon color="green" icon={<ArrowDownwardIcon />} {...props} />
121+
return <MethodIcon color="green" icon={<ArrowDown />} {...props} />
131122
case 'consensus.Withdraw':
132-
return <MethodIcon color="orange" icon={<ArrowUpwardIcon />} {...props} />
123+
return <MethodIcon color="orange" icon={<ArrowUp />} {...props} />
133124
case 'consensus.Delegate':
134-
return <MethodIcon icon={<LanIcon />} {...props} />
125+
return <MethodIcon icon={<Network className="[&_rect]:fill-current" />} {...props} />
135126
case 'consensus.Undelegate':
136-
return <MethodIcon icon={<LanOutlinedIcon />} {...props} />
127+
return <MethodIcon icon={<Network />} {...props} />
137128
case 'accounts.Transfer':
138129
return <MethodIcon color="green" icon={<ArrowRight />} {...props} />
139130
case 'rofl.Create':
140-
return <MethodIcon color="green" icon={<MemoryIcon />} {...props} />
131+
return <MethodIcon color="green" icon={<Cpu />} {...props} />
141132
case 'rofl.Register':
142-
return <MethodIcon icon={<MemoryIcon />} {...props} />
133+
return <MethodIcon icon={<Cpu />} {...props} />
143134
case 'rofl.Remove':
144-
return <MethodIcon color="orange" icon={<MemoryIcon />} {...props} />
135+
return <MethodIcon color="orange" icon={<Cpu />} {...props} />
145136
case 'rofl.Update':
146-
return <MethodIcon color="green" icon={<MemoryIcon />} {...props} />
137+
return <MethodIcon color="green" icon={<Cpu />} {...props} />
147138
case 'roflmarket.ProviderCreate':
148139
return <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
149140
case 'roflmarket.ProviderUpdate':
150141
return <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
151142
case 'roflmarket.ProviderUpdateOffers':
152143
return <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
153144
case 'roflmarket.ProviderRemove':
154-
return <MethodIcon color="orange" icon={<DeveloperBoardOffIcon />} {...props} />
145+
return <MethodIcon color="orange" icon={<DeveloperBoardOff />} {...props} />
155146
case 'roflmarket.InstanceCreate':
156147
return <MethodIcon color="green" icon={<DeveloperBoard />} {...props} />
157148
case 'roflmarket.InstanceTopUp':
158149
return <MethodIcon icon={<DeveloperBoard />} {...props} />
159150
case 'roflmarket.InstanceCancel':
160-
return <MethodIcon color="orange" icon={<DeveloperBoardOffIcon />} {...props} />
151+
return <MethodIcon color="orange" icon={<DeveloperBoardOff />} {...props} />
161152
case 'roflmarket.InstanceExecuteCmds':
162153
return <MethodIcon icon={<DeveloperBoard />} {...props} />
163154
case 'roflmarket.InstanceChangeAdmin':
164155
return <MethodIcon icon={<DeveloperBoard />} {...props} />
165156
case '':
166157
// Method may be empty if the transaction was malformed, or encrypted (oasis_encryption_envelope).
167158
// TODO: differentiate malformed and encrypted
168-
return <MethodIcon color="green" icon={<LockIcon />} {...props} />
159+
return <MethodIcon color="green" icon={<Lock />} {...props} />
169160
default:
170161
exhaustedTypeWarning('Unknown runtime tx method', method)
171-
return <MethodIcon color="gray" icon={<QuestionMarkIcon />} {...props} />
162+
return <MethodIcon color="gray" icon={<CircleHelp />} {...props} />
172163
}
173164
}
174165

‎src/app/components/TableLayoutButton/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
4-
import PivotTableChartIcon from '@mui/icons-material/PivotTableChart'
54
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
5+
import { PivotTable } from '../MuiIcons/PivotTable'
66

77
export enum TableLayout {
88
Horizontal = 'horizontal',
@@ -21,13 +21,12 @@ export const TableLayoutButton: FC<TableLayoutButtonProps> = ({ tableView, setTa
2121
<Tooltip side="left" title={t('tableLayoutButton.changeView')}>
2222
<Button
2323
variant="ghost"
24-
size="icon"
2524
onClick={() => {
2625
setTableView(tableView === TableLayout.Horizontal ? TableLayout.Vertical : TableLayout.Horizontal)
2726
}}
2827
className="hover:bg-black/[0.04]"
2928
>
30-
<PivotTableChartIcon fontSize="medium" />
29+
<PivotTable className="min-h-6 min-w-6" />
3130
</Button>
3231
</Tooltip>
3332
)

‎src/app/components/XProfileWidget/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22
import classes from './XProfileWidget.module.css'
3-
import XIcon from '@mui/icons-material/X'
3+
import { X } from '../MuiIcons/X'
44

55
export const XProfileWidget: React.FC<{ handle: string }> = ({ handle }) => {
66
// Clean the handle (remove '@' if present)
@@ -27,7 +27,7 @@ export const XProfileWidget: React.FC<{ handle: string }> = ({ handle }) => {
2727
</div>
2828
</div>
2929
at
30-
<XIcon />
30+
<X />
3131
</div>
3232
</a>
3333
)

‎src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import { useTranslation } from 'react-i18next'
44
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
55
import { Link } from '@oasisprotocol/ui-library/src/components/link'
66
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
7-
import FilterNoneIcon from '@mui/icons-material/FilterNone'
8-
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
7+
import { CircleOff } from 'lucide-react'
98
import { Runtime, useGetRuntimeStatus } from 'oasis-nexus/api'
10-
import { COLORS } from '../../../styles/theme/colors'
119
import { useRuntimeFreshness } from '../../components/OfflineBanner/hook'
1210
import { BlockLink } from '../../components/Blocks/BlockLink'
1311
import { RouterLinkCircle } from '../../components/StyledLinks'
@@ -243,7 +241,7 @@ const PanelButton: FC<PanelButtonProps> = ({ activePanel, ariaLabel, panel, setP
243241
{panel === activePanel ? (
244242
<div className="rounded-full w-[10px] h-[10px] bg-chart-5" />
245243
) : (
246-
<RadioButtonUncheckedIcon sx={{ color: COLORS.brandDark, fontSize: '10px' }} />
244+
<div className="rounded-full w-[10px] h-[10px] border border-chart-5" />
247245
)}
248246
</Button>
249247
)
@@ -266,10 +264,10 @@ const ChartsContainer: FC<ChartsContainerProps> = ({ children, status }) => {
266264
<div className="flex flex-1 flex-col items-center gap-2">
267265
{status && <div className="w-full">{children}</div>}
268266
{!status && (
269-
<>
270-
<FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
267+
<span className="flex flex-col gap-2 items-center text-center text-muted-foreground">
268+
<CircleOff size={30} className="text-muted-foreground" />
271269
{t('paratimes.noData')}
272-
</>
270+
</span>
273271
)}
274272
</div>
275273
</div>

‎src/app/pages/ParatimeDashboardPage/Nodes.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
4-
import OfflineBoltIcon from '@mui/icons-material/OfflineBolt'
4+
import { Zap } from 'lucide-react'
55
import { Info } from 'lucide-react'
66
import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
7-
import { COLORS } from '../../../styles/theme/colors'
87
import { useGetRuntimeStatus } from '../../../oasis-nexus/api'
98
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
109
import { RuntimeScope } from '../../../types/searchScope'
@@ -27,7 +26,9 @@ export const Nodes: FC<{ scope: RuntimeScope }> = ({ scope }) => {
2726
<div className="flex items-center justify-center h-full">
2827
{isFetched && activeNodes !== undefined && (
2928
<>
30-
<OfflineBoltIcon fontSize="large" sx={{ color: COLORS.eucalyptus, mr: 3 }} />
29+
<div className="rounded-full w-8 h-8 bg-[#4cd4a9] flex items-center justify-center mr-4">
30+
<Zap color="white" size={20} />
31+
</div>
3132
<Typography className="text-primary text-center text-2xl font-semibold">
3233
{t('nodes.value', { value: activeNodes })}
3334
</Typography>

0 commit comments

Comments
 (0)