feat(outliner): make DragHandle easier to click

unigraph-dev · Apr 13, 2022 · 728f918 · 728f918
1 parent 8acb3ac
commit 728f918
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx b/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 const DragHandleContainer = styled('div')({
     flex: '0 0 1rem',
     width: '1rem',
-    height: '1rem',
+    height: '1.2rem',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -23,13 +23,13 @@ const DragHandleContainer = styled('div')({
 export const DragHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => {
     return (
         <DragHandleContainer ref={ref} {...props}>
-            <svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <circle cx="9" cy="7" r="1.5" />
-                <circle cx="9" cy="12" r="1.5" />
-                <circle cx="9" cy="17" r="1.5" />
-                <circle cx="15" cy="7" r="1.5" />
-                <circle cx="15" cy="12" r="1.5" />
-                <circle cx="15" cy="17" r="1.5" />
+            <svg width="100%" height="100%" viewBox="0 0 20 24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="7" cy="7" r="1.5" />
+                <circle cx="7" cy="12" r="1.5" />
+                <circle cx="7" cy="17" r="1.5" />
+                <circle cx="13" cy="7" r="1.5" />
+                <circle cx="13" cy="12" r="1.5" />
+                <circle cx="13" cy="17" r="1.5" />
             </svg>
         </DragHandleContainer>
     );

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx b/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx
@@ -289,7 +289,7 @@ export function Outline({
                 ref={setDragSource}
                 style={{
                     visibility: hover ? 'visible' : 'hidden',
-                    transform: 'translateY(0.1rem)', // visual fine tune
+                    transform: 'translateY(0.2rem)', // visual fine tune
                 }}
             />
             <Toggle