Fix Shop issues

- Move ButtonCart from nav to position it on top right
- ButtonCart amount indicator position (center left => top left)
- Bring back updating label when changing cart (+ other transitions)
- Make ShopHeader picture gradient a bit bigger

src/components/organisms/Cart.svelte

@@ -150,7 +150,7 @@
                     />
                 {/each}
             {:else}
-                <div class="cart__empty shadow-small">
+                <div class="cart__empty shadow-small" transition:fade={{ duration: 600 }}>
                     <div class="icon">
                         <Icon icon="bag" label="Shopping bag icon" />
                     </div>
@@ -159,7 +159,10 @@
             {/if}
 
             {#if !$cartData || $cartIsUpdating}
-                <div class="cart__update" transition:fade={{ duration: 400 }}>
+                <div class="cart__update"
+                    in:fly={{ y: -4, duration: 600, easing: quartOut }}
+                    out:fly={{ y: 4, duration: 600, easing: quartOut }}
+                >
                     <p>Updating…</p>
                 </div>
             {/if}

src/components/organisms/ShopHeader.svelte

@@ -53,7 +53,7 @@
 
         // Hero title
         timeline.add({
-            targets: '.shop-page__intro h1',
+            targets: '.shop-page__title h1',
             translateY: [32, 0],
             opacity: [0, 1],
         }, 500)
@@ -67,8 +67,10 @@
 
         // Intro navbar
         timeline.add({
-            targets: '.shop-page__nav .container > *',
+            targets: '.shop-page__nav .container > *, .shop-page__intro .button-cart',
+            opacity: [0, 1],
             translateY: [100, 0],
+            translateZ: 0,
             delay: anime.stagger(250),
         }, 700)
 
@@ -93,7 +95,9 @@
         </a>
     </div>
 
-    <h1>Shop</h1>
+    <div class="shop-page__title">
+        <h1>Shop</h1>
+    </div>
 
     <nav class="shop-page__nav">
         <div class="container">
@@ -109,11 +113,11 @@
                     {/each}
                 </ul>
             </nav>
-
-            <ButtonCart />
         </div>
     </nav>
 
+    <ButtonCart />
+
     <Image
         class="shop-page__background"
         id={shop.page_heroimage.id}

src/style/atoms/_button-cart.scss

@@ -24,9 +24,9 @@
     .quantity {
         position: absolute;
         z-index: 2;
-        top: 50%;
-        left: 2px;
-        transform: translate3d(-50%, -50%, 0);
+        top: 0;
+        left: 0;
+        transform: translateX(-33%);
         display: flex;
         align-items: center;
         justify-content: center;

src/style/organisms/_cart.scss

@@ -185,7 +185,7 @@
     // Updating message
     &__update {
         position: absolute;
-        z-index: -1;
+        z-index: 10;
         top: 0;
         left: 0;
         width: 100%;
@@ -195,9 +195,6 @@
         justify-content: center;
         font-size: rem(20px);
         color: $color-secondary;
-        transition: opacity 0.6s var(--ease-quart), transform 0.6s var(--ease-quart);
-        opacity: 0;
-        transform: translate3d(0, -8px, 0);
     }
 
     // Location switcher
@@ -225,17 +222,13 @@
         background: rgba($color-primary, 0.9);
         cursor: w-resize;
     }
-}
 
-// Updating state
-:global(.is-updating) {
-    :global(.cart-item) {
-        opacity: 0.1;
-        pointer-events: none;
-        user-select: none;
-    }
-    :global(.cart__update) {
-        opacity: 1;
-        transform: translate3d(0,0,0);
+    // Updating state
+    &.is-updating {
+        :global(.cart-item) {
+            opacity: 0.1;
+            pointer-events: none;
+            user-select: none;
+        }
     }
 }

src/style/organisms/_shop.scss

@@ -3,6 +3,7 @@
     background: #fff;
     color: $color-text;
     border-radius: 8px;
+    transform: translateZ(0);
 
     @include bp (sd) {
         border-radius: 12px;

src/style/pages/shop/_intro.scss

@@ -71,18 +71,13 @@
     }
 
     // Site Title
-    :global(h1) {
+    .shop-page__title {
         position: absolute;
         z-index: 2;
-        top: 50%;
+        top: 42%;
         left: 50%;
         width: 100%;
         transform: translate3d(-50%, -50%, 0);
-        font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
-        font-weight: 400;
-        text-shadow: 0px 8px 12px rgba(#000, 0.25);
-        text-align: center;
-        letter-spacing: -0.02em;
 
         @include bp (sm) {
             // top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
@@ -91,11 +86,19 @@
             transform: none;
         }
 
-        :global(span), :global(strong) {
-            color: #fff;
-        }
-        :global(span) {
-            font-weight: 300;
+        :global(h1) {
+            font-size: clamp(#{rem(48px)}, 7vw, #{rem(56px)});
+            font-weight: 400;
+            text-shadow: 0px 8px 12px rgba(#000, 0.25);
+            text-align: center;
+            letter-spacing: -0.02em;
+
+            :global(span), :global(strong) {
+                color: #fff;
+            }
+            :global(span) {
+                font-weight: 300;
+            }
         }
     }
 
@@ -120,15 +123,29 @@
 
         // Gradient
         &:before {
-            display: block;
             content: "";
+            display: block;
             position: absolute;
             z-index: 1;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
+            background: linear-gradient(180deg, rgba(45, 4, 88, 0) 72.5%, #1E0538 100%);
+        }
+    }
+
+    // Cart button
+    :global(.button-cart) {
+        position: absolute;
+        z-index: 2;
+        top: 16px;
+        right: 16px;
+
+        @include bp (sm) {
+            top: auto;
+            bottom: 32px;
+            right: 32px;
         }
     }
 }

src/style/pages/shop/_posters.scss

@@ -2,8 +2,8 @@
 ** Shop: Posters
 */
 .shop-page__posters {
-    background-color: $color-primary-darker;
     padding: clamp(56px, 10vw, 120px) 20px 72px;
+    background: $color-primary-darker;
     border-bottom: solid 1px $color-primary-tertiary20 ;
 
     @include bp (sd) {