Storage icons fix

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 &&

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";
 

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

src/models/fields.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { EntitySchema, EntityValues } from "./entities";
 import {
     ArrayProperty,

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";

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>