From d45c6f92906bcb2acb271056fb94a6a9a832cda2 Mon Sep 17 00:00:00 2001
From: Nico Schett <52858351+schettn@users.noreply.github.com>
Date: Wed, 15 Sep 2021 16:29:40 +0000
Subject: [PATCH] fix(imagefield): blinking on hover when using position
 absolut fixed

---
 examples/my-gatsby-site/src/pages/index.js    |  8 ++++++-
 .../src/containers/JaenImage/index.tsx        | 23 ++++++++++++++-----
 .../src/containers/JaenImage/style.ts         |  8 -------
 3 files changed, 24 insertions(+), 15 deletions(-)
 delete mode 100644 packages/jaen-pages/src/containers/JaenImage/style.ts

diff --git a/examples/my-gatsby-site/src/pages/index.js b/examples/my-gatsby-site/src/pages/index.js
index b01e9ff2..4bcca170 100644
--- a/examples/my-gatsby-site/src/pages/index.js
+++ b/examples/my-gatsby-site/src/pages/index.js
@@ -147,7 +147,13 @@ const IndexPage = () => {
           alt: 'ta',
           title: 'daa'
         }}
-        style={{width: '100%'}}
+        style={{
+          width: '50%',
+          position: 'absolute',
+          height: '50vh',
+          top: 0,
+          left: 0
+        }}
       />
       <BlockContainer
         name="blockcontainer1"
diff --git a/packages/jaen-pages/src/containers/JaenImage/index.tsx b/packages/jaen-pages/src/containers/JaenImage/index.tsx
index 0cc07fbe..d6a9cfb1 100644
--- a/packages/jaen-pages/src/containers/JaenImage/index.tsx
+++ b/packages/jaen-pages/src/containers/JaenImage/index.tsx
@@ -7,8 +7,6 @@ import {
 } from 'gatsby-plugin-image'
 import * as React from 'react'
 
-import {JaenImageContainer} from './style'
-
 const SnekFinder = loadable(() => import('@containers/SnekFinder'))
 
 export type ImageType = {
@@ -51,20 +49,33 @@ const JaenImage: React.FC<JaenImage> = ({
 
   const image = storeImage || initialImage
 
+  const editingStyle = editable
+    ? {
+        cursor: 'pointer',
+        boxShadow: '0 0 0 2.5px #48BB78',
+        transition: 'box-shadow 0.1s ease-in-out'
+      }
+    : {}
+
+  const imageProps = {
+    ...props.imageProps,
+    style: {...props.imageProps.style, ...editingStyle}
+  }
+
   return (
     <>
-      <JaenImageContainer editable={editable} onClick={handleFileClick}>
+      <div onClick={handleFileClick}>
         {storeImage || !contextImage ? (
-          <Image {...props.imageProps} {...image} />
+          <Image {...imageProps} {...image} />
         ) : (
           <GatsbyImage
             image={contextImage}
             title={image.title}
             alt={image.alt}
-            {...props.imageProps}
+            {...imageProps}
           />
         )}
-      </JaenImageContainer>
+      </div>
       {fileSelector.isOpen && (
         <SnekFinder
           mode="selector"
diff --git a/packages/jaen-pages/src/containers/JaenImage/style.ts b/packages/jaen-pages/src/containers/JaenImage/style.ts
deleted file mode 100644
index 081f5d12..00000000
--- a/packages/jaen-pages/src/containers/JaenImage/style.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from '@emotion/styled'
-
-export const JaenImageContainer = styled.span`
-  &:hover {
-    ${(props: {editable: boolean}) =>
-      props.editable ? 'filter: brightness(70%); cursor: pointer;' : ''}
-  }
-`