From 8e56d58b30860623ac7b1a60f1d073024226e889 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 22:41:35 +0100
Subject: [PATCH] Change Photo viewer controls and ButtonCircle

---
 src/components/atoms/ButtonCircle.svelte      |  4 +--
 .../[country]/[location]/[photo].svelte       |  4 +--
 src/style/atoms/_button-circle.scss           | 34 ++++++++-----------
 src/style/pages/_viewer-photo.scss            | 27 +++++++++++++++
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
index 72d5e19..c4029d8 100644
--- a/src/components/atoms/ButtonCircle.svelte
+++ b/src/components/atoms/ButtonCircle.svelte
@@ -17,9 +17,7 @@
 <button {type} {form} class={classes} on:click disabled={disabled}>
     {#if clone}
         {#each Array(2) as _}
-            <span class="clone">
-                <slot />
-            </span>
+            <slot />
         {/each}
     {:else}
         <slot />
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index f7dd822..09d3c90 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -182,10 +182,10 @@
                 {/each}
 
                 <div class="viewer-photo__controls">
-                    <ButtonCircle on:click={goToPrevious} disabled={!canGoNext}>
+                    <ButtonCircle class="shadow-box-dark" disabled={!canGoNext} clone={true} on:click={goToPrevious}>
                         <IconArrow color="pink" flip={true} />
                     </ButtonCircle>
-                    <ButtonCircle on:click={goToNext} disabled={!canGoPrev}>
+                    <ButtonCircle class="shadow-box-dark" disabled={!canGoPrev} clone={true} on:click={goToNext}>
                         <IconArrow color="pink" />
                     </ButtonCircle>
                 </div>
diff --git a/src/style/atoms/_button-circle.scss b/src/style/atoms/_button-circle.scss
index 944283d..6279164 100644
--- a/src/style/atoms/_button-circle.scss
+++ b/src/style/atoms/_button-circle.scss
@@ -14,25 +14,19 @@
         width: 22px;
         height: 22px;
         object-fit: contain;
-        transition: opacity 0.4s var(--ease-quart), filter 0.4s var(--ease-quart);
-    }
-
-    // Clones
-    .clone {
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        width: clamp(16px, 50%, 24px);
+        height: clamp(16px, 50%, 24px);
         transform-origin: center center;
         transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
 
-        &:last-child {
+        // Last clone
+        &:nth-child(2) {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            z-index: 1;
+            top: 50%;
+            left: 50%;
             opacity: 0;
-            transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-150%, -50%, 0);
         }
     }
 
@@ -41,15 +35,15 @@
     ** States
     */
     // Hover
-    &:hover {
-        .clone {
+    &:not([disabled]):hover {
+        & > * {
             &:first-child {
                 opacity: 0;
-                transform: scale(0.9) translate3d(30%, 0, 0);
+                transform: scale(0.75) translate3d(20%, 0, 0);
             }
             &:last-child {
                 opacity: 1;
-                transform: translate3d(0,0,0);
+                transform: translate3d(-50%, -50%, 0);
             }
         }
     }
@@ -57,10 +51,10 @@
     // Disabled
     &[disabled] {
         background: $color-primary;
-        border: 3px solid #ffffff20;
+        border: 3px solid rgba(#fff, 0.2);
 
         svg {
-            fill: $color-primary-tertiary20;
+            color: $color-primary-tertiary20;
         }
     }
 
diff --git a/src/style/pages/_viewer-photo.scss b/src/style/pages/_viewer-photo.scss
index 4bf4f2c..8ee4bb8 100644
--- a/src/style/pages/_viewer-photo.scss
+++ b/src/style/pages/_viewer-photo.scss
@@ -295,6 +295,33 @@
 
         button {
             pointer-events: auto;
+
+            // Prev button
+            &:first-child {
+                & > *:nth-child(2) {
+                    transform: translate3d(100%, -50%, 0) rotate(180deg);
+                }
+
+                // Hover
+                &:not([disabled]):hover {
+                    & > *:nth-child(1) {
+                        transform: translate3d(-20%, 0, 0) rotate(180deg);
+                    }
+                    & > *:nth-child(2) {
+                        transform: translate3d(-50%, -50%, 0) rotate(180deg);
+                    }
+                }
+            }
+
+            // Hover
+            &:not([disabled]):hover {
+                background-color: $color-secondary;
+                color: #fff;
+
+                svg:nth-child(2) {
+                    color: #fff;
+                }
+            }
         }
     }
 }
\ No newline at end of file