@firecms/core 3.0.0-canary.26 → 3.0.0-canary.260

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
@@ -71,7 +71,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 variant={"text"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
-                startIcon={<DeleteIcon/>}
+                startIcon={<DeleteIcon size={"small"}/>}
                 onClick={onMultipleDeleteClick}
                 color={"primary"}
                 className="lg:w-20"
@@ -79,10 +79,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 ({selectedEntities?.length})
             </Button>
             : <IconButton
+                size={"small"}
                 color={"primary"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                 onClick={onMultipleDeleteClick}>
-                <DeleteIcon/>
+                <DeleteIcon size={"small"}/>
             </IconButton>;
         multipleDeleteButton =
             <Tooltip
@@ -124,7 +125,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     return (
         <>
-            {actions}
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
             {multipleDeleteButton}
             {addButton}
         </>

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import { toArray } from "../../util/arrays";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { ClearFilterSortButton } from "../ClearFilterSortButton";
+
+export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount: number;
+}
+
+export function EntityCollectionViewStartActions<M extends Record<string, any>>({
+                                                                                    collection,
+                                                                                    relativePath,
+                                                                                    parentCollectionIds,
+                                                                                    path,
+                                                                                    selectionController,
+                                                                                    tableController,
+                                                                                    collectionEntitiesCount
+                                                                                }: EntityCollectionViewStartActionsProps<M>) {
+
+    const context = useFireCMSContext();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+    const actions: React.ReactNode[] = [
+        <ClearFilterSortButton
+            key={"clear_filter"}
+            tableController={tableController}
+            enabled={!collection.forceFilter}/>
+    ];
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActionsStart) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps}/>
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            {actions}
+        </>
+    );
+}

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -7,19 +7,32 @@ export function useSelectionController<M extends Record<string, any> = any>(
 
     const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
 
-    const toggleEntitySelection = useCallback((entity: Entity<M>) => {
+    const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
-        if (selectedEntities.map(e => e.id).includes(entity.id)) {
-            onSelectionChange?.(entity, false);
-            newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+        if (newSelectedState === undefined) {
+            const isSelected = Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+            if (isSelected) {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
+            } else {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            }
         } else {
-            onSelectionChange?.(entity, true);
-            newValue = [...selectedEntities, entity];
+            if (newSelectedState) {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            } else {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
+            }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
-    const isEntitySelected = useCallback((entity: Entity<M>) => selectedEntities.map(e => e.id).includes(entity.id), [selectedEntities]);
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+    }, [selectedEntities]);
 
     return {
         selectedEntities,

package/src/components/EntityCollectionView/utils.ts

@@ -0,0 +1,19 @@
+export function addRecentId(collectionId: string, id: string) {
+    const recentIds = getRecentIds(collectionId);
+    const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
+    if (newRecentIds.length > 5) {
+        newRecentIds.pop();
+    }
+    saveSearchedIdsLocally(collectionId, newRecentIds);
+    return newRecentIds;
+}
+
+export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
+    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+}
+
+export function getRecentIds(collectionId: string): string[] {
+    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
+    if (!stored) return [];
+    return JSON.parse(stored);
+}

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
+    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+    //         // If our code view is mounted, perform selection
+    //         if (preRef.current) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //
+    //             const selection = window.getSelection();
+    //             const range = document.createRange();
+    //             range.selectNodeContents(preRef.current);
+    //             if (selection) {
+    //                 selection.removeAllRanges();
+    //                 selection.addRange(range);
+    //             }
+    //         }
+    //     }
+    // }, []);
+
+    // // Attach the global keydown listener when component mounts,
+    // // and remove it when it unmounts.
+    // useEffect(() => {
+    //     document.addEventListener("keydown", handleGlobalKeyDown);
+    //     return () => {
+    //         document.removeEventListener("keydown", handleGlobalKeyDown);
+    //     };
+    // }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.github}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        backgroundColor: "inherit"
+                    }}
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}

package/src/components/EntityPreview.tsx

