app/wallet: improve subtitles and separators

bin/app/src/app/schema/wallet/data.rs

@@ -26,7 +26,8 @@ mod android_ui_consts {
     pub const BACKARROW_X: f32 = 70.;
     pub const BACKARROW_Y: f32 = 70.;
     pub const BACKARROW_BG_W: f32 = 140.;
-    pub const TITLE_FONTSIZE: f32 = 56.;
+    pub const TITLE_FONTSIZE: f32 = 46.;
+    pub const SUBTITLE_FONTSIZE: f32 = 56.;
     pub const BUTTON_FONTSIZE: f32 = 48.;
     pub const BASE_FONTSIZE: f32 = 48.;
     pub const HINT_FONTSIZE: f32 = BASE_FONTSIZE * 0.8;
@@ -35,7 +36,7 @@ mod android_ui_consts {
     pub const AMOUNT_TOKEN_SPACING: f32 = AMOUNT_FONTSIZE * 0.35;
     pub const BUTTON_HEIGHT: f32 = 200.;
     pub const TOKEN_ROW_HEIGHT: f32 = 80.;
-    pub const TITLE_PADDING: f32 = 50.;
+    pub const TITLE_PADDING: f32 = 61.;
     pub const TOKEN_NAME_OFFSET: f32 = 200.;
     pub const PADDING_X: f32 = 40.;
     pub const PADDING_Y: f32 = 30.;
@@ -83,7 +84,8 @@ mod ui_consts {
     pub const BACKARROW_X: f32 = 38.;
     pub const BACKARROW_Y: f32 = 30.;
     pub const BACKARROW_BG_W: f32 = 80.;
-    pub const TITLE_FONTSIZE: f32 = 20.;
+    pub const TITLE_FONTSIZE: f32 = 15.;
+    pub const SUBTITLE_FONTSIZE: f32 = 20.;
     pub const BUTTON_FONTSIZE: f32 = 20.;
     pub const BASE_FONTSIZE: f32 = 20.;
     pub const HINT_FONTSIZE: f32 = BASE_FONTSIZE * 0.8;
@@ -92,7 +94,7 @@ mod ui_consts {
     pub const AMOUNT_TOKEN_SPACING: f32 = AMOUNT_FONTSIZE * 0.35;
     pub const BUTTON_HEIGHT: f32 = 90.;
     pub const TOKEN_ROW_HEIGHT: f32 = 40.;
-    pub const TITLE_PADDING: f32 = 25.;
+    pub const TITLE_PADDING: f32 = 20.;
     pub const TOKEN_NAME_OFFSET: f32 = 90.;
     pub const PADDING_X: f32 = 20.;
     pub const PADDING_Y: f32 = 15.;

bin/app/src/app/schema/wallet/main.rs

@@ -297,15 +297,7 @@ pub async fn make(
 
     y += TITLE_PADDING * 2. + TITLE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &main_layer,
-        "wallet_balance_separator",
-        &mut y,
-    )
-    .await;
+    create_separator(app, atom, &main_layer, "wallet_balance_separator", &mut y, false).await;
 
     // Receive button bg
     let node = create_vector_art("receive_btn_bg");
@@ -500,15 +492,7 @@ pub async fn make(
 
     y += PADDING_X * 2. + BUTTON_HEIGHT + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &main_layer,
-        "wallet_buttons_separator",
-        &mut y,
-    )
-    .await;
+    create_separator(app, atom, &main_layer, "wallet_buttons_separator", &mut y, false).await;
 
     create_title(
         app,

bin/app/src/app/schema/wallet/receive.rs

@@ -81,6 +81,8 @@ pub async fn make(
     )
     .await;
 
+    create_separator(app, atom, &receive_layer, "address_separator", &mut y, true).await;
+
     // Address display
     let node = create_text("receive_address");
     let addr_h_prop = node.get_property("height").unwrap();
@@ -190,6 +192,7 @@ pub async fn make(
         "receive_address_separator",
         &mut cc,
         &format!("{y} + PADDING_Y * 2 + addr_height + 1"),
+        true,
     )
     .await;
     let prop = sep.get_property("rect").unwrap();

bin/app/src/app/schema/wallet/send_step1.rs

@@ -96,6 +96,8 @@ pub async fn make(
     )
     .await;
 
+    create_separator(app, atom, &send_step1_layer, "pick_label_separator", &mut y, false).await;
+
     let send_tokens_table = create_tokentable("tokens_table");
     let prop = send_tokens_table.get_property("rect").unwrap();
     prop.set_default_f32(0, 0.).unwrap();

bin/app/src/app/schema/wallet/send_step2.rs

@@ -28,7 +28,7 @@ use crate::{
     },
     expr,
     gfx::gfxtag,
-    mesh::COLOR_CYAN,
+    mesh::{COLOR_CYAN, COLOR_PALECYAN},
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, Role},
     scene::{Pimpl, SceneNodePtr, Slot},
     shape,
@@ -142,15 +142,7 @@ pub async fn make(
 
     y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &send_step2_layer,
-        "send_token_separator",
-        &mut y,
-    )
-    .await;
+    create_separator(app, atom, &send_step2_layer, "send_token_separator", &mut y, false).await;
 
     // Recipient label
     let node = create_text("send_recipient_label");
@@ -158,11 +150,11 @@ pub async fn make(
     prop.set_default_f32(0, PADDING_X).unwrap();
     prop.set_default_f32(1, y + PADDING_Y).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
-    prop.set_default_f32(3, TITLE_FONTSIZE).unwrap();
-    node.get_property("font_size").unwrap().set_default_f32(0, TITLE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, SUBTITLE_FONTSIZE).unwrap();
     node.set_property_str(atom, Role::App, "text", "Recipient").unwrap();
     let prop = node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_PALECYAN).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let node = node
         .setup(|me| {
@@ -177,7 +169,7 @@ pub async fn make(
         .await;
     send_step2_layer.link(node);
 
-    y += PADDING_Y * 2. + BASE_FONTSIZE;
+    y += PADDING_Y * 2. + SUBTITLE_FONTSIZE;
 
     // Recipient input outline
     let node = create_vector_art("send_recipient_input_outline");

bin/app/src/app/schema/wallet/send_step3.rs

@@ -28,7 +28,7 @@ use crate::{
     },
     expr,
     gfx::gfxtag,
-    mesh::COLOR_CYAN,
+    mesh::{COLOR_CYAN, COLOR_PALECYAN},
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, PropertyRect, Role},
     scene::{SceneNodePtr, Slot},
     ui::{BaseEdit, BaseEditType, Layer, Text},
@@ -143,15 +143,7 @@ pub async fn make(
 
     y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &send_step3_layer,
-        "send_token_separator3",
-        &mut y,
-    )
-    .await;
+    create_separator(app, atom, &send_step3_layer, "send_token_separator3", &mut y, false).await;
 
     // Recipient display
     let node = create_text("send_recipient_label3");
@@ -159,11 +151,11 @@ pub async fn make(
     prop.set_default_f32(0, PADDING_X).unwrap();
     prop.set_default_f32(1, y + PADDING_Y).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
-    prop.set_default_f32(3, BASE_FONTSIZE).unwrap();
-    node.get_property("font_size").unwrap().set_default_f32(0, BASE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, SUBTITLE_FONTSIZE).unwrap();
     node.set_property_str(atom, Role::App, "text", "Recipient").unwrap();
     let prop = node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_PALECYAN).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let node = node
         .setup(|me| {
@@ -178,7 +170,7 @@ pub async fn make(
         .await;
     send_step3_layer.link(node);
 
-    y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
+    y += PADDING_Y * 2. + SUBTITLE_FONTSIZE + 1.;
 
     // Recipient address value
     let node = create_text("send_recipient_value3");
@@ -212,12 +204,12 @@ pub async fn make(
     let mut y_ = y.clone();
     let y2 = format!("{y} + (PADDING_Y * 2. + addr_height) + 1");
     let node = create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
+        app,
         atom,
         &send_step3_layer,
         "send_amount_label_separator",
         &mut y_,
+        false,
     )
     .await;
     let prop = node.get_property("rect").unwrap();
@@ -264,6 +256,7 @@ pub async fn make(
         "available_balance_separator",
         &mut cc,
         "h - PADDING_X * 2 - BUTTON_HEIGHT",
+        false,
     )
     .await;
 

bin/app/src/app/schema/wallet/send_step4.rs

@@ -27,6 +27,7 @@ use crate::{
     },
     expr,
     gfx::gfxtag,
+    mesh::COLOR_PALECYAN,
     prop::{PropertyAtomicGuard, PropertyBool, PropertyFloat32, Role},
     scene::{SceneNodePtr, Slot},
     ui::{Layer, Text},
@@ -135,15 +136,7 @@ pub async fn make(
 
     y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &send_step4_layer,
-        "send_token_separator4",
-        &mut y,
-    )
-    .await;
+    create_separator(app, atom, &send_step4_layer, "send_token_separator4", &mut y, false).await;
 
     // Recipient label
     let node = create_text("send_recipient_label4");
@@ -151,11 +144,11 @@ pub async fn make(
     prop.set_default_f32(0, PADDING_X).unwrap();
     prop.set_default_f32(1, y + PADDING_Y).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
-    prop.set_default_f32(3, BASE_FONTSIZE).unwrap();
-    node.get_property("font_size").unwrap().set_default_f32(0, BASE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, SUBTITLE_FONTSIZE).unwrap();
     node.set_property_str(atom, Role::App, "text", "Recipient").unwrap();
     let prop = node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_PALECYAN).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let node = node
         .setup(|me| {
@@ -170,7 +163,7 @@ pub async fn make(
         .await;
     send_step4_layer.link(node);
 
-    y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
+    y += PADDING_Y * 2. + SUBTITLE_FONTSIZE + 1.;
 
     // Recipient address value
     let recipient_addr_node = create_text("send_recipient_value4");
@@ -208,12 +201,12 @@ pub async fn make(
     let mut y_ = y.clone();
     let y2 = format!("{y} + (PADDING_Y * 2. + addr_height) + 1");
     let node = create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
+        app,
         atom,
         &send_step4_layer,
         "send_amount_label_separator4",
         &mut y_,
+        false,
     )
     .await;
     let prop = node.get_property("rect").unwrap();
@@ -361,6 +354,7 @@ pub async fn make(
         "tx_fee_separator",
         &mut cc,
         "h - PADDING_X * 2 - BUTTON_HEIGHT",
+        false,
     )
     .await;
 

bin/app/src/app/schema/wallet/tx_status.rs

@@ -149,15 +149,7 @@ pub async fn make(
 
     y += PADDING_Y * 2. + BASE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        &tx_status_layer,
-        "tx_status_separator",
-        &mut y,
-    )
-    .await;
+    create_separator(&app, atom, &tx_status_layer, "tx_status_separator", &mut y, false).await;
 
     // Transaction info text: "Sending {amount} {token_symbol} to {recipient_address}"
     let node = create_text("tx_info");
@@ -188,12 +180,12 @@ pub async fn make(
     tx_status_layer.link(node);
 
     let sep = create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
+        app,
         atom,
         &tx_status_layer,
         "tx_info_separator",
         &mut 0.,
+        false,
     )
     .await;
     let prop = sep.get_property("rect").unwrap();
@@ -246,6 +238,7 @@ pub async fn make(
         "tx_status_hint_separator",
         &mut cc,
         "h - PADDING_X * 2 - BUTTON_HEIGHT",
+        false,
     )
     .await;
 

bin/app/src/app/schema/wallet/util.rs

@@ -30,7 +30,7 @@ use crate::{
     },
     expr::{self, Compiler},
     gfx::{gfxtag, Renderer},
-    mesh::{COLOR_CYAN, COLOR_TEAL},
+    mesh::{Color, COLOR_CYAN, COLOR_PALECYAN, COLOR_TEAL},
     prop::{PropertyAtomicGuard, PropertyFloat32, Role},
     scene::{Pimpl, SceneNodePtr, Slot},
     text,
@@ -203,15 +203,7 @@ pub async fn create_title(
 
     *y += TITLE_PADDING * 2. + TITLE_FONTSIZE + 1.;
 
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        layer,
-        &format!("{name}_separator"),
-        y,
-    )
-    .await;
+    create_separator(app, atom, layer, &format!("{}_separator", name), y, false).await;
     node
 }
 
@@ -232,11 +224,11 @@ pub async fn create_subtitle(
     prop.set_default_f32(0, PADDING_X).unwrap();
     prop.set_default_f32(1, *y + PADDING_Y).unwrap();
     prop.set_default_f32(2, 1000.).unwrap();
-    prop.set_default_f32(3, TITLE_FONTSIZE).unwrap();
-    node.get_property("font_size").unwrap().set_default_f32(0, TITLE_FONTSIZE).unwrap();
+    prop.set_default_f32(3, SUBTITLE_FONTSIZE).unwrap();
+    node.get_property("font_size").unwrap().set_default_f32(0, SUBTITLE_FONTSIZE).unwrap();
     node.set_property_str(atom, Role::App, "text", text).unwrap();
     let prop = node.get_property("text_color").unwrap();
-    prop.set_default_f32_multi(&[1., 1., 1., 1.]).unwrap();
+    prop.set_default_f32_multi(&COLOR_PALECYAN).unwrap();
     node.set_property_u32(atom, Role::App, "z_index", 2).unwrap();
     let node = node
         .setup(|me| {
@@ -251,17 +243,7 @@ pub async fn create_subtitle(
         .await;
     layer.link(node.clone());
 
-    *y += PADDING_Y * 2. + TITLE_FONTSIZE + 1.;
-
-    create_separator(
-        &app.renderer,
-        &app.redraw_trigger,
-        atom,
-        layer,
-        &format!("{}_separator", text),
-        y,
-    )
-    .await;
+    *y += PADDING_Y * 2. + SUBTITLE_FONTSIZE + 1.;
 
     node
 }
@@ -304,7 +286,12 @@ pub async fn create_separator_expr(
     name: &str,
     cc: &mut Compiler,
     y_expr: &str,
+    dimmed: bool,
 ) -> SceneNodePtr {
+    let color = match dimmed {
+        true => [0.1333, 0.1725, 0.1725, 1.],
+        false => [0.2, 0.2745, 0.2784, 1.],
+    };
     let sep_node = create_vector_art(name);
     let prop = sep_node.get_property("rect").unwrap();
     prop.set_default_f32(0, 0.).unwrap();
@@ -319,7 +306,7 @@ pub async fn create_separator_expr(
         expr::const_f32(0.),
         expr::load_var("w"),
         expr::const_f32(1.),
-        [0.2, 0.2745, 0.2784, 1.],
+        color,
     );
     sep_node.set_property_shape(atom, Role::App, "shape", shape).unwrap();
     let sep_node = sep_node
@@ -332,13 +319,17 @@ pub async fn create_separator_expr(
 /// Creates a separator line at the current y position and increments y.
 /// Returns the separator node after setup, linked to the layer
 pub async fn create_separator(
-    renderer: &Renderer,
-    redraw: &RedrawTrigger,
+    app: &App,
     atom: &mut PropertyAtomicGuard,
     layer: &SceneNodePtr,
     name: &str,
     y: &mut f32,
+    dimmed: bool,
 ) -> SceneNodePtr {
+    let color = match dimmed {
+        true => [0.1333, 0.1725, 0.1725, 1.],
+        false => [0.2, 0.2745, 0.2784, 1.],
+    };
     let sep_node = create_vector_art(name);
     let prop = sep_node.get_property("rect").unwrap();
     prop.set_default_f32(0, 0.).unwrap();
@@ -352,10 +343,12 @@ pub async fn create_separator(
         expr::const_f32(0.),
         expr::load_var("w"),
         expr::const_f32(1.),
-        [0.2, 0.2745, 0.2784, 1.],
+        color,
     );
     sep_node.set_property_shape(atom, Role::App, "shape", shape).unwrap();
-    let sep_node = sep_node.setup(|me| VectorArt::new(me, renderer.clone(), redraw.clone())).await;
+    let sep_node = sep_node
+        .setup(|me| VectorArt::new(me, app.renderer.clone(), app.redraw_trigger.clone()))
+        .await;
     layer.link(sep_node.clone());
 
     *y += 1.;

bin/app/src/mesh.rs

@@ -68,6 +68,8 @@ pub const COLOR_BLACK: Color = [0., 0., 0., 1.];
 #[allow(dead_code)]
 pub const COLOR_GREY: Color = [0.5, 0.5, 0.5, 1.];
 #[allow(dead_code)]
+pub const COLOR_PALECYAN: Color = [0.6902, 1., 1., 1.];
+#[allow(dead_code)]
 pub const DONE_MENU_BTN_GRADIENT: [[f32; 4]; 4] =
     [[0., 0.1, 0.15, 1.], [0., 0.1, 0.15, 1.], [0., 0., 0., 1.], [0., 0., 0., 1.]];
 #[allow(dead_code)]