Skip to content

[arenabuddy] Convert UI theme from light to dark mode #321

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gazure merged 1 commit into from
Mar 1, 2026
Merged

[arenabuddy] Convert UI theme from light to dark mode #321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,10 @@ tracing-appender = "0.2.4"
tracing-opentelemetry = "0.32.1"
opentelemetry = "0.31.0"
opentelemetry_sdk = { version = "0.31.0", features = ["rt-tokio"] }
opentelemetry-otlp = { version = "0.31.0", default-features = false, features = ["grpc-tonic", "trace"] }
opentelemetry-otlp = { version = "0.31.0", default-features = false, features = [
"grpc-tonic",
"trace",
] }
reqwest = { version = "0.13.2", features = [
"form",
"json",
Expand Down
2 changes: 1 addition & 1 deletion arenabuddy/arenabuddy/src/app/components/cost.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ pub fn ManaCost(cost: Cost) -> Element {
} else {
// Fallback for missing SVGs
div {
class: "w-4 h-4 bg-gray-200 rounded-full flex items-center justify-center text-xs flex-shrink-0",
class: "w-4 h-4 bg-gray-600 rounded-full flex items-center justify-center text-xs flex-shrink-0",
"{symbol}"
}
}
Expand Down
20 changes: 10 additions & 10 deletions arenabuddy/arenabuddy/src/app/components/deck_list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ pub fn DeckList(
let hovered_card = use_signal(|| None::<(CardDisplayRecord, (f64, f64))>);

rsx! {
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
div { class: "bg-gradient-to-r from-indigo-500 to-indigo-600 py-4 px-6",
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
div { class: "bg-gradient-to-r from-violet-800 to-indigo-900 py-4 px-6",
h2 { class: "text-xl font-bold text-white", "{title}" }
}
div { class: "p-6",
Expand Down Expand Up @@ -48,17 +48,17 @@ pub fn DeckList(
}}

.deck-scrollbar::-webkit-scrollbar-track {{
background: #f1f1f1;
background: #1f2937;
border-radius: 8px;
}}

.deck-scrollbar::-webkit-scrollbar-thumb {{
background: #c5c5c5;
background: #4b5563;
border-radius: 8px;
}}

.deck-scrollbar::-webkit-scrollbar-thumb:hover {{
background: #a0a0a0;
background: #6b7280;
}}
"#
}
Expand Down Expand Up @@ -95,7 +95,7 @@ fn NonLandCards(
if let Some(cards) = main_deck.get(&card_type) {
if !cards.is_empty() {
div { class: "mb-4",
h4 { class: "text-md font-medium text-gray-700 mb-2",
h4 { class: "text-md font-medium text-gray-300 mb-2",
if show_quantities {
"{card_type} ({deck.total_by_type(card_type)})"
} else {
Expand Down Expand Up @@ -124,7 +124,7 @@ fn Lands(
if let Some(lands) = main_deck.get(&CardType::Land).filter(|l| !l.is_empty()) {
rsx! {
div {
h3 { class: "text-lg font-semibold text-gray-800 border-b pb-2",
h3 { class: "text-lg font-semibold text-gray-200 border-b border-gray-700 pb-2",
if show_quantities {
"Lands ({deck.total_by_type(CardType::Land)})"
} else {
Expand Down Expand Up @@ -155,7 +155,7 @@ fn Sideboard(
} else {
rsx! {
div {
h3 { class: "text-lg font-semibold text-gray-800 border-b pb-2",
h3 { class: "text-lg font-semibold text-gray-200 border-b border-gray-700 pb-2",
if show_quantities {
"Sideboard ({sideboard.len()})"
} else {
Expand All @@ -180,7 +180,7 @@ fn CardRow(
) -> Element {
rsx! {
div {
class: "flex items-center justify-between py-1 px-2 hover:bg-gray-50 rounded text-sm cursor-pointer",
class: "flex items-center justify-between py-1 px-2 hover:bg-gray-700/50 rounded text-sm cursor-pointer",
onmouseenter: move |event| {
let coords = event.client_coordinates();
hovered_card.set(Some((card.clone(), (coords.x, coords.y))));
Expand All @@ -190,7 +190,7 @@ fn CardRow(
},
div { class: "flex items-center space-x-2",
if show_quantities {
span { class: "font-medium text-gray-600 w-6 text-center",
span { class: "font-medium text-gray-400 w-6 text-center",
"{card.quantity}"
}
}
Expand Down
42 changes: 21 additions & 21 deletions arenabuddy/arenabuddy/src/app/components/event_log.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ pub fn EventLogDisplay(event_logs: Vec<GameEventLog>, controller_seat_id: i32) -
};

rsx! {
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
div { class: "bg-gradient-to-r from-emerald-500 to-emerald-600 py-4 px-6",
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
div { class: "bg-gradient-to-r from-emerald-900 to-emerald-800 py-4 px-6",
h2 { class: "text-xl font-bold text-white", "Event Log" }
}
div { class: "p-6",
Expand Down Expand Up @@ -58,19 +58,19 @@ fn GameSelector(game_numbers: Vec<i32>, selected: i32, on_select: EventHandler<i
div { class: "flex flex-wrap gap-2 mb-4",
button {
class: if selected == 0 {
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-500 text-white"
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-600 text-white"
} else {
"px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-150"
"px-3 py-1 rounded-full text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors duration-150"
},
onclick: move |_| on_select.call(0),
"All Games"
}
for num in game_numbers {
button {
class: if selected == num {
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-500 text-white"
"px-3 py-1 rounded-full text-sm font-medium bg-emerald-600 text-white"
} else {
"px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-150"
"px-3 py-1 rounded-full text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors duration-150"
},
onclick: move |_| on_select.call(num),
"Game {num}"
Expand Down Expand Up @@ -133,7 +133,7 @@ fn GameTimeline(event_log: GameEventLog, controller_seat_id: i32) -> Element {

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

let header_bg = if is_your_turn {
"bg-blue-50 hover:bg-blue-100"
"bg-blue-900/20 hover:bg-blue-900/30"
} else {
"bg-red-50 hover:bg-red-100"
"bg-red-900/20 hover:bg-red-900/30"
};

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

rsx! {
div { class: "border rounded-lg overflow-hidden",
div { class: "border border-gray-700 rounded-lg overflow-hidden",
div {
class: "px-4 py-2 cursor-pointer flex justify-between items-center {header_bg} transition-colors duration-150",
onclick: move |_| {
let current = expanded();
expanded.set(!current);
},
div { class: "flex items-center gap-2",
span { class: "font-semibold text-gray-700", "{turn_label}" }
span { class: "font-semibold text-gray-300", "{turn_label}" }
span { class: "text-sm text-gray-500", "({player_label})" }
span { class: "px-2 py-0.5 text-xs rounded-full bg-gray-200 text-gray-600",
span { class: "px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-400",
"{group.events.len()} events"
}
}
Expand All @@ -210,7 +210,7 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
}
}
if expanded() {
div { class: "divide-y divide-gray-100",
div { class: "divide-y divide-gray-700",
for event in &group.events {
EventRow { event: event.clone(), controller_seat_id }
}
Expand All @@ -228,13 +228,13 @@ fn TurnGroup(group: TurnEventGroup, controller_seat_id: i32) -> Element {
fn style_to_css(style: ActionStyle) -> &'static str {
match style {
ActionStyle::Normal => "",
ActionStyle::Phase => "text-gray-400 text-xs italic",
ActionStyle::PlayerAction => "text-blue-800",
ActionStyle::OpponentAction => "text-red-800",
ActionStyle::Attack | ActionStyle::Negative => "text-red-700",
ActionStyle::Defense => "text-blue-700",
ActionStyle::Damage => "text-orange-700",
ActionStyle::Positive => "text-green-700",
ActionStyle::Phase => "text-gray-500 text-xs italic",
ActionStyle::PlayerAction => "text-blue-300",
ActionStyle::OpponentAction => "text-red-300",
ActionStyle::Attack | ActionStyle::Negative => "text-red-400",
ActionStyle::Defense => "text-blue-400",
ActionStyle::Damage => "text-orange-400",
ActionStyle::Positive => "text-emerald-400",
ActionStyle::Emphasized => "font-semibold",
}
}
Expand Down Expand Up @@ -268,7 +268,7 @@ fn EventRow(event: GameEvent, controller_seat_id: i32) -> Element {
span { class: "flex-shrink-0 w-6 text-center", "{display.icon}" }
span { class: "flex-grow", "{display.description}" }
if let Some(badge) = phase_badge {
span { class: "flex-shrink-0 px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-500",
span { class: "flex-shrink-0 px-2 py-0.5 text-xs rounded-full bg-gray-700 text-gray-400",
"{badge}"
}
}
Expand Down
20 changes: 10 additions & 10 deletions arenabuddy/arenabuddy/src/app/components/match_info.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,39 @@ use dioxus::prelude::*;
#[component]
pub fn MatchInfo(controller_player_name: String, opponent_player_name: String, did_controller_win: bool) -> Element {
rsx! {
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
div { class: "bg-gradient-to-r from-blue-500 to-blue-600 py-4 px-6",
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
div { class: "bg-gradient-to-r from-amber-900 to-amber-800 py-4 px-6",
h2 { class: "text-xl font-bold text-white", "Match Information" }
}
div { class: "p-6",
div { class: "mb-4",
h3 { class: "text-lg font-semibold text-gray-700 mb-2", "Players" }
h3 { class: "text-lg font-semibold text-gray-300 mb-2", "Players" }
div { class: "flex flex-col gap-2",
div { class: "bg-blue-50 p-3 rounded-md",
div { class: "bg-blue-900/20 p-3 rounded-md",
span { class: "font-semibold", "You" }
" {controller_player_name}"
}
div { class: "bg-red-50 p-3 rounded-md",
div { class: "bg-red-900/20 p-3 rounded-md",
span { class: "font-semibold", "Opponent" }
" {opponent_player_name}"
}
}
}

div { class: "mb-4",
h3 { class: "text-lg font-semibold text-gray-700 mb-2", "Game Details" }
h3 { class: "text-lg font-semibold text-gray-300 mb-2", "Game Details" }
div { class: "grid grid-cols-2 gap-2",
div { class: "bg-gray-50 p-3 rounded-md",
div { class: "bg-gray-900/50 p-3 rounded-md",
span { class: "text-sm text-gray-500 block", "Format" }
span { class: "font-medium", "unknown" }
}
div { class: "bg-gray-50 p-3 rounded-md",
div { class: "bg-gray-900/50 p-3 rounded-md",
span { class: "text-sm text-gray-500 block", "Result" }
span { class: "font-medium",
if did_controller_win {
span { class: "text-green-600 font-bold", "Victory" }
span { class: "text-amber-400 font-bold", "Victory" }
} else {
span { class: "text-red-600 font-bold", "Defeat" }
span { class: "text-red-400 font-bold", "Defeat" }
}
}
}
Expand Down
20 changes: 10 additions & 10 deletions arenabuddy/arenabuddy/src/app/components/mulligan_display.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ use dioxus::prelude::*;
#[component]
pub fn MulliganDisplay(mulligans: Vec<Mulligan>) -> Element {
rsx! {
div { class: "bg-white rounded-lg shadow-md overflow-hidden",
div { class: "bg-gradient-to-r from-amber-500 to-amber-600 py-4 px-6",
div { class: "bg-gray-800 rounded-lg border border-gray-700 overflow-hidden",
div { class: "bg-gradient-to-r from-amber-900 to-amber-800 py-4 px-6",
h2 { class: "text-xl font-bold text-white", "Mulligan Decisions" }
}
div { class: "p-6",
Expand Down Expand Up @@ -37,25 +37,25 @@ fn MulliganCard(mulligan: Mulligan) -> Element {
let decision_class = get_decision_class(&mulligan.decision);

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

// Badges
div { class: "flex items-center space-x-2",
span { class: "px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-800",
span { class: "px-2 py-1 text-xs rounded-full bg-violet-900/40 text-violet-300",
"{mulligan.play_draw}"
}
span { class: "px-2 py-1 text-xs rounded-full {decision_class}",
"{mulligan.decision}"
}
}
}
div { class: "mt-1 text-sm text-gray-600",
div { class: "mt-1 text-sm text-gray-400",
"vs {mulligan.opponent_identity}"
}
}
Expand Down Expand Up @@ -85,8 +85,8 @@ fn MulliganCard(mulligan: Mulligan) -> Element {

fn get_decision_class(decision: &str) -> &'static str {
match decision {
"keep" => "bg-green-100 text-green-800",
"mulligan" => "bg-red-100 text-red-800",
_ => "bg-gray-100 text-gray-800",
"keep" => "bg-emerald-900/40 text-emerald-300",
"mulligan" => "bg-red-900/40 text-red-300",
_ => "bg-gray-700 text-gray-300",
}
}
10 changes: 5 additions & 5 deletions arenabuddy/arenabuddy/src/app/components/pagination.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,22 @@ pub fn Pagination(current_page: Signal<usize>, total_pages: usize, total_items:
let end = ((page + 1) * page_size).min(total_items);

rsx! {
div { class: "flex justify-between items-center py-3 px-4 border-b bg-gray-50",
p { class: "text-sm text-gray-600",
div { class: "flex justify-between items-center py-3 px-4 border-b border-gray-700 bg-gray-900",
p { class: "text-sm text-gray-400",
"Showing {start}–{end} of {total_items}"
}
div { class: "flex items-center space-x-2",
button {
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",
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",
disabled: page == 0,
onclick: move |_| current_page.set(page.saturating_sub(1)),
"Previous"
}
span { class: "px-3 py-1 text-sm text-gray-600",
span { class: "px-3 py-1 text-sm text-gray-400",
"Page {page + 1} of {total_pages}"
}
button {
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",
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",
disabled: page + 1 >= total_pages,
onclick: move |_| current_page.set(page + 1),
"Next"
Expand Down
Loading