From ec2ef95ccae77ab55628efcd8596562fa2b60da3 Mon Sep 17 00:00:00 2001
From: Fluffy <michal-gdula@protonmail.com>
Date: Fri, 3 May 2024 17:00:34 +0100
Subject: [PATCH] Link back to the item page

---
 front/src/components/BasketItem.svelte | 42 +++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/front/src/components/BasketItem.svelte b/front/src/components/BasketItem.svelte
index b8830f1..387b3fc 100644
--- a/front/src/components/BasketItem.svelte
+++ b/front/src/components/BasketItem.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+    import { link } from 'svelte-spa-router';
+    import { Plus, Minus, Trash } from 'phosphor-svelte';
+
     import type { CartItem } from "../lib/types";
     import Cart from "../lib/cart";
 
@@ -13,11 +16,13 @@
     {/if}
 
     <ul>
-        <li class="basket-item-name">{item.data.name}</li>
+        <li class="basket-item-name"><a href="/item/{item.uuid}" use:link>{item.data.name}</a></li>
         <li class="basket-item-controls">
-            <button on:click={() => { Cart.addToCart(item.uuid, -1) }}>-</button>
+            <button class="button " on:click={() => { Cart.addToCart(item.uuid, -1) }}><Minus /></button>
             <p>{item.amount}</p>
-            <button on:click={() => { Cart.addToCart(item.uuid, 1) }}>+</button>
+            <button class="button " on:click={() => { Cart.addToCart(item.uuid, 1) }}><Plus /></button>
+            <hr>
+            <button class="button evil" on:click={() => { Cart.removeByUUID(item.uuid) }}><Trash /></button>
         </li>
         <li class="basket-item-price">£{item.data.price * item.amount} (£{item.data.price})</li>
     </ul>
@@ -59,14 +64,21 @@
 
         object-fit: cover;
     }
-    .basket-item-name {
+    .basket-item-name a {
         font-size: $font-size-h2;
+        text-decoration: underline;
+
+        color: $color-on-light;
+
+        &:hover {
+            text-decoration: none;
+        }
     }
     .basket-item-controls {
         display: flex;
         flex-direction: row;
 
-        > button {
+        > .button {
             width: 35px;
             height: 35px;
 
@@ -89,6 +101,16 @@
                 border: 1px solid rgba($color-primary, 0.9);
                 outline: 0 solid transparent;
             }
+
+            &.evil {
+                border: 1px solid $color-error;
+                color: $color-error;
+
+                &:hover,
+                &:focus {
+                    background-color: rgba($color-error, 0.1);
+                }
+            }
         }
 
         > p {
@@ -105,6 +127,16 @@
             border: 1px solid transparent;
             color: $color-on-light;
         }
+
+        > hr {
+            margin: 0 $spacing-small;
+
+            width: 1px;
+            height: 100%;
+
+            border: 0 solid transparent;
+            background-color: rgba($color-dark, 0.1);
+        }
     }
     .basket-item-price {
         font-size: $font-size-p;