From 08f8fe335fbd5409ef7ff7e9d89af4aaf3bfd72f Mon Sep 17 00:00:00 2001
From: liuyangxing <liuyangxing@bytedance.com>
Date: Fri, 21 Feb 2025 16:10:52 +0800
Subject: [PATCH] feat(free-demo): beautify tools style

---
 apps/demo-free-layout/src/components/add-node/index.tsx      | 4 ++--
 apps/demo-free-layout/src/components/tools/auto-layout.tsx   | 4 +++-
 apps/demo-free-layout/src/components/tools/index.tsx         | 5 +++++
 .../demo-free-layout/src/components/tools/minimap-switch.tsx | 2 ++
 apps/demo-free-layout/src/components/tools/save.tsx          | 4 ++--
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/demo-free-layout/src/components/add-node/index.tsx b/apps/demo-free-layout/src/components/add-node/index.tsx
index 1f2e3f32..b5871783 100644
--- a/apps/demo-free-layout/src/components/add-node/index.tsx
+++ b/apps/demo-free-layout/src/components/add-node/index.tsx
@@ -12,7 +12,7 @@ export const AddNode = (props: { disabled: boolean }) => {
   return (
     <Popover
       visible={visible}
-      onVisibleChange={props.disabled ? () => {} : setVisible}
+      onVisibleChange={props.disabled ? () => { } : setVisible}
       content={!props.disabled && <NodeList />}
       placement="right"
       trigger="click"
@@ -21,7 +21,7 @@ export const AddNode = (props: { disabled: boolean }) => {
         padding: 0,
       }}
     >
-      <Button icon={<IconPlus />} color="highlight" disabled={props.disabled}>
+      <Button icon={<IconPlus />} color="highlight" style={{ backgroundColor: "rgba(171,181,255,0.3)", borderRadius: "8px" }} disabled={props.disabled}>
         Add Node
       </Button>
     </Popover>
diff --git a/apps/demo-free-layout/src/components/tools/auto-layout.tsx b/apps/demo-free-layout/src/components/tools/auto-layout.tsx
index 0e2d5a4c..614090e6 100644
--- a/apps/demo-free-layout/src/components/tools/auto-layout.tsx
+++ b/apps/demo-free-layout/src/components/tools/auto-layout.tsx
@@ -26,7 +26,9 @@ export const AutoLayout = () => {
 
   return (
     <Tooltip content={'Auto Layout'}>
-      <IconButton onClick={autoLayout} icon={icon} />
+      <IconButton
+        type="tertiary"
+        theme="borderless" onClick={autoLayout} icon={icon} />
     </Tooltip>
   );
 };
diff --git a/apps/demo-free-layout/src/components/tools/index.tsx b/apps/demo-free-layout/src/components/tools/index.tsx
index 66b7fc7f..18bb4ff1 100644
--- a/apps/demo-free-layout/src/components/tools/index.tsx
+++ b/apps/demo-free-layout/src/components/tools/index.tsx
@@ -49,6 +49,8 @@ export const DemoTools = () => {
         <Readonly />
         <Tooltip content="Undo">
           <IconButton
+            type="tertiary"
+            theme="borderless"
             icon={<IconUndo />}
             disabled={!canUndo}
             onClick={() => history.undo()}
@@ -56,6 +58,8 @@ export const DemoTools = () => {
         </Tooltip>
         <Tooltip content="Redo">
           <IconButton
+            type="tertiary"
+            theme="borderless"
             icon={<IconRedo />}
             disabled={!canRedo}
             onClick={() => history.redo()}
@@ -63,6 +67,7 @@ export const DemoTools = () => {
         </Tooltip>
         <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
         <AddNode disabled={playground.config.readonly} />
+        <Divider layout="vertical" style={{ height: '16px' }} margin={3} />
         <Save disabled={playground.config.readonly} />
       </ToolSection>
     </ToolContainer>
diff --git a/apps/demo-free-layout/src/components/tools/minimap-switch.tsx b/apps/demo-free-layout/src/components/tools/minimap-switch.tsx
index ad7e56b8..b6665c61 100644
--- a/apps/demo-free-layout/src/components/tools/minimap-switch.tsx
+++ b/apps/demo-free-layout/src/components/tools/minimap-switch.tsx
@@ -11,6 +11,8 @@ export const MinimapSwitch = (props: {
   return (
     <Tooltip content="Minimap">
       <IconButton
+        type="tertiary"
+        theme="borderless"
         icon={<UIIconGridRectangle visible={minimapVisible} />}
         onClick={() => setMinimapVisible(!minimapVisible)}
       />
diff --git a/apps/demo-free-layout/src/components/tools/save.tsx b/apps/demo-free-layout/src/components/tools/save.tsx
index b10ec48f..a63483a5 100644
--- a/apps/demo-free-layout/src/components/tools/save.tsx
+++ b/apps/demo-free-layout/src/components/tools/save.tsx
@@ -42,14 +42,14 @@ export function Save(props: { disabled: boolean }) {
 
   if (errorCount === 0) {
     return (
-      <Button disabled={props.disabled} onClick={onSave}>
+      <Button disabled={props.disabled} onClick={onSave} style={{ backgroundColor: "rgba(171,181,255,0.3)", borderRadius: "8px" }}>
         Save
       </Button>
     );
   }
   return (
     <Badge count={errorCount} position="rightTop" type="danger">
-      <Button type="danger" disabled={props.disabled} onClick={onSave}>
+      <Button type="danger" disabled={props.disabled} onClick={onSave} style={{ backgroundColor: "rgba(255, 179, 171, 0.3)", borderRadius: "8px" }} > 
         Save
       </Button>
     </Badge>