feat(free-demo): beautify tools style

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>

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>
   );
 };

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>

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)}
       />

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>