From 163fbe75db9fec89306f9f5aae670b2bb6c470cf Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Fri, 5 Nov 2021 22:41:02 +0100
Subject: [PATCH] Add cross (remove) icon to poster cart

---
 src/components/molecules/PosterCart.svelte | 12 +++++++++---
 src/style/organisms/_cart.scss             | 10 +++++++++-
 src/style/pages/_shop.scss                 |  6 +++---
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/molecules/PosterCart.svelte b/src/components/molecules/PosterCart.svelte
index 8140c6d..39951c6 100644
--- a/src/components/molecules/PosterCart.svelte
+++ b/src/components/molecules/PosterCart.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
     import { getContext } from 'svelte'
     // Components
-    import Button from '$components/atoms/Button.svelte'
-    import Image from '$components/atoms/Image.svelte'
-import Select from './Select.svelte'
+    import Select from './Select.svelte'
+    import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     const { locations, shop } = getContext('global')
 
@@ -14,6 +13,13 @@ import Select from './Select.svelte'
         <img src="/images/issue-1.jpg" alt="">
     </div>
     <div class="poster-cart__right">
+        <div class="remove">
+            <ButtonCircle size="tiny">
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M7.81 1.104a.647.647 0 1 0-.914-.915L4 3.085 1.104.19a.647.647 0 1 0-.915.915L3.085 4 .19 6.896a.647.647 0 1 0 .915.915L4 4.915 6.896 7.81a.647.647 0 1 0 .915-.915L4.915 4 7.81 1.104Z" fill="#666"/>
+                </svg>
+            </ButtonCircle>
+        </div>
         <h3>Poster</h3>
         <p>Houses Of Melbourne – 30€</p>
         <Select
diff --git a/src/style/organisms/_cart.scss b/src/style/organisms/_cart.scss
index 973e003..ef8c6cf 100644
--- a/src/style/organisms/_cart.scss
+++ b/src/style/organisms/_cart.scss
@@ -6,7 +6,7 @@
     padding: 20px 20px 24px;
 
     @include bp (sm) {
-        padding: 24px 32px 0 32px;
+        padding: 24px 32px;
     }
 
     // Heading
@@ -42,6 +42,7 @@
 
     // Poster Cart
     .poster-cart {
+        position: relative;
         display: flex;
         background-color: #fff;
         color: $color-gray;
@@ -75,6 +76,13 @@
         }
 
         &__right {
+            // Remove Icon
+            .remove {
+                position: absolute;
+                top: 16px;
+                right: 16px;
+            }
+
             // Poster Title
             h3 {
                 font-family: $font-serif;
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index c82864d..ad6abdc 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -3,7 +3,8 @@
 
     // Cart
     .cart {
-        display: flex;
+        // display: flex;
+        // display: none;
         position: fixed;
         z-index: 100;
         top: 72px;
@@ -80,7 +81,6 @@
 
         // Cart
         &__cart {
-            display: none;
             position: relative;
 
             @include bp (sm) {
@@ -308,7 +308,7 @@
     // Posters
     &__posters {
         background-color: $color-primary-darker;
-        padding: 56px 20px 72px;
+        padding: 0 20px 72px;
         border-bottom: solid 1px $color-primary-tertiary20 ;
 
         @include bp (sm) {