@@ -7,12 +7,19 @@ import {
     getEntityImagePreviewPropertyKey,
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
+    getPropertyInPath,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
-import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import {
+    useAuthController,
+    useCustomizationController,
+    useNavigationController,
+    useSideEntityController
+} from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 export type EntityPreviewProps = {
@@ -20,10 +27,13 @@ export type EntityPreviewProps = {
     actions?: React.ReactNode,
     collection?: EntityCollection,
     hover?: boolean;
-    previewProperties?: string[],
-    disabled: undefined | boolean,
+    previewKeys?: string[],
+    disabled?: boolean,
     entity: Entity<any>,
-    includeEntityNavigation?: boolean,
+    includeId?: boolean,
+    includeTitle?: boolean,
+    includeEntityLink?: boolean,
+    includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -36,13 +46,17 @@ export function EntityPreview({
                                   disabled,
                                   hover,
                                   collection: collectionProp,
-                                  previewProperties,
+                                  previewKeys,
                                   onClick,
                                   size,
-                                  includeEntityNavigation,
-                                  entity
+                                  includeId = true,
+                                  includeTitle = true,
+                                  includeEntityLink = true,
+                                  includeImage = true,
+                                  entity,
                               }: EntityPreviewProps) {
 
+    const authController = useAuthController();
     const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
     const customizationController = useCustomizationController();
@@ -59,39 +73,46 @@ export function EntityPreview({
         collection,
         path: entity.path,
         values: entity.values,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1),
+        [previewKeys, resolvedCollection, size]);
 
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : undefined;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
-
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
 
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cn("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"tiny"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
-
-        <div className={"flex flex-col flex-grow w-full m-1"}>
-
-            {size !== "tiny" && (
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
+            {usedImageProperty && usedImageValue && <PropertyPreview property={usedImageProperty}
+                                                                     propertyKey={imagePropertyKey as string}
+                                                                     size={"small"}
+                                                                     value={usedImageValue}/>}
+            {(!usedImageProperty || !usedImageValue) && <IconForView collectionOrView={collection}
+                                                                     color={"primary"}
+                                                                     size={size}
+                                                                     className={"m-auto p-1"}/>}
+        </div>
+
+
+        <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
+
+            {size !== "small" && includeId && (
                 entity
-                    ? <div className={`${
-                        size !== "medium"
-                            ? "block whitespace-nowrap overflow-hidden truncate"
-                            : ""
-                    }`}>
+                    ? <div className={"block whitespace-nowrap overflow-hidden truncate"}>
                         <Typography variant={"caption"}
                                     color={"disabled"}
                                     className={"font-mono"}>
@@ -101,38 +122,39 @@ export function EntityPreview({
                     : <Skeleton/>)}
 
             {titleProperty && (
-                <div className={"my-0.5 text-sm font-medium"}>
+                <div className={"truncate my-0.5 text-sm font-medium"}>
                     {
                         entity
                             ? <PropertyPreview
                                 propertyKey={titleProperty as string}
                                 value={getValueInPath(entity.values, titleProperty)}
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                             : <SkeletonPropertyComponent
                                 property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
-                                size={"medium"}/>
+                                size={"large"}/>
                     }
                 </div>
             )}
 
             {restProperties && restProperties.map((key) => {
-                const childProperty = resolvedCollection.properties[key as string];
+                const childProperty = getPropertyInPath(resolvedCollection.properties, key);
                 if (!childProperty) return null;
 
+                const valueInPath = getValueInPath(entity.values, key);
                 return (
                     <div key={"ref_prev_" + key}
-                         className={restProperties.length > 1 ? "my-0.5" : "my-0"}>
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
                         {
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
-                                    value={getValueInPath(entity.values, key)}
+                                    value={valueInPath}
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"small"}/>
                                 : <SkeletonPropertyComponent
                                     property={childProperty as ResolvedProperty}
-                                    size={"tiny"}/>
+                                    size={"small"}/>
                         }
                     </div>
                 );
@@ -140,12 +162,12 @@ export function EntityPreview({
 
         </div>
 
-        {entity && includeEntityNavigation &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "tiny" ? "self-start" : ""}>
+        {entity && includeEntityLink &&
+            <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
+                    className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -178,16 +200,16 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       fullwidth = true,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -195,12 +217,13 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
-            "bg-white dark:bg-gray-900",
+        className={cls(
+            "bg-white dark:bg-surface-900",
+            "min-h-[42px]",
             fullwidth ? "w-full" : "",
             "items-center",
-            hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-            size === "tiny" ? "p-1" : "p-2",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+            size === "small" ? "p-1" : "px-2 py-1",
             "flex border rounded-lg",
             onClick ? "cursor-pointer" : "",
             defaultBorderMixin,
@@ -216,6 +239,4 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
     </div>;
 });
 
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-
-export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/EntityView.tsx

@@ -2,9 +2,10 @@ import React, { useMemo } from "react";
 import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
+import { useAuthController } from "../hooks";
 
 /**
  * @group Components
@@ -24,26 +25,28 @@ export function EntityView<M extends Record<string, any>>(
         className
     }: EntityViewProps<M>) {
 
+    const authController = useAuthController();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
         path,
         entityId: entity.id,
         values: entity.values,
-        fields: customizationController.propertyConfigs
-    }), [collection, path, entity]);
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;
 
     return (
         <div className={"w-full " + className}>
             <div className={"w-full mb-4"}>
-                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                     <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-gray-600">Id</span>
+                        <span className="pl-2 text-sm text-surface-600">Id</span>
                     </div>
                     <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                         <span className="flex-grow mr-2">{entity.id}</span>
                         {customizationController?.entityLinkBuilder &&
                             <a href={customizationController.entityLinkBuilder({ entity })}
@@ -58,16 +61,16 @@ export function EntityView<M extends Record<string, any>>(
                 </div>
                 {Object.entries(properties)
                     .map(([key, property]) => {
-                        const value = (entity.values)[key];
+                        const value = entity.values?.[key];
                         return (
                             <div
                                 key={`reference_previews_${key}`}
-                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
                                 <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
+                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
                                 </div>
                                 <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
+                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={value}

package/src/components/ErrorView.tsx

@@ -17,7 +17,7 @@ export interface ErrorViewProps {
  * @param title
  * @param error
  * @param tooltip
- * @constructor
+
  * @group Components
  */
 export function ErrorView({
@@ -26,13 +26,13 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.error("ErrorView", error)
+    // console.warn("ErrorView", error)
 
     const body = (
         <div
             className="flex items-center m-2">
-            <ErrorIcon size={"small"} color={"error"}/>
-            <div className="pl-2">
+            <ErrorIcon className={"mx-2"} size={"small"} color={"error"}/>
+            <div className="pl-4">
                 {title && <Typography
                     variant={"body2"}
                     className="font-medium">{title}</Typography>}

package/src/components/FireCMSLogo.tsx

@@ -14,59 +14,15 @@ export function FireCMSLogo({
     return (
         <svg
             width={width ?? "100%"} height={height ?? "100%"}
-            viewBox="0 0 599 599" version="1.1"
+            version="1.1"
             style={style}
             className={className}
-            xmlns="http://www.w3.org/2000/svg">
-            <defs>
-                <radialGradient cx="28.6213569%" cy="43.1133328%"
-                                fx="28.6213569%"
-                                fy="43.1133328%" r="71.5003456%"
-                                gradientTransform="translate(0.286214,0.431133),rotate(3.343450),scale(1.000000,0.996175),translate(-0.286214,-0.431133)"
-                                id="radialGradient-1">
-                    <stop stopColor="#FF5B79" offset="0%"/>
-                    <stop stopColor="#FA5574" offset="28.0930803%"/>
-                    <stop stopColor="#EC4C51" offset="44.7242531%"/>
-                    <stop stopColor="#9543C1" offset="71.4578165%"/>
-                    <stop stopColor="#3857B3" offset="100%"/>
-                </radialGradient>
-                <radialGradient cx="53.6205516%" cy="47.2473036%"
-                                fx="53.6205516%"
-                                fy="47.2473036%" r="50.8229649%"
-                                gradientTransform="translate(0.536206,0.472473),rotate(90.000000),scale(1.000000,1.206631),translate(-0.536206,-0.472473)"
-                                id="radialGradient-2">
-                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
-                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
-                          offset="75.3503173%"/>
-                    <stop stopColor="#0D060B" stopOpacity="0.437431709"
-                          offset="100%"/>
-                </radialGradient>
-                <radialGradient cx="53.8605015%" cy="48.1990423%"
-                                fx="53.8605015%"
-                                fy="48.1990423%" r="59.9151549%"
-                                gradientTransform="translate(0.538605,0.481990),rotate(180.000000),scale(1.000000,0.925027),translate(-0.538605,-0.481990)"
-                                id="radialGradient-3">
-                    <stop stopColor="#68294F" stopOpacity="0" offset="0%"/>
-                    <stop stopColor="#5E2548" stopOpacity="0.04641108"
-                          offset="84.0867343%"/>
-                    <stop stopColor="#FF0000" stopOpacity="0.567324765"
-                          offset="100%"/>
-                </radialGradient>
-            </defs>
-            <g id="Page-1" stroke="none" strokeWidth="1" fill="none"
-               fillRule="evenodd">
-                <g id="firecms_logo">
-                    <circle fill="url(#radialGradient-1)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                    <circle fill="url(#radialGradient-2)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                    <circle fill="url(#radialGradient-3)" cx="299.5"
-                            cy="299.5"
-                            r="299.5"/>
-                </g>
-            </g>
+            viewBox="0 0 583 583" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="291.5" cy="291.5" r="291.5" fill="#0070F4"/>
+            <ellipse cx="292" cy="291.5" rx="173" ry="173.5" fill="#FF3773"/>
+            <path
+                d="M465 291.5C465 268.847 460.525 246.416 451.831 225.487C443.137 204.558 430.394 185.542 414.329 169.524C398.265 153.506 379.194 140.8 358.204 132.131C337.215 123.462 314.719 119 292 119C269.281 119 246.785 123.462 225.796 132.131C204.806 140.8 185.735 153.506 169.671 169.524C153.606 185.542 140.863 204.558 132.169 225.487C123.475 246.416 119 268.847 119 291.5L292 291.5H465Z"
+                fill="#FFA400"/>
         </svg>
     );