Add alert colors

cartridge-gg · Dec 20, 2024 · 3106e80 · 3106e80
1 parent 414ddaf
commit 3106e80
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 39 deletions.
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
@@ -1,10 +1,8 @@
 import {
-  AlertIcon,
-  InfoIcon,
   WedgeIcon,
-  WarningIcon,
   CopyIcon,
   CheckIcon,
+  ErrorAlertIcon,
 } from "@cartridge/ui-next";
 import {
   Text,
@@ -21,7 +19,12 @@ import {
   Divider,
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import React, { ReactElement, useEffect, useState } from "react";
+import React, {
+  ComponentProps,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 import { ErrorCode } from "@cartridge/account-wasm/controller";
 import { ControllerError } from "@/utils/connection";
 import { useConnection } from "@/hooks/connection";
@@ -70,20 +73,16 @@ export function ErrorAlert({
               disabled={!description || (isExpanded && !allowToggle)}
             >
               <HStack alignItems="flex-start">
-                {(() => {
-                  switch (variant) {
-                    case "info":
-                      return <InfoIcon size="xs" color="info.foreground" />;
-                    case "warning":
-                      return (
-                        <WarningIcon size="xs" color="warning.foreground" />
-                      );
-                    case "error":
-                      return <AlertIcon size="xs" color="error.foreground" />;
-                    default:
-                      return null;
-                  }
-                })()}
+                {variant && (
+                  <ErrorAlertIcon
+                    variant={
+                      variant as ComponentProps<
+                        typeof ErrorAlertIcon
+                      >["variant"]
+                    }
+                    size="xs"
+                  />
+                )}
                 <Text
                   as="b"
                   fontSize="2xs"

diff --git a/packages/keychain/src/components/Fees.tsx b/packages/keychain/src/components/Fees.tsx
@@ -1,15 +1,8 @@
 import { useEffect, useState } from "react";
-import {
-  AlertIcon,
-  HStack,
-  Spacer,
-  Spinner,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Spacer, Spinner, Text, VStack } from "@chakra-ui/react";
 import { formatUnits } from "viem";
 import { useChainId } from "@/hooks/connection";
-import { EthereumIcon, InfoIcon, WarningIcon } from "@cartridge/ui-next";
+import { ErrorAlertIcon, EthereumIcon } from "@cartridge/ui-next";
 
 export function Fees({
   maxFee,
@@ -87,18 +80,7 @@ function LineItem({
         <Spinner size="sm" />
       ) : (
         <HStack gap={0}>
-          {(() => {
-            switch (variant) {
-              case "info":
-                return <InfoIcon color="info.foreground" />;
-              case "warning":
-                return <WarningIcon color="warning.background" />;
-              case "error":
-                return <AlertIcon color="error.foreground" />;
-              default:
-                return null;
-            }
-          })()}
+          {variant && <ErrorAlertIcon variant={variant} />}
           {value !== "FREE" && <EthereumIcon color="text.primary" />}
           <Text fontSize={13}>{value}</Text>
         </HStack>

diff --git a/packages/ui-next/src/components/icons/error-alert-icon.tsx b/packages/ui-next/src/components/icons/error-alert-icon.tsx
@@ -0,0 +1,36 @@
+import { cn } from "@/utils";
+import { InfoIcon, WarningIcon, AlertIcon as AlertIconRaw } from "./utility";
+
+export function ErrorAlertIcon({
+  variant,
+  size = "default",
+  className,
+}: {
+  variant: "info" | "warning" | "error";
+  size?: "xs" | "default";
+  className?: string;
+}) {
+  switch (variant) {
+    case "info":
+      return (
+        <InfoIcon
+          size={size}
+          className={cn("text-info-foreground", className)}
+        />
+      );
+    case "warning":
+      return (
+        <WarningIcon
+          size={size}
+          className={cn("text-warning-foreground", className)}
+        />
+      );
+    case "error":
+      return (
+        <AlertIconRaw
+          size={size}
+          className={cn("text-error-foreground", className)}
+        />
+      );
+  }
+}
diff --git a/packages/ui-next/src/components/icons/index.ts b/packages/ui-next/src/components/icons/index.ts
@@ -2,6 +2,7 @@ export * from "./brand";
 export * from "./brand-color";
 export * from "./directional";
 export * from "./duotone";
+export * from "./error-alert-icon";
 export * from "./state";
 export * from "./utility";
 export * from "./types";

diff --git a/packages/ui-next/src/themes/default.css b/packages/ui-next/src/themes/default.css
@@ -37,5 +37,12 @@
     --radius: 0.5rem;
 
     --spacer: 0 0% 0%; /* solid-fills/spacer */
+
+    --info: 209 67% 75%;
+    --info-foreground: 208 100% 30%;
+    --warning: 209 67% 75%;
+    --warning-foreground: 208 100% 30%;
+    --error: 209 67% 75%;
+    --error-foreground: 208 100% 30%;
   }
 }