feat(core/ui): T3T1 Frame additions

This commit allows all combinations of Frame designs from Figma. This includes adding icon_color to ButtonStyle and a small cleanup of ButtonStyleSheets.
2025-01-03 12:00:59 +00:00 · 2024-04-20 21:27:37 +02:00 · 2024-04-20 21:27:37 +02:00 · 1882cc3a80
commit 1882cc3a80
parent fd96ae5548
9 changed files with 148 additions and 162 deletions
--- a/core/embed/rust/src/ui/component/label.rs
+++ b/core/embed/rust/src/ui/component/label.rs
@ -53,6 +53,11 @@ impl<'a> Label<'a> {
        self
    }

+    pub fn styled(mut self, style: TextStyle) -> Self {
+        self.layout.style = style;
+        self
+    }
+
    pub fn text(&self) -> &TString<'a> {
        &self.text
    }
--- a/core/embed/rust/src/ui/model_mercury/component/button.rs
+++ b/core/embed/rust/src/ui/model_mercury/component/button.rs
@ -222,7 +222,7 @@ impl Button {
                icon.draw(
                    self.area.center(),
                    Alignment2D::CENTER,
-                    style.text_color,
+                    style.icon_color,
                    style.button_color,
                );
            }
@ -253,7 +253,7 @@ impl Button {
            ButtonContent::Icon(icon) => {
                shape::ToifImage::new(self.area.center(), icon.toif)
                    .with_align(Alignment2D::CENTER)
-                    .with_fg(style.text_color)
+                    .with_fg(style.icon_color)
                    .render(target);
            }
            ButtonContent::IconAndText(child) => {
@ -267,7 +267,7 @@ impl Button {
                    .with_fg(style.button_color)
                    .render(target);
                shape::ToifImage::new(self.area.top_left() + *offset, fg.toif)
-                    .with_fg(style.text_color)
+                    .with_fg(style.icon_color)
                    .render(target);
            }
        }
@ -413,11 +413,13 @@ pub struct ButtonStyleSheet {
    pub disabled: &'static ButtonStyle,
 }

+// TODO: radius and borders not needed in T3T1 - sync with BL
 #[derive(PartialEq, Eq)]
 pub struct ButtonStyle {
    pub font: Font,
    pub text_color: Color,
    pub button_color: Color,
+    pub icon_color: Color,
    pub background_color: Color,
    pub border_color: Color,
    pub border_radius: u8,
@ -492,7 +494,7 @@ impl Button {
                (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Confirmed)
            });
        let top = Button::with_text(info)
-            .styled(theme::button_moreinfo())
+            .styled(theme::button_default())
            .map(|msg| (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Info));
        let left = Button::with_icon(theme::ICON_CANCEL).map(|msg| {
            (matches!(msg, ButtonMsg::Clicked)).then(|| CancelInfoConfirmMsg::Cancelled)
@ -583,7 +585,7 @@ impl IconText {
            self.icon.draw(
                icon_pos,
                Alignment2D::CENTER,
-                style.text_color,
+                style.icon_color,
                style.button_color,
            );
        }
@ -629,7 +631,7 @@ impl IconText {
        if use_icon {
            shape::ToifImage::new(icon_pos, self.icon.toif)
                .with_align(Alignment2D::CENTER)
-                .with_fg(style.text_color)
+                .with_fg(style.icon_color)
                .render(target);
        }
    }
--- a/core/embed/rust/src/ui/model_mercury/component/frame.rs
+++ b/core/embed/rust/src/ui/model_mercury/component/frame.rs
@ -11,7 +11,7 @@ use crate::{
    },
 };

-use super::{constant::SPACING, Button, ButtonMsg, CancelInfoConfirmMsg, Footer};
+use super::{constant::SPACING, Button, ButtonMsg, ButtonStyleSheet, CancelInfoConfirmMsg, Footer};

 const TITLE_HEIGHT: i16 = 42;

@ -36,9 +36,10 @@ where
    T: Component,
 {
    pub fn new(alignment: Alignment, title: TString<'static>, content: T) -> Self {
-        let style: TextStyle = theme::label_title_main();
        Self {
-            title: Child::new(Label::new(title, alignment, style).vertically_centered()),
+            title: Child::new(
+                Label::new(title, alignment, theme::label_title_main()).vertically_centered(),
+            ),
            subtitle: None,
            border: theme::borders(),
            button: None,
@ -65,6 +66,11 @@ where
        self
    }

+    pub fn title_styled(mut self, style: TextStyle) -> Self {
+        self.title = Child::new(self.title.into_inner().styled(style));
+        self
+    }
+
    pub fn with_subtitle(mut self, subtitle: TString<'static>) -> Self {
        let style = theme::TEXT_SUB_GREY_LIGHT;
        self.title = Child::new(self.title.into_inner().top_aligned());
@ -76,7 +82,7 @@ where
        self
    }

-    fn with_button(mut self, icon: Icon, msg: CancelInfoConfirmMsg) -> Self {
+    fn with_button(mut self, icon: Icon, msg: CancelInfoConfirmMsg, enabled: bool) -> Self {
        let touch_area = Insets {
            left: self.border.left * 4,
            bottom: self.border.bottom * 4,
@ -85,18 +91,30 @@ where
        self.button = Some(Child::new(
            Button::with_icon(icon)
                .with_expanded_touch_area(touch_area)
-                .styled(theme::button_moreinfo()),
+                .initially_enabled(enabled)
+                .styled(theme::button_default()),
        ));
        self.button_msg = msg;
        self
    }

    pub fn with_cancel_button(self) -> Self {
-        self.with_button(theme::ICON_CORNER_CANCEL, CancelInfoConfirmMsg::Cancelled)
+        self.with_button(theme::ICON_CLOSE, CancelInfoConfirmMsg::Cancelled, true)
    }

-    pub fn with_info_button(self) -> Self {
-        self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info)
+    pub fn with_menu_button(self) -> Self {
+        self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info, true)
+    }
+
+    pub fn with_warning_button(self) -> Self {
+        self.with_button(theme::ICON_WARNING, CancelInfoConfirmMsg::Info, false)
+    }
+
+    pub fn button_styled(mut self, style: ButtonStyleSheet) -> Self {
+        if self.button.is_some() {
+            self.button = Some(Child::new(self.button.unwrap().into_inner().styled(style)));
+        }
+        self
    }

    pub fn with_footer(
--- a/core/embed/rust/src/ui/model_mercury/component/share_words.rs
+++ b/core/embed/rust/src/ui/model_mercury/component/share_words.rs
@ -1,6 +1,7 @@
 use super::theme;
 use crate::{
    strutil::TString,
+    translations::TR,
    ui::{
        component::{Component, Event, EventCtx, PageMsg, Paginate},
        constant::SPACING,
@ -39,7 +40,7 @@ impl<'a> ShareWords<'a> {
            page_index: 0,
            area_word: Rect::zero(),
            swipe: Swipe::new().up().down(),
-            footer: Footer::new("Swipe up"),
+            footer: Footer::new(TR::instructions__swipe_up),
        }
    }

@ -105,7 +106,11 @@ impl<'a> Component for ShareWords<'a> {
        // the ordinal number of the current word
        let ordinal_val = self.page_index as u8 + 1;
        let ordinal_pos = self.area_word.top_left()
-            + Offset::y(theme::TEXT_SUB_GREY_LIGHT.text_font.visible_text_height("1"));
+            + Offset::y(
+                theme::TEXT_SUB_GREY_LIGHT
+                    .text_font
+                    .visible_text_height("1"),
+            );
        let ordinal = build_string!(3, inttostr!(ordinal_val), ".");
        shape::Text::new(ordinal_pos, &ordinal)
            .with_font(theme::TEXT_SUB_GREY_LIGHT.text_font)
--- a/core/embed/rust/src/ui/model_mercury/component/vertical_menu.rs
+++ b/core/embed/rust/src/ui/model_mercury/component/vertical_menu.rs
@ -53,7 +53,7 @@ impl VerticalMenu {
    pub fn select_word(words: [StrBuffer; 3]) -> Self {
        let mut buttons_vec = VerticalMenuButtons::new();
        for word in words {
-            let button = Button::with_text(word.into()).styled(theme::button_vertical_menu());
+            let button = Button::with_text(word.into()).styled(theme::button_default());
            unwrap!(buttons_vec.push(button));
        }
        Self::new(buttons_vec)
@ -67,10 +67,10 @@ impl VerticalMenu {
            match opt.1 {
                // FIXME: might not be applicable everywhere
                theme::ICON_CANCEL => {
-                    button_theme = theme::button_vertical_menu_orange();
+                    button_theme = theme::button_warning_high();
                }
                _ => {
-                    button_theme = theme::button_vertical_menu();
+                    button_theme = theme::button_default();
                }
            }
            unwrap!(buttons_vec.push(
--- a/core/embed/rust/src/ui/model_mercury/flow/get_address.rs
+++ b/core/embed/rust/src/ui/model_mercury/flow/get_address.rs
@ -115,7 +115,7 @@ impl GetAddress {
                    ))),
                )
                .with_subtitle("address".into())
-                .with_info_button(),
+                .with_menu_button(),
                |msg| matches!(msg, FrameMsg::Button(_)).then_some(FlowMsg::Info),
            )?
            .add(
--- a/core/embed/rust/src/ui/model_mercury/layout.rs
+++ b/core/embed/rust/src/ui/model_mercury/layout.rs
@ -537,7 +537,7 @@ impl ConfirmBlobParams {
            frame = frame.with_subtitle(subtitle);
        }
        if self.info_button {
-            frame = frame.with_info_button();
+            frame = frame.with_menu_button();
        }
        let obj = LayoutObj::new(frame)?;
        Ok(obj.into())
@ -604,7 +604,7 @@ extern "C" fn new_confirm_address(n_args: usize, args: *const Obj, kwargs: *mut
                    .with_swipe_left()
                    .with_cancel_confirm(None, Some(verb)),
            )
-            .with_info_button(),
+            .with_menu_button(),
        )?;
        Ok(obj.into())
    };
@ -791,7 +791,7 @@ extern "C" fn new_confirm_total(n_args: usize, args: *const Obj, kwargs: *mut Ma
        }
        let mut frame = Frame::left_aligned(title, page);
        if info_button {
-            frame = frame.with_info_button();
+            frame = frame.with_menu_button();
        }
        let obj = LayoutObj::new(frame)?;
        Ok(obj.into())
@ -867,7 +867,7 @@ extern "C" fn new_confirm_modify_fee(n_args: usize, args: *const Obj, kwargs: *m
                    .with_hold()?
                    .with_swipe_left(),
            )
-            .with_info_button(),
+            .with_menu_button(),
        )?;
        Ok(obj.into())
    };
@ -1290,7 +1290,7 @@ extern "C" fn new_show_share_words(n_args: usize, args: *const Obj, kwargs: *mut
        let share_words_vec: Vec<TString, 33> = util::iter_into_vec(share_words_obj)?;

        let share_words = ShareWords::new(share_words_vec);
-        let frame_with_share_words = Frame::left_aligned(title, share_words).with_info_button();
+        let frame_with_share_words = Frame::left_aligned(title, share_words);
        let obj = LayoutObj::new(frame_with_share_words)?;
        Ok(obj.into())
    };
@ -1593,7 +1593,7 @@ extern "C" fn new_confirm_firmware_update(
            Confirm::new(theme::BG, left, right, ConfirmTitle::Text(title), msg).with_info(
                TR::firmware_update__title_fingerprint.into(),
                fingerprint,
-                theme::button_moreinfo(),
+                theme::button_default(),
            ),
        )?;
        Ok(obj.into())
--- a/core/embed/rust/src/ui/model_mercury/theme/bootloader.rs
+++ b/core/embed/rust/src/ui/model_mercury/theme/bootloader.rs
@ -75,6 +75,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_BG,
            button_color: WHITE,
+            icon_color: BLD_BG,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: RADIUS,
@ -84,6 +85,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_BG,
            button_color: BLD_INSTALL_BTN_COLOR_ACTIVE,
+            icon_color: BLD_BG,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: RADIUS,
@ -93,6 +95,7 @@ pub fn button_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: GREY_DARK,
+            icon_color: BLD_BG,
            background_color: FG,
            border_color: FG,
            border_radius: RADIUS,
@ -107,6 +110,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: WHITE,
            button_color: BLD_WIPE_CANCEL_BTN_COLOR,
+            icon_color: WHITE,
            background_color: BLD_WIPE_COLOR,
            border_color: BLD_WIPE_COLOR,
            border_radius: RADIUS,
@ -116,6 +120,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: WHITE,
            button_color: BLD_WIPE_CANCEL_BTN_COLOR_ACTIVE,
+            icon_color: WHITE,
            background_color: BLD_WIPE_COLOR,
            border_color: BLD_WIPE_COLOR,
            border_radius: RADIUS,
@ -125,6 +130,7 @@ pub fn button_wipe_cancel() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: GREY_LIGHT,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: WHITE,
            border_color: WHITE,
            border_radius: RADIUS,
@ -139,6 +145,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_WIPE_COLOR,
            button_color: BLD_WIPE_BTN_COLOR,
+            icon_color: BLD_WIPE_COLOR,
            background_color: BLD_WIPE_COLOR,
            border_color: BLD_WIPE_COLOR,
            border_radius: RADIUS,
@ -148,6 +155,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_WIPE_COLOR,
            button_color: BLD_WIPE_BTN_COLOR_ACTIVE,
+            icon_color: BLD_WIPE_COLOR,
            background_color: BLD_WIPE_COLOR,
            border_color: BLD_WIPE_COLOR,
            border_radius: RADIUS,
@ -157,6 +165,7 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: GREY_DARK,
+            icon_color: FG,
            background_color: FG,
            border_color: FG,
            border_radius: RADIUS,
@ -171,6 +180,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_FG,
            button_color: BLD_BG,
+            icon_color: BLD_FG,
            background_color: BLD_BG,
            border_color: BLD_BTN_COLOR,
            border_radius: 2,
@ -180,6 +190,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_FG,
            button_color: BLD_BG,
+            icon_color: BLD_FG,
            background_color: BLD_BG,
            border_color: BLD_BTN_COLOR_ACTIVE,
            border_radius: 2,
@ -189,6 +200,7 @@ pub fn button_bld_menu() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: GREY_LIGHT,
            button_color: BLD_BG,
+            icon_color: GREY_LIGHT,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: 2,
@ -203,6 +215,7 @@ pub fn button_bld() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_FG,
            button_color: BLD_BTN_COLOR,
+            icon_color: BLD_FG,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: 4,
@ -212,6 +225,7 @@ pub fn button_bld() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: BLD_FG,
            button_color: BLD_BTN_COLOR_ACTIVE,
+            icon_color: BLD_FG,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: 4,
@ -221,6 +235,7 @@ pub fn button_bld() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: GREY_LIGHT,
            button_color: BLD_BTN_COLOR,
+            icon_color: GREY_LIGHT,
            background_color: BLD_BG,
            border_color: BLD_BG,
            border_radius: 4,
--- a/core/embed/rust/src/ui/model_mercury/theme/mod.rs
+++ b/core/embed/rust/src/ui/model_mercury/theme/mod.rs
@ -225,27 +225,30 @@ pub const fn label_coinjoin_progress() -> TextStyle {
 pub const fn button_default() -> ButtonStyleSheet {
    ButtonStyleSheet {
        normal: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: GREY_DARK,
+            font: Font::DEMIBOLD,
+            text_color: GREY_LIGHT,
+            button_color: BG,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
            border_width: 0,
        },
        active: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: GREY_MEDIUM,
+            font: Font::DEMIBOLD,
+            text_color: GREY_LIGHT,
+            button_color: BG,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
            border_width: 0,
        },
        disabled: &ButtonStyle {
-            font: Font::BOLD,
+            font: Font::DEMIBOLD,
            text_color: GREY_LIGHT,
-            button_color: GREY_DARK,
+            button_color: BG,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -254,12 +257,49 @@ pub const fn button_default() -> ButtonStyleSheet {
    }
 }

+pub const fn button_warning_high() -> ButtonStyleSheet {
+    ButtonStyleSheet {
+        normal: &ButtonStyle {
+            font: Font::DEMIBOLD,
+            text_color: ORANGE_LIGHT,
+            button_color: BG,
+            icon_color: ORANGE_DIMMED,
+            background_color: BG,
+            border_color: BG,
+            border_radius: RADIUS,
+            border_width: 0,
+        },
+        active: &ButtonStyle {
+            font: Font::DEMIBOLD,
+            text_color: ORANGE_LIGHT,
+            button_color: BG,
+            icon_color: ORANGE_DIMMED,
+            background_color: BG,
+            border_color: BG,
+            border_radius: RADIUS,
+            border_width: 0,
+        },
+        disabled: &ButtonStyle {
+            font: Font::DEMIBOLD,
+            text_color: ORANGE_LIGHT,
+            button_color: BG,
+            icon_color: ORANGE_DIMMED,
+            background_color: BG,
+            border_color: BG,
+            border_radius: RADIUS,
+            border_width: 0,
+        },
+    }
+}
+
+// TODO: delete
 pub const fn button_confirm() -> ButtonStyleSheet {
    ButtonStyleSheet {
        normal: &ButtonStyle {
            font: Font::BOLD,
            text_color: FG,
            button_color: GREEN,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -269,6 +309,7 @@ pub const fn button_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -278,6 +319,7 @@ pub const fn button_confirm() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: GREY_LIGHT,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -286,12 +328,14 @@ pub const fn button_confirm() -> ButtonStyleSheet {
    }
 }

+// TODO: delete
 pub const fn button_cancel() -> ButtonStyleSheet {
    ButtonStyleSheet {
        normal: &ButtonStyle {
            font: Font::BOLD,
            text_color: FG,
            button_color: RED,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -301,6 +345,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: RED_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -310,6 +355,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: GREY_LIGHT,
            button_color: RED,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -318,6 +364,7 @@ pub const fn button_cancel() -> ButtonStyleSheet {
    }
 }

+// TODO: delete
 pub const fn button_danger() -> ButtonStyleSheet {
    button_cancel()
 }
@ -328,6 +375,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: YELLOW,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -337,6 +385,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: YELLOW_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -346,6 +395,7 @@ pub const fn button_reset() -> ButtonStyleSheet {
            font: Font::BOLD,
            text_color: FG,
            button_color: YELLOW,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -354,140 +404,13 @@ pub const fn button_reset() -> ButtonStyleSheet {
    }
 }

-pub const fn button_moreinfo() -> ButtonStyleSheet {
-    ButtonStyleSheet {
-        normal: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: BG,
-            background_color: BG,
-            border_color: BG,
-            border_radius: 0,
-            border_width: 1,
-        },
-        active: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: BG,
-            background_color: BG,
-            border_color: GREY_DARK,
-            border_radius: 0,
-            border_width: 1,
-        },
-        disabled: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: GREY_LIGHT,
-            button_color: BG,
-            background_color: BG,
-            border_color: BG,
-            border_radius: 0,
-            border_width: 1,
-        },
-    }
-}
-
-pub const fn button_info() -> ButtonStyleSheet {
-    ButtonStyleSheet {
-        normal: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: BLUE,
-            background_color: BG,
-            border_color: BG,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        active: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: FG,
-            button_color: BLUE_DARK,
-            background_color: BG,
-            border_color: FG,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        disabled: &ButtonStyle {
-            font: Font::BOLD,
-            text_color: GREY_LIGHT,
-            button_color: BLUE,
-            background_color: BG,
-            border_color: BG,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-    }
-}
-
-pub const fn button_vertical_menu() -> ButtonStyleSheet {
-    ButtonStyleSheet {
-        normal: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: GREY_EXTRA_LIGHT,
-            button_color: BG,
-            background_color: BG,
-            border_color: BG,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        // TODO: change when figma done
-        active: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: FG,
-            button_color: GREEN_LIME,
-            background_color: GREY_EXTRA_DARK,
-            border_color: GREEN_LIME,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        disabled: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: GREY_LIGHT,
-            button_color: GREEN_LIME,
-            background_color: GREY_EXTRA_DARK,
-            border_color: GREEN_LIME,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-    }
-}
-
-pub const fn button_vertical_menu_orange() -> ButtonStyleSheet {
-    ButtonStyleSheet {
-        normal: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: ORANGE_LIGHT,
-            button_color: BG,
-            background_color: BG,
-            border_color: BG,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        active: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: FG,
-            button_color: GREEN_LIME,
-            background_color: GREY_EXTRA_DARK,
-            border_color: GREEN_LIME,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-        disabled: &ButtonStyle {
-            font: Font::NORMAL,
-            text_color: GREY_LIGHT,
-            button_color: GREEN_LIME,
-            background_color: GREY_EXTRA_DARK,
-            border_color: GREEN_LIME,
-            border_radius: RADIUS,
-            border_width: 0,
-        },
-    }
-}
 pub const fn button_pin() -> ButtonStyleSheet {
    ButtonStyleSheet {
        normal: &ButtonStyle {
            font: Font::MONO,
            text_color: FG,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -497,6 +420,7 @@ pub const fn button_pin() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREY_MEDIUM,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -506,6 +430,7 @@ pub const fn button_pin() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: BG, // so there is no "button" itself, just the text
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -520,6 +445,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREEN,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -529,6 +455,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -538,6 +465,7 @@ pub const fn button_pin_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -552,6 +480,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREY_DARK, // same as PIN buttons
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -561,6 +490,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -570,6 +500,7 @@ pub const fn button_pin_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: BG,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -584,6 +515,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREEN_DARK,
            button_color: GREEN,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -593,6 +525,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -602,6 +535,7 @@ pub const fn button_suggestion_confirm() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -616,6 +550,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: GREY_DARK, // same as PIN buttons
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -625,6 +560,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: FG,
            button_color: GREEN_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -634,6 +570,7 @@ pub const fn button_suggestion_autocomplete() -> ButtonStyleSheet {
            font: Font::MONO,
            text_color: GREY_LIGHT,
            button_color: BG,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -648,6 +585,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
            font: Font::DEMIBOLD,
            text_color: FG,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -657,6 +595,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
            font: Font::DEMIBOLD,
            text_color: FG,
            button_color: GREY_MEDIUM,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: FG,
            border_radius: RADIUS,
@ -666,6 +605,7 @@ pub const fn button_counter() -> ButtonStyleSheet {
            font: Font::DEMIBOLD,
            text_color: GREY_LIGHT,
            button_color: GREY_DARK,
+            icon_color: GREY_LIGHT,
            background_color: BG,
            border_color: BG,
            border_radius: RADIUS,
@ -715,6 +655,7 @@ pub const TEXT_MAIN_GREY_LIGHT: TextStyle =
    TextStyle::new(Font::NORMAL, GREY_LIGHT, BG, GREY, GREY);
 pub const TEXT_SUB_GREY_LIGHT: TextStyle = TextStyle::new(Font::SUB, GREY_LIGHT, BG, GREY, GREY);
 pub const TEXT_SUB_GREY: TextStyle = TextStyle::new(Font::SUB, GREY, BG, GREY, GREY);
+pub const TEXT_WARNING: TextStyle = TextStyle::new(Font::NORMAL, ORANGE_LIGHT, BG, GREY, GREY);
 pub const TEXT_MONO: TextStyle = TextStyle::new(Font::MONO, GREY_EXTRA_LIGHT, BG, GREY, GREY)
    .with_line_breaking(LineBreaking::BreakWordsNoHyphen)
    .with_page_breaking(PageBreaking::CutAndInsertEllipsisBoth)