style: align charts styling for light color scheme

pokt-foundation · Jun 24, 2024 · 246d9d7 · 246d9d7
1 parent 6a33de3
commit 246d9d7
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 12 deletions.
diff --git a/app/components/BarChart/BarChart.tsx b/app/components/BarChart/BarChart.tsx
@@ -28,8 +28,8 @@ const BarChart = ({ data, xAxisDataKey, yAxisDataKey }: BarChartProps) => {
         <Box
           p="sm"
           style={{
-            backgroundColor: theme.colors.dark[9],
-            border: `1px solid ${theme.colors.dark[4]}`,
+            backgroundColor: "var(--mantine-color-body)",
+            border: "1px solid var(--app-shell-border-color)",
           }}
         >
           <Text className="label">Date: {label}</Text>

diff --git a/app/components/Sparkline/Sparkline.module.css b/app/components/Sparkline/Sparkline.module.css
@@ -0,0 +1,5 @@
+.stop {stop-opacity: 0.01}
+
+@mixin dark-root {
+    .stop {stop-opacity: 0.1;}
+}
diff --git a/app/components/Sparkline/Sparkline.tsx b/app/components/Sparkline/Sparkline.tsx
@@ -11,6 +11,7 @@ import {
   Line,
 } from "recharts"
 import { type AxisDomain } from "recharts/types/util/types"
+import classes from "./Sparkline.module.css"
 import { ChartData } from "~/types/global"
 import { commify, formatNumberToSICompact } from "~/utils/formattingUtils"
 
@@ -41,8 +42,8 @@ const Sparkline = ({
         <Box
           p="sm"
           style={{
-            backgroundColor: theme.colors.dark[9],
-            border: `1px solid ${theme.colors.dark[4]}`,
+            backgroundColor: "var(--mantine-color-body)",
+            border: "1px solid var(--app-shell-border-color)",
           }}
         >
           <Text className="label">Date: {label}</Text>
@@ -76,7 +77,7 @@ const Sparkline = ({
         <defs>
           <linearGradient id="colorUv" x1="0" x2="0" y1="0" y2="1">
             <stop offset="5%" stopColor="#389F58" stopOpacity={0.1} />
-            <stop offset="95%" stopColor="#27292F" stopOpacity={0.1} />
+            <stop className={classes.stop} offset="95%" stopColor="#27292F" />
           </linearGradient>
         </defs>
         <CartesianGrid strokeDasharray="3 3" strokeWidth={0.2} vertical={false} />

diff --git a/app/routes/account.$accountId.billing.$invoiceId/components/InvoiceHeader/InvoiceHeader.tsx b/app/routes/account.$accountId.billing.$invoiceId/components/InvoiceHeader/InvoiceHeader.tsx
@@ -5,7 +5,6 @@ import {
   Stack,
   Text,
   Title,
-  useMantineTheme,
 } from "@mantine/core"
 import { NavLink, useParams } from "@remix-run/react"
 import React from "react"
@@ -19,7 +18,6 @@ type InvoiceHeaderProps = {
   charge?: Stripe.Charge
 }
 const InvoiceHeader = ({ invoice, charge }: InvoiceHeaderProps) => {
-  const theme = useMantineTheme()
   const { accountId } = useParams()
 
   return (
@@ -47,7 +45,7 @@ const InvoiceHeader = ({ invoice, charge }: InvoiceHeaderProps) => {
         <Group
           gap={0}
           style={{
-            border: `1px solid ${theme.colors.gray[8]}`,
+            border: "1px solid var(--app-shell-border-color)",
             borderRadius: 4,
           }}
         >

diff --git a/app/routes/account.$accountId.billing._index/view.tsx b/app/routes/account.$accountId.billing._index/view.tsx
@@ -1,4 +1,4 @@
-import { NumberFormatter, Stack, Text, Title, useMantineTheme } from "@mantine/core"
+import { NumberFormatter, Stack, Text, Title } from "@mantine/core"
 import React from "react"
 import { AccountBillingOutletContext } from "~/routes/account.$accountId.billing/route"
 import InvoicesDataTable from "~/routes/account.$accountId.billing._index/components/InvoicesDataTable"
@@ -16,8 +16,6 @@ export const AccountBillingView = ({
   invoices,
   upcomingInvoice,
 }: AccountBillingViewProps) => {
-  const theme = useMantineTheme()
-
   return (
     <Stack gap={32}>
       <Title order={2}>Billing</Title>
@@ -27,7 +25,7 @@ export const AccountBillingView = ({
           gap={4}
           p={20}
           style={{
-            border: `1px solid ${theme.colors.gray[8]}`,
+            border: "1px solid var(--app-shell-border-color)",
             borderRadius: 4,
           }}
         >