From 71cc860e775c815d44fd8db69f1911bf177a41d6 Mon Sep 17 00:00:00 2001
From: liuyangxing <liuyangxing@bytedance.com>
Date: Fri, 28 Feb 2025 11:23:20 +0800
Subject: [PATCH] feat(free-demo): beautify minimap style

---
 apps/demo-free-layout/src/components/tools/index.tsx |  2 +-
 apps/demo-free-layout/src/hooks/use-editor-props.tsx | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/demo-free-layout/src/components/tools/index.tsx b/apps/demo-free-layout/src/components/tools/index.tsx
index deb715aa..a05c1d0a 100644
--- a/apps/demo-free-layout/src/components/tools/index.tsx
+++ b/apps/demo-free-layout/src/components/tools/index.tsx
@@ -21,7 +21,7 @@ export const DemoTools = () => {
   const { history, playground } = useClientContext();
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
-  const [minimapVisible, setMinimapVisible] = useState(false);
+  const [minimapVisible, setMinimapVisible] = useState(true);
   useEffect(() => {
     const disposable = history.undoRedoService.onChange(() => {
       setCanUndo(history.canUndo());
diff --git a/apps/demo-free-layout/src/hooks/use-editor-props.tsx b/apps/demo-free-layout/src/hooks/use-editor-props.tsx
index 8d0657be..d460b200 100644
--- a/apps/demo-free-layout/src/hooks/use-editor-props.tsx
+++ b/apps/demo-free-layout/src/hooks/use-editor-props.tsx
@@ -134,18 +134,18 @@ export function useEditorProps(
             canvasWidth: 182,
             canvasHeight: 102,
             canvasPadding: 50,
-            canvasBackground: 'rgba(245, 245, 245, 1)',
+            canvasBackground: 'rgba(242, 243, 245, 1)',
             canvasBorderRadius: 10,
-            viewportBackground: 'rgba(235, 235, 235, 1)',
+            viewportBackground: 'rgba(255, 255, 255, 1)',
             viewportBorderRadius: 4,
-            viewportBorderColor: 'rgba(201, 201, 201, 1)',
+            viewportBorderColor: 'rgba(6, 7, 9, 0.10)',
             viewportBorderWidth: 1,
-            viewportBorderDashLength: 2,
-            nodeColor: 'rgba(255, 255, 255, 1)',
+            viewportBorderDashLength: undefined,
+            nodeColor: 'rgba(0, 0, 0, 0.10)',
             nodeBorderRadius: 2,
             nodeBorderWidth: 0.145,
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
-            overlayColor: 'rgba(255, 255, 255, 0)',
+            overlayColor: 'rgba(255, 255, 255, 0.55)',
           },
           inactiveDebounceTime: 1,
         }),