Skip to content

Commit 49c370e

Browse files
gazuregazure
authored
[arenabuddy] Convert UI theme from light to dark mode (#321)
This pull request implements a comprehensive dark theme for the Arena Buddy application. The changes include: **Visual Theme Updates:** - Replaced light backgrounds (white, gray-50) with dark equivalents (gray-800, gray-900, gray-950) - Updated text colors from dark grays to light grays for better contrast on dark backgrounds - Changed border colors from light grays to darker variants (gray-700, gray-800) - Modified accent colors from blue/indigo to amber/violet for better dark theme aesthetics **Component-Specific Changes:** - Updated all major components including match details, draft displays, event logs, deck lists, and navigation - Changed button styles and hover states to work with the dark theme - Updated status indicators and badges with appropriate dark theme colors - Modified scrollbar styling for dark backgrounds **Color Scheme Adjustments:** - Primary accent color changed from blue to amber - Success states now use amber instead of green - Error states use red variants optimized for dark backgrounds - Secondary elements use violet/purple tones **Global Styling:** - Added body background and text color defaults in the CSS file - Reformatted the opentelemetry-otlp dependency configuration for better readability - Fixed unused import in sync.rs The theme maintains accessibility and readability while providing a modern dark interface that's easier on the eyes during extended use.
1 parent be4808a commit 49c370e

File tree

17 files changed

+195
-187
lines changed

17 files changed

+195
-187
lines changed

‎Cargo.toml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,10 @@ tracing-appender = "0.2.4"
8686
tracing-opentelemetry = "0.32.1"
8787
opentelemetry = "0.31.0"
8888
opentelemetry_sdk = { version = "0.31.0", features = ["rt-tokio"] }
89-
opentelemetry-otlp = { version = "0.31.0", default-features = false, features = ["grpc-tonic", "trace"] }
89+
opentelemetry-otlp = { version = "0.31.0", default-features = false, features = [
90+
"grpc-tonic",
91+
"trace",
92+
] }
9093
reqwest = { version = "0.13.2", features = [
9194
"form",
9295
"json",

‎arenabuddy/arenabuddy/src/app/components/cost.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ pub fn ManaCost(cost: Cost) -> Element {
185185
} else {
186186
// Fallback for missing SVGs
187187
div {
188-
class: "w-4 h-4 bg-gray-200 rounded-full flex items-center justify-center text-xs flex-shrink-0",
188+
class: "w-4 h-4 bg-gray-600 rounded-full flex items-center justify-center text-xs flex-shrink-0",
189189
"{symbol}"
190190
}
191191
}

‎arenabuddy/arenabuddy/src/app/components/deck_list.rs‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ pub fn DeckList(
1717
let hovered_card = use_signal(|| None::<(CardDisplayRecord, (f64, f64))>);
1818

1919
rsx! {
20-
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
21-
div { class: "bg-gradient-to-r from-indigo-500 to-indigo-600 py-4 px-6",
20+
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
21+
div { class: "bg-gradient-to-r from-violet-800 to-indigo-900 py-4 px-6",
2222
h2 { class: "text-xl font-bold text-white", "{title}" }
2323
}
2424
div { class: "p-6",
@@ -48,17 +48,17 @@ pub fn DeckList(
4848
}}
4949
5050
.deck-scrollbar::-webkit-scrollbar-track {{
51-
background: #f1f1f1;
51+
background: #1f2937;
5252
border-radius: 8px;
5353
}}
5454
5555
.deck-scrollbar::-webkit-scrollbar-thumb {{
56-
background: #c5c5c5;
56+
background: #4b5563;
5757
border-radius: 8px;
5858
}}
5959
6060
.deck-scrollbar::-webkit-scrollbar-thumb:hover {{
61-
background: #a0a0a0;
61+
background: #6b7280;
6262
}}
6363
"#
6464
}
@@ -95,7 +95,7 @@ fn NonLandCards(
9595
if let Some(cards) = main_deck.get(&card_type) {
9696
if !cards.is_empty() {
9797
div { class: "mb-4",
98-
h4 { class: "text-md font-medium text-gray-700 mb-2",
98+
h4 { class: "text-md font-medium text-gray-300 mb-2",
9999
if show_quantities {
100100
"{card_type} ({deck.total_by_type(card_type)})"
101101
} else {
@@ -124,7 +124,7 @@ fn Lands(
124124
if let Some(lands) = main_deck.get(&CardType::Land).filter(|l| !l.is_empty()) {
125125
rsx! {
126126
div {
127-
h3 { class: "text-lg font-semibold text-gray-800 border-b pb-2",
127+
h3 { class: "text-lg font-semibold text-gray-200 border-b border-gray-700 pb-2",
128128
if show_quantities {
129129
"Lands ({deck.total_by_type(CardType::Land)})"
130130
} else {
@@ -155,7 +155,7 @@ fn Sideboard(
155155
} else {
156156
rsx! {
157157
div {
158-
h3 { class: "text-lg font-semibold text-gray-800 border-b pb-2",
158+
h3 { class: "text-lg font-semibold text-gray-200 border-b border-gray-700 pb-2",
159159
if show_quantities {
160160
"Sideboard ({sideboard.len()})"
161161
} else {
@@ -180,7 +180,7 @@ fn CardRow(
180180
) -> Element {
181181
rsx! {
182182
div {
183-
class: "flex items-center justify-between py-1 px-2 hover:bg-gray-50 rounded text-sm cursor-pointer",
183+
class: "flex items-center justify-between py-1 px-2 hover:bg-gray-700/50 rounded text-sm cursor-pointer",
184184
onmouseenter: move |event| {
185185
let coords = event.client_coordinates();
186186
hovered_card.set(Some((card.clone(), (coords.x, coords.y))));
@@ -190,7 +190,7 @@ fn CardRow(
190190
},
191191
div { class: "flex items-center space-x-2",
192192
if show_quantities {
193-
span { class: "font-medium text-gray-600 w-6 text-center",
193+
span { class: "font-medium text-gray-400 w-6 text-center",
194194
"{card.quantity}"
195195
}
196196
}

‎arenabuddy/arenabuddy/src/app/components/event_log.rs‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ pub fn EventLogDisplay(event_logs: Vec<GameEventLog>, controller_seat_id: i32) -
2121
};
2222

2323
rsx! {
24-
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
25-
div { class: "bg-gradient-to-r from-emerald-500 to-emerald-600 py-4 px-6",
24+
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
25+
div { class: "bg-gradient-to-r from-emerald-900 to-emerald-800 py-4 px-6",
2626
h2 { class: "text-xl font-bold text-white", "Event Log" }
2727
}
2828
div { class: "p-6",
@@ -58,19 +58,19 @@ fn GameSelector(game_numbers: Vec<i32>, selected: i32, on_select: EventHandler<i
5858
div { class: "flex flex-wrap gap-2 mb-4",
5959
button {
6060
class: if selected == 0 {
61-
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-500 text-white"
61+
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-600 text-white"
6262
} else {
63-
"px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-150"
63+
"px-3 py-1 rounded-full text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors duration-150"
6464
},
6565
onclick: move |_| on_select.call(0),
6666
"All Games"
6767
}
6868
for num in game_numbers {
6969
button {
7070
class: if selected == num {
71-
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-500 text-white"
71+
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-600 text-white"
7272
} else {
73-
"px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-150"
73+
"px-3 py-1 rounded-full text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors duration-150"
7474
},
7575
onclick: move |_| on_select.call(num),
7676
"Game {num}"
@@ -133,7 +133,7 @@ fn GameTimeline(event_log: GameEventLog, controller_seat_id: i32) -> Element {
133133

134134
rsx! {
135135
div { class: "mb-6",
136-
h3 { class: "text-lg font-semibold text-gray-700 mb-3 border-b pb-2",
136+
h3 { class: "text-lg font-semibold text-gray-300 mb-3 border-b border-gray-700 pb-2",
137137
"Game {event_log.game_number}"
138138
}
139139
div { class: "space-y-2",
@@ -169,9 +169,9 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
169169
};
170170

171171
let header_bg = if is_your_turn {
172-
"bg-blue-50 hover:bg-blue-100"
172+
"bg-blue-900/20 hover:bg-blue-900/30"
173173
} else {
174-
"bg-red-50 hover:bg-red-100"
174+
"bg-red-900/20 hover:bg-red-900/30"
175175
};
176176

177177
let chevron_class = if expanded() {
@@ -181,17 +181,17 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
181181
};
182182

183183
rsx! {
184-
div { class: "border rounded-lg overflow-hidden",
184+
div { class: "border border-gray-700 rounded-lg overflow-hidden",
185185
div {
186186
class: "px-4 py-2 cursor-pointer flex justify-between items-center {header_bg} transition-colors duration-150",
187187
onclick: move |_| {
188188
let current = expanded();
189189
expanded.set(!current);
190190
},
191191
div { class: "flex items-center gap-2",
192-
span { class: "font-semibold text-gray-700", "{turn_label}" }
192+
span { class: "font-semibold text-gray-300", "{turn_label}" }
193193
span { class: "text-sm text-gray-500", "({player_label})" }
194-
span { class: "px-2 py-0.5 text-xs rounded-full bg-gray-200 text-gray-600",
194+
span { class: "px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-400",
195195
"{group.events.len()} events"
196196
}
197197
}
@@ -210,7 +210,7 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
210210
}
211211
}
212212
if expanded() {
213-
div { class: "divide-y divide-gray-100",
213+
div { class: "divide-y divide-gray-700",
214214
for event in &group.events {
215215
EventRow { event: event.clone(), controller_seat_id }
216216
}
@@ -228,13 +228,13 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
228228
fn style_to_css(style: ActionStyle) -> &'static str {
229229
match style {
230230
ActionStyle::Normal => "",
231-
ActionStyle::Phase => "text-gray-400 text-xs italic",
232-
ActionStyle::PlayerAction => "text-blue-800",
233-
ActionStyle::OpponentAction => "text-red-800",
234-
ActionStyle::Attack | ActionStyle::Negative => "text-red-700",
235-
ActionStyle::Defense => "text-blue-700",
236-
ActionStyle::Damage => "text-orange-700",
237-
ActionStyle::Positive => "text-green-700",
231+
ActionStyle::Phase => "text-gray-500 text-xs italic",
232+
ActionStyle::PlayerAction => "text-blue-300",
233+
ActionStyle::OpponentAction => "text-red-300",
234+
ActionStyle::Attack | ActionStyle::Negative => "text-red-400",
235+
ActionStyle::Defense => "text-blue-400",
236+
ActionStyle::Damage => "text-orange-400",
237+
ActionStyle::Positive => "text-emerald-400",
238238
ActionStyle::Emphasized => "font-semibold",
239239
}
240240
}
@@ -268,7 +268,7 @@ fn EventRow(event: GameEvent, controller_seat_id: i32) -> Element {
268268
span { class: "flex-shrink-0 w-6 text-center", "{display.icon}" }
269269
span { class: "flex-grow", "{display.description}" }
270270
if let Some(badge) = phase_badge {
271-
span { class: "flex-shrink-0 px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500",
271+
span { class: "flex-shrink-0 px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-400",
272272
"{badge}"
273273
}
274274
}

‎arenabuddy/arenabuddy/src/app/components/match_info.rs‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@ use dioxus::prelude::*;
33
#[component]
44
pub fn MatchInfo(controller_player_name: String, opponent_player_name: String, did_controller_win: bool) -> Element {
55
rsx! {
6-
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
7-
div { class: "bg-gradient-to-r from-blue-500 to-blue-600 py-4 px-6",
6+
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
7+
div { class: "bg-gradient-to-r from-amber-900 to-amber-800 py-4 px-6",
88
h2 { class: "text-xl font-bold text-white", "Match Information" }
99
}
1010
div { class: "p-6",
1111
div { class: "mb-4",
12-
h3 { class: "text-lg font-semibold text-gray-700 mb-2", "Players" }
12+
h3 { class: "text-lg font-semibold text-gray-300 mb-2", "Players" }
1313
div { class: "flex flex-col gap-2",
14-
div { class: "bg-blue-50 p-3 rounded-md",
14+
div { class: "bg-blue-900/20 p-3 rounded-md",
1515
span { class: "font-semibold", "You" }
1616
" {controller_player_name}"
1717
}
18-
div { class: "bg-red-50 p-3 rounded-md",
18+
div { class: "bg-red-900/20 p-3 rounded-md",
1919
span { class: "font-semibold", "Opponent" }
2020
" {opponent_player_name}"
2121
}
2222
}
2323
}
2424

2525
div { class: "mb-4",
26-
h3 { class: "text-lg font-semibold text-gray-700 mb-2", "Game Details" }
26+
h3 { class: "text-lg font-semibold text-gray-300 mb-2", "Game Details" }
2727
div { class: "grid grid-cols-2 gap-2",
28-
div { class: "bg-gray-50 p-3 rounded-md",
28+
div { class: "bg-gray-900/50 p-3 rounded-md",
2929
span { class: "text-sm text-gray-500 block", "Format" }
3030
span { class: "font-medium", "unknown" }
3131
}
32-
div { class: "bg-gray-50 p-3 rounded-md",
32+
div { class: "bg-gray-900/50 p-3 rounded-md",
3333
span { class: "text-sm text-gray-500 block", "Result" }
3434
span { class: "font-medium",
3535
if did_controller_win {
36-
span { class: "text-green-600 font-bold", "Victory" }
36+
span { class: "text-amber-400 font-bold", "Victory" }
3737
} else {
38-
span { class: "text-red-600 font-bold", "Defeat" }
38+
span { class: "text-red-400 font-bold", "Defeat" }
3939
}
4040
}
4141
}

‎arenabuddy/arenabuddy/src/app/components/mulligan_display.rs‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ use dioxus::prelude::*;
44
#[component]
55
pub fn MulliganDisplay(mulligans: Vec<Mulligan>) -> Element {
66
rsx! {
7-
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
8-
div { class: "bg-gradient-to-r from-amber-500 to-amber-600 py-4 px-6",
7+
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
8+
div { class: "bg-gradient-to-r from-amber-900 to-amber-800 py-4 px-6",
99
h2 { class: "text-xl font-bold text-white", "Mulligan Decisions" }
1010
}
1111
div { class: "p-6",
@@ -37,25 +37,25 @@ fn MulliganCard(mulligan: Mulligan) -> Element {
3737
let decision_class = get_decision_class(&mulligan.decision);
3838

3939
rsx! {
40-
div { class: "border rounded-lg overflow-hidden shadow-sm",
40+
div { class: "border border-gray-700 rounded-lg overflow-hidden",
4141
// Header section
42-
div { class: "bg-gray-100 px-4 py-3 border-b",
42+
div { class: "bg-gray-900 px-4 py-3 border-b border-gray-700",
4343
div { class: "flex justify-between items-center",
44-
h3 { class: "font-semibold text-gray-700",
44+
h3 { class: "font-semibold text-gray-300",
4545
"Game {mulligan.game_number} to Keep {mulligan.number_to_keep}"
4646
}
4747

4848
// Badges
4949
div { class: "flex items-center space-x-2",
50-
span { class: "px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800",
50+
span { class: "px-2 py-1 text-xs rounded-full bg-violet-900/40 text-violet-300",
5151
"{mulligan.play_draw}"
5252
}
5353
span { class: "px-2 py-1 text-xs rounded-full {decision_class}",
5454
"{mulligan.decision}"
5555
}
5656
}
5757
}
58-
div { class: "mt-1 text-sm text-gray-600",
58+
div { class: "mt-1 text-sm text-gray-400",
5959
"vs {mulligan.opponent_identity}"
6060
}
6161
}
@@ -85,8 +85,8 @@ fn MulliganCard(mulligan: Mulligan) -> Element {
8585

8686
fn get_decision_class(decision: &str) -> &'static str {
8787
match decision {
88-
"keep" => "bg-green-100 text-green-800",
89-
"mulligan" => "bg-red-100 text-red-800",
90-
_ => "bg-gray-100 text-gray-800",
88+
"keep" => "bg-emerald-900/40 text-emerald-300",
89+
"mulligan" => "bg-red-900/40 text-red-300",
90+
_ => "bg-gray-700 text-gray-300",
9191
}
9292
}

‎arenabuddy/arenabuddy/src/app/components/pagination.rs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@ pub fn Pagination(current_page: Signal<usize>, total_pages: usize, total_items:
77
let end = ((page + 1) * page_size).min(total_items);
88

99
rsx! {
10-
div { class: "flex justify-between items-center py-3 px-4 border-b bg-gray-50",
11-
p { class: "text-sm text-gray-600",
10+
div { class: "flex justify-between items-center py-3 px-4 border-b border-gray-700 bg-gray-900",
11+
p { class: "text-sm text-gray-400",
1212
"Showing {start}–{end} of {total_items}"
1313
}
1414
div { class: "flex items-center space-x-2",
1515
button {
16-
class: "px-3 py-1 rounded text-sm bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150",
16+
class: "px-3 py-1 rounded text-sm bg-gray-700 hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150",
1717
disabled: page == 0,
1818
onclick: move |_| current_page.set(page.saturating_sub(1)),
1919
"Previous"
2020
}
21-
span { class: "px-3 py-1 text-sm text-gray-600",
21+
span { class: "px-3 py-1 text-sm text-gray-400",
2222
"Page {page + 1} of {total_pages}"
2323
}
2424
button {
25-
class: "px-3 py-1 rounded text-sm bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150",
25+
class: "px-3 py-1 rounded text-sm bg-gray-700 hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150",
2626
disabled: page + 1 >= total_pages,
2727
onclick: move |_| current_page.set(page + 1),
2828
"Next"

0 commit comments

Comments
 (0)