Skip to content

fix(ui): center text inside buttons with min_size across the app #851

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

Open
lklimek wants to merge 2 commits into
base: v1.0-dev
Choose a base branch
from
Open

fix(ui): center text inside buttons with min_size across the app #851

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8428fb3
refactor(ui): use ui.add_sized in ComponentStyles button helpers
lklimek Apr 24, 2026
f9f24d3
refactor(ui): migrate direct Button callsites to ComponentStyles helpers
lklimek Apr 24, 2026
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
2 changes: 0 additions & 2 deletions src/ui/components/dashpay_subscreen_chooser_panel.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ pub fn add_dashpay_subscreen_chooser_panel(
.fill(DashColors::DASH_BLUE)
.stroke(egui::Stroke::NONE)
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
} else {
egui::Button::new(
RichText::new(display_name)
Expand All @@ -80,7 +79,6 @@ pub fn add_dashpay_subscreen_chooser_panel(
.fill(DashColors::glass_white(dark_mode))
.stroke(egui::Stroke::new(1.0, DashColors::border(dark_mode)))
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
};

// Show the subscreen name as a clickable option
Expand Down
2 changes: 0 additions & 2 deletions src/ui/components/dpns_subscreen_chooser_panel.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ pub fn add_dpns_subscreen_chooser_panel(ctx: &Context, app_context: &AppContext)
.fill(DashColors::DASH_BLUE)
.stroke(egui::Stroke::NONE)
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
} else {
egui::Button::new(
RichText::new(subscreen.display_name())
Expand All @@ -71,7 +70,6 @@ pub fn add_dpns_subscreen_chooser_panel(ctx: &Context, app_context: &AppContext)
.fill(DashColors::glass_white(dark_mode))
.stroke(egui::Stroke::new(1.0, DashColors::border(dark_mode)))
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
};

// Show the subscreen name as a clickable option
Expand Down
2 changes: 0 additions & 2 deletions src/ui/components/tokens_subscreen_chooser_panel.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ pub fn add_tokens_subscreen_chooser_panel(ctx: &Context, app_context: &AppContex
.fill(DashColors::DASH_BLUE)
.stroke(egui::Stroke::NONE)
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
} else {
egui::Button::new(
RichText::new(subscreen.display_name())
Expand All @@ -70,7 +69,6 @@ pub fn add_tokens_subscreen_chooser_panel(ctx: &Context, app_context: &AppContex
.fill(DashColors::glass_white(dark_mode))
.stroke(egui::Stroke::new(1.0, DashColors::border(dark_mode)))
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
};

// Show the subscreen name as a clickable option
Expand Down
2 changes: 0 additions & 2 deletions src/ui/components/tools_subscreen_chooser_panel.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ pub fn add_tools_subscreen_chooser_panel(ctx: &Context, app_context: &AppContext
.fill(DashColors::DASH_BLUE)
.stroke(egui::Stroke::NONE)
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
} else {
egui::Button::new(
RichText::new(subscreen.display_name())
Expand All @@ -138,7 +137,6 @@ pub fn add_tools_subscreen_chooser_panel(ctx: &Context, app_context: &AppContext
.fill(DashColors::glass_white(dark_mode))
.stroke(egui::Stroke::new(1.0, DashColors::border(dark_mode)))
.corner_radius(egui::CornerRadius::same(Shape::RADIUS_MD))
.min_size(egui::Vec2::new(150.0, 28.0))
};

// Show the subscreen name as a clickable option. Disable
Expand Down
52 changes: 11 additions & 41 deletions src/ui/dashpay/contact_requests.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ use crate::ui::components::wallet_unlock_popup::{
use crate::ui::components::{MessageBanner, ResultBannerExt};
use crate::ui::identities::get_selected_wallet;
use crate::ui::identities::keys::add_key_screen::AddKeyScreen;
use crate::ui::theme::DashColors;
use crate::ui::theme::{ComponentStyles, DashColors};
use crate::ui::{MessageType, Screen, ScreenLike, ScreenType};
use dash_sdk::dpp::document::DocumentV0Getters;
use dash_sdk::dpp::identity::accessors::IdentityGettersV0;
Expand Down Expand Up @@ -650,53 +650,23 @@ impl ContactRequests {
// Tabs
let dark_mode = ui.ctx().style().visuals.dark_mode;
ui.horizontal(|ui| {
let incoming_tab = egui::Button::new(RichText::new("Incoming").color(
if self.active_tab == RequestTab::Incoming {
DashColors::WHITE
} else {
DashColors::text_primary(dark_mode)
},
))
.fill(if self.active_tab == RequestTab::Incoming {
DashColors::DASH_BLUE
} else {
DashColors::glass_white(dark_mode)
})
.stroke(if self.active_tab == RequestTab::Incoming {
egui::Stroke::NONE
let incoming_response = if self.active_tab == RequestTab::Incoming {
ComponentStyles::add_primary_button(ui, "Incoming")
} else {
egui::Stroke::new(1.0, DashColors::border(dark_mode))
})
.corner_radius(egui::CornerRadius::same(4))
.min_size(egui::Vec2::new(120.0, 28.0));

if ui.add(incoming_tab).clicked() {
ComponentStyles::add_secondary_button(ui, "Incoming", dark_mode)
};
if incoming_response.clicked() {
self.active_tab = RequestTab::Incoming;
}

ui.add_space(8.0);

let outgoing_tab = egui::Button::new(RichText::new("Outgoing").color(
if self.active_tab == RequestTab::Outgoing {
DashColors::WHITE
} else {
DashColors::text_primary(dark_mode)
},
))
.fill(if self.active_tab == RequestTab::Outgoing {
DashColors::DASH_BLUE
} else {
DashColors::glass_white(dark_mode)
})
.stroke(if self.active_tab == RequestTab::Outgoing {
egui::Stroke::NONE
let outgoing_response = if self.active_tab == RequestTab::Outgoing {
ComponentStyles::add_primary_button(ui, "Outgoing")
} else {
egui::Stroke::new(1.0, DashColors::border(dark_mode))
})
.corner_radius(egui::CornerRadius::same(4))
.min_size(egui::Vec2::new(120.0, 28.0));

if ui.add(outgoing_tab).clicked() {
ComponentStyles::add_secondary_button(ui, "Outgoing", dark_mode)
};
if outgoing_response.clicked() {
self.active_tab = RequestTab::Outgoing;
}
});
Expand Down
52 changes: 11 additions & 41 deletions src/ui/dashpay/contacts_list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ use crate::ui::components::ResultBannerExt;
use crate::ui::components::identity_selector::IdentitySelector;
use crate::ui::components::wallet_unlock_popup::WalletUnlockResult;
use crate::ui::dashpay::contact_requests::ContactRequests;
use crate::ui::theme::DashColors;
use crate::ui::theme::{ComponentStyles, DashColors};
use crate::ui::{MessageType, ScreenLike, ScreenType};
use dash_sdk::dpp::identity::accessors::IdentityGettersV0;
use dash_sdk::dpp::platform_value::string_encoding::Encoding;
Expand Down Expand Up @@ -341,27 +341,12 @@ impl ContactsList {

// Tab bar
ui.horizontal(|ui| {
let contacts_tab = egui::Button::new(RichText::new("My Contacts").color(
if self.active_tab == ContactsTab::Contacts {
DashColors::WHITE
} else {
DashColors::text_primary(dark_mode)
},
))
.fill(if self.active_tab == ContactsTab::Contacts {
DashColors::DASH_BLUE
} else {
DashColors::glass_white(dark_mode)
})
.stroke(if self.active_tab == ContactsTab::Contacts {
egui::Stroke::NONE
let contacts_response = if self.active_tab == ContactsTab::Contacts {
ComponentStyles::add_primary_button(ui, "My Contacts")
} else {
egui::Stroke::new(1.0, DashColors::border(dark_mode))
})
.corner_radius(egui::CornerRadius::same(4))
.min_size(egui::Vec2::new(120.0, 28.0));

if ui.add(contacts_tab).clicked() {
ComponentStyles::add_secondary_button(ui, "My Contacts", dark_mode)
};
if contacts_response.clicked() {
self.active_tab = ContactsTab::Contacts;
}

Expand All @@ -375,27 +360,12 @@ impl ContactsList {
"Requests".to_string()
};

let requests_tab = egui::Button::new(RichText::new(requests_label).color(
if self.active_tab == ContactsTab::Requests {
DashColors::WHITE
} else {
DashColors::text_primary(dark_mode)
},
))
.fill(if self.active_tab == ContactsTab::Requests {
DashColors::DASH_BLUE
} else {
DashColors::glass_white(dark_mode)
})
.stroke(if self.active_tab == ContactsTab::Requests {
egui::Stroke::NONE
let requests_response = if self.active_tab == ContactsTab::Requests {
ComponentStyles::add_primary_button(ui, requests_label)
} else {
egui::Stroke::new(1.0, DashColors::border(dark_mode))
})
.corner_radius(egui::CornerRadius::same(4))
.min_size(egui::Vec2::new(120.0, 28.0));

if ui.add(requests_tab).clicked() {
ComponentStyles::add_secondary_button(ui, requests_label, dark_mode)
};
if requests_response.clicked() {
self.active_tab = ContactsTab::Requests;
}
});
Expand Down
12 changes: 2 additions & 10 deletions src/ui/dashpay/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ pub use profile_search::ProfileSearchScreen;
use crate::app::AppAction;
use crate::context::AppContext;
use crate::ui::ScreenType;
use crate::ui::theme::DashColors;
use crate::ui::theme::{ComponentStyles, DashColors};
use chrono::{LocalResult, TimeZone, Utc};
use chrono_humanize::HumanTime;

Expand Down Expand Up @@ -94,15 +94,7 @@ pub fn render_no_identities_card(ui: &mut Ui, app_context: &Arc<AppContext>) ->

ui.add_space(15.0);

let button = egui::Button::new(
RichText::new("Load Identity")
.color(egui::Color32::WHITE)
.strong(),
)
.fill(DashColors::DASH_BLUE)
.min_size(egui::vec2(150.0, 36.0));

if ui.add(button).clicked() {
if ComponentStyles::add_primary_button(ui, "Load Identity").clicked() {
return AppAction::AddScreen(
ScreenType::AddExistingIdentity.create_screen(app_context),
);
Expand Down
16 changes: 2 additions & 14 deletions src/ui/identities/top_up_identity_screen/by_platform_address.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ use crate::ui::components::MessageBanner;
use crate::ui::components::amount_input::AmountInput;
use crate::ui::components::component_trait::{Component, ComponentResponse};
use crate::ui::identities::funding_common::WalletFundedScreenStep;
use crate::ui::theme::DashColors;
use crate::ui::theme::{ComponentStyles, DashColors};
use dash_sdk::dpp::address_funds::PlatformAddress;
use dash_sdk::dpp::balances::credits::Credits;
use dash_sdk::dpp::dashcore::Address;
Expand Down Expand Up @@ -183,19 +183,7 @@ impl TopUpIdentityScreen {
_ => "Top Up Identity",
};

let button = egui::Button::new(
RichText::new(button_text)
.color(egui::Color32::WHITE)
.strong(),
)
.fill(if can_top_up {
DashColors::DASH_BLUE
} else {
DashColors::DASH_BLUE.gamma_multiply(0.5)
})
.min_size(egui::vec2(120.0, 36.0));

if ui.add_enabled(can_top_up, button).clicked() {
if ComponentStyles::add_primary_button_enabled(ui, can_top_up, button_text).clicked() {
match self.validate_and_top_up_from_platform() {
Ok(top_up_action) => {
action = top_up_action;
Expand Down
50 changes: 11 additions & 39 deletions src/ui/identities/transfer_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ use crate::ui::components::wallet_unlock_popup::{
WalletUnlockPopup, WalletUnlockResult, try_open_wallet_no_password, wallet_needs_unlock,
};
use crate::ui::helpers::{TransactionType, add_key_chooser};
use crate::ui::theme::{DashColors, ResponseExt};
use crate::ui::theme::{ComponentStyles, DashColors, ResponseExt};

/// Transfer destination type
#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
Expand Down Expand Up @@ -183,12 +183,6 @@ impl TransferScreen {
fn render_destination_type_selector(&mut self, ui: &mut Ui) {
let dark_mode = ui.ctx().style().visuals.dark_mode;

// Colors for selected/unselected states
let selected_fill = DashColors::DASH_BLUE;
let selected_text = Color32::WHITE;
let unselected_fill = DashColors::unselected_fill(dark_mode);
let unselected_text = DashColors::text_primary(dark_mode);

ui.horizontal(|ui| {
ui.vertical(|ui| {
ui.add_space(5.0);
Expand All @@ -198,23 +192,12 @@ impl TransferScreen {

// Identity button
let identity_selected = self.destination_type == TransferDestinationType::Identity;
let identity_button = egui::Button::new(
RichText::new("Identity")
.color(if identity_selected {
selected_text
} else {
unselected_text
})
.strong(),
)
.fill(if identity_selected {
selected_fill
let identity_response = if identity_selected {
ComponentStyles::add_primary_button(ui, "Identity")
} else {
unselected_fill
})
.min_size(egui::vec2(120.0, 28.0));

if ui.add(identity_button).clicked() {
ComponentStyles::add_secondary_button(ui, "Identity", dark_mode)
};
if identity_response.clicked() {
self.destination_type = TransferDestinationType::Identity;
}

Expand All @@ -223,23 +206,12 @@ impl TransferScreen {
// Platform Address button
let platform_selected =
self.destination_type == TransferDestinationType::PlatformAddress;
let platform_button = egui::Button::new(
RichText::new("Platform Address")
.color(if platform_selected {
selected_text
} else {
unselected_text
})
.strong(),
)
.fill(if platform_selected {
selected_fill
let platform_response = if platform_selected {
ComponentStyles::add_primary_button(ui, "Platform Address")
} else {
unselected_fill
})
.min_size(egui::vec2(140.0, 28.0));

if ui.add(platform_button).clicked() {
ComponentStyles::add_secondary_button(ui, "Platform Address", dark_mode)
};
if platform_response.clicked() {
self.destination_type = TransferDestinationType::PlatformAddress;
}
});
Expand Down
12 changes: 2 additions & 10 deletions src/ui/identities/withdraw_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ use crate::ui::components::wallet_unlock_popup::{
use crate::ui::components::{BannerHandle, MessageBanner, OptionBannerExt, ResultBannerExt};
use crate::ui::components::{Component, ComponentResponse};
use crate::ui::helpers::{TransactionType, add_key_chooser};
use crate::ui::theme::{DashColors, ResponseExt};
use crate::ui::theme::{ComponentStyles, DashColors, ResponseExt};
use crate::ui::{MessageType, Screen, ScreenLike};
use dash_sdk::dashcore_rpc::dashcore::{Address, Network};
use dash_sdk::dpp::fee::Credits;
Expand Down Expand Up @@ -597,13 +597,6 @@ impl ScreenLike for WithdrawalScreen {
ui.add_space(10.0);

// Withdraw button

let button = egui::Button::new(RichText::new("Withdraw").color(Color32::WHITE))
.fill(DashColors::DASH_BLUE)
.frame(true)
.corner_radius(3.0)
.min_size(egui::vec2(60.0, 30.0));

let has_valid_amount = self.withdrawal_amount.is_some();
let has_address_error = self.withdrawal_address_error.is_some();
let has_enough_balance = self.max_amount > estimated_fee;
Expand All @@ -622,8 +615,7 @@ impl ScreenLike for WithdrawalScreen {
String::new()
};

if ui
.add_enabled(ready, button)
if ComponentStyles::add_primary_button_enabled(ui, ready, "Withdraw")
.disabled_tooltip(&hover_text)
.clicked()
&& self.confirmation_dialog.is_none()
Expand Down
Loading