feat(editor): 💄 UI bump

apps/builder/components/shared/Graph/Endpoints/SourceEndpoint.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from '@chakra-ui/react'
+import { BoxProps, Flex } from '@chakra-ui/react'
 import { useGraph } from 'contexts/GraphContext'
 import { Source } from 'models'
 import React, { MouseEvent, useEffect, useRef, useState } from 'react'
@@ -10,7 +10,12 @@ export const SourceEndpoint = ({
   source: Source
 }) => {
   const [ranOnce, setRanOnce] = useState(false)
-  const { setConnectingIds, addSourceEndpoint, blocksCoordinates } = useGraph()
+  const {
+    setConnectingIds,
+    addSourceEndpoint,
+    blocksCoordinates,
+    previewingEdge,
+  } = useGraph()
   const ref = useRef<HTMLDivElement | null>(null)
 
   const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => {
@@ -35,19 +40,35 @@ export const SourceEndpoint = ({
     <Flex
       ref={ref}
       data-testid="endpoint"
-      boxSize="18px"
+      boxSize="32px"
       rounded="full"
       onMouseDownCapture={handleMouseDown}
       cursor="copy"
-      borderWidth="1px"
-      borderColor="gray.400"
-      bgColor="white"
       justify="center"
       align="center"
       pointerEvents="all"
       {...props}
     >
-      <Box bgColor="gray.400" rounded="full" boxSize="6px" />
+      <Flex
+        boxSize="20px"
+        justify="center"
+        align="center"
+        bgColor="gray.100"
+        rounded="full"
+      >
+        <Flex
+          boxSize="13px"
+          rounded="full"
+          borderWidth="3.5px"
+          shadow={`sm`}
+          borderColor={
+            previewingEdge?.from.stepId === source.stepId &&
+            previewingEdge.from.itemId === source.itemId
+              ? 'blue.300'
+              : 'blue.200'
+          }
+        />
+      </Flex>
     </Flex>
   )
 }