ui: items titles paddings, integrated node item separate content

src/gui/views/network/connections.rs

@@ -97,7 +97,12 @@ impl ConnectionsContent {
         ui.add_space(6.0);
 
         // Show integrated node info content.
-        Self::integrated_node_item_ui(ui);
+        Self::integrated_node_item_ui(ui, |ui| {
+            // Draw button to show integrated node info.
+            View::item_button(ui, View::item_rounding(0, 1, true), CARET_RIGHT, None, || {
+                AppConfig::toggle_show_connections_network_panel();
+            });
+        });
 
         // Show external connections.
         ui.add_space(8.0);
@@ -125,7 +130,7 @@ impl ConnectionsContent {
     }
 
     /// Draw integrated node connection item content.
-    fn integrated_node_item_ui(ui: &mut egui::Ui) {
+    pub fn integrated_node_item_ui(ui: &mut egui::Ui, custom_button: impl FnOnce(&mut egui::Ui)) {
         // Draw round background.
         let mut rect = ui.available_rect_before_wrap();
         rect.set_height(78.0);
@@ -133,10 +138,8 @@ impl ConnectionsContent {
         ui.painter().rect(rect, rounding, Colors::fill(), View::item_stroke());
 
         ui.allocate_ui_with_layout(rect.size(), Layout::right_to_left(Align::Center), |ui| {
-            // Draw button to show integrated node info.
+            // Draw custom button.
-            View::item_button(ui, View::item_rounding(0, 1, true), CARET_RIGHT, None, || {
+            custom_button(ui);
-                AppConfig::toggle_show_connections_network_panel();
-            });
 
             if !Node::is_running() {
                 // Draw button to start integrated node.
@@ -155,9 +158,12 @@ impl ConnectionsContent {
                 ui.add_space(6.0);
                 ui.vertical(|ui| {
                     ui.add_space(3.0);
-                    ui.label(RichText::new(t!("network.node"))
+                    ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
-                                 .size(18.0)
+                        ui.add_space(1.0);
-                                 .color(Colors::title(false)));
+                        ui.label(RichText::new(t!("network.node"))
+                            .size(18.0)
+                            .color(Colors::title(false)));
+                    });
 
                     // Setup node API address text.
                     let api_address = NodeConfig::get_api_address();

src/gui/views/wallets/content.rs

@@ -427,7 +427,10 @@ impl WalletsContent {
                     } else {
                         Colors::title(false)
                     };
-                    View::ellipsize_text(ui, config.name, 18.0, name_color);
+                    ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
+                            ui.add_space(1.0);
+                            View::ellipsize_text(ui, config.name, 18.0, name_color);
+                    });
 
                     // Setup wallet connection text.
                     let conn_text = if let Some(conn) = wallet.get_current_ext_conn() {
@@ -471,8 +474,8 @@ impl WalletsContent {
                         format!("{} {}", FOLDER_LOCK, t!("wallets.locked"))
                     };
                     ui.label(RichText::new(status_text).size(15.0).color(Colors::gray()));
-                    ui.add_space(4.0);
+                    ui.add_space(3.0);
-                })
+                });
             });
         });
     }

src/gui/views/wallets/setup/connection.rs

@@ -12,15 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-use egui::{Align, Id, Layout, RichText, Rounding};
+use egui::{Align, Id, Layout, RichText};
 use url::Url;
 
 use crate::gui::Colors;
-use crate::gui::icons::{CHECK, CHECK_CIRCLE, CHECK_FAT, COMPUTER_TOWER, DOTS_THREE_CIRCLE, GLOBE, GLOBE_SIMPLE, PLUS_CIRCLE, POWER, X_CIRCLE};
+use crate::gui::icons::{CHECK, CHECK_CIRCLE, CHECK_FAT, DOTS_THREE_CIRCLE, GLOBE, GLOBE_SIMPLE, PLUS_CIRCLE, X_CIRCLE};
 use crate::gui::platform::PlatformCallbacks;
-use crate::gui::views::{Modal, View};
+use crate::gui::views::{ConnectionsContent, Modal, View};
 use crate::gui::views::types::{ModalContainer, ModalPosition, TextEditOptions};
-use crate::node::{Node, NodeConfig};
 use crate::wallet::{ConnectionsConfig, ExternalConnection, Wallet};
 use crate::wallet::types::ConnectionMethod;
 
