Fix alert colors issue

thesis · Dec 10, 2024 · 8f4faff · 8f4faff
1 parent 5438ba8
commit 8f4faff
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
@@ -24,6 +24,7 @@ type ConnectionAlerts = Record<
     title: string
     description?: React.ReactNode
     status?: AlertStatus
+    colorScheme?: string
   }
 >
 
@@ -49,6 +50,7 @@ const CONNECTION_ALERTS: ConnectionAlerts = {
   [ConnectionAlert.Rejected]: {
     title: "Please connect your wallet to start using Acre",
     status: "info",
+    colorScheme: "blue",
   },
   [ConnectionAlert.NotSupported]: {
     title: "Not supported.",
@@ -82,11 +84,16 @@ type ConnectWalletAlertProps = Omit<AlertProps, "status"> & {
 export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
   const { type, ...restProps } = props
 
-  const data = type ? CONNECTION_ALERTS[type] : undefined
+  const {
+    status = "error",
+    title,
+    description,
+    ...restData
+  } = type ? CONNECTION_ALERTS[type] : {}
 
   return (
     <AnimatePresence initial={false}>
-      {data && (
+      {type && (
         <Box
           as={motion.div}
           variants={collapseVariants}
@@ -96,12 +103,12 @@ export default function ConnectWalletAlert(props: ConnectWalletAlertProps) {
           overflow="hidden"
           w="full"
         >
-          <Alert status={data.status || "error"} mb={6} {...restProps}>
+          <Alert status={status} mb={6} {...restProps} {...restData}>
             <AlertIcon />
             <VStack w="full" align="start" spacing={0}>
-              <AlertTitle textAlign="start">{data.title}</AlertTitle>
-              {data.description && (
-                <AlertDescription>{data.description}</AlertDescription>
+              <AlertTitle textAlign="start">{title}</AlertTitle>
+              {description && (
+                <AlertDescription>{description}</AlertDescription>
               )}
             </VStack>
           </Alert>

diff --git a/dapp/src/components/shared/Alert.tsx b/dapp/src/components/shared/Alert.tsx
@@ -22,7 +22,7 @@ import Spinner from "./Spinner"
 const STATUSES = {
   info: {
     icon: IconInfoCircle,
-    colorScheme: "blue",
+    colorScheme: "gold",
   },
   warning: {
     icon: IconExclamationCircle,