Skip to content

Commit cffe4a1

Browse files
kaja-osojnikkaja-osojnik
committed
Update Info icon from MUI to lucide-react
1 parent a64a49e commit cffe4a1

9 files changed

Lines changed: 28 additions & 32 deletions

File tree

‎src/app/components/Account/AccountLink.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Link as RouterLink } from 'react-router-dom'
33
import { useScreenSize } from '../../hooks/useScreensize'
44
import { Link } from '@oasisprotocol/ui-library/src/components/link'
55
import { RouteUtils } from '../../utils/route-utils'
6-
import InfoIcon from '@mui/icons-material/Info'
6+
import { Info } from 'lucide-react'
77
import { SearchScope } from '../../../types/searchScope'
88
import { useAccountMetadata } from '../../hooks/useAccountMetadata'
99
import { trimLongString } from '../../utils/trimLongString'
@@ -190,7 +190,7 @@ export const AccountLink: FC<Props> = ({
190190

191191
const extraTooltipWithIcon = extraTooltip ? (
192192
<div className="flex items-center align-middle gap-1">
193-
<InfoIcon />
193+
<Info size="18" className="stroke-zinc-500" />
194194
{extraTooltip}
195195
</div>
196196
) : undefined

‎src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, ReactNode, useMemo } from 'react'
2-
import InfoIcon from '@mui/icons-material/Info'
2+
import { Info } from 'lucide-react'
33
import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
44
import { getAdaptiveId, ShorteningResult, useAdaptiveSizing } from './hooks'
55
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -79,7 +79,7 @@ export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
7979
<div>{tooltipOverride ?? fullContent}</div>
8080
{extraTooltip && (
8181
<div className="inline-flex items-center gap-1">
82-
<InfoIcon />
82+
<Info size="18" className="stroke-zinc-500" />
8383
{extraTooltip}
8484
</div>
8585
)}

‎src/app/components/HighlightedText/AdaptiveHighlightedText.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FC, ReactNode } from 'react'
2-
import InfoIcon from '@mui/icons-material/Info'
2+
import { Info } from 'lucide-react'
33
import { HighlightedText, HighlightOptions } from './index'
44
import { AdaptiveDynamicTrimmer } from '../AdaptiveTrimmer/AdaptiveDynamicTrimmer'
55
import { HighlightedTrimmedText } from './HighlightedTrimmedText'
@@ -65,7 +65,7 @@ export const AdaptiveHighlightedText: FC<AdaptiveHighlightedTextProps> = ({
6565
extraTooltip={
6666
extraTooltip ? (
6767
<>
68-
<InfoIcon />
68+
<Info size="18" className="stroke-zinc-500" />
6969
{extraTooltip}
7070
</>
7171
) : undefined

‎src/app/components/Transactions/TransactionLink.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, ReactNode } from 'react'
22
import { Link as RouterLink } from 'react-router-dom'
33
import { Link } from '@oasisprotocol/ui-library/src/components/link'
4-
import InfoIcon from '@mui/icons-material/Info'
4+
import { Info } from 'lucide-react'
55
import { useScreenSize } from '../../hooks/useScreensize'
66
import { RouteUtils } from '../../utils/route-utils'
77
import { SearchScope } from '../../../types/searchScope'
@@ -30,7 +30,7 @@ export const TransactionLink: FC<{
3030
const to = RouteUtils.getTransactionRoute(scope, hash)
3131
const extraToolTipWithIcon = extraTooltip ? (
3232
<div className="inline-flex items-center gap-2">
33-
<InfoIcon />
33+
<Info size="18" className="stroke-zinc-500" />
3434
{extraTooltip}
3535
</div>
3636
) : undefined

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
44
import OfflineBoltIcon from '@mui/icons-material/OfflineBolt'
5-
import InfoIcon from '@mui/icons-material/Info'
5+
import { Info } from 'lucide-react'
66
import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
77
import { COLORS } from '../../../styles/theme/colors'
88
import { useGetRuntimeStatus } from '../../../oasis-nexus/api'
@@ -17,7 +17,7 @@ export const Nodes: FC<{ scope: RuntimeScope }> = ({ scope }) => {
1717
<div className="flex justify-between items-center w-full">
1818
{t('nodes.title')}
1919
<Tooltip title={t('nodes.tooltip')}>
20-
<InfoIcon htmlColor={COLORS.brandDark} />
20+
<Info size="18" className="stroke-zinc-500" />
2121
</Tooltip>
2222
</div>
2323
)

‎src/app/pages/ProposalDetailsPage/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
4-
import InfoIcon from '@mui/icons-material/Info'
4+
import { Info } from 'lucide-react'
55
import CancelIcon from '@mui/icons-material/Cancel'
66
import { useConsensusScope } from '../../hooks/useScopeParam'
77
import { Proposal, useGetConsensusProposalsProposalId } from '../../../oasis-nexus/api'
@@ -17,7 +17,6 @@ import { TextSkeleton } from '../../components/Skeleton'
1717
import { ConsensusAccountLink } from '../../components/Account/ConsensusAccountLink'
1818
import { HighlightedText } from '../../components/HighlightedText'
1919
import { ProposalIdLoaderData } from '../../utils/route-utils'
20-
import { COLORS } from 'styles/theme/colors'
2120
import { ProposalVotesCard } from './ProposalVotesCard'
2221
import { useVoteStats } from './hooks'
2322
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
@@ -144,19 +143,19 @@ export const ProposalDetailView: FC<{
144143
<dt>{t('networkProposal.create')}</dt>
145144
<dd>
146145
<Tooltip title={t('networkProposal.createTooltip')}>
147-
<div className="flex gap-1 items-center">
146+
<div className="flex gap-2 items-center">
148147
{proposal.created_at}
149-
<InfoIcon htmlColor={COLORS.brandDark} />
148+
<Info size="18" className="stroke-zinc-500" />
150149
</div>
151150
</Tooltip>
152151
</dd>
153152

154153
<dt>{t('networkProposal.close')}</dt>
155154
<dd>
156155
<Tooltip title={t('networkProposal.closeTooltip')}>
157-
<div className="flex gap-1 items-center">
156+
<div className="flex gap-2 items-center">
158157
{proposal.closes_at}
159-
<InfoIcon htmlColor={COLORS.brandDark} />
158+
<Info size="18" className="stroke-zinc-500" />
160159
</div>
161160
</Tooltip>
162161
</dd>

‎src/app/pages/RoflAppDetailsPage/GridRow.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { FC, ReactNode } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
4-
import InfoIcon from '@mui/icons-material/Info'
5-
import { COLORS } from '../../../styles/theme/colors'
4+
import { Info } from 'lucide-react'
65

76
type GridRowProps = {
87
children?: ReactNode
@@ -15,11 +14,11 @@ export const GridRow: FC<GridRowProps> = ({ label, children, tooltip }) => {
1514

1615
return (
1716
<>
18-
<div className="col-span-1 border-b border-gray-100 p-2 md:p-4 flex gap-1">
17+
<div className="col-span-1 border-b border-gray-100 p-2 md:p-4 flex items-center gap-1">
1918
{label}:
2019
{tooltip && (
2120
<Tooltip title={tooltip}>
22-
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
21+
<Info size="20" className="stroke-zinc-500" />
2322
</Tooltip>
2423
)}
2524
</div>

‎src/app/pages/RoflAppDetailsPage/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { useHref, useLoaderData } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
44
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
55
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
6-
import InfoIcon from '@mui/icons-material/Info'
6+
import { Info } from 'lucide-react'
77
import { RoflApp, RoflAppPolicy, RuntimeTransaction, useGetRuntimeRoflAppsId } from '../../../oasis-nexus/api'
88
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
99
import { AppErrors } from '../../../types/errors'
1010
import { useRuntimeScope } from '../../hooks/useScopeParam'
1111
import { useRuntimeTxMethodParam } from '../../hooks/useCommonParams'
12-
import { COLORS } from '../../../styles/theme/colors'
1312
import { PageLayout } from '../../components/PageLayout'
1413
import { SubPageCard } from '../../components/SubPageCard'
1514
import { TextSkeleton } from '../../components/Skeleton'
@@ -160,10 +159,10 @@ export const RoflAppDetailsView: FC<{
160159
</DetailsRow>
161160
<DetailsRow
162161
title={
163-
<div className="flex items-center gap-4">
162+
<div className="flex items-center gap-1">
164163
{t('rofl.sekPublicKey')}
165164
<Tooltip title={t('rofl.sekPublicKeyTooltip')}>
166-
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
165+
<Info size="18" className="stroke-zinc-500" />
167166
</Tooltip>
168167
</div>
169168
}
@@ -172,10 +171,10 @@ export const RoflAppDetailsView: FC<{
172171
</DetailsRow>
173172
<DetailsRow
174173
title={
175-
<div className="flex items-center gap-4">
174+
<div className="flex items-center gap-1">
176175
{t('rofl.secrets')}
177176
<Tooltip title={t('rofl.secretsTooltip')}>
178-
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
177+
<Info size="18" className="stroke-zinc-500" />
179178
</Tooltip>
180179
</div>
181180
}

‎src/app/pages/RoflAppInstanceDetailsPage/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ import { useRuntimeTxMethodParam } from '../../hooks/useCommonParams'
1818
import { AccountLink } from '../../components/Account/AccountLink'
1919
import { SimpleJsonCode } from 'app/components/CodeDisplay/SimpleJsonCode'
2020
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
21-
import InfoIcon from '@mui/icons-material/Info'
22-
import { COLORS } from '../../../styles/theme/colors'
21+
import { Info } from 'lucide-react'
2322

2423
export const RoflAppInstanceDetailsPage: FC = () => {
2524
const { t } = useTranslation()
@@ -62,10 +61,10 @@ export const RoflAppInstanceDetailsView: FC<{
6261
return (
6362
<StyledDescriptionList>
6463
<dt>
65-
<div className="flex items-center gap-4">
64+
<div className="flex items-center gap-1">
6665
{t('rofl.rakAbbreviation')}
6766
<Tooltip title={t('rofl.rakAbbreviationTooltip')}>
68-
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
67+
<Info size="18" className="stroke-zinc-500" />
6968
</Tooltip>
7069
</div>
7170
</dt>
@@ -75,10 +74,10 @@ export const RoflAppInstanceDetailsView: FC<{
7574
</span>
7675
</dd>
7776
<dt>
78-
<div className="flex items-center gap-4">
77+
<div className="flex items-center gap-1">
7978
{t('rofl.rekAbbreviation')}
8079
<Tooltip title={t('rofl.rekAbbreviationTooltip')}>
81-
<InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
80+
<Info size="18" className="stroke-zinc-500" />
8281
</Tooltip>
8382
</div>
8483
</dt>

0 commit comments

Comments
 (0)