From d1fbfe2b43a4c0d617cfd3b1ace4180dcdf70862 Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 30 Sep 2022 00:02:12 -0700
Subject: [PATCH] Light gray border on tooltips

---
 web/components/charts/helpers.tsx                  | 2 +-
 web/components/portfolio/portfolio-value-graph.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index dec20940..ba9865b2 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -255,7 +255,7 @@ export const TooltipContainer = (props: {
     <div
       className={clsx(
         className,
-        'pointer-events-none absolute z-10 whitespace-pre rounded bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
+        'pointer-events-none absolute z-10 whitespace-pre rounded border border-gray-200 bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
       )}
       style={{ margin: MARGIN_STYLE, ...pos }}
     >
diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
index 6ed5d195..e329457d 100644
--- a/web/components/portfolio/portfolio-value-graph.tsx
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -105,7 +105,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         sliceTooltip={({ slice }) => {
           handleGraphDisplayChange(slice.points[0].data.yFormatted)
           return (
-            <div className="rounded bg-white px-4 py-2 opacity-80">
+            <div className="rounded border border-gray-200 bg-white px-4 py-2 opacity-80">
               <div
                 key={slice.points[0].id}
                 className="text-xs font-semibold sm:text-sm"