Merge pull request #1560 from dubinc/usage-colors

Update usage accent colors
dubinc · Oct 18, 2024 · f3ab07d · f3ab07d
2 parents cd177fc + e7ad2dc
commit f3ab07d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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">