@@ -149,7 +148,19 @@ impl ConnectionSetup {
         ui.vertical_centered(|ui| {
             // Show integrated node selection.
             ui.add_space(6.0);
-            self.integrated_node_item_ui(ui);
+            ConnectionsContent::integrated_node_item_ui(ui, |ui| {
+                // Draw button to select integrated node if it was not selected.
+                let is_current_method = self.method == ConnectionMethod::Integrated;
+                if !is_current_method {
+                    View::item_button(ui, View::item_rounding(0, 1, true), CHECK, None, || {
+                        self.method = ConnectionMethod::Integrated;
+                    });
+                } else {
+                    ui.add_space(14.0);
+                    ui.label(RichText::new(CHECK_FAT).size(20.0).color(Colors::green()));
+                    ui.add_space(14.0);
+                }
+            });
 
             // Show external connections.
             ui.add_space(8.0);
@@ -190,67 +201,6 @@ impl ConnectionSetup {
         });
     }
 
-    /// Draw integrated node connection item content.
-    fn integrated_node_item_ui(&mut self, ui: &mut egui::Ui) {
-        // Draw round background.
-        let mut rect = ui.available_rect_before_wrap();
-        rect.set_height(78.0);
-        let rounding = View::item_rounding(0, 1, false);
-        ui.painter().rect(rect, rounding, Colors::fill(), View::item_stroke());
-
-        ui.allocate_ui_with_layout(rect.size(), Layout::right_to_left(Align::Center), |ui| {
-            // Setup padding for item buttons.
-            ui.style_mut().spacing.button_padding = egui::vec2(14.0, 0.0);
-
-            // Draw button to select integrated node if it was not selected.
-            let is_current_method = self.method == ConnectionMethod::Integrated;
-            if !is_current_method {
-                View::item_button(ui, View::item_rounding(0, 1, true), CHECK, None, || {
-                    self.method = ConnectionMethod::Integrated;
-                });
-            } else {
-                ui.add_space(14.0);
-                ui.label(RichText::new(CHECK_FAT).size(20.0).color(Colors::green()));
-                ui.add_space(14.0);
-            }
-
-            if !Node::is_running() {
-                // Draw button to start integrated node.
-                View::item_button(ui, Rounding::default(), POWER, Some(Colors::green()), || {
-                    Node::start();
-                });
-            }
-
-            let layout_size = ui.available_size();
-            ui.allocate_ui_with_layout(layout_size, Layout::left_to_right(Align::Center), |ui| {
-                ui.add_space(6.0);
-                ui.vertical(|ui| {
-                    ui.add_space(3.0);
-                    ui.label(RichText::new(t!("network.node"))
-                        .size(18.0)
-                        .color(Colors::title(false)));
-
-                    // Setup node API address text.
-                    let api_address = NodeConfig::get_api_address();
-                    let address_text = format!("{} http://{}", COMPUTER_TOWER, api_address);
-                    ui.label(RichText::new(address_text).size(15.0).color(Colors::text(false)));
-                    ui.add_space(1.0);
-
-                    // Setup node status text.
-                    let status_icon = if !Node::is_running() {
-                        X_CIRCLE
-                    } else if Node::not_syncing() {
-                        CHECK_CIRCLE
-                    } else {
-                        DOTS_THREE_CIRCLE
-                    };
-                    let status_text = format!("{} {}", status_icon, Node::get_sync_status_text());
-                    ui.label(RichText::new(status_text).size(15.0).color(Colors::gray()));
-                })
-            });
-        });
-    }
-
     /// Draw external connection item content.
     fn ext_conn_item_ui(&mut self,
                         ui: &mut egui::Ui,

src/gui/views/wallets/wallet/content.rs

@@ -236,9 +236,12 @@ impl WalletContent {
                     // Show spendable amount.
                     let amount = amount_to_hr_string(data.info.amount_currently_spendable, true);
                     let amount_text = format!("{} {}", amount, GRIN);
-                    ui.label(RichText::new(amount_text)
+                    ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
-                        .size(18.0)
+                        ui.add_space(1.0);
-                        .color(Colors::white_or_black(true)));
+                        ui.label(RichText::new(amount_text)
+                            .size(18.0)
+                            .color(Colors::white_or_black(true)));
+                    });
                     ui.add_space(-2.0);
 
                     // Show account label.

src/gui/views/wallets/wallet/transport.rs

@@ -255,10 +255,12 @@ impl WalletTransport {
                     ui.add_space(6.0);
                     ui.vertical(|ui| {
                         ui.add_space(3.0);
-                        ui.label(RichText::new(t!("transport.tor_network"))
+                        ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
-                            .size(18.0)
+                            ui.add_space(1.0);
-                            .color(Colors::title(false)));
+                            ui.label(RichText::new(t!("transport.tor_network"))
-
+                                .size(18.0)
+                                .color(Colors::title(false)));
+                        });
                         // Setup bridges status text.
                         let bridge = TorConfig::get_bridge();
                         let bridges_text = match &bridge {

src/gui/views/wallets/wallet/txs.rs

@@ -422,7 +422,10 @@ impl WalletTransactions {
                         TxLogEntryType::TxSentCancelled => Colors::text(false),
                         TxLogEntryType::TxReverted => Colors::text(false)
                     };
-                    View::ellipsize_text(ui, amount_text, 18.0, amount_color);
+                    ui.with_layout(Layout::left_to_right(Align::Min), |ui| {
+                        ui.add_space(1.0);
+                        View::ellipsize_text(ui, amount_text, 18.0, amount_color);
+                    });
                     ui.add_space(-2.0);
 
                     // Setup transaction status text.