From 59bde49018103102cd5e05dddbb3086c04a6ae87 Mon Sep 17 00:00:00 2001 From: obrusvit Date: Sat, 20 Apr 2024 21:27:37 +0200 Subject: [PATCH] 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. --- core/embed/rust/src/ui/component/label.rs | 5 + .../src/ui/model_mercury/component/button.rs | 14 +- .../src/ui/model_mercury/component/frame.rs | 34 ++- .../ui/model_mercury/component/share_words.rs | 9 +- .../model_mercury/component/vertical_menu.rs | 6 +- .../src/ui/model_mercury/flow/get_address.rs | 2 +- .../embed/rust/src/ui/model_mercury/layout.rs | 12 +- .../src/ui/model_mercury/theme/bootloader.rs | 15 ++ .../rust/src/ui/model_mercury/theme/mod.rs | 203 +++++++----------- 9 files changed, 143 insertions(+), 157 deletions(-) diff --git a/core/embed/rust/src/ui/component/label.rs b/core/embed/rust/src/ui/component/label.rs index d39dd247d..666552a5d 100644 --- 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 } diff --git a/core/embed/rust/src/ui/model_mercury/component/button.rs b/core/embed/rust/src/ui/model_mercury/component/button.rs index b55a85cf3..fae79c8c6 100644 --- 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); } } diff --git a/core/embed/rust/src/ui/model_mercury/component/frame.rs b/core/embed/rust/src/ui/model_mercury/component/frame.rs index fae6c4b0a..d0b9fb503 100644 --- 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_menu_button(self) -> Self { + self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info, true) } - pub fn with_info_button(self) -> Self { - self.with_button(theme::ICON_MENU, CancelInfoConfirmMsg::Info) + 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( diff --git a/core/embed/rust/src/ui/model_mercury/component/share_words.rs b/core/embed/rust/src/ui/model_mercury/component/share_words.rs index 564d3173d..aa888fce6 100644 --- 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) diff --git a/core/embed/rust/src/ui/model_mercury/component/vertical_menu.rs b/core/embed/rust/src/ui/model_mercury/component/vertical_menu.rs index 13edb4381..127d75889 100644 --- 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( diff --git a/core/embed/rust/src/ui/model_mercury/flow/get_address.rs b/core/embed/rust/src/ui/model_mercury/flow/get_address.rs index 13065dd9e..716a0c231 100644 --- 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( diff --git a/core/embed/rust/src/ui/model_mercury/layout.rs b/core/embed/rust/src/ui/model_mercury/layout.rs index 0e1c65967..7b0eb7bf6 100644 --- 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 = 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()) diff --git a/core/embed/rust/src/ui/model_mercury/theme/bootloader.rs b/core/embed/rust/src/ui/model_mercury/theme/bootloader.rs index 854c18397..57a9271aa 100644 --- 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, 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 1f526d94b..a1325449c 100644 --- 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,30 +257,33 @@ pub const fn button_default() -> ButtonStyleSheet { } } -pub const fn button_confirm() -> ButtonStyleSheet { +pub const fn button_warning_high() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { - font: Font::BOLD, - text_color: FG, - button_color: GREEN, + 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::BOLD, - text_color: FG, - button_color: GREEN_DARK, + font: Font::DEMIBOLD, + text_color: ORANGE_LIGHT, + button_color: BG, + icon_color: ORANGE_DIMMED, background_color: BG, - border_color: FG, + border_color: BG, border_radius: RADIUS, border_width: 0, }, disabled: &ButtonStyle { - font: Font::BOLD, - text_color: GREY_LIGHT, - button_color: GREEN_DARK, + font: Font::DEMIBOLD, + text_color: ORANGE_LIGHT, + button_color: BG, + icon_color: ORANGE_DIMMED, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -286,12 +292,14 @@ pub const fn button_confirm() -> ButtonStyleSheet { } } -pub const fn button_cancel() -> ButtonStyleSheet { +// TODO: delete +pub const fn button_confirm() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: RED, + button_color: GREEN, + icon_color: GREY_LIGHT, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -300,7 +308,8 @@ pub const fn button_cancel() -> ButtonStyleSheet { active: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: RED_DARK, + button_color: GREEN_DARK, + icon_color: GREY_LIGHT, background_color: BG, border_color: FG, border_radius: RADIUS, @@ -309,7 +318,8 @@ pub const fn button_cancel() -> ButtonStyleSheet { disabled: &ButtonStyle { font: Font::BOLD, text_color: GREY_LIGHT, - button_color: RED, + button_color: GREEN_DARK, + icon_color: GREY_LIGHT, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -318,16 +328,14 @@ pub const fn button_cancel() -> ButtonStyleSheet { } } -pub const fn button_danger() -> ButtonStyleSheet { - button_cancel() -} - -pub const fn button_reset() -> ButtonStyleSheet { +// TODO: delete +pub const fn button_cancel() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: YELLOW, + button_color: RED, + icon_color: GREY_LIGHT, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -336,7 +344,8 @@ pub const fn button_reset() -> ButtonStyleSheet { active: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: YELLOW_DARK, + button_color: RED_DARK, + icon_color: GREY_LIGHT, background_color: BG, border_color: FG, border_radius: RADIUS, @@ -344,8 +353,9 @@ pub const fn button_reset() -> ButtonStyleSheet { }, disabled: &ButtonStyle { font: Font::BOLD, - text_color: FG, - button_color: YELLOW, + text_color: GREY_LIGHT, + button_color: RED, + icon_color: GREY_LIGHT, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -354,44 +364,18 @@ 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, - }, - } +// TODO: delete +pub const fn button_danger() -> ButtonStyleSheet { + button_cancel() } -pub const fn button_info() -> ButtonStyleSheet { +pub const fn button_reset() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: BLUE, + button_color: YELLOW, + icon_color: GREY_LIGHT, background_color: BG, border_color: BG, border_radius: RADIUS, @@ -400,7 +384,8 @@ pub const fn button_info() -> ButtonStyleSheet { active: &ButtonStyle { font: Font::BOLD, text_color: FG, - button_color: BLUE_DARK, + button_color: YELLOW_DARK, + icon_color: GREY_LIGHT, background_color: BG, border_color: FG, border_radius: RADIUS, @@ -408,86 +393,24 @@ pub const fn button_info() -> ButtonStyleSheet { }, 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, + button_color: YELLOW, + icon_color: GREY_LIGHT, 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)