From e994279d202a5512614b8dc8c58fa61c89658ab1 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Thu, 12 Sep 2024 02:30:30 +0100
Subject: [PATCH] Add card wrapper around cart status on store page

---
 .../src/components/CartStatus.tsx             | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx
index cdb35f3..02c7661 100644
--- a/thallium-frontend/src/components/CartStatus.tsx
+++ b/thallium-frontend/src/components/CartStatus.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { useVisible } from "../utils/hooks";
 import Card from "./Card";
 
-const StatusHolder = styled.span`
+const StatusHolder = styled.div`
 margin-top: 1rem;
 margin-bottom: 1rem;
 `;
@@ -42,6 +42,10 @@ font-weight: bold;
 font-size: 1.1em;
 `;
 
+const CartStatusContainer = styled.div`
+text-align: center;
+`;
+
 const CartStatus = () => {
     const cart = useSelector((state: RootState) => state.cart);
     const total = cart.cart.reduce((acc, item) => acc + item.quantity, 0);
@@ -58,18 +62,26 @@ const CartStatus = () => {
         navigate("/checkout");
     };
 
-    const statusDetails = <>You currently have <DetailsSpan>{total}</DetailsSpan> item{ total !== 1 ? "s" : null } in your cart, totalling < DetailsSpan > ${ price.toFixed(2) } USD</DetailsSpan></>;
+    const statusDetails = (
+        <>
+            You currently have <DetailsSpan>{total}</DetailsSpan> item{ total !== 1 ? "s" : null } in your cart, totalling <DetailsSpan>${ price.toFixed(2) } USD</DetailsSpan>
+        </>
+    );
 
     return <>
-        <StatusHolder>{statusDetails}</StatusHolder>
+        <Card title="Your Cart">
+            <CartStatusContainer>
+                <StatusHolder>{statusDetails}</StatusHolder>
+                <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}>
+                    {checkoutMsg}
+                </Button>
+            </CartStatusContainer>
+        </Card>
         <FloatingStatusHolder $visible={!buttonVisible}>
-            <Card title="Your cart">
+            <Card title="Your Cart">
             {statusDetails}
             </Card>
         </FloatingStatusHolder>
-        <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}>
-            {checkoutMsg}
-        </Button>
         <FloatingButton $visible={!buttonVisible && total > 0} onClick={buttonCallback}>
             {checkoutMsg}
         </FloatingButton>