Fix card icon

cartridge-gg · Dec 7, 2024 · 25d6eb1 · 25d6eb1
1 parent 5c4170b
commit 25d6eb1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 57 deletions.
diff --git a/packages/keychain/src/components/connect/CreateSession.stories.tsx b/packages/keychain/src/components/connect/CreateSession.stories.tsx
@@ -33,7 +33,12 @@ export const WithPreset: Story = {
         "0xdeadbeef": {
           methods: [
             {
-              name: "transfer",
+              name: "Approve Token",
+              entrypoint: "approve",
+              description: "Approve",
+            },
+            {
+              name: "Transfer Money",
               entrypoint: "transfer",
               description: "Transfer",
             },
@@ -42,14 +47,18 @@ export const WithPreset: Story = {
         "0xdeafcafe": {
           methods: [
             {
-              name: "approve",
-              entrypoint: "approve",
-              description: "Approve",
+              name: "Attack Eneemy",
+              entrypoint: "attack",
+              description: "Attack",
+            },
+            {
+              name: "Defend Position",
+              entrypoint: "defend",
+              description: "Define",
             },
           ],
         },
       },
-      messages: [],
     },
     onConnect: () => {},
   },

diff --git a/packages/keychain/src/components/session/VerifiedSessionSummary.tsx b/packages/keychain/src/components/session/VerifiedSessionSummary.tsx
@@ -3,13 +3,15 @@ import {
   Card,
   CardContent,
   CardHeader,
-  CardTitle,
   Accordion,
   AccordionItem,
   AccordionTrigger,
+  AccordionContent,
 } from "@cartridge/ui-next";
 import { ParsedSessionPolicies } from "hooks/session";
 import { formatAddress } from "@cartridge/utils";
+import { Text } from "@chakra-ui/react";
+import { CodeIcon } from "@cartridge/ui";
 
 export function VerifiedSessionSummary({
   policies,
@@ -20,53 +22,51 @@ export function VerifiedSessionSummary({
     Object.values(contracts).flatMap(({ methods }) => methods),
   ).length;
 
-  const totalContracts = Object.values(policies).flatMap((contracts) =>
-    Object.keys(contracts),
-  ).length;
+  const totalMessages = policies.messages?.length ?? 0;
 
   return (
     <Card>
-      <CardHeader>
-        <CardTitle className="text-foreground">
-          Approve {totalMethods} methods across {totalContracts} contracts
-        </CardTitle>
+      <CardHeader icon={<CodeIcon boxSize="24px" m={2} />}>
+        <Text color="text.primary" fontSize="xs" fontWeight="bold">
+          PLAY GAME
+        </Text>
       </CardHeader>
-
-      <Accordion type="multiple">
-        {Object.entries(policies).map(([category, contracts]) =>
-          Object.entries(contracts).map(([address, { meta }]) => (
-            <AccordionItem key={address} value={address}>
-              <CardContent>
-                <AccordionTrigger>
-                  {meta?.name || category}{" "}
-                  <span className="text-muted-foreground ml-2">
-                    {formatAddress(address)}
-                  </span>
-                </AccordionTrigger>
-              </CardContent>
-
-              {/* <AccordionContent>
-                {methods.map((method) => (
-                  <CardContent
-                    key={method.entrypoint}
-                    className="flex items-center gap-2 py-2"
-                  >
-                    <CircleIcon size="sm" className="text-muted-foreground" />
-                    <div>
-                      <div>{method.name}</div>
-                      {method.description && (
-                        <div className="text-sm text-muted-foreground">
-                          {method.description}
-                        </div>
-                      )}
-                    </div>
-                  </CardContent>
-                ))}
-              </AccordionContent> */}
-            </AccordionItem>
-          )),
-        )}
-      </Accordion>
+      <CardContent>
+        <Accordion type="multiple">
+          <AccordionItem value="contracts">
+            <AccordionTrigger>
+              <Text color="text.secondary" fontSize="xs">
+                Approve{" "}
+                <Text as="span" color="text.secondary" fontWeight="bold">
+                  {totalMethods} methods
+                </Text>{" "}
+                {totalMessages > 0 && (
+                  <>
+                    and{" "}
+                    <Text as="span" color="text.secondary" fontWeight="bold">
+                      {totalMessages} messages
+                    </Text>
+                  </>
+                )}
+              </Text>
+            </AccordionTrigger>
+            <AccordionContent>
+              <Card>
+                {Object.entries(policies).map(([category, contracts]) =>
+                  Object.entries(contracts).map(([address, { meta }]) => (
+                    <CardContent>
+                      {meta?.name || category}{" "}
+                      <span className="text-muted-foreground ml-2">
+                        {formatAddress(address)}
+                      </span>
+                    </CardContent>
+                  )),
+                )}
+              </Card>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </CardContent>
     </Card>
   );
 }
diff --git a/packages/ui-next/src/components/primitives/card.tsx b/packages/ui-next/src/components/primitives/card.tsx
@@ -24,16 +24,11 @@ const CardHeader = React.forwardRef<
   icon ? (
     <div
       ref={ref}
-      className={cn("h-9 flex items-center gap-x-px bg-background", className)}
+      className={cn("h-9 flex items-center gap-x-px bg-secondary", className)}
     >
       {icon}
-      <div
-        className={cn(
-          "w-full h-full flex items-center p-3 bg-secondary",
-          className,
-        )}
-        {...props}
-      />
+      <div className="w-px h-full bg-background" />
+      <div className={cn("p-3", className)} {...props} />
     </div>
   ) : (
     <div