From 608ee7b865d85d11d9e4f3e86428658a3dfc191c Mon Sep 17 00:00:00 2001
From: Marshall Polaris <marshall@pol.rs>
Date: Fri, 30 Sep 2022 00:03:31 -0700
Subject: [PATCH] Chart visual style adjustment (#971)

* Adjust area fill opacity on line charts

* Light gray border on tooltips
---
 web/components/charts/helpers.tsx                  | 4 ++--
 web/components/portfolio/portfolio-value-graph.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/components/charts/helpers.tsx b/web/components/charts/helpers.tsx
index acd88a4f..ba9865b2 100644
--- a/web/components/charts/helpers.tsx
+++ b/web/components/charts/helpers.tsx
@@ -111,7 +111,7 @@ export const AreaWithTopStroke = <P,>(props: {
         py1={py1}
         curve={curve}
         fill={color}
-        opacity={0.3}
+        opacity={0.2}
       />
       <LinePath data={data} px={px} py={py1} curve={curve} stroke={color} />
     </g>
@@ -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"