feat(core/ui): T3T1 word count choice

core/embed/rust/src/ui/model_mercury/component/button.rs

@@ -9,7 +9,7 @@ use crate::{
         },
         display::{self, toif::Icon, Color, Font},
         event::TouchEvent,
-        geometry::{Alignment2D, Insets, Offset, Point, Rect},
+        geometry::{Alignment, Alignment2D, Insets, Offset, Point, Rect},
         shape,
         shape::Renderer,
     },
@@ -30,6 +30,7 @@ pub struct Button {
     touch_expand: Option<Insets>,
     content: ButtonContent,
     styles: ButtonStyleSheet,
+    text_align: Alignment,
     state: State,
     long_press: Option<Duration>,
     long_timer: Option<TimerToken>,
@@ -47,6 +48,7 @@ impl Button {
             area: Rect::zero(),
             touch_expand: None,
             styles: theme::button_default(),
+            text_align: Alignment::Start,
             state: State::Initial,
             long_press: None,
             long_timer: None,
@@ -78,6 +80,11 @@ impl Button {
         self
     }
 
+    pub const fn with_text_align(mut self, align: Alignment) -> Self {
+        self.text_align = align;
+        self
+    }
+
     pub const fn with_expanded_touch_area(mut self, expand: Insets) -> Self {
         self.touch_expand = Some(expand);
         self
@@ -217,11 +224,19 @@ impl Button {
         match &self.content {
             ButtonContent::Empty => {}
             ButtonContent::Text(text) => {
-                let start_of_baseline = self.area.left_center() + Self::BASELINE_OFFSET;
+                let y_offset = Offset::y(self.style().font.allcase_text_height() / 2);
+                let start_of_baseline = match self.text_align {
+                    Alignment::Start => {
+                        self.area.left_center() + Offset::x(Self::BASELINE_OFFSET.x)
+                    }
+                    Alignment::Center => self.area.center(),
+                    Alignment::End => self.area.right_center() - Offset::x(Self::BASELINE_OFFSET.x),
+                } + y_offset;
                 text.map(|text| {
                     shape::Text::new(start_of_baseline, text)
                         .with_font(style.font)
                         .with_fg(style.text_color)
+                        .with_align(self.text_align)
                         .render(target);
                 });
             }

core/embed/rust/src/ui/model_mercury/component/keyboard/word_count.rs

@@ -1,6 +1,6 @@
 use crate::ui::{
     component::{Component, Event, EventCtx},
-    geometry::{Grid, GridCellSpan, Rect},
+    geometry::{Alignment, Grid, GridCellSpan, Rect},
     model_mercury::{
         component::button::{Button, ButtonMsg},
         theme,
@@ -10,7 +10,7 @@ use crate::ui::{
 
 const NUMBERS: [u32; 5] = [12, 18, 20, 24, 33];
 const LABELS: [&str; 5] = ["12", "18", "20", "24", "33"];
-const CELLS: [(usize, usize); 5] = [(0, 0), (0, 2), (0, 4), (1, 0), (1, 2)];
+const CELLS: [(usize, usize); 5] = [(0, 0), (0, 2), (1, 0), (1, 2), (2, 1)];
 
 pub struct SelectWordCount {
     button: [Button; NUMBERS.len()],
@@ -23,7 +23,11 @@ pub enum SelectWordCountMsg {
 impl SelectWordCount {
     pub fn new() -> Self {
         SelectWordCount {
-            button: LABELS.map(|t| Button::with_text(t.into()).styled(theme::button_pin())),
+            button: LABELS.map(|t| {
+                Button::with_text(t.into())
+                    .styled(theme::button_pin())
+                    .with_text_align(Alignment::Center)
+            }),
         }
     }
 }
@@ -32,8 +36,13 @@ impl Component for SelectWordCount {
     type Msg = SelectWordCountMsg;
 
     fn place(&mut self, bounds: Rect) -> Rect {
-        let (_, bounds) = bounds.split_bottom(2 * theme::BUTTON_HEIGHT + theme::BUTTON_SPACING);
-        let grid = Grid::new(bounds, 2, 6).with_spacing(theme::BUTTON_SPACING);
+        let n_rows: usize = 3;
+        let n_cols: usize = 4;
+
+        let (_, bounds) = bounds.split_bottom(
+            n_rows as i16 * theme::BUTTON_HEIGHT + (n_rows as i16 - 1) * theme::BUTTON_SPACING,
+        );
+        let grid = Grid::new(bounds, n_rows, n_cols).with_spacing(theme::BUTTON_SPACING);
         for (btn, (x, y)) in self.button.iter_mut().zip(CELLS) {
             btn.place(grid.cells(GridCellSpan {
                 from: (x, y),

core/embed/rust/src/ui/model_mercury/theme/mod.rs

@@ -388,22 +388,22 @@ pub const fn button_reset() -> ButtonStyleSheet {
 pub const fn button_pin() -> ButtonStyleSheet {
     ButtonStyleSheet {
         normal: &ButtonStyle {
-            font: Font::MONO,
-            text_color: FG,
-            button_color: GREY_DARK,
+            font: Font::NORMAL,
+            text_color: GREY_LIGHT,
+            button_color: GREY_EXTRA_DARK,
             icon_color: GREY_LIGHT,
             background_color: BG,
         },
         active: &ButtonStyle {
-            font: Font::MONO,
-            text_color: FG,
-            button_color: GREY_MEDIUM,
+            font: Font::NORMAL,
+            text_color: GREY_LIGHT,
+            button_color: GREY_EXTRA_DARK,
             icon_color: GREY_LIGHT,
             background_color: BG,
         },
         disabled: &ButtonStyle {
-            font: Font::MONO,
-            text_color: GREY_LIGHT,
+            font: Font::NORMAL,
+            text_color: GREY_DARK,
             button_color: BG, // so there is no "button" itself, just the text
             icon_color: GREY_LIGHT,
             background_color: BG,
@@ -639,9 +639,9 @@ pub const TEXT_CHECKLIST_DONE: TextStyle =
     TextStyle::new(Font::NORMAL, GREEN_DARK, BG, GREY_LIGHT, GREY_LIGHT);
 
 pub const CONTENT_BORDER: i16 = 0;
-pub const BUTTON_HEIGHT: i16 = 50;
-pub const BUTTON_WIDTH: i16 = 56;
-pub const BUTTON_SPACING: i16 = 6;
+pub const BUTTON_HEIGHT: i16 = 62;
+pub const BUTTON_WIDTH: i16 = 78;
+pub const BUTTON_SPACING: i16 = 2;
 pub const KEYBOARD_SPACING: i16 = BUTTON_SPACING;
 pub const CHECKLIST_SPACING: i16 = 10;
 pub const RECOVERY_SPACING: i16 = 18;