feat: polish connected server voice UI

src/iced-app/src/theme.rs

@@ -177,6 +177,14 @@ pub fn nav_icon_color(theme: &Theme) -> Color {
     text_secondary(theme)
 }
 
+pub fn status_color(theme: &Theme, connected: bool) -> Color {
+    if connected {
+        theme.palette().success
+    } else {
+        text_secondary(theme)
+    }
+}
+
 fn border(theme: &Theme) -> Color {
     if is_dark(theme) {
         DARK_BORDER
@@ -274,11 +282,16 @@ pub fn card_container(theme: &Theme) -> container::Style {
 
 pub fn voice_capsule_container(theme: &Theme) -> container::Style {
     container::Style {
-        background: Some(Background::Color(elevated(theme))),
+        background: Some(Background::Color(Color::from_rgba(
+            elevated(theme).r,
+            elevated(theme).g,
+            elevated(theme).b,
+            if is_dark(theme) { 0.9 } else { 0.96 },
+        ))),
         border: Border {
             color: border(theme),
             width: 1.0,
-            radius: 18.0.into(),
+            radius: 22.0.into(),
         },
         shadow: Shadow {
             color: Color::from_rgba(0.0, 0.0, 0.0, if is_dark(theme) { 0.20 } else { 0.08 }),
@@ -301,6 +314,24 @@ pub fn elevated_container(theme: &Theme) -> container::Style {
     }
 }
 
+pub fn muted_elevated_container(theme: &Theme) -> container::Style {
+    let background = if is_dark(theme) {
+        Color::from_rgba(1.0, 1.0, 1.0, 0.04)
+    } else {
+        LIGHT_ELEVATED
+    };
+
+    container::Style {
+        background: Some(Background::Color(background)),
+        border: Border {
+            color: border(theme),
+            width: 1.0,
+            radius: 14.0.into(),
+        },
+        ..container::Style::default()
+    }
+}
+
 pub fn input_style(theme: &Theme, status: text_input::Status) -> text_input::Style {
     let base = match status {
         text_input::Status::Focused => accent(theme),
@@ -382,6 +413,75 @@ pub fn danger_button(_theme: &Theme, _status: button::Status) -> button::Style {
     }
 }
 
+pub fn subtle_button(theme: &Theme, status: button::Status) -> button::Style {
+    let background = match status {
+        button::Status::Hovered | button::Status::Pressed => {
+            if is_dark(theme) {
+                Color::from_rgba(1.0, 1.0, 1.0, 0.08)
+            } else {
+                LIGHT_ELEVATED
+            }
+        }
+        _ => Color::TRANSPARENT,
+    };
+
+    button::Style {
+        background: Some(Background::Color(background)),
+        text_color: theme.palette().text,
+        border: Border {
+            color: Color::TRANSPARENT,
+            width: 0.0,
+            radius: 12.0.into(),
+        },
+        shadow: Shadow::default(),
+    }
+}
+
+pub fn channel_button_active(theme: &Theme, _status: button::Status) -> button::Style {
+    button::Style {
+        background: Some(Background::Color(if is_dark(theme) {
+            Color::from_rgba(accent(theme).r, accent(theme).g, accent(theme).b, 0.18)
+        } else {
+            Color::from_rgba(accent(theme).r, accent(theme).g, accent(theme).b, 0.12)
+        })),
+        text_color: theme.palette().text,
+        border: Border {
+            color: if is_dark(theme) {
+                Color::from_rgba(accent(theme).r, accent(theme).g, accent(theme).b, 0.36)
+            } else {
+                accent(theme)
+            },
+            width: 1.0,
+            radius: 12.0.into(),
+        },
+        shadow: Shadow::default(),
+    }
+}
+
+pub fn channel_button(theme: &Theme, status: button::Status) -> button::Style {
+    let background = match status {
+        button::Status::Hovered | button::Status::Pressed => {
+            if is_dark(theme) {
+                Color::from_rgba(1.0, 1.0, 1.0, 0.05)
+            } else {
+                LIGHT_ELEVATED
+            }
+        }
+        _ => Color::TRANSPARENT,
+    };
+
+    button::Style {
+        background: Some(Background::Color(background)),
+        text_color: theme.palette().text,
+        border: Border {
+            color: Color::TRANSPARENT,
+            width: 0.0,
+            radius: 12.0.into(),
+        },
+        shadow: Shadow::default(),
+    }
+}
+
 pub fn nav_button_active(theme: &Theme, _status: button::Status) -> button::Style {
     button::Style {
         background: Some(Background::Color(accent(theme))),