Skip to content

Commit 0805d89

Browse files
kiocoskiocos
committed
refactor: unify colors in a single file
1 parent 7caa8c0 commit 0805d89

File tree

10 files changed

+108
-122
lines changed

10 files changed

+108
-122
lines changed

‎src/components/Dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
fetchReferralId,
1717
fetchReferralStatsAuthenticated,
1818
} from "../utils/boltzApi";
19-
import { CHART_COLORS, SWAP_TYPE_COLORS } from "../utils/chartTheme";
19+
import { CHART_COLORS, SWAP_TYPE_COLORS } from "../utils/colors";
2020
import DenominationToggle from "./DenominationToggle";
2121
import FailureRateChart from "./FailureRateChart";
2222
import Footer from "./Footer";

‎src/components/FailureRateChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212

1313
import { t } from "../i18n";
1414
import { MonthlyStats } from "../utils/boltzApi";
15-
import { CHART_COLORS, FAILURE_RATE_COLORS } from "../utils/chartTheme";
15+
import { CHART_COLORS, FAILURE_RATE_COLORS } from "../utils/colors";
1616
import { getSwapTypeLabelMap } from "../utils/swapTypes";
1717

1818
interface FailureRateChartProps {

‎src/components/PairVolumeChart.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
import { Denomination, useDenomination } from "../contexts/DenominationContext";
1616
import { t } from "../i18n";
1717
import { MonthlyStats } from "../utils/boltzApi";
18-
import { CHART_COLORS } from "../utils/chartTheme";
19-
import { getPairColor } from "../utils/pairColors";
18+
import { CHART_COLORS } from "../utils/colors";
19+
import { getPairColor } from "../utils/colors";
2020

2121
interface PairVolumeChartProps {
2222
data: MonthlyStats[];
@@ -338,8 +338,8 @@ export default function PairVolumeChart({ data, title }: PairVolumeChartProps) {
338338
data={chartData}
339339
margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
340340
<defs>
341-
{pairs.map((pair, index) => {
342-
const color = getPairColor(pair, index);
341+
{pairs.map((pair) => {
342+
const color = getPairColor(pair);
343343
return (
344344
<linearGradient
345345
key={pair}
@@ -401,8 +401,8 @@ export default function PairVolumeChart({ data, title }: PairVolumeChartProps) {
401401
</span>
402402
)}
403403
/>
404-
{pairs.map((pair, index) => {
405-
const color = getPairColor(pair, index);
404+
{pairs.map((pair) => {
405+
const color = getPairColor(pair);
406406
const gradientId = `gradient-${pair.replace(/[^a-zA-Z0-9]/g, "-")}`;
407407
return (
408408
<Area
@@ -427,8 +427,8 @@ export default function PairVolumeChart({ data, title }: PairVolumeChartProps) {
427427
</div>
428428
) : (
429429
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
430-
{pairs.map((pair, index) => {
431-
const color = getPairColor(pair, index);
430+
{pairs.map((pair) => {
431+
const color = getPairColor(pair);
432432
const singleChartData = data.map((item) => ({
433433
label: `${item.month} ${item.year}`,
434434
volume:

‎src/components/PerformanceChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
import { Denomination, useDenomination } from "../contexts/DenominationContext";
1414
import { t } from "../i18n";
1515
import { MonthlyStats } from "../utils/boltzApi";
16-
import { CHART_COLORS } from "../utils/chartTheme";
16+
import { CHART_COLORS } from "../utils/colors";
1717
import { isCurrentMonth } from "../utils/date";
1818

1919
interface PerformanceChartProps {

‎src/pages/MonthDetailPage.tsx‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ import {
2424
CHART_COLORS,
2525
FAILURE_RATE_COLORS,
2626
SWAP_TYPE_COLORS,
27-
} from "../utils/chartTheme";
28-
import { getPairColor } from "../utils/pairColors";
27+
} from "../utils/colors";
28+
import { getPairColor } from "../utils/colors";
2929

3030
interface PairStats {
3131
name: string;
@@ -440,35 +440,29 @@ export default function MonthDetailPage() {
440440
paddingAngle={2}
441441
stroke="none"
442442
dataKey="percentage">
443-
{pairStats.map(
444-
(pair, index) => (
445-
<Cell
446-
key={`cell-${pair.name}`}
447-
fill={getPairColor(
448-
pair.name,
449-
index,
450-
)}
451-
/>
452-
),
453-
)}
443+
{pairStats.map((pair) => (
444+
<Cell
445+
key={`cell-${pair.name}`}
446+
fill={getPairColor(
447+
pair.name,
448+
)}
449+
/>
450+
))}
454451
</Pie>
455452
<Tooltip content={<PieTooltip />} />
456453
</PieChart>
457454
</ResponsiveContainer>
458455
</div>
459456
<div className="flex-1 space-y-2">
460-
{pairStats.map((pair, index) => (
457+
{pairStats.map((pair) => (
461458
<div
462459
key={pair.name}
463460
className="flex items-center gap-3">
464461
<span
465462
className="w-3 h-3 rounded-full"
466463
style={{
467464
backgroundColor:
468-
getPairColor(
469-
pair.name,
470-
index,
471-
),
465+
getPairColor(pair.name),
472466
}}
473467
/>
474468
<span className="text-text-secondary text-sm flex-1">
@@ -543,7 +537,7 @@ export default function MonthDetailPage() {
543537
</tr>
544538
</thead>
545539
<tbody>
546-
{sortedPairStats.map((pair, index) => (
540+
{sortedPairStats.map((pair) => (
547541
<tr
548542
key={pair.name}
549543
className="border-t border-navy-400/20 hover:bg-white/5 transition-colors">
@@ -555,7 +549,6 @@ export default function MonthDetailPage() {
555549
backgroundColor:
556550
getPairColor(
557551
pair.name,
558-
index,
559552
),
560553
}}
561554
/>

‎src/utils/chartTheme.ts‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/utils/colors.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
export const colors = {
2+
boltz: {
3+
primary: "#e8cb2b",
4+
"primary-light": "#fee86b",
5+
link: "#4fadc2",
6+
"link-hover": "#70cde2",
7+
},
8+
navy: {
9+
50: "#d0d4d9",
10+
100: "#a1a9b2",
11+
200: "#727e8c",
12+
300: "#1e2d3c",
13+
400: "#17222e",
14+
500: "#12253a",
15+
600: "#0f1f30",
16+
700: "#091625",
17+
800: "#09141f",
18+
900: "#081E36",
19+
},
20+
text: {
21+
primary: "#d7dee4",
22+
secondary: "#a1a9b2",
23+
muted: "#727e8c",
24+
},
25+
chart: {
26+
bitcoin: "#f7931a",
27+
chain: "#e74c3c",
28+
olive: "#6b8e23",
29+
purple: "#9370db",
30+
coral: "#ff6b6b",
31+
teal: "#56a8a1",
32+
gold: "#d4a04a",
33+
steel: "#5e81ac",
34+
},
35+
} as const;
36+
37+
export const CHART_COLORS = {
38+
primary: colors.boltz.primary,
39+
grid: colors.navy[300],
40+
axisTick: colors.navy[200],
41+
activeDotStroke: colors.navy[700],
42+
tooltipCursor: "rgba(30, 45, 60, 0.35)",
43+
} as const;
44+
45+
export const SWAP_TYPE_COLORS = {
46+
submarine: colors.boltz.link,
47+
reverse: colors.chart.bitcoin,
48+
chain: colors.chart.chain,
49+
} as const;
50+
51+
export const FAILURE_RATE_COLORS = {
52+
submarine: colors.chart.teal,
53+
reverse: colors.chart.gold,
54+
chain: colors.chart.steel,
55+
} as const;
56+
57+
export const PAIR_COLORS: Record<string, string> = {
58+
"BTC/BTC": colors.chart.bitcoin,
59+
"L-BTC/BTC": colors.boltz.link,
60+
"RBTC/BTC": colors.chart.olive,
61+
"BTC/RBTC": colors.chart.purple,
62+
"L-BTC/RBTC": colors.chart.coral,
63+
};
64+
65+
export function getPairColor(pair: string): string {
66+
const key = pair.trim().toUpperCase();
67+
68+
if (PAIR_COLORS[key]) return PAIR_COLORS[key];
69+
70+
const [from, to] = key.split("/");
71+
if (from && to) {
72+
const reversed = `${to}/${from}`;
73+
if (PAIR_COLORS[reversed]) return PAIR_COLORS[reversed];
74+
}
75+
76+
return colors.boltz.primary;
77+
}

‎src/utils/pairColors.ts‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/utils/swapTypes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SWAP_TYPE_COLORS } from "./chartTheme";
1+
import { SWAP_TYPE_COLORS } from "./colors";
22

33
export type SwapType = keyof typeof SWAP_TYPE_COLORS;
44

tailwind.config.js renamed to tailwind.config.ts

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,12 @@
1-
/** @type {import('tailwindcss').Config} */
1+
import type { Config } from "tailwindcss";
2+
3+
import { colors } from "./src/utils/colors";
4+
25
export default {
36
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
47
theme: {
58
extend: {
6-
colors: {
7-
boltz: {
8-
primary: "#e8cb2b",
9-
"primary-light": "#fee86b",
10-
link: "#4fadc2",
11-
"link-hover": "#70cde2",
12-
},
13-
navy: {
14-
50: "#d0d4d9",
15-
100: "#a1a9b2",
16-
200: "#727e8c",
17-
300: "#1e2d3c",
18-
400: "#17222e",
19-
500: "#12253a",
20-
600: "#0f1f30",
21-
700: "#091625",
22-
800: "#09141f",
23-
900: "#081E36",
24-
},
25-
text: {
26-
primary: "#d7dee4",
27-
secondary: "#a1a9b2",
28-
muted: "#727e8c",
29-
},
30-
},
9+
colors,
3110
fontFamily: {
3211
sans: ['"Noto Sans"', "system-ui", "sans-serif"],
3312
mono: ['"Noto Mono"', "monospace"],
@@ -59,4 +38,4 @@ export default {
5938
},
6039
},
6140
plugins: [],
62-
};
41+
} satisfies Config;

0 commit comments

Comments
 (0)