Migrate some icons to ui-next

cartridge-gg · Dec 20, 2024 · 840c836 · 840c836
1 parent 1ae107d
commit 840c836
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/packages/keychain/src/components/CopyAddress.tsx b/packages/keychain/src/components/CopyAddress.tsx
@@ -1,4 +1,3 @@
-import { CopyIcon } from "@cartridge/ui";
 import { HStack, Text } from "@chakra-ui/react";
 import { formatAddress } from "@cartridge/utils";
 import { useToast } from "@/hooks/toast";
@@ -16,7 +15,6 @@ export function CopyAddress({ address }: { address: string }) {
       }}
     >
       <Text color="text.secondaryAccent">{formatAddress(address)}</Text>
-      <CopyIcon fontSize="md" />
     </HStack>
   );
 }
diff --git a/packages/keychain/src/components/DeployController.tsx b/packages/keychain/src/components/DeployController.tsx
@@ -6,7 +6,7 @@ import {
 import { Container, Footer, Content } from "@/components/layout";
 import { useCallback, useEffect, useState } from "react";
 import { Button, Link, Spinner } from "@chakra-ui/react";
-import { CheckIcon, ExternalIcon, WandIcon } from "@cartridge/ui";
+import { CheckIcon, ExternalIcon, WandIcon } from "@cartridge/ui-next";
 import { Funding } from "./Funding";
 import { useConnection } from "@/hooks/connection";
 import { ControllerErrorAlert, ErrorAlert } from "./ErrorAlert";

diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
@@ -1,11 +1,11 @@
 import {
   AlertIcon,
   InfoIcon,
-  WedgeDownIcon,
+  WedgeIcon,
   WarningIcon,
   CopyIcon,
   CheckIcon,
-} from "@cartridge/ui";
+} from "@cartridge/ui-next";
 import {
   Text,
   Accordion,
@@ -73,11 +73,13 @@ export function ErrorAlert({
                 {(() => {
                   switch (variant) {
                     case "info":
-                      return <InfoIcon color="info.foreground" />;
+                      return <InfoIcon size="xs" color="info.foreground" />;
                     case "warning":
-                      return <WarningIcon color="warning.foreground" />;
+                      return (
+                        <WarningIcon size="xs" color="warning.foreground" />
+                      );
                     case "error":
-                      return <AlertIcon color="error.foreground" />;
+                      return <AlertIcon size="xs" color="error.foreground" />;
                     default:
                       return null;
                   }
@@ -103,7 +105,7 @@ export function ErrorAlert({
                       rotate: itemExpanded ? 180 : 0,
                     }}
                   >
-                    <WedgeDownIcon boxSize={5} />
+                    <WedgeIcon size="sm" variant="down" />
                   </Box>
                 </HStack>
               )}
@@ -114,16 +116,16 @@ export function ErrorAlert({
                 {copyText && (
                   <IconButton
                     size="icon"
-                    w={6}
-                    h={6}
+                    w={5}
+                    h={5}
                     position="absolute"
                     right={3}
                     aria-label="Copy stacktrace"
                     icon={
                       copied ? (
-                        <CheckIcon fontSize="lg" color="black" />
+                        <CheckIcon fontSize="xs" color="black" />
                       ) : (
-                        <CopyIcon fontSize="lg" color="black" />
+                        <CopyIcon fontSize="xs" color="black" />
                       )
                     }
                     onClick={() => {

diff --git a/packages/keychain/src/components/layout/Container/Header/Banner.tsx b/packages/keychain/src/components/layout/Container/Header/Banner.tsx
@@ -2,7 +2,6 @@ import {
   VStack,
   Circle,
   Text,
-  IconProps,
   Center,
   Flex,
   Image,
@@ -14,6 +13,7 @@ import { useControllerTheme } from "@/hooks/theme";
 import { useMemo } from "react";
 import { useLayoutVariant } from "../";
 import { TOP_BAR_HEIGHT } from "./TopBar";
+import { IconProps } from "@cartridge/ui-next";
 
 export type BannerProps = {
   Icon?: React.ComponentType<IconProps>;
@@ -80,7 +80,7 @@ export function Banner({ Icon, icon, title, description }: BannerProps) {
                   >
                     {Icon ? (
                       <Circle size="100%" bg="solid.primary">
-                        <Icon boxSize="100%" />
+                        <Icon size="lg" />
                       </Circle>
                     ) : icon ? (
                       <Circle size="100%" bg="solid.primary">
@@ -130,7 +130,7 @@ export function Banner({ Icon, icon, title, description }: BannerProps) {
           <HStack w="full" p={4} gap={4} minW={0}>
             {Icon ? (
               <Square size="44px" bg="solid.primary" borderRadius="md">
-                <Icon boxSize={8} />
+                <Icon size="lg" />
               </Square>
             ) : icon ? (
               <Square size="44px" bg="solid.primary" borderRadius="md">