disabled states and getting started prompt

harbor-ui/src/components/button.rs

@@ -41,9 +41,15 @@ pub fn h_button(text_str: &str, icon: SvgIcon, loading: bool) -> Button<'_, Mess
                 Status::Pressed => darken(Color::BLACK, 0.1),
                 _ => theme.palette().background,
             };
+
+            let text_color = match status {
+                Status::Disabled => gray,
+                _ => Color::WHITE,
+            };
+
             button::Style {
                 background: Some(background.into()),
-                text_color: Color::WHITE,
+                text_color,
                 border,
                 shadow: Shadow::default(),
             }
@@ -67,6 +73,8 @@ pub fn sidebar_button(
 
     Button::new(content)
         .style(move |theme, status| {
+            let gray = lighten(theme.palette().background, 0.5);
+
             let border = Border {
                 color: Color::WHITE,
                 width: 0.,
@@ -85,9 +93,15 @@ pub fn sidebar_button(
                 (Status::Pressed, false) => darken(bg_color, 0.1),
                 _ => bg_color,
             };
+
+            let text_color = match status {
+                Status::Disabled => gray,
+                _ => Color::WHITE,
+            };
+
             button::Style {
                 background: Some(background.into()),
-                text_color: Color::WHITE,
+                text_color,
                 border,
                 shadow: Shadow::default(),
             }

harbor-ui/src/components/federation_item.rs

@@ -1,9 +1,9 @@
+use crate::Message;
+use harbor_client::db_models::FederationItem;
 use iced::{
     widget::{column, row, text},
     Alignment, Element,
 };
-use harbor_client::db_models::FederationItem;
-use crate::Message;
 
 use super::{bold_text, h_button, regular_text, subtitle, truncate_text};
 use super::{format_amount, map_icon, SvgIcon};

harbor-ui/src/components/icon.rs

@@ -9,6 +9,7 @@ pub enum SvgIcon {
     Heart,
     Home,
     LeftRight,
+    ArrowLeft,
     People,
     Settings,
     Squirrel,
@@ -21,6 +22,8 @@ pub enum SvgIcon {
     Bolt,
     Chain,
     Eye,
+    EyeClosed,
+    Clock,
 }
 
 macro_rules! icon_handle {
@@ -51,6 +54,9 @@ pub fn map_icon<'a>(icon: SvgIcon, width: f32, height: f32) -> Svg<'a, Theme> {
         SvgIcon::Bolt => icon_handle!("bolt.svg"),
         SvgIcon::Chain => icon_handle!("chain.svg"),
         SvgIcon::Eye => icon_handle!("eye.svg"),
+        SvgIcon::EyeClosed => icon_handle!("eye_closed.svg"),
+        SvgIcon::Clock => icon_handle!("clock.svg"),
+        SvgIcon::ArrowLeft => icon_handle!("arrow_left.svg"),
     }
     .width(width)
     .height(height)