@firecms/core 3.0.0-canary.77 → 3.0.0-canary.79

package/dist/preview/PropertyPreviewProps.d.ts

@@ -37,4 +37,9 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      * Additional properties set by the developer
      */
     customProps?: CustomProps;
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
 }

package/dist/preview/components/StorageThumbnail.d.ts

@@ -4,10 +4,11 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 /**
  * @group Preview components
  */
 export declare const StorageThumbnail: React.FunctionComponent<StorageThumbnailProps>;
-export declare function StorageThumbnailInternal({ storeUrl, storagePathOrDownloadUrl, size }: StorageThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size }: StorageThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/preview/components/UrlComponentPreview.d.ts

@@ -4,9 +4,10 @@ import { PreviewSize } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function UrlComponentPreview({ url, previewType, size, hint }: {
+export declare function UrlComponentPreview({ url, previewType, size, hint, interactive }: {
     url: string;
     previewType?: PreviewType;
     size: PreviewSize;
     hint?: string;
+    interactive?: boolean;
 }): React.ReactElement;

package/dist/types/auth.d.ts

@@ -32,7 +32,7 @@ export type AuthController<UserType extends User = any, ExtraData extends any =
     /**
      * Sign out
      */
-    signOut: () => void;
+    signOut: () => Promise<void>;
     /**
      * Error initializing the authentication
      */

package/dist/types/plugins.d.ts

@@ -80,6 +80,12 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         collectionActionsProps?: COL_ACTIONS_PROPS;
         CollectionActionsStart?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS>[];
         collectionActionsStartProps?: COL_ACTIONS_START__PROPS;
+        blockSearch?: (props: {
+            context: FireCMSContext;
+            path: string;
+            collection: EC;
+            parentCollectionIds?: string[];
+        }) => boolean;
         showTextSearchBar?: (props: {
             context: FireCMSContext;
             path: string;

package/dist/types/properties.d.ts

@@ -628,6 +628,11 @@ export type StorageConfig = {
      * after it has been resolved.
      */
     postProcess?: (pathOrUrl: string) => Promise<string>;
+    /**
+     * You can use this prop in order to provide a custom preview URL.
+     * Useful when the file's path is different from the original field value
+     */
+    previewUrl?: (fileName: string) => string;
 };
 /**
  * @group Entity properties

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.77",
+    "version": "3.0.0-canary.79",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-canary.77",
-        "@firecms/ui": "^3.0.0-canary.77",
+        "@firecms/formex": "^3.0.0-canary.79",
+        "@firecms/ui": "^3.0.0-canary.79",
         "@fontsource/jetbrains-mono": "^5.0.20",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
@@ -85,17 +85,8 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-measure": "^2.0.12",
-        "@typescript-eslint/eslint-plugin": "^7.15.0",
-        "@typescript-eslint/parser": "^7.15.0",
         "@vitejs/plugin-react": "^4.3.1",
         "cross-env": "^7.0.3",
-        "eslint": "^9.6.0",
-        "eslint-config-standard": "^17.1.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-n": "^16.6.2",
-        "eslint-plugin-promise": "^6.4.0",
-        "eslint-plugin-react": "^7.34.3",
-        "eslint-plugin-react-hooks": "^4.6.2",
         "firebase": "^10.12.2",
         "jest": "^29.7.0",
         "npm-run-all": "^4.1.5",
@@ -111,7 +102,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "2eb2e7d18eb036aa68f2c6c633093fc67417cba5",
+    "gitHead": "1007170266579ae963305dff219dfd57c5e97bc7",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -149,16 +149,14 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
+                <div
+                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
 
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>

package/src/components/common/useTableSearchHelper.ts

@@ -21,33 +21,43 @@ export function useTableSearchHelper<M extends Record<string, any>>({
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
-    if (customizationController?.plugins) {
-        const addTextSearchClickListener = dataSource?.initTextSearch || customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    const props = {
+        context,
+        path: fullPath,
+        collection,
+        parentCollectionIds
+    };
+
+    const searchBlocked = customizationController.plugins?.find(p => {
+        return p.collectionView?.blockSearch?.(props);
+    });
+
+    const addTextSearchClickListener = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    if (addTextSearchClickListener) {
 
         onTextSearchClick = addTextSearchClickListener
             ? () => {
                 setTextSearchLoading(true);
                 const promises: Promise<boolean>[] = [];
-                if (dataSource?.initTextSearch) {
-                    promises.push(dataSource.initTextSearch({
-                        context,
-                        path: fullPath,
-                        collection,
-                        parentCollectionIds
-                    }));
+                if (dataSource?.initTextSearch && !searchBlocked) {
+                    promises.push(dataSource.initTextSearch(props));
+                }
+                if (searchBlocked) {
+                    customizationController.plugins?.forEach(p => {
+                        if (p.collectionView?.onTextSearchClick)
+                            promises.push(p.collectionView.onTextSearchClick({
+                                context,
+                                path: fullPath,
+                                collection,
+                                parentCollectionIds
+                            }));
+                    })
                 }
-                customizationController.plugins?.forEach(p => {
-                    if (p.collectionView?.onTextSearchClick)
-                        promises.push(p.collectionView.onTextSearchClick({
-                            context,
-                            path: fullPath,
-                            collection,
-                            parentCollectionIds
-                        }));
-                    return Promise.resolve(true);
-                })
                 return Promise.all(promises)
                     .then((res: boolean[]) => {
                         if (res.every(Boolean)) setTextSearchInitialised(true);

package/src/contexts/DialogsProvider.tsx

@@ -18,14 +18,14 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
         if (dialogEntries.length === 0)
             return;
 
-        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        const updatedPanels = [...dialogEntriesRef.current.slice(0, -1)];
         updateDialogEntries(updatedPanels);
 
     }, [dialogEntries]);
 
     const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
 
-        const updatedPanels = [...dialogEntries, dialogEntry];
+        const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
 
         return {

package/src/core/DefaultAppBar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Link as ReactLink } from "react-router-dom";
+import { Link as ReactLink, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
@@ -71,6 +71,8 @@ export const DefaultAppBar = function DefaultAppBar({
         toggleMode
     } = useModeController();
 
+    const navigate = useNavigate();
+
     const largeLayout = useLargeLayout();
 
     const user = userProp ?? authController.user;
@@ -161,7 +163,11 @@ export const DefaultAppBar = function DefaultAppBar({
 
                     {dropDownActions}
 
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
+                    {!dropDownActions && <MenuItem onClick={async () => {
+                        await authController.signOut();
+                        // replace current route with home
+                        navigate("/");
+                    }}>
                         <LogoutIcon/>
                         Log Out
                     </MenuItem>}

package/src/form/components/StorageItemPreview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
+import { ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cls, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 interface StorageItemPreviewProps {
@@ -13,6 +13,8 @@ interface StorageItemPreviewProps {
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
+    placeholder?: boolean;
+    className?: string;
 }
 
 export function StorageItemPreview({
@@ -22,14 +24,17 @@ export function StorageItemPreview({
                                        onRemove,
                                        disabled,
                                        size,
+                                       placeholder,
+                                       className
                                    }: StorageItemPreviewProps) {
 
     return (
         <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
+            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            className)}>
 
-            {!disabled &&
+            {!placeholder && !disabled &&
                 <div
                     className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
 
@@ -47,16 +52,24 @@ export function StorageItemPreview({
                 </div>
             }
 
-            {value &&
+            {!placeholder && value &&
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                        // entity={entity}
+                                     interactive={false}
                                      size={size}/>
                 </ErrorBoundary>
             }
 
+            {placeholder &&
+                <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center w-full h-full">
+                    <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
+                </div>
+            }
+
 
         </div>
     );

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -21,6 +21,7 @@ import {
 } from "@firecms/ui";
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
+import { getIn } from "@firecms/formex";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -52,9 +53,13 @@ export function KeyValueFieldBinding({
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
+
+    const initialValues = getIn(context.formex.initialValues, propertyKey);
+
     const mapFormView = <MapEditView value={value}
                                      setValue={setValue}
                                      disabled={disabled}
+                                     initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
     const title = <LabelWithIcon
@@ -84,6 +89,7 @@ export function KeyValueFieldBinding({
 
 interface MapEditViewParams<T extends Record<string, any>> {
     value?: T;
+    initialValue?: T;
     setValue: (value: (T | null)) => void;
     fieldName?: string,
     disabled?: boolean
@@ -91,14 +97,15 @@ interface MapEditViewParams<T extends Record<string, any>> {
 
 function MapEditView<T extends Record<string, any>>({
                                                         value,
+                                                        initialValue,
                                                         setValue,
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
-        Object.keys(value ?? {}).map((key) => [getRandomId(), {
+        Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
-            dataType: getDataType(value?.[key]) ?? "string"
+            dataType: getDataType(initialValue?.[key]) ?? "string"
         }])
     );
 
@@ -121,8 +128,6 @@ function MapEditView<T extends Record<string, any>>({
         setInternalState(newRowIds);
     }, [value]);
 
-    const originalValue = React.useRef<T>(value ?? {} as T);
-
     const updateDataType = (rowId: number, dataType: DataType) => {
         if (!rowId) {
             console.warn("No key selected for data type update");
@@ -168,7 +173,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
+                        if (typeof initialValue === "object" && fieldKey in initialValue) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {
@@ -186,7 +191,7 @@ function MapEditView<T extends Record<string, any>>({
                                            value={value ?? {} as T}
                                            onDeleteClick={() => {
                                                const newValue = { ...(value ?? {}) as T };
-                                               if (originalValue.current && fieldKey in originalValue.current) {
+                                               if (initialValue && fieldKey in initialValue) {
                                                    // @ts-ignore
                                                    newValue[fieldKey] = undefined;
                                                } else {
@@ -305,7 +310,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -375,7 +380,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             <Typography key={rowId.toString()}
                         component={"div"}
                         className="font-mono flex flex-row gap-1">
-                <div className="w-[200px] max-w-[25%]">
+                <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
                         placeholder={"key"}
@@ -389,32 +394,32 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="flex-grow">
                     {(dataType !== "map" && dataType !== "array") && buildInput(entryValue, fieldKey, dataType)}
                 </div>
-                <Menu
-                    trigger={<IconButton size={"small"}
-                                         className="h-7 w-7">
-                        <ArrowDropDownIcon/>
-                    </IconButton>}
-                >
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("array")}>array</MenuItem>
-                </Menu>
-
-                <IconButton aria-label="delete"
-                            size={"small"}
-                            onClick={onDeleteClick}
-                            className="h-7 w-7">
-                    <RemoveIcon size={"small"}/>
-                </IconButton>
+                <div className={"flex flex-col"}>
+                    <Menu
+                        trigger={<IconButton size={"smallest"}>
+                            <ArrowDropDownIcon size={"small"}/>
+                        </IconButton>}
+                    >
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                    </Menu>
+
+                    <IconButton aria-label="delete"
+                                size={"smallest"}
+                                onClick={onDeleteClick}>
+                        <RemoveIcon size={"smallest"}/>
+                    </IconButton>
+                </div>
             </Typography>
 
             {(dataType === "map" || dataType === "array") && buildInput(entryValue, fieldKey, dataType)}
@@ -472,7 +477,7 @@ function ArrayKeyValueRow<T>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            onValueChange={(v) => {
                                                setValue(v as T);

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -383,6 +383,7 @@ export function StorageUpload({
                         >
                             <StorageItemPreview
                                 name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                placeholder={true}
                                 property={renderProperty}
                                 disabled={true}
                                 value={entry.storagePathOrDownloadUrl as string}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -46,7 +46,7 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
                                       title={property.name}/>}
                 disabled={disabled}
                 autoFocus={autoFocus}
-                size={"medium"}
+                size={"large"}
             />
 
             <FieldHelperText includeDescription={includeDescription}

package/src/preview/PropertyPreview.tsx

@@ -47,7 +47,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        // entity
+        interactive
     } = props;
 
     const property = resolveProperty({
@@ -84,12 +84,15 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content =
                         <UrlComponentPreview size={props.size}
                                              url={value}
+                                             interactive={interactive}
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
+                    interactive={interactive}
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
-                    storagePathOrDownloadUrl={value}/>;
+                    storagePathOrDownloadUrl={filePath}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
             } else {

package/src/preview/PropertyPreviewProps.tsx

@@ -46,4 +46,10 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
+
 }

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,8 +20,6 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
     if (size === "tiny") {
@@ -47,60 +45,50 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <img src={url}
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-            {onHover && <>
 
-                {navigator && <Tooltip title="Copy url to clipboard">
-                    <div
-                        className="rounded-full absolute bottom-[-4px] right-8">
-                        <IconButton
-                            variant={"filled"}
-                            size={"small"}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                return navigator.clipboard.writeText(url);
-                            }}>
-                            <ContentCopyIcon className={"text-gray-500"}
-                                             size={"small"}/>
-                        </IconButton>
-                    </div>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"small"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-gray-700 dark:text-gray-300"}
+                                         size={"small"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         variant={"filled"}
                         component={"a" as React.ElementType}
-                        style={{
-                            position: "absolute",
-                            bottom: -4,
-                            right: -4
-                        }}
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-500"}
+                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
                                        size={"small"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }