From 2212a73f62d19284e6667263e07380c4c386ba37 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Wed, 11 Sep 2024 23:07:13 +0100
Subject: [PATCH] Wrap voucher in a card

---
 thallium-frontend/src/pages/StorePage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/thallium-frontend/src/pages/StorePage.tsx b/thallium-frontend/src/pages/StorePage.tsx
index ecb0948..27289c4 100644
--- a/thallium-frontend/src/pages/StorePage.tsx
+++ b/thallium-frontend/src/pages/StorePage.tsx
@@ -8,6 +8,7 @@ import StoreItem from "../components/StoreItem";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 
+import Card from "../components/Card";
 import LoadingBar from "../components/LoadingBar";
 import CartStatus from "../components/CartStatus";
 import { getCurrentVoucher, Voucher } from "../api/vouchers";
@@ -22,6 +23,7 @@ const StoreGrid = styled.div`
     gap: 2rem;
     margin-left: 1rem;
     margin-right: 1rem;
+    margin-top: 2rem;
     width: 80%;
 `;
 
@@ -70,7 +72,7 @@ const StorePage = () => {
         <>
             <h1>Giveaway Store</h1>
             {!(loading || permissionDenied) && <CartStatus />}
-            {currentVoucher && <VoucherDisplay voucher={currentVoucher} />}
+            {currentVoucher && <Card title="Active Voucher"><VoucherDisplay voucher={currentVoucher} /></Card>}
             {loading && <LoadingBar />}
             <StoreGrid>
                 {storeItems?.map((item) => (