Merge remote-tracking branch 'leximpact/latchkey-ui'

src/lib/components/latchkeys/Arrow.svelte

@@ -190,9 +190,9 @@
     <text
       class="cursor-pointer fill-current text-gray-500 text-xs"
       dominant-baseline="hanging"
-      ><tspan class="font-mono p-8">{leaf.label}</tspan>
-      <tspan class="font-sans p-8" x={0} dy="1.2em"
-        >{aggregateValueFormatter.format(delta)}</tspan
+      ><tspan class="font-light p-8">{leaf.label}</tspan>
+      <tspan class="font-light p-8" x={0} dy="1.2em"
+        >{aggregateValueFormatter.format(leaf.delta[vectorIndex])}</tspan
       ></text
     >
   </g>
@@ -211,8 +211,8 @@
       <text
         class="fill-current text-gray-500 p-2 text-xs"
         dominant-baseline="hanging"
-        ><tspan class="font-mono">{aggregate.label}</tspan>
-        <tspan class="font-sans" x={0} dy="1.2em"
+        ><tspan class="font-light">{aggregate.label}</tspan>
+        <tspan class="font-light" x={0} dy="1.2em"
           >{aggregateValueFormatter.format(aggregate.delta[vectorIndex])}</tspan
         ></text
       >

src/lib/components/latchkeys/AxisX.svelte

@@ -16,13 +16,15 @@
 
   $: isBandwidth = typeof $xScale.bandwidth === "function"
 
-  $: tickVals = (Array.isArray(ticks)
+  $: tickVals = (
+    Array.isArray(ticks)
       ? ticks
       : isBandwidth
       ? $xScale.domain()
       : typeof ticks === "function"
       ? ticks($xScale.ticks())
-    : $xScale.ticks(ticks)) as [number, number][]
+      : $xScale.ticks(ticks)
+  ) as [number, number][]
 
   $: yRange0 = $yRange[0]
 </script>
@@ -71,14 +73,9 @@
 
   line,
   .tick line {
-    stroke: #aaa;
+    stroke: rgb(179, 179, 179);
     stroke-dasharray: 2;
   }
-
-  .tick text {
-    fill: #666;
-  }
-
   .tick .tick-mark,
   .baseline {
     stroke-dasharray: 0;

src/lib/components/latchkeys/AxisY.svelte

@@ -140,7 +140,7 @@
       {/if}
       {#if index > 0}
         <text
-          class="cursor-pointer fill-current font-extralight font-serif text-blue-900 text-sm"
+          class="cursor-pointer fill-current font-extralight font-serif text-le-bleu text-base hover:underline"
           dx={-9}
           dy={4}
           style="text-anchor: end;"

src/lib/components/latchkeys/Latchkey.svelte

@@ -168,7 +168,7 @@
 
 {#if xDomain.length > 0 && yDomain.length > 0}
   <div
-    class="bg-white mx-auto pb-0 pl-44 pr-24 pt-0 w-full"
+    class="bg-white mx-auto pb-0 mb-5 pl-44 pr-20 pt-0 w-full border-b border-gray-200"
     style="height: {1 + 4 * data.length + 3}rem;"
   >
     <LayerCake