diff options
| author |  Joe Banks <[email protected]> | 2024-09-11 17:28:08 +0100 |
|---|---|---|
| committer | Joe Banks <[email protected]> | 2024-09-11 17:28:08 +0100 |
| commit | 21f44e7f73f46459db2e37f83566147c72477e84 (patch) | |
| tree | 2f689ae0345e60579ccf81e1a5209c9c4b39fbb4 | |
| parent | Spacing (diff) | |
Wrap variables in CartStatus with accent colour
| -rw-r--r-- | thallium-frontend/src/components/CartStatus.tsx | 8 |
1 files changed, 7 insertions, 1 deletions
diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx index 5b6d1e8..d528a87 100644 --- a/thallium-frontend/src/components/CartStatus.tsx +++ b/thallium-frontend/src/components/CartStatus.tsx @@ -23,6 +23,12 @@ margin-right: 30px; transition: all 0.25s; `; +const DetailsSpan = styled.span` +color: ${(props) => props.theme.accent}; +font-weight: bold; +font-size: 1.1em; +` + const CartStatus = () => { const cart = useSelector((state: RootState) => state.cart); const total = cart.cart.reduce((acc, item) => acc + item.quantity, 0); @@ -44,7 +50,7 @@ const CartStatus = () => { }; return <> - <StatusHolder>You currently have {total} item{total !== 1 ? "s" : null} in your cart, totalling ${price.toFixed(2)} USD</StatusHolder> + <StatusHolder>You currently have <DetailsSpan>{total}</DetailsSpan> item{total !== 1 ? "s" : null} in your cart, totalling <DetailsSpan>${price.toFixed(2)} USD</DetailsSpan></StatusHolder> <Button ref={staticButtonRef} disabled={total === 0} onClick={buttonCallback}> {checkoutMsg} </Button> |