refactor(wallet): remove Text component and debris (#3445)

* feat: remove text component, debris and refine some styles * fix gap --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]> Co-authored-by: Marc Espin <[email protected]>
iotaledger · Oct 24, 2024 · 9cb59c0 · 9cb59c0
1 parent d5eb835
commit 9cb59c0
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 339 deletions.
diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useBackgroundClient } from '_src/ui/app/hooks/useBackgroundClient';
-import { Text } from '_src/ui/app/shared/text';
 import classNames from 'clsx';
 import { Form, Formik } from 'formik';
 import { toast } from 'react-hot-toast';
@@ -75,10 +74,10 @@ export function PasswordInputDialog({
                             errorMessage={errors.password}
                         />
                         <div className="mt-4 text-center">
-                            <Text variant="pBodySmall" color="steel-dark" weight="normal">
+                            <span className="text-body-md text-neutral-40">
                                 This is the password you currently use to lock and unlock your IOTA
                                 wallet.
-                            </Text>
+                            </span>
                         </div>
                     </div>
                     <div className="flex flex-nowrap gap-3.75 self-stretch">

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_src/ui/app/shared/text';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { IconButton } from '_components';
@@ -29,9 +28,7 @@ export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.El
         <div className="border-hero/10 group flex cursor-pointer flex-col gap-3 rounded-xl border border-solid bg-white/40 px-4 py-3">
             <div className="flex w-full flex-row items-center justify-between">
                 <div className="text-steel-dark flex gap-1.5 leading-none">
-                    <Text variant="body" weight="semibold">
-                        {formatAddress(account.address)}
-                    </Text>
+                    <span className="text-body-md">{formatAddress(account.address)}</span>
                     <div className="flex gap-1 opacity-0 duration-100 group-hover:opacity-100">
                         <IconButton
                             variant="transparent"
@@ -41,9 +38,9 @@ export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.El
                     </div>
                 </div>
 
-                <Text variant="bodySmall" weight="semibold" color="steel-darker">
+                <span className="text-body-sm">
                     {formatted} {symbol}
-                </Text>
+                </span>
             </div>
         </div>
     );

diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx
@@ -6,9 +6,8 @@ import { ImageIcon, ImageIconSize } from '_app/shared/image-icon';
 import { ExternalLink } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getDAppUrl } from '_src/shared/utils';
-import { Text } from '_src/ui/app/shared/text';
 import { useState } from 'react';
-import { Card, CardImage, CardBody, ImageShape } from '@iota/apps-ui-kit';
+import { Card, CardImage, CardBody, ImageShape, Badge, BadgeType } from '@iota/apps-ui-kit';
 
 import DisconnectApp from './DisconnectApp';
 
@@ -55,26 +54,15 @@ interface ListViewProps {
 
 function ListView({ name, icon, description, tags }: ListViewProps) {
     return (
-        <div className="item-center hover:bg-iota/10 box-border flex gap-3 rounded bg-white px-1.25 py-3.5">
+        <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12">
             <ImageIcon src={icon || null} label={name} fallback={name} />
-            <div className="flex flex-col justify-center gap-1">
-                <Text variant="body" weight="semibold" color="iota-dark">
-                    {name}
-                </Text>
-                <Text variant="pSubtitle" weight="normal" color="steel-darker">
-                    {description}
-                </Text>
+            <div className="flex flex-col justify-center gap-sm">
+                <span className="text-label-md text-neutral-10">{name}</span>
+                <span className="text-body-sm text-neutral-40">{description}</span>
                 {tags?.length && (
-                    <div className="mt-0.5 flex flex-wrap gap-1">
+                    <div className="flex flex-wrap gap-xxs">
                         {tags?.map((tag) => (
-                            <div
-                                className="item-center border-steel flex justify-center rounded border border-solid px-1.5 py-0.5"
-                                key={tag}
-                            >
-                                <Text variant="captionSmall" weight="medium" color="steel-dark">
-                                    {tag}
-                                </Text>
-                            </div>
+                            <Badge key={tag} label={tag} type={BadgeType.Neutral} />
                         ))}
                     </div>
                 )}

diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx
@@ -2,13 +2,14 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Placeholder } from '@iota/apps-ui-kit';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const appEmptyStyle = cva(['flex gap-3 p-3.75 h-28'], {
+const appEmptyStyle = cva(['flex gap-3 p-lg h-28'], {
     variants: {
         displayType: {
             full: 'w-full',
-            card: 'bg-white flex flex-col p-3.75 box-border w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-gray-40',
+            card: 'bg-neutral-100 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark',
         },
     },
     defaultVariants: {
@@ -21,18 +22,18 @@ export interface IotaAppEmptyProps extends VariantProps<typeof appEmptyStyle> {}
 export function IotaAppEmpty({ ...styleProps }: IotaAppEmptyProps) {
     return (
         <div className={appEmptyStyle(styleProps)}>
-            <div className="bg-gray-40 h-10 w-10 rounded-full"></div>
+            <Placeholder width="w-10" height="h-10" />
             <div className="flex flex-1 flex-col gap-2.5">
                 {styleProps.displayType === 'full' ? (
                     <>
-                        <div className="bg-gray-40 h-3.5 w-2/5 rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-full rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-1/4 rounded"></div>
+                        {new Array(2).fill(0).map((_, index) => (
+                            <Placeholder />
+                        ))}
                     </>
                 ) : (
                     <div className="flex gap-2">
-                        <div className="bg-gray-40 h-3.5 w-1/4 rounded"></div>
-                        <div className="bg-gray-40 h-3.5 w-3/5 rounded"></div>
+                        <Placeholder width="w-1/4" height="h-3.5" />
+                        <Placeholder width="w-3/5" height="h-3.5" />
                     </div>
                 )}
             </div>

diff --git a/apps/wallet/src/ui/app/components/iota-apps/index.tsx b/apps/wallet/src/ui/app/components/iota-apps/index.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import { useAppSelector } from '_hooks';
 import { Feature } from '@iota/core';
 import { prepareLinkToCompare } from '_src/shared/utils';
@@ -13,7 +12,8 @@ import { permissionsSelectors } from '../../redux/slices/permissions';
 import { AppsPageBanner } from './Banner';
 import { IotaApp, type DAppEntry } from './IotaApp';
 import { IotaAppEmpty } from './IotaAppEmpty';
-import { Header } from '@iota/apps-ui-kit';
+import { InfoBox, InfoBoxStyle, InfoBoxType, Header } from '@iota/apps-ui-kit';
+import { Info } from '@iota/ui-icons';
 
 export function AppsPlayGround() {
     const ecosystemApps = useFeature<DAppEntry[]>(Feature.WalletDapps).value;
@@ -46,16 +46,17 @@ export function AppsPlayGround() {
             <AppsPageBanner />
 
             {filteredEcosystemApps?.length ? (
-                <div className="bg-gray-40 rounded-xl p-4">
-                    <Text variant="pBodySmall" color="gray-75" weight="normal">
-                        Apps below are actively curated but do not indicate any endorsement or
-                        relationship with IOTA Wallet. Please DYOR.
-                    </Text>
-                </div>
+                <InfoBox
+                    type={InfoBoxType.Default}
+                    icon={<Info />}
+                    style={InfoBoxStyle.Elevated}
+                    supportingText="Apps below are actively curated but do not indicate any endorsement or
+                        relationship with IOTA Wallet. Please DYOR."
+                />
             ) : null}
 
             {filteredEcosystemApps?.length ? (
-                <div className="divide-gray-45 mt-2 flex flex-col divide-x-0 divide-y divide-solid">
+                <div className="mt-md flex flex-col gap-sm">
                     {filteredEcosystemApps.map((app) => (
                         <IotaApp
                             key={app.link}

diff --git a/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx b/apps/wallet/src/ui/app/pages/approval-request/SignMessageRequest.tsx
@@ -11,14 +11,13 @@ import { useAccountByAddress } from '../../hooks/useAccountByAddress';
 import { useSigner } from '../../hooks/useSigner';
 import { respondToTransactionRequest } from '../../redux/slices/transaction-requests';
 import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayoutTitle';
-import { Text } from '../../shared/text';
 
 export interface SignMessageRequestProps {
     request: SignMessageApprovalRequest;
 }
 
 export function SignMessageRequest({ request }: SignMessageRequestProps) {
-    const { message, type } = useMemo(() => toUtf8OrB64(request.tx.message), [request.tx.message]);
+    const { message } = useMemo(() => toUtf8OrB64(request.tx.message), [request.tx.message]);
     const { data: account } = useAccountByAddress(request.tx.accountAddress);
     const signer = useSigner(account);
     const dispatch = useAppDispatch();
@@ -53,14 +52,7 @@ export function SignMessageRequest({ request }: SignMessageRequestProps) {
             </div>
             <div className="flex flex-col flex-nowrap items-stretch overflow-y-auto overflow-x-hidden rounded-15 border border-solid border-gray-50 bg-white shadow-card-soft">
                 <div className="break-words p-5">
-                    <Text
-                        variant="pBodySmall"
-                        weight="medium"
-                        color="steel-darker"
-                        mono={type === 'base64'}
-                    >
-                        {message}
-                    </Text>
+                    <span className="text-body-sm text-neutral-40">{message}</span>
                 </div>
             </div>
         </UserApproveContainer>

diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx
@@ -2,7 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
 import { ExplorerLinkType, Loading, UnlockAccountButton } from '_components';
 import { useAppSelector, useCoinsReFetchingConfig } from '_hooks';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
@@ -200,15 +199,11 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
                                 {!accountHasIota ? (
                                     <div className="flex flex-col gap-5">
                                         <div className="flex flex-col flex-nowrap items-center justify-center px-2.5 text-center">
-                                            <Text
-                                                variant="pBodySmall"
-                                                color="gray-80"
-                                                weight="normal"
-                                            >
+                                            <span className="text-body-sm text-neutral-40">
                                                 {isMainnet
                                                     ? 'Start by buying IOTA'
                                                     : 'Need to send transactions on the IOTA network? You’ll need IOTA in your wallet'}
-                                            </Text>
+                                            </span>
                                         </div>
                                         {!isMainnet && <FaucetRequestButton />}
                                     </div>

diff --git a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/CoinBalance.module.scss b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/CoinBalance.module.scss
diff --git a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx
@@ -1,12 +1,11 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { Text } from '_app/shared/text';
+
 import cl from 'clsx';
 import { memo } from 'react';
 import type { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-
 import st from './IconLink.module.scss';
 
 export interface IconLinkProps {
@@ -24,9 +23,9 @@ function IconLink({ to, icon, disabled = false, text }: IconLinkProps) {
             tabIndex={disabled ? -1 : undefined}
         >
             <div className={cl(disabled ? 'text-gray-60' : 'text-hero-dark')}>{icon}</div>
-            <Text color={disabled ? 'gray-60' : 'hero-dark'} weight="semibold" variant="bodySmall">
+            <span className={cl('text-body-sm', disabled ? 'opacity-60' : 'text-neutral-10')}>
                 {text}
-            </Text>
+            </span>
         </Link>
     );
 }