Updates bullet colour to match node colour in graph (#2)

* Updates bullet colour to match node colour in graph

* Version bump to v1.2.0

* Slightly more consistent padding

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-recoil-flow",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shows a graph of the current recoil state",
   "main": "dist/preset.js",
   "scripts": {

src/flow/info.tsx

@@ -17,6 +17,7 @@ const RecoilNodeList = ({
         gap: 10px;
         overflow: auto;
         margin: 0;
+        padding: 15px;
         padding-top: 10px;
         padding-bottom: 10px;
       `}
@@ -26,8 +27,20 @@ const RecoilNodeList = ({
           key={node.id}
           css={css`
             cursor: pointer;
-            fontsize: 1rem;
+            font-size: 1rem;
             word-break: break-all;
+            display: flex;
+            align-items: center;
+
+            &::before {
+              --size: 10px;
+              content: "";
+              width: var(--size);
+              height: var(--size);
+              border-radius: var(--size);
+              background-color: ${node.fill};
+              margin-right: 15px;
+            }
 
             &:hover {
               text-decoration: underline;

stories/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react"
-import { useRecoilValue } from "recoil"
+import { useRecoilValue, useSetRecoilState } from "recoil"
 import "./button.css"
-import { SelectorOne, SelectorTwo } from "./testRecoilThings"
+import { AtomOne, SelectorOne, SelectorTwo } from "./testRecoilThings"
 
 interface ButtonProps {
   /**
@@ -43,6 +43,8 @@ export const Button = ({
   useRecoilValue(SelectorOne)
   useRecoilValue(SelectorTwo)
 
+  const increaseHelloCount = useSetRecoilState(AtomOne)
+
   return (
     <button
       type="button"
@@ -51,6 +53,10 @@ export const Button = ({
       )}
       style={{ backgroundColor }}
       {...props}
+      onClick={() => {
+        increaseHelloCount((current) => `${current}, Hello`)
+        props.onClick?.()
+      }}
     >
       {label}
     </button>