From e7ad2dcba1a767658b124a6d66e038178a9970f9 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Fri, 18 Oct 2024 17:02:35 -0400
Subject: [PATCH] Update usage accent colors

---
 .../[slug]/settings/billing/page-client.tsx   |  3 +--
 .../[slug]/settings/billing/usage-chart.tsx   | 24 +++++++------------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
index 9e90617d5b..1fa059426e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/page-client.tsx
@@ -265,12 +265,11 @@ function UsageTabCard({
             >
               <div
                 className={cn(
-                  "size-full rounded-full [mask-image:linear-gradient(90deg,transparent,black_80%)]",
+                  "size-full rounded-full bg-gradient-to-r from-blue-500/80 to-blue-600",
                   warning && "to-rose-500",
                 )}
                 style={{
                   transform: `translateX(-${100 - Math.floor((usage / Math.max(0, usage, limit)) * 100)}%)`,
-                  backgroundImage: `linear-gradient(90deg, #D8277A, #7E3AEA)`,
                 }}
               />
             </div>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
index 1a2a41b692..b6c3689d2d 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/usage-chart.tsx
@@ -95,16 +95,15 @@ export function UsageChart() {
             }}
           >
             <LinearGradient id="usage-bar-gradient">
-              <stop stopColor="#7E3AEA" stopOpacity={1} offset="20%" />
-              <stop stopColor="#D8277A" stopOpacity={0} offset="100%" />
+              <stop stopColor="#2563eb" stopOpacity={1} offset="20%" />
+              <stop stopColor="#3b82f6" stopOpacity={0.9} offset="100%" />
             </LinearGradient>
-            <Bars
-              seriesStyles={[
-                {
-                  id: "usage",
-                  barFill: "#00000019",
-                },
-              ]}
+            <XAxis highlightLast={false} />
+            <YAxis
+              showGridLines
+              tickFormat={
+                resource === "revenue" ? (v) => `$${nFormatter(v)}` : nFormatter
+              }
             />
             <Bars
               seriesStyles={[
@@ -114,13 +113,6 @@ export function UsageChart() {
                 },
               ]}
             />
-            <XAxis highlightLast={false} />
-            <YAxis
-              showGridLines
-              tickFormat={
-                resource === "revenue" ? (v) => `$${nFormatter(v)}` : nFormatter
-              }
-            />
           </TimeSeriesChart>
         ) : (
           <div className="flex size-full items-center justify-center">