From bf07293a69fd9eaa2c2f749cc418b3d36996cf5a Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Fri, 24 Sep 2021 15:09:17 +0200
Subject: [PATCH] Storage icons fix

---
 src/form/fields/StorageUploadField.tsx  |  6 +++++-
 src/models/collections.ts               |  1 -
 src/models/entities.ts                  |  2 +-
 src/models/fields.tsx                   |  1 -
 src/models/properties.ts                |  2 +-
 src/preview/components/ImagePreview.tsx | 15 +++++++++------
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/form/fields/StorageUploadField.tsx b/src/form/fields/StorageUploadField.tsx
index 332c5f1..51c63be 100644
--- a/src/form/fields/StorageUploadField.tsx
+++ b/src/form/fields/StorageUploadField.tsx
@@ -101,6 +101,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
     },
     thumbnailCloseIcon: {
         position: "absolute",
+        borderRadius: "9999px",
         top: -8,
         right: -8,
         zIndex: 100,
@@ -720,8 +721,10 @@ export function StorageItemPreview({
                 variant={"outlined"}>
 
                 {!disabled &&
+
+                <a
+                    className={classes.thumbnailCloseIcon}>
                     <IconButton
-                        className={classes.thumbnailCloseIcon}
                         size={"small"}
                         onClick={(event) => {
                             event.stopPropagation();
@@ -729,6 +732,7 @@ export function StorageItemPreview({
                         }}>
                         <ClearIcon fontSize={"small"}/>
                     </IconButton>
+                </a>
                 }
 
                 {value &&
diff --git a/src/models/collections.ts b/src/models/collections.ts
index cf7a58b..68d726a 100644
--- a/src/models/collections.ts
+++ b/src/models/collections.ts
@@ -1,5 +1,4 @@
 import { Entity, EntitySchema } from "./entities";
-import React from "react";
 import { CMSAppContext } from "../contexts";
 import { User } from "./user";
 
diff --git a/src/models/entities.ts b/src/models/entities.ts
index b44ca24..5d1a7e5 100644
--- a/src/models/entities.ts
+++ b/src/models/entities.ts
@@ -1,4 +1,3 @@
-import React from "react";
 import { CMSAppContext } from "../contexts";
 import { EnumValues, PropertiesOrBuilder } from "./properties";
 
@@ -36,6 +35,7 @@ export interface EntitySchema<M extends { [Key: string]: any } = any> {
      * When creating a new entity, set some values as already initialized
      */
     defaultValues?: any;
+
     /**
      * Array of builders for rendering additional panels in an entity view.
      * Useful if you need to render custom views
diff --git a/src/models/fields.tsx b/src/models/fields.tsx
index 304da30..98d7300 100644
--- a/src/models/fields.tsx
+++ b/src/models/fields.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { EntitySchema, EntityValues } from "./entities";
 import {
     ArrayProperty,
diff --git a/src/models/properties.ts b/src/models/properties.ts
index 8687103..abb0821 100644
--- a/src/models/properties.ts
+++ b/src/models/properties.ts
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { FieldProps } from "./fields";
 import { PreviewComponentProps } from "../preview";
diff --git a/src/preview/components/ImagePreview.tsx b/src/preview/components/ImagePreview.tsx
index 179103d..78511db 100644
--- a/src/preview/components/ImagePreview.tsx
+++ b/src/preview/components/ImagePreview.tsx
@@ -32,6 +32,7 @@ const useImageStyles = makeStyles<Theme, { imageSize: number }>(theme => createS
             maxHeight: "100%"
         },
         previewIcon: {
+            borderRadius: "9999px",
             position: "absolute",
             bottom: -4,
             right: -4,
@@ -87,15 +88,17 @@ export default function ImagePreview({ size, url }: ImagePreviewProps) {
                  style={imageStyle}/>
 
             {onHover && (
-                <IconButton
+                <a
                     className={imageClasses.previewIcon}
-                    size={"small"}
                     href={url}
                     rel="noopener noreferrer"
-                    target="_blank"
-                    onClick={(e) => e.stopPropagation()}>
-                    <OpenInNewIcon htmlColor={"#666"} fontSize={"small"}/>
-                </IconButton>
+                    target="_blank">
+                    <IconButton
+                        size={"small"}
+                        onClick={(e) => e.stopPropagation()}>
+                        <OpenInNewIcon htmlColor={"#666"} fontSize={"small"}/>
+                    </IconButton>
+                </a>
             )}
         </div>