From dd66c34b6a3300348be996eb849aef38e0883a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 23 Nov 2021 23:04:33 +0100
Subject: [PATCH] Add close button to Viewer

---
 src/components/atoms/ButtonCircle.svelte      | 30 +++++++++++++-----
 .../[country]/[location]/[photo].svelte       | 11 +++++++
 src/style/atoms/_button-circle.scss           |  1 +
 src/style/pages/_viewer-photo.scss            | 31 +++++++++++++++++++
 4 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
index c4029d8..f4c96ca 100644
--- a/src/components/atoms/ButtonCircle.svelte
+++ b/src/components/atoms/ButtonCircle.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    export let tag: string = 'button'
+    export let url: string = undefined
     export let color: string = undefined
     export let size: string = undefined
     export let type: string = undefined
@@ -14,12 +16,24 @@
     ].join(' ').trim()
 </script>
 
-<button {type} {form} class={classes} on:click disabled={disabled}>
-    {#if clone}
-        {#each Array(2) as _}
+{#if tag === 'a'}
+    <a href={url} class={classes} on:click>
+        {#if clone}
+            {#each Array(2) as _}
+                <slot />
+            {/each}
+        {:else}
             <slot />
-        {/each}
-    {:else}
-        <slot />
-    {/if}
-</button>
\ No newline at end of file
+        {/if}
+    </a>
+{:else}
+    <button {type} {form} class={classes} disabled={disabled} on:click>
+        {#if clone}
+            {#each Array(2) as _}
+                <slot />
+            {/each}
+        {:else}
+            <slot />
+        {/if}
+    </button>
+{/if}
\ No newline at end of file
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index 9463bee..a914d1a 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -218,6 +218,17 @@
     <div class="container grid">
         <p class="viewer-photo__notice text-label">Tap for fullscreen</p>
 
+        <ButtonCircle
+            tag="a"
+            url="/{location.country.slug}/{location.slug}"
+            color="purple"
+            class="viewer-photo__close shadow-box-dark"
+        >
+            <svg width="12" height="12">
+                <use xlink:href="#cross">
+            </svg>
+        </ButtonCircle>
+
         <div class="viewer-photo__carousel">
             <div class="viewer-photo__images" use:swipe on:swipe={handleSwipe} on:tap={toggleFullscreen}>
                 {#each visiblePhotos as photo, index (photo.id)}
diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
index d665f8e..1cb9b93 100644
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -102,6 +102,7 @@
 
     // Purple color
     &--purple {
+        color: #fff;
         background: $color-primary-tertiary20;
 
         &:hover {
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index 5c92c19..ac172b7 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -393,4 +393,35 @@
             display: none;
         }
     }
+
+    // Close button
+    &__close {
+        position: fixed;
+        z-index: 2;
+        top: 16px;
+        right: calc(16px + 44px + 12px);
+
+        @include bp (md) {
+            top: 40px;
+            right: 40px;
+        }
+
+        svg {
+            max-width: 14px;
+            max-height: 14px;
+
+            @include bp (md) {
+                max-width: 20px;
+                max-height: 20px;
+            }
+        }
+
+        // Hover
+        &:hover {
+            svg {
+                transform: rotate3d(0, 0, 1, 90deg) !important;
+                transition-duration: 1.2s;
+            }
+        }
+    }
 }
\ No newline at end of file