From 48a62517cedcf8104388d04b88607cb2635f590a Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Fri, 25 Oct 2024 14:09:48 +0200
Subject: [PATCH] fix(explorer/wallet): unify iota token logo (#3554)

* fix: iota token logo color

* minor fixes

* fix icon styles and sizes

* fix card bgcolor

* feat: update fallback icons

* polish icon
---
 .../explorer/src/components/IotaTokenCard.tsx |  9 +-
 .../src/components/owned-coins/CoinIcon.tsx   | 74 ++++++----------
 .../components/owned-coins/OwnedCoinView.tsx  |  5 +-
 apps/explorer/src/components/ui/ImageIcon.tsx | 84 ++++++++++---------
 .../components/validator/ValidatorMeta.tsx    | 16 ++--
 .../utils/generateValidatorsTableColumns.tsx  |  6 +-
 .../transaction-summary/BalanceChanges.tsx    |  4 +-
 .../components/molecules/card/card.classes.ts |  2 +-
 .../components/active-coins-card/CoinItem.tsx |  3 +-
 .../src/ui/app/components/coin-icon/index.tsx |  2 +-
 .../ui/app/components/receipt-card/index.tsx  |  7 +-
 .../ui/app/pages/home/transfer-coin/index.tsx | 11 +--
 .../src/ui/app/shared/image-icon/index.tsx    | 16 +++-
 .../page-main-layout/PageMainLayout.tsx       |  2 +-
 .../app/staking/validators/ValidatorLogo.tsx  | 11 ++-
 15 files changed, 121 insertions(+), 131 deletions(-)

diff --git a/apps/explorer/src/components/IotaTokenCard.tsx b/apps/explorer/src/components/IotaTokenCard.tsx
index 05720a0bd28..19bb5fa8286 100644
--- a/apps/explorer/src/components/IotaTokenCard.tsx
+++ b/apps/explorer/src/components/IotaTokenCard.tsx
@@ -4,8 +4,9 @@
 
 import { Panel } from '@iota/apps-ui-kit';
 import { COIN_GECKO_IOTA_URL, useIotaCoinData } from '@iota/core';
-import { IotaLogoMark } from '@iota/ui-icons';
-import { ButtonOrLink } from '~/components/ui';
+import { ButtonOrLink, ImageIconSize } from '~/components/ui';
+import { CoinIcon } from './owned-coins';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 export function IotaTokenCard(): JSX.Element {
     const { data } = useIotaCoinData();
@@ -22,8 +23,8 @@ export function IotaTokenCard(): JSX.Element {
         <ButtonOrLink href={COIN_GECKO_IOTA_URL}>
             <Panel>
                 <div className="flex items-center gap-xs p-md--rs">
-                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-30">
-                        <IotaLogoMark className="h-5 w-5 text-white" />
+                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10">
+                        <CoinIcon coinType={IOTA_TYPE_ARG} size={ImageIconSize.Small} />
                     </div>
                     <div className="flex w-full flex-col gap-xxxs">
                         <span className="font-inter text-title-lg text-neutral-10 dark:text-neutral-92">
diff --git a/apps/explorer/src/components/owned-coins/CoinIcon.tsx b/apps/explorer/src/components/owned-coins/CoinIcon.tsx
index db9c296e83b..a0263d92afe 100644
--- a/apps/explorer/src/components/owned-coins/CoinIcon.tsx
+++ b/apps/explorer/src/components/owned-coins/CoinIcon.tsx
@@ -3,69 +3,43 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useCoinMetadata } from '@iota/core';
-import { IotaLogoMark as Iota, Unstake } from '@iota/ui-icons';
+import { IotaLogoMark } from '@iota/ui-icons';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cx } from 'class-variance-authority';
+import { ImageIcon, ImageIconSize } from '../ui';
 
-import { ImageIcon } from '~/components/ui';
-
-const imageStyle = cva(['flex rounded-2xl'], {
-    variants: {
-        size: {
-            sm: 'w-6 h-6',
-            md: 'w-7.5 h-7.5',
-            lg: 'md:w-10 md:h-10 w-8 h-8',
-            xl: 'md:w-31.5 md:h-31.5 w-16 h-16 ',
-        },
-    },
-    defaultVariants: {
-        size: 'md',
-    },
-});
-
-function IotaCoin(): JSX.Element {
-    return (
-        <Iota className="flex h-full w-full rounded-2xl p-xxxs text-neutral-0 dark:text-neutral-100" />
-    );
-}
-
-interface NonIotaCoinProps extends VariantProps<typeof imageStyle> {
+interface NonIotaCoinProps {
     coinType: string;
+    size?: ImageIconSize;
+    rounded?: boolean;
 }
 
-function NonIotaCoin({ coinType, ...styleProps }: NonIotaCoinProps): JSX.Element {
+function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
     const { data: coinMeta } = useCoinMetadata(coinType);
     return (
-        <div className="flex h-full w-full items-center justify-center rounded-2xl">
-            {coinMeta?.iconUrl ? (
-                <ImageIcon
-                    size={styleProps.size}
-                    src={coinMeta.iconUrl}
-                    label={coinMeta.name || coinType}
-                    fallback={coinMeta.name || coinType}
-                    circle
-                />
-            ) : (
-                <div className="flex h-full w-full items-center justify-center rounded-2xl">
-                    <Unstake className="h-2.5 w-2.5" />
-                </div>
-            )}
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92">
+            <ImageIcon
+                src={coinMeta?.iconUrl}
+                label={coinMeta?.name || coinType}
+                fallback={coinMeta?.name || coinType}
+                size={size}
+                rounded={rounded}
+            />
         </div>
     );
 }
-
-interface CoinIconProps extends VariantProps<typeof imageStyle> {
+export interface CoinIconProps {
     coinType: string;
+    size?: ImageIconSize;
+    rounded?: boolean;
 }
 
-export function CoinIcon({ coinType, ...styleProps }: CoinIconProps): JSX.Element {
-    return (
-        <div className={imageStyle(styleProps)}>
-            {coinType === IOTA_TYPE_ARG ? (
-                <IotaCoin />
-            ) : (
-                <NonIotaCoin coinType={coinType} size={styleProps.size} />
-            )}
+export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) {
+    return coinType === IOTA_TYPE_ARG ? (
+        <div className={cx(size)}>
+            <IotaLogoMark className="h-full w-full" />
         </div>
+    ) : (
+        <NonIotaCoin rounded={rounded} size={size} coinType={coinType} />
     );
 }
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx b/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
index 59f3899aed5..5f072935dcb 100644
--- a/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
+++ b/apps/explorer/src/components/owned-coins/OwnedCoinView.tsx
@@ -19,6 +19,7 @@ import {
     ImageType,
 } from '@iota/apps-ui-kit';
 import { ArrowUp, RecognizedBadge } from '@iota/ui-icons';
+import { ImageIconSize } from '../ui';
 
 type OwnedCoinViewProps = {
     coin: CoinBalanceVerified;
@@ -45,8 +46,8 @@ export default function OwnedCoinView({ coin, id }: OwnedCoinViewProps): JSX.Ele
         >
             <Card onClick={() => setAreCoinDetailsOpen((prev) => !prev)}>
                 <CardImage type={ImageType.Placeholder}>
-                    <div className="rounded-full border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8">
-                        <CoinIcon coinType={coin.coinType} size="lg" />
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10">
+                        <CoinIcon coinType={coin.coinType} size={ImageIconSize.Small} />
                     </div>
                 </CardImage>
                 <CardBody {...CARD_BODY} isTextTruncated />
diff --git a/apps/explorer/src/components/ui/ImageIcon.tsx b/apps/explorer/src/components/ui/ImageIcon.tsx
index 05ae7adafe5..0366a9c741a 100644
--- a/apps/explorer/src/components/ui/ImageIcon.tsx
+++ b/apps/explorer/src/components/ui/ImageIcon.tsx
@@ -2,65 +2,71 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { cva, type VariantProps } from 'class-variance-authority';
 import { useState } from 'react';
+import cn from 'clsx';
 
-const imageStyle = cva(['text-white capitalize overflow-hidden bg-gray-40'], {
-    variants: {
-        size: {
-            sm: 'w-6 h-6 font-medium text-subtitleSmallExtra',
-            md: 'w-8 h-8 text-label-lg',
-            lg: 'md:w-10 md:h-10 w-8 h-8',
-            xl: 'md:w-31.5 md:h-31.5 w-16 h-16 font-medium text-heading4 md:text-iconTextLarge',
-        },
-        circle: {
-            true: 'rounded-full',
-            false: 'rounded-md',
-        },
-    },
-
-    defaultVariants: {
-        circle: false,
-        size: 'md',
-    },
-});
+export enum ImageIconSize {
+    Small = 'w-5 h-5',
+    Medium = 'w-8 h-8',
+    Large = 'w-10 h-10',
+    Full = 'w-full h-full',
+}
 
-export interface ImageIconProps extends VariantProps<typeof imageStyle> {
-    src?: string | null;
+export interface ImageIconProps {
+    src: string | null | undefined;
     label: string;
     fallback: string;
     alt?: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
 }
 
-interface FallBackAvatarProps {
-    fallback: string;
-}
-
-function FallBackAvatar({ fallback }: FallBackAvatarProps): JSX.Element {
+function FallBackAvatar({
+    str,
+    rounded,
+    size = ImageIconSize.Large,
+}: {
+    str: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}) {
+    function generateTextSize(size: ImageIconSize) {
+        switch (size) {
+            case ImageIconSize.Small:
+                return 'text-label-sm';
+            case ImageIconSize.Medium:
+                return 'text-label-md';
+            case ImageIconSize.Large:
+                return 'text-title-lg';
+            case ImageIconSize.Full:
+                return 'text-display-lg';
+        }
+    }
     return (
-        <div className="flex h-full w-full items-center justify-center bg-neutral-90 text-neutral-10">
-            {fallback?.slice(0, 2)}
+        <div
+            className={cn(
+                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
+                { 'rounded-full': rounded, 'rounded-lg': !rounded },
+                size,
+                generateTextSize(size),
+            )}
+        >
+            {str?.slice(0, 2)}
         </div>
     );
 }
 
-export function ImageIcon({
-    src,
-    label,
-    alt = label,
-    fallback,
-    ...styleProps
-}: ImageIconProps): JSX.Element {
+export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {
     const [error, setError] = useState(false);
     return (
-        <div role="img" className={imageStyle(styleProps)} aria-label={label}>
+        <div role="img" aria-label={label} className={size}>
             {error || !src ? (
-                <FallBackAvatar fallback={fallback} />
+                <FallBackAvatar rounded={rounded} str={fallback} size={size} />
             ) : (
                 <img
                     src={src}
                     alt={alt}
-                    className="flex h-full w-full items-center justify-center object-cover"
+                    className="flex h-full w-full items-center justify-center rounded-full object-cover"
                     onError={() => setError(true)}
                 />
             )}
diff --git a/apps/explorer/src/components/validator/ValidatorMeta.tsx b/apps/explorer/src/components/validator/ValidatorMeta.tsx
index 489f906780b..386048bdebd 100644
--- a/apps/explorer/src/components/validator/ValidatorMeta.tsx
+++ b/apps/explorer/src/components/validator/ValidatorMeta.tsx
@@ -6,7 +6,7 @@ import { Badge, BadgeType, KeyValueInfo, Panel } from '@iota/apps-ui-kit';
 import { type IotaValidatorSummary } from '@iota/iota-sdk/client';
 import toast from 'react-hot-toast';
 import { ArrowTopRight } from '@iota/ui-icons';
-import { AddressLink, ImageIcon } from '~/components/ui';
+import { AddressLink, ImageIcon, ImageIconSize } from '~/components/ui';
 
 type ValidatorMetaProps = {
     validatorData: IotaValidatorSummary;
@@ -28,12 +28,14 @@ export function ValidatorMeta({ validatorData }: ValidatorMetaProps): JSX.Elemen
             <Panel>
                 <div className="flex flex-col gap-lg p-md--rs md:flex-row">
                     <div className="flex flex-row gap-lg">
-                        <ImageIcon
-                            src={logo}
-                            label={validatorName}
-                            fallback={validatorName}
-                            size="xl"
-                        />
+                        <div className="flex h-[120px] w-[120px]">
+                            <ImageIcon
+                                src={logo}
+                                label={validatorName}
+                                fallback={validatorName}
+                                size={ImageIconSize.Full}
+                            />
+                        </div>
                         <div className="flex flex-col gap-y-sm">
                             <div>
                                 <Badge type={BadgeType.Neutral} label="Validator" />
diff --git a/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx b/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx
index e175ba717d1..b053b889695 100644
--- a/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx
+++ b/apps/explorer/src/lib/ui/utils/generateValidatorsTableColumns.tsx
@@ -4,11 +4,11 @@
 import { Badge, BadgeType, TableCellBase, TableCellText } from '@iota/apps-ui-kit';
 import type { ColumnDef } from '@tanstack/react-table';
 import { type ApyByValidator, formatPercentageDisplay } from '@iota/core';
-
 import { ampli, getValidatorMoveEvent, VALIDATOR_LOW_STAKE_GRACE_PERIOD } from '~/lib';
-import { StakeColumn, ValidatorLink, ImageIcon } from '~/components';
+import { StakeColumn } from '~/components';
 import type { IotaEvent, IotaValidatorSummary } from '@iota/iota-sdk/dist/cjs/client';
 import clsx from 'clsx';
+import { ImageIcon, ImageIconSize, ValidatorLink } from '~/components/ui';
 
 interface generateValidatorsTableColumnsArgs {
     atRiskValidators: [string, string][];
@@ -41,7 +41,7 @@ function ValidatorWithImage({
                 <div className="flex items-center gap-x-2.5 text-neutral-40 dark:text-neutral-60">
                     <ImageIcon
                         src={validator.imageUrl}
-                        size="sm"
+                        size={ImageIconSize.Medium}
                         label={validator.name}
                         fallback={validator.name}
                     />
diff --git a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
index 60c63f0675c..f532c0bcecc 100644
--- a/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
+++ b/apps/explorer/src/pages/transaction-result/transaction-summary/BalanceChanges.tsx
@@ -23,7 +23,7 @@ import {
 } from '@iota/core';
 import { RecognizedBadge } from '@iota/ui-icons';
 import { useMemo } from 'react';
-import { CoinIcon } from '~/components';
+import { CoinIcon, ImageIconSize } from '~/components';
 import { AddressLink, CollapsibleCard } from '~/components/ui';
 import { BREAK_POINT, useMediaQuery } from '~/hooks';
 
@@ -49,7 +49,7 @@ function BalanceChangeEntry({ change }: { change: BalanceChange }): JSX.Element
         <div className="flex flex-col gap-xs">
             <Card type={CardType.Filled}>
                 <CardImage type={ImageType.BgTransparent}>
-                    <CoinIcon coinType={coinType} />
+                    <CoinIcon coinType={coinType} size={ImageIconSize.Small} />
                 </CardImage>
                 <CardBody
                     title={coinMetaData?.name || symbol}
diff --git a/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts b/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
index 9d6fdb22f29..4dd93547069 100644
--- a/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
+++ b/apps/ui-kit/src/lib/components/molecules/card/card.classes.ts
@@ -22,5 +22,5 @@ export const CARD_TYPE_CLASSES: Record<CardType, string> = {
     [CardType.Default]: 'border border-transparent',
     [CardType.Outlined]:
         'border border-shader-neutral-light-8 dark:border-shader-primary-dark-8 p-xs',
-    [CardType.Filled]: 'border border-transparent bg-shader-neutral-light-8 p-xs',
+    [CardType.Filled]: 'border border-transparent bg-neutral-96 dark:bg-neutral-10 p-xs',
 };
diff --git a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
index aef9037273f..5e7dce765f5 100644
--- a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
+++ b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
@@ -15,6 +15,7 @@ import {
     ImageType,
 } from '@iota/apps-ui-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { ImageIconSize } from '../../shared/image-icon';
 
 interface CoinItemProps {
     coinType: string;
@@ -32,7 +33,7 @@ export function CoinItem({ coinType, balance, usd, clickableAction, icon }: Coin
         <Card type={CardType.Default}>
             <CardImage type={ImageType.BgTransparent}>
                 <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10">
-                    <CoinIcon coinType={coinType} rounded />
+                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
                 </div>
             </CardImage>
             <CardBody
diff --git a/apps/wallet/src/ui/app/components/coin-icon/index.tsx b/apps/wallet/src/ui/app/components/coin-icon/index.tsx
index 6e1790d9a11..5214a1e7420 100644
--- a/apps/wallet/src/ui/app/components/coin-icon/index.tsx
+++ b/apps/wallet/src/ui/app/components/coin-icon/index.tsx
@@ -17,7 +17,7 @@ interface NonIotaCoinProps {
 function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
     const { data: coinMeta } = useCoinMetadata(coinType);
     return (
-        <div className="flex h-full w-full items-center justify-center rounded-full">
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92">
             <ImageIcon
                 src={coinMeta?.iconUrl}
                 label={coinMeta?.name || coinType}
diff --git a/apps/wallet/src/ui/app/components/receipt-card/index.tsx b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
index b7292b99349..9f75dc287f8 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/index.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/index.tsx
@@ -23,7 +23,6 @@ import {
     LoadingIndicator,
 } from '@iota/apps-ui-kit';
 import { ArrowTopRight, CheckmarkFilled } from '@iota/ui-icons';
-import cl from 'clsx';
 import { GasFees } from '../../pages/approval-request/transaction-request/GasFees';
 import ExplorerLink, { ExplorerLinkType } from '../explorer-link';
 
@@ -40,11 +39,7 @@ function TransactionStatus({ success, timestamp }: TransactionStatusProps) {
             style={InfoBoxStyle.Elevated}
             title={success ? 'Successfully sent' : 'Transaction Failed'}
             supportingText={timestamp ? txnDate : ''}
-            icon={
-                <CheckmarkFilled
-                    className={cl('h-5 w-5', success ? 'text-primary-30' : 'text-neutral-10')}
-                />
-            }
+            icon={<CheckmarkFilled />}
         ></InfoBox>
     );
 }
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
index c8def20901b..111017d0bb0 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
@@ -19,7 +19,6 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
-
 import { PreviewTransfer } from './PreviewTransfer';
 import { SendTokenForm, type SubmitProps } from './SendTokenForm';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
@@ -218,20 +217,14 @@ function CoinSelector({
     );
 }
 
-function CoinSelectOption({
-    coin: { coinType, totalBalance },
-    size,
-}: {
-    coin: CoinBalance;
-    size?: ImageIconSize;
-}) {
+function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBalance }) {
     const [formatted, symbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType);
     const isIota = coinType === IOTA_TYPE_ARG;
 
     return (
         <div className="flex w-full flex-row items-center justify-between">
             <div className="flex flex-row items-center gap-x-md">
-                <div className={size}>
+                <div className="flex h-6 w-6 items-center justify-center">
                     <CoinIcon size={ImageIconSize.Small} coinType={coinType} rounded />
                 </div>
                 <span className="text-body-lg text-neutral-10">
diff --git a/apps/wallet/src/ui/app/shared/image-icon/index.tsx b/apps/wallet/src/ui/app/shared/image-icon/index.tsx
index 277d38c82a8..5ae46570b21 100644
--- a/apps/wallet/src/ui/app/shared/image-icon/index.tsx
+++ b/apps/wallet/src/ui/app/shared/image-icon/index.tsx
@@ -30,12 +30,24 @@ function FallBackAvatar({
     rounded?: boolean;
     size?: ImageIconSize;
 }) {
+    function generateTextSize(size: ImageIconSize) {
+        switch (size) {
+            case ImageIconSize.Small:
+                return 'text-label-sm';
+            case ImageIconSize.Medium:
+                return 'text-label-md';
+            case ImageIconSize.Large:
+                return 'text-title-md';
+            case ImageIconSize.Full:
+                return 'text-title-lg';
+        }
+    }
     return (
         <div
             className={cn(
-                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r text-label-md text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
+                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
                 { 'rounded-full': rounded },
-                size,
+                generateTextSize(size),
             )}
         >
             {str?.slice(0, 2)}
diff --git a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
index a4e25348bc5..6b725d2b75a 100644
--- a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
+++ b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx
@@ -103,7 +103,7 @@ function LeftContent({
         >
             <div
                 className={cn(
-                    'rounded-full p-1 text-neutral-100 [&_svg]:h-5 [&_svg]:w-5',
+                    'flex h-8 w-8 items-center justify-center rounded-full bg-primary-30 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-white',
                     backgroundColor,
                 )}
             >
diff --git a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
index 4de7d60256d..961cadc895b 100644
--- a/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
+++ b/apps/wallet/src/ui/app/staking/validators/ValidatorLogo.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { ImageIcon } from '_app/shared/image-icon';
+import { ImageIcon, ImageIconSize } from '_app/shared/image-icon';
 import {
     Badge,
     BadgeType,
@@ -82,9 +82,14 @@ export function ValidatorLogo({
         <>
             <Card type={type} onClick={onClick}>
                 <CardImage>
-                    <ImageIcon src={null} label={validatorName} fallback={validatorName} />
+                    <ImageIcon
+                        src={null}
+                        label={validatorName}
+                        fallback={validatorName}
+                        size={ImageIconSize.Large}
+                    />
                 </CardImage>
-                <CardBody title={validatorName} subtitle={subtitle} />
+                <CardBody title={validatorName} subtitle={subtitle} isTextTruncated />
                 {showApy && (
                     <CardAction
                         type={CardActionType.SupportingText}