From 64f415acfc96602bcebbb0466430c29f42e4ec9f Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Thu, 8 Jul 2021 13:54:18 +0100
Subject: [PATCH] Fix: Overlay moving with page. Fix: Colour picker appearing
 in wrong position.

---
 src/components/ui/ColourSwatches.tsx | 42 +++++++++++++++-------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index dda09155..ffc72b84 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -38,11 +38,24 @@ const SwatchesBase = styled.div`
     display: flex;
 
     input {
+        width: 0;
+        height: 0;
+        top: 72px;
         opacity: 0;
-        margin-top: 44px;
-        position: absolute;
+        position: relative;
         pointer-events: none;
     }
+
+    .overlay {
+        position: relative;
+        width: 0;
+
+        div {
+            width: 8px;
+            height: 68px;
+            background: linear-gradient(to right, var(--primary-background), transparent);
+        }
+    }
 `;
 
 const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`
@@ -84,7 +97,6 @@ const Rows = styled.div`
     display: flex;
     flex-direction: column;
     overflow: auto;
-    
 
     > div {
         gap: 8px;
@@ -92,13 +104,6 @@ const Rows = styled.div`
         flex-direction: row;
         padding-inline-start: 8px;
     }
-
-    .overlay {
-        position: absolute;
-        height: 68px;
-        width: 8px;
-        background: linear-gradient(to right, var(--primary-background), transparent);
-    }
 `;
 
 export default function ColourSwatches({ value, onChange }: Props) {
@@ -106,23 +111,23 @@ export default function ColourSwatches({ value, onChange }: Props) {
 
     return (
         <SwatchesBase>
-            <Swatch
-                colour={value}
-                type="large"
-                onClick={() => ref.current?.click()}>
-                <Palette size={32} />
-            </Swatch>
             <input
                 type="color"
                 value={value}
                 ref={ref}
                 onChange={(ev) => onChange(ev.currentTarget.value)}
             />
+            <Swatch
+                colour={value}
+                type="large"
+                onClick={() => ref.current?.click()}>
+                <Palette size={32} />
+            </Swatch>
+
+            <div class="overlay"><div /></div>
             
             <Rows>
                 {presets.map((row, i) => (
-                    <>
-                    <div class="overlay" />
                     <div key={i}>
                         {row.map((swatch, i) => (
                             <Swatch
@@ -134,7 +139,6 @@ export default function ColourSwatches({ value, onChange }: Props) {
                             </Swatch>
                         ))}
                     </div>
-                    </>
                 ))}
             </Rows>