chore: stylize warning toasts

getAlby · Dec 24, 2024 · 9855093 · 9855093
1 parent f350d16
commit 9855093
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
@@ -56,7 +56,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Text
     ref={ref}
-    className={cn("mt-1 text-sm text-muted-foreground", className)}
+    className={cn("mt-1 text-muted-foreground", className)}
     {...props}
   />
 ));

diff --git a/pages/settings/wallets/EditWallet.tsx b/pages/settings/wallets/EditWallet.tsx
@@ -24,15 +24,17 @@ export function EditWallet() {
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
   const wallets = useAppStore((store) => store.wallets);
   return (
-    <View className="flex-1 flex flex-col p-3 gap-3">
+    <View className="flex-1 flex flex-col p-4 gap-4">
       <Screen title="Edit Wallet" />
       {/* TODO: Do not allow notifications to be toggled without notifications capability */}
-      <Card>
+      <Card className="bg-orange-50 border-orange-100 my-2">
         <CardContent className="flex flex-row items-center gap-4">
-          <TriangleAlert className="text-muted-foreground" />
+          <TriangleAlert className="text-orange-700" />
           <View className="flex flex-1 flex-col">
-            <CardTitle>This wallet might not work as expected</CardTitle>
-            <CardDescription>
+            <CardTitle className="text-orange-700">
+              This wallet might not work as expected
+            </CardTitle>
+            <CardDescription className="text-orange-700">
               Missing capabilities:&nbsp;
               {REQUIRED_CAPABILITIES.filter(
                 (capability) =>

diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx
@@ -248,12 +248,14 @@ export function SetupWallet() {
               !REQUIRED_CAPABILITIES.every((capability) =>
                 capabilities.includes(capability),
               ) && (
-                <Card className="w-full mb-5">
+                <Card className="w-full mb-5 bg-orange-50 border-orange-100">
                   <CardContent className="flex flex-row items-center gap-4">
-                    <TriangleAlert className="text-muted-foreground" />
+                    <TriangleAlert className="text-orange-700" />
                     <View className="flex flex-1 flex-col">
-                      <CardTitle>Alby Go might not work as expected</CardTitle>
-                      <CardDescription>
+                      <CardTitle className="text-orange-700">
+                        Alby Go might not work as expected
+                      </CardTitle>
+                      <CardDescription className="text-orange-700">
                         Missing capabilities:&nbsp;
                         {REQUIRED_CAPABILITIES.filter(
                           (capability) => !capabilities.includes(capability),