From 5a5dd3ccaa052874d3e774b7efee5c35cc144515 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 5 Nov 2021 17:43:29 +0100
Subject: [PATCH] Use an atom for the Cart button

---
 src/components/atoms/CartButton.svelte |  2 +-
 src/style/atoms/_cart-button.scss      | 27 +++++++++++++++++++++++++
 src/style/pages/_shop.scss             | 28 --------------------------
 src/style/style.scss                   |  1 +
 4 files changed, 29 insertions(+), 29 deletions(-)
 create mode 100644 src/style/atoms/_cart-button.scss

diff --git a/src/components/atoms/CartButton.svelte b/src/components/atoms/CartButton.svelte
index 8238a8a..c4f7566 100644
--- a/src/components/atoms/CartButton.svelte
+++ b/src/components/atoms/CartButton.svelte
@@ -8,7 +8,7 @@
     }
 </script>
 
-<div class="shop-location__cart">
+<div class="cart-button">
     <ButtonCircle color="purple" on:click={handleCartOpening}>
         <img src="/images/icons/pin.svg" alt="">
     </ButtonCircle>
diff --git a/src/style/atoms/_cart-button.scss b/src/style/atoms/_cart-button.scss
new file mode 100644
index 0000000..d22aadb
--- /dev/null
+++ b/src/style/atoms/_cart-button.scss
@@ -0,0 +1,27 @@
+// Cart
+.cart-button {
+    display: none;
+    position: relative;
+
+    @include bp (sm) {
+        display: flex;
+        margin-left: auto;
+    }
+
+    .quantity {
+        position: absolute;
+        top: 50%;
+        left: -12px;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        font-size: rem(11px);
+        font-weight: 600;
+        color: #fff;
+        background-color: $color-secondary;
+        border-radius: 100%;
+    }
+}
\ No newline at end of file
diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss
index 8891520..8eed7ac 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -77,34 +77,6 @@
                 }
             }
         }
-
-        // Cart
-        &__cart {
-            display: none;
-            position: relative;
-
-            @include bp (sm) {
-                display: flex;
-                margin-left: auto;
-            }
-
-            .quantity {
-                position: absolute;
-                top: 50%;
-                left: -12px;
-                transform: translateY(-50%);
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 22px;
-                height: 22px;
-                font-size: rem(11px);
-                font-weight: 600;
-                color: #fff;
-                background-color: $color-secondary;
-                border-radius: 100%;
-            }
-        }
     }
 
     // Intro
diff --git a/src/style/style.scss b/src/style/style.scss
index 04bfc64..afd884a 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -43,6 +43,7 @@
 @import "atoms/box-cta";
 @import "atoms/site-title";
 @import "atoms/photo";
+@import "atoms/cart-button";
 
 // Molecules
 @import "molecules/photo-card";