Chart visual style adjustment (#971)

* Adjust area fill opacity on line charts

* Light gray border on tooltips
This commit is contained in:
Marshall Polaris 2022-09-30 00:03:31 -07:00 committed by GitHub
parent 95c47aba1a
commit 608ee7b865
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions

View File

@ -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 }}
>

View File

@ -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"