updated layout of BorderedRound buttons

Author: GyulyVGC

src/gui/pages/initial_page.rs

@@ -3,7 +3,7 @@
 //! It contains elements to select network adapter and traffic filters.
 
 use iced::widget::{
-    button, horizontal_space, vertical_space, Column, Container, PickList, Radio, Row, Scrollable,
+    button, horizontal_space, vertical_space, Button, Column, Container, PickList, Row, Scrollable,
     Text, Tooltip,
 };
 use iced::Length::FillPortion;
@@ -138,7 +138,7 @@ fn button_start(style: StyleType, language: Language) -> Tooltip<'static, Messag
 fn get_col_adapter(sniffer: &Sniffer, font: Font) -> Column<Message> {
     let mut dev_str_list = vec![];
     for dev in Device::list().expect("Error retrieving device list\r\n") {
-        let mut dev_str = "\n".to_string();
+        let mut dev_str = String::new();
         let name = dev.name;
         match dev.desc {
             None => {
@@ -165,7 +165,6 @@ fn get_col_adapter(sniffer: &Sniffer, font: Font) -> Column<Message> {
             let address_string = addr.addr.to_string();
             dev_str.push_str(&format!("\n    {address_string}"));
         }
-        dev_str.push_str("\n ");
         dev_str_list.push((name, dev_str));
     }
 
@@ -183,27 +182,24 @@ fn get_col_adapter(sniffer: &Sniffer, font: Font) -> Column<Message> {
             Scrollable::new(dev_str_list.iter().fold(
                 Column::new().padding(13).spacing(5),
                 |scroll_adapters, adapter| {
-                    let name = &adapter.0;
+                    let name = adapter.0.clone();
+                    let description = adapter.1.clone();
                     scroll_adapters.push(
-                        Container::new(
-                            Radio::new(&adapter.1, name, Some(&sniffer.device.name), |name| {
-                                Message::AdapterSelection(name.to_string())
-                            })
-                            .font(font)
-                            .size(15)
+                        Button::new(Text::new(description).font(font))
+                            .padding([20, 30])
                             .width(Length::Fill)
-                            .style(<StyleTuple as Into<
-                                iced::theme::Radio,
-                            >>::into(
-                                StyleTuple(sniffer.style, ElementType::Standard),
-                            )),
-                        )
-                        .padding(10)
-                        .style(<StyleTuple as Into<
-                            iced::theme::Container,
-                        >>::into(
-                            StyleTuple(sniffer.style, ElementType::BorderedRound),
-                        )),
+                            .style(
+                                StyleTuple(
+                                    sniffer.style,
+                                    if name == sniffer.device.name {
+                                        ElementType::BorderedRoundSelected
+                                    } else {
+                                        ElementType::BorderedRound
+                                    },
+                                )
+                                .into(),
+                            )
+                            .on_press(Message::AdapterSelection(name)),
                     )
                 },
             ))

src/gui/pages/settings_style_page.rs

@@ -114,6 +114,16 @@ fn get_palette_container(
         .height(Length::Fixed(130.0))
         .width(Length::Fixed(360.0))
         .padding(5)
-        .style(StyleTuple(style, ElementType::BorderedRound).into())
+        .style(
+            StyleTuple(
+                style,
+                if on_press.eq(&style) {
+                    ElementType::BorderedRoundSelected
+                } else {
+                    ElementType::BorderedRound
+                },
+            )
+            .into(),
+        )
         .on_press(Message::Style(on_press))
 }

src/gui/styles/button.rs

@@ -27,11 +27,16 @@ impl button::StyleSheet for StyleTuple {
                 StyleTuple(_, ElementType::Starred) => STARRED,
                 StyleTuple(_, ElementType::Badge) => colors.secondary,
                 StyleTuple(_, ElementType::BorderedRound) => colors.round_containers,
+                StyleTuple(_, ElementType::BorderedRoundSelected) => {
+                    mix_colors(colors.primary, colors.buttons)
+                }
                 _ => colors.buttons,
             })),
             border_radius: match self {
                 StyleTuple(_, ElementType::TabActive | ElementType::TabInactive) => 0.0,
-                StyleTuple(_, ElementType::BorderedRound) => 12.0,
+                StyleTuple(_, ElementType::BorderedRound | ElementType::BorderedRoundSelected) => {
+                    12.0
+                }
                 _ => BORDER_BUTTON_RADIUS,
             },
             border_width: match self {
@@ -71,7 +76,9 @@ impl button::StyleSheet for StyleTuple {
             })),
             border_radius: match self {
                 StyleTuple(_, ElementType::TabActive | ElementType::TabInactive) => 0.0,
-                StyleTuple(_, ElementType::BorderedRound) => 12.0,
+                StyleTuple(_, ElementType::BorderedRound | ElementType::BorderedRoundSelected) => {
+                    12.0
+                }
                 _ => BORDER_BUTTON_RADIUS,
             },
             border_width: match self {
@@ -80,12 +87,14 @@ impl button::StyleSheet for StyleTuple {
                     ElementType::Starred
                     | ElementType::NotStarred
                     | ElementType::TabActive
-                    | ElementType::TabInactive,
+                    | ElementType::TabInactive
+                    | ElementType::BorderedRound,
                 ) => 0.0,
                 _ => BORDER_WIDTH,
             },
             border_color: match self {
                 StyleTuple(_, ElementType::Alert) => Color::new(1.0, 0.0, 0.0, 1.0),
+                StyleTuple(_, ElementType::BorderedRound) => colors.round_borders,
                 _ => colors.secondary,
             },
             text_color: match self {

src/gui/styles/types/element_type.rs

@@ -4,6 +4,7 @@ pub enum ElementType {
     Standard,
     Headers,
     BorderedRound,
+    BorderedRoundSelected,
     TabActive,
     TabInactive,
     Starred,

src/gui/styles/types/style_type.rs

@@ -1,7 +1,7 @@
 use serde::{Deserialize, Serialize};
 
 /// Used to specify the kind of style of the application
-#[derive(Clone, Copy, Serialize, Deserialize, Debug, Hash)]
+#[derive(Clone, Copy, Serialize, Deserialize, Debug, Hash, PartialEq)]
 pub enum StyleType {
     Night,
     Day,