diff --git a/core/embed/rust/src/ui/model_mercury/component/keyboard/bip39.rs b/core/embed/rust/src/ui/model_mercury/component/keyboard/bip39.rs index 8aba67d34..81e01c2fc 100644 --- a/core/embed/rust/src/ui/model_mercury/component/keyboard/bip39.rs +++ b/core/embed/rust/src/ui/model_mercury/component/keyboard/bip39.rs @@ -196,7 +196,7 @@ impl Component for Bip39Input { let icon_center = area.top_right().center(area.bottom_right()) - Offset::new(16 + 8, 0); shape::ToifImage::new(icon_center, icon.toif) .with_align(Alignment2D::CENTER) - .with_fg(style.text_color) + .with_fg(style.icon_color) .render(target); } } @@ -227,7 +227,8 @@ impl Bip39Input { // Styling the input to reflect already filled word Self { - button: Button::with_icon(theme::ICON_LIST_CHECK).styled(theme::button_pin_confirm()), + button: Button::with_icon(theme::ICON_CONFIRM_INPUT) + .styled(theme::button_pin_confirm()), textbox: TextBox::new(unwrap!(String::try_from(word))), multi_tap: MultiTapKeyboard::new(), options_num: bip39::options_num(word), @@ -293,7 +294,7 @@ impl Bip39Input { self.button.enable(ctx); self.button.set_stylesheet(ctx, theme::button_pin_confirm()); self.button - .set_content(ctx, ButtonContent::Icon(theme::ICON_LIST_CHECK)); + .set_content(ctx, ButtonContent::Icon(theme::ICON_CONFIRM_INPUT)); self.button_suggestion .set_stylesheet(ctx, theme::button_suggestion_confirm()); } else { @@ -302,7 +303,7 @@ impl Bip39Input { self.button .set_stylesheet(ctx, theme::button_pin_autocomplete()); self.button - .set_content(ctx, ButtonContent::Icon(theme::ICON_CLICK)); + .set_content(ctx, ButtonContent::Icon(theme::ICON_AUTOFILL)); self.button_suggestion .set_stylesheet(ctx, theme::button_suggestion_autocomplete()); } diff --git a/core/embed/rust/src/ui/model_mercury/component/keyboard/mnemonic.rs b/core/embed/rust/src/ui/model_mercury/component/keyboard/mnemonic.rs index def0f6897..839dbbcd9 100644 --- a/core/embed/rust/src/ui/model_mercury/component/keyboard/mnemonic.rs +++ b/core/embed/rust/src/ui/model_mercury/component/keyboard/mnemonic.rs @@ -2,7 +2,7 @@ use crate::{ strutil::TString, ui::{ component::{maybe::paint_overlapping, Child, Component, Event, EventCtx, Label, Maybe}, - geometry::{Alignment2D, Grid, Offset, Rect}, + geometry::{Alignment, Grid, Rect}, model_mercury::{ component::{Button, ButtonMsg, Swipe, SwipeDirection}, theme, @@ -44,23 +44,23 @@ where Self { prompt: Child::new(Maybe::new( theme::BG, - Label::centered(prompt, theme::label_keyboard_prompt()), + Label::centered(prompt, theme::TEXT_MAIN_GREY_LIGHT), prompt_visible, )), back: Child::new(Maybe::new( theme::BG, - Button::with_icon_blend( - theme::IMAGE_BG_BACK_BTN_TALL, - theme::ICON_BACK, - Offset::new(30, 17), - ) - .styled(theme::button_reset()) - .with_long_press(theme::ERASE_HOLD_DURATION), + Button::with_icon(theme::ICON_DELETE) + .styled(theme::button_default()) + .with_long_press(theme::ERASE_HOLD_DURATION), !prompt_visible, )), input: Child::new(Maybe::new(theme::BG, input, !prompt_visible)), keys: T::keys() - .map(|t| Button::with_text(t.into()).styled(theme::button_pin())) + .map(|t| { + Button::with_text(t.into()) + .styled(theme::button_pin()) + .with_text_align(Alignment::Center) + }) .map(Child::new), swipe: Swipe::new().right(), can_go_back, @@ -109,23 +109,27 @@ where type Msg = MnemonicKeyboardMsg; fn place(&mut self, bounds: Rect) -> Rect { - let (_, bounds) = bounds - .inset(theme::borders()) - .split_bottom(4 * theme::MNEMONIC_BUTTON_HEIGHT + 3 * theme::KEYBOARD_SPACING); - let grid = Grid::new(bounds, 4, 3).with_spacing(theme::KEYBOARD_SPACING); - let back_area = grid.row_col(0, 0); - let input_area = grid.row_col(0, 1).union(grid.row_col(0, 3)); - - let prompt_center = grid.row_col(0, 0).union(grid.row_col(0, 3)).center(); - let prompt_size = self.prompt.inner().inner().max_size(); - let prompt_area = Rect::snap(prompt_center, prompt_size, Alignment2D::CENTER); + let height_input_area: i16 = 30; + let space_top: i16 = 8; + let (remaining, keyboard_area) = + bounds.split_bottom(3 * theme::BUTTON_HEIGHT + 2 * theme::KEYBOARD_SPACING); + let prompt_area = remaining + .split_top(space_top) + .1 + .split_top(height_input_area) + .0; + assert!(prompt_area.height() == height_input_area); + + let (back_btn_area, input_area) = prompt_area.split_left(30); + let keyboard_grid = Grid::new(keyboard_area, 3, 3).with_spacing(theme::KEYBOARD_SPACING); self.swipe.place(bounds); self.prompt.place(prompt_area); - self.back.place(back_area); + self.back.place(back_btn_area); self.input.place(input_area); + for (key, btn) in self.keys.iter_mut().enumerate() { - btn.place(grid.cell(key + grid.cols)); // Start in the second row. + btn.place(keyboard_grid.cell(key)); } bounds } @@ -185,9 +189,12 @@ where } fn render<'s>(&'s self, target: &mut impl Renderer<'s>) { - self.prompt.render(target); - self.input.render(target); - self.back.render(target); + if self.input.inner().inner().is_empty() { + self.prompt.render(target); + } else { + self.input.render(target); + self.back.render(target); + } for btn in &self.keys { btn.render(target); diff --git a/core/embed/rust/src/ui/model_mercury/component/keyboard/slip39.rs b/core/embed/rust/src/ui/model_mercury/component/keyboard/slip39.rs index 2aba48275..5160e7ddc 100644 --- a/core/embed/rust/src/ui/model_mercury/component/keyboard/slip39.rs +++ b/core/embed/rust/src/ui/model_mercury/component/keyboard/slip39.rs @@ -181,7 +181,7 @@ impl Component for Slip39Input { icon.draw( icon_center, Alignment2D::CENTER, - style.text_color, + style.icon_color, style.button_color, ); } @@ -247,7 +247,7 @@ impl Component for Slip39Input { let icon_center = area.top_right().center(area.bottom_right()) - Offset::new(16 + 8, 0); shape::ToifImage::new(icon_center, icon.toif) .with_align(Alignment2D::CENTER) - .with_fg(style.text_color) + .with_fg(style.icon_color) .render(target); } } @@ -356,7 +356,7 @@ impl Slip39Input { // Confirm button. self.button.enable(ctx); self.button - .set_content(ctx, ButtonContent::Icon(theme::ICON_LIST_CHECK)); + .set_content(ctx, ButtonContent::Icon(theme::ICON_CONFIRM_INPUT)); } else { // Disabled button. self.button.disable(ctx); diff --git a/core/embed/rust/src/ui/model_mercury/res/autofill30.png b/core/embed/rust/src/ui/model_mercury/res/autofill30.png index 16cd93f3a..67c67a7b7 100644 Binary files a/core/embed/rust/src/ui/model_mercury/res/autofill30.png and b/core/embed/rust/src/ui/model_mercury/res/autofill30.png differ diff --git a/core/embed/rust/src/ui/model_mercury/res/autofill30.toif b/core/embed/rust/src/ui/model_mercury/res/autofill30.toif index 5551d07fe..712fb68e2 100644 Binary files a/core/embed/rust/src/ui/model_mercury/res/autofill30.toif and b/core/embed/rust/src/ui/model_mercury/res/autofill30.toif differ diff --git a/core/embed/rust/src/ui/model_mercury/res/confirm_input30.png b/core/embed/rust/src/ui/model_mercury/res/confirm_input30.png new file mode 100644 index 000000000..dc7148c8c Binary files /dev/null and b/core/embed/rust/src/ui/model_mercury/res/confirm_input30.png differ diff --git a/core/embed/rust/src/ui/model_mercury/res/confirm_input30.toif b/core/embed/rust/src/ui/model_mercury/res/confirm_input30.toif new file mode 100644 index 000000000..a34c5e952 Binary files /dev/null and b/core/embed/rust/src/ui/model_mercury/res/confirm_input30.toif differ diff --git a/core/embed/rust/src/ui/model_mercury/res/delete30.png b/core/embed/rust/src/ui/model_mercury/res/delete30.png index 3366c0704..9e30374a8 100644 Binary files a/core/embed/rust/src/ui/model_mercury/res/delete30.png and b/core/embed/rust/src/ui/model_mercury/res/delete30.png differ diff --git a/core/embed/rust/src/ui/model_mercury/res/delete30.toif b/core/embed/rust/src/ui/model_mercury/res/delete30.toif index 925396407..eea1cf0df 100644 Binary files a/core/embed/rust/src/ui/model_mercury/res/delete30.toif and b/core/embed/rust/src/ui/model_mercury/res/delete30.toif differ diff --git a/core/embed/rust/src/ui/model_mercury/theme/mod.rs b/core/embed/rust/src/ui/model_mercury/theme/mod.rs index 48f28f81b..1aeb18bc6 100644 --- a/core/embed/rust/src/ui/model_mercury/theme/mod.rs +++ b/core/embed/rust/src/ui/model_mercury/theme/mod.rs @@ -88,6 +88,7 @@ include_icon!(ICON_WARNING, "model_mercury/res/warning24.toif"); // 30x30 include_icon!(ICON_AUTOFILL, "model_mercury/res/autofill30.toif"); include_icon!(ICON_CLOSE, "model_mercury/res/close30.toif"); +include_icon!(ICON_CONFIRM_INPUT, "model_mercury/res/confirm_input30.toif"); include_icon!(ICON_DELETE, "model_mercury/res/delete30.toif"); include_icon!(ICON_MENU, "model_mercury/res/menu30.toif"); include_icon!( @@ -411,27 +412,29 @@ pub const fn button_pin() -> ButtonStyleSheet { } } +// TODO: will button_pin_xyz styles be the same for PIN and Mnemonic keyboard? +// Wait for Figma pub const fn button_pin_confirm() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: Font::MONO, text_color: FG, - button_color: GREEN, - icon_color: GREY_LIGHT, + button_color: BG, + icon_color: GREEN_LIGHT, background_color: BG, }, active: &ButtonStyle { font: Font::MONO, text_color: FG, - button_color: GREEN_DARK, - icon_color: GREY_LIGHT, + button_color: GREY_DARK, + icon_color: GREEN_LIGHT, background_color: BG, }, disabled: &ButtonStyle { font: Font::MONO, - text_color: GREY_LIGHT, - button_color: GREY_DARK, - icon_color: GREY_LIGHT, + text_color: FG, + button_color: BG, + icon_color: GREEN_LIGHT, background_color: BG, }, } @@ -442,20 +445,20 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet { normal: &ButtonStyle { font: Font::MONO, text_color: FG, - button_color: GREY_DARK, // same as PIN buttons + button_color: BG, icon_color: GREY_LIGHT, background_color: BG, }, active: &ButtonStyle { font: Font::MONO, text_color: FG, - button_color: GREEN_DARK, + button_color: BG, icon_color: GREY_LIGHT, background_color: BG, }, disabled: &ButtonStyle { font: Font::MONO, - text_color: GREY_LIGHT, + text_color: FG, button_color: BG, icon_color: GREY_LIGHT, background_color: BG, @@ -467,7 +470,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: Font::MONO, - text_color: GREEN_DARK, + text_color: GREY_LIGHT, button_color: GREEN, icon_color: GREY_LIGHT, background_color: BG,