From 58737f696b5a8bbb473cac0251e4e322ed1f5d27 Mon Sep 17 00:00:00 2001
From: Sam Mason <sam@samason.uk>
Date: Tue, 7 Jun 2022 19:41:02 +0100
Subject: [PATCH 1/4] move mono font-family so it doesn't apply to cancel help
 text

---
 src/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.scss b/src/index.scss
index c67aab8..d4a095e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -30,7 +30,6 @@ body {
     display: grid;
     grid-template-columns: auto auto 1fr;
     align-items: center;
-    font-family: 'Roboto Mono', monospace;
     row-gap: 0.5rem;
 
     .line-annotations {
@@ -62,6 +61,7 @@ body {
     }
 
     .line-number {
+      font-family: 'Roboto Mono', monospace;
       grid-column: 2;
       color: gray;
       text-align: right;

From 72c57511e3f86dc04c2ff71f92e4c512bbb8857d Mon Sep 17 00:00:00 2001
From: Sam Mason <sam@samason.uk>
Date: Tue, 7 Jun 2022 19:45:05 +0100
Subject: [PATCH 2/4] add more information on how to complete drawing an arrow

a lot of the CSS didn't seem to be doing much so removed it, then again it's
been a while since I've done any fontend work
---
 src/components/CodeAnnotations.tsx | 19 +++++++++++--------
 src/index.scss                     | 29 +++++++++--------------------
 2 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/CodeAnnotations.tsx b/src/components/CodeAnnotations.tsx
index b2a3ff2..74b4d1f 100644
--- a/src/components/CodeAnnotations.tsx
+++ b/src/components/CodeAnnotations.tsx
@@ -25,7 +25,7 @@ export default function CodeAnnotations({
     >
       <ArrowDrawingProvider>
         <Svg />
-        <DrawingCancelationButton />
+        <DrawingCompletion />
         <SelectionPopover />
       </ArrowDrawingProvider>
     </ContainerDiv>
@@ -95,18 +95,21 @@ function Markers() {
   )
 }
 
-function DrawingCancelationButton() {
+function DrawingCompletion() {
   const currentArrow = useCurrentArrowDrawing()
   const drawing = useDrawingEventHandlers()
   if (!currentArrow) {
     return null
   }
   return (
-    <button
-      className='drawing-cancelation-button'
-      onClick={() => drawing.cancelArrow()}
-    >
-      To cancel the current arrow, hit <kbd>esc</kbd> or click here
-    </button>
+    <div className="drawing-completion">
+      Click on a second highlight to complete arrow.
+      {" "}
+      <button
+        onClick={() => drawing.cancelArrow()}
+      >
+        Click here to cancel or hit <kbd>Esc</kbd>
+      </button>
+    </div>
   )
 }
diff --git a/src/index.scss b/src/index.scss
index d4a095e..3fc2b4e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -92,29 +92,18 @@ body {
       height: 100%;
       mix-blend-mode: multiply;
     }
-
-    .drawing-cancelation-button {
-      pointer-events: auto;
-      position: sticky;
-      bottom: 1rem;
-      left: 1rem;
-      font-size: 1rem;
-      max-width: 10rem;
-      text-align: left;
-      outline: 0;
-      padding: 0.5rem;
-      margin: 0;
-      border: 1px solid black;
-      border-radius: 0.25rem;
-      background: #fff;
-
-      &:hover {
-        background: #eee;
-      }
-    }
   }
 }
 
+.drawing-completion {
+  pointer-events: auto;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  background: #fff;
+  padding: 8px 0;
+}
+
 .popover {
   --top: auto;
   --left: auto;

From 964c5ed1e9cc5b6a92b336ffcd365560bdcbb10c Mon Sep 17 00:00:00 2001
From: Sam Mason <sam@samason.uk>
Date: Wed, 15 Jun 2022 18:16:43 +0100
Subject: [PATCH 3/4] rename and restyle completion popover

---
 src/components/CodeAnnotations.tsx |  6 +++---
 src/index.scss                     | 10 +++++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/CodeAnnotations.tsx b/src/components/CodeAnnotations.tsx
index 74b4d1f..06d6402 100644
--- a/src/components/CodeAnnotations.tsx
+++ b/src/components/CodeAnnotations.tsx
@@ -25,7 +25,7 @@ export default function CodeAnnotations({
     >
       <ArrowDrawingProvider>
         <Svg />
-        <DrawingCompletion />
+        <DrawingCompletionPopover />
         <SelectionPopover />
       </ArrowDrawingProvider>
     </ContainerDiv>
@@ -95,14 +95,14 @@ function Markers() {
   )
 }
 
-function DrawingCompletion() {
+function DrawingCompletionPopover() {
   const currentArrow = useCurrentArrowDrawing()
   const drawing = useDrawingEventHandlers()
   if (!currentArrow) {
     return null
   }
   return (
-    <div className="drawing-completion">
+    <div className="drawing-completion-popover">
       Click on a second highlight to complete arrow.
       {" "}
       <button
diff --git a/src/index.scss b/src/index.scss
index 3fc2b4e..44059b5 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -95,13 +95,17 @@ body {
   }
 }
 
-.drawing-completion {
+.drawing-completion-popover {
   pointer-events: auto;
   position: sticky;
   bottom: 0;
   left: 0;
-  background: #fff;
-  padding: 8px 0;
+  background: #ddf7ff;
+  border: 1px solid #447;
+  padding: 0.5rem 0;
+  max-width: 20rem;
+  border-radius: 0.25rem;
+  text-align: center;
 }
 
 .popover {

From d34968bf9b2509756bc15b94d8a14ebd695f0cf3 Mon Sep 17 00:00:00 2001
From: Sam Mason <sam@samason.uk>
Date: Tue, 21 Jun 2022 17:58:44 +0100
Subject: [PATCH 4/4] switch back to original 1rem margin around popover

not sure why I removed these!
---
 src/index.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 44059b5..ad7d7fc 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -98,8 +98,8 @@ body {
 .drawing-completion-popover {
   pointer-events: auto;
   position: sticky;
-  bottom: 0;
-  left: 0;
+  bottom: 1rem;
+  left: 1rem;
   background: #ddf7ff;
   border: 1px solid #447;
   padding: 0.5rem 0;