From 9c21bda3cdda10ba5323f6c99a94e708ba1cea1c Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Fri, 1 Mar 2024 05:06:10 +0000
Subject: [PATCH] Cleanup imgae hover

---
 .../src/components/details/DetailsImage.tsx   | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
index 6175af084a..99919a962b 100644
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -14,7 +14,7 @@ import {
 import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { useDisclosure, useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { UserRoles } from '../../enums/Roles';
@@ -340,6 +340,15 @@ export function DetailsImage(props: DetailImageProps) {
 
   const permissions = useUserState();
 
+  const hasOverlay: boolean = useMemo(() => {
+    return (
+      props.imageActions?.selectExisting ||
+      props.imageActions?.uploadFile ||
+      props.imageActions?.deleteFile ||
+      false
+    );
+  }, [props.imageActions]);
+
   const expandImage = (event: any) => {
     event?.preventDefault();
     event?.stopPropagation();
@@ -360,18 +369,20 @@ export function DetailsImage(props: DetailImageProps) {
             width={IMAGE_DIMENSION}
             onClick={expandImage}
           />
-          {permissions.hasChangeRole(props.appRole) && hovered && (
-            <Overlay color="black" opacity={0.8} onClick={expandImage}>
-              <ImageActionButtons
-                visible={hovered}
-                actions={props.imageActions}
-                apiPath={props.apiPath}
-                hasImage={props.src ? true : false}
-                pk={props.pk}
-                setImage={setAndRefresh}
-              />
-            </Overlay>
-          )}
+          {permissions.hasChangeRole(props.appRole) &&
+            hasOverlay &&
+            hovered && (
+              <Overlay color="black" opacity={0.8} onClick={expandImage}>
+                <ImageActionButtons
+                  visible={hovered}
+                  actions={props.imageActions}
+                  apiPath={props.apiPath}
+                  hasImage={props.src ? true : false}
+                  pk={props.pk}
+                  setImage={setAndRefresh}
+                />
+              </Overlay>
+            )}
         </>
       </AspectRatio>
     </>