created ContainerType::Highlighted to take place of fake buttons

src/gui/components/tab.rs

@@ -1,10 +1,12 @@
 //! Tab buttons to be used in the various pages just under the header
 
-use iced::widget::{button, horizontal_space, Button, Row, Text};
+use iced::alignment::Vertical;
+use iced::widget::{button, horizontal_space, Button, Container, Row, Text};
 use iced::{alignment, Alignment, Font, Length, Renderer};
 
 use crate::gui::pages::types::settings_page::SettingsPage;
 use crate::gui::styles::button::ButtonType;
+use crate::gui::styles::container::ContainerType;
 use crate::gui::styles::style_constants::FONT_SIZE_SUBTITLE;
 use crate::gui::styles::text::TextType;
 use crate::gui::types::message::Message;
@@ -98,16 +100,12 @@ fn new_page_tab(
 
     if let Some(num) = unread {
         if num > 0 {
-            let notifications_badge = button(
-                Text::new(num.to_string())
-                    .font(font_headers)
-                    .size(14)
-                    .horizontal_alignment(alignment::Horizontal::Center)
-                    .vertical_alignment(alignment::Vertical::Center),
-            )
-            .padding([2, 4, 0, 4])
-            .height(Length::Fixed(20.0))
-            .style(ButtonType::Badge);
+            let notifications_badge =
+                Container::new(Text::new(num.to_string()).font(font_headers).size(14))
+                    .align_y(Vertical::Center)
+                    .padding([2, 4])
+                    .height(Length::Fixed(20.0))
+                    .style(ContainerType::Highlighted);
             content = content
                 .push(horizontal_space(Length::Fixed(7.0)))
                 .push(notifications_badge);

src/gui/pages/overview_page.rs

@@ -22,6 +22,7 @@ use crate::gui::styles::rule::RuleType;
 use crate::gui::styles::scrollbar::ScrollbarType;
 use crate::gui::styles::style_constants::FONT_SIZE_TITLE;
 use crate::gui::styles::text::TextType;
+use crate::gui::styles::types::palette_extension::PaletteExtension;
 use crate::gui::types::message::Message;
 use crate::gui::types::sniffer::Sniffer;
 use crate::networking::types::data_info::DataInfo;
@@ -74,8 +75,14 @@ pub fn overview_page(sniffer: &Sniffer) -> Container<Message, Renderer<StyleType
             }
             (observed, 0) => {
                 //no packets have been filtered but some have been observed
-                body =
-                    body_no_observed(&sniffer.filters, observed, font, language, &sniffer.waiting);
+                body = body_no_observed(
+                    &sniffer.filters,
+                    observed,
+                    font,
+                    font_headers,
+                    language,
+                    &sniffer.waiting,
+                );
             }
             (_observed, filtered) => {
                 //observed > filtered > 0 || observed = filtered > 0
@@ -184,6 +191,7 @@ fn body_no_observed(
     filters: &Filters,
     observed: u128,
     font: Font,
+    font_headers: Font,
     language: Language,
     waiting: &str,
 ) -> Column<'static, Message, Renderer<StyleType>> {
@@ -198,7 +206,13 @@ fn body_no_observed(
         .align_items(Alignment::Center)
         .push(vertical_space(FillPortion(1)))
         .push(Icon::Funnel.to_text().size(60))
-        .push(get_active_filters_col(filters, language, font, true))
+        .push(get_active_filters_col(
+            filters,
+            language,
+            font,
+            font_headers,
+            true,
+        ))
         .push(Rule::horizontal(20))
         .push(tot_packets_text)
         .push(Text::new(waiting.to_owned()).font(font).size(50))
@@ -427,14 +441,24 @@ fn lazy_col_info(
     let ConfigSettings {
         style, language, ..
     } = sniffer.configs.lock().unwrap().settings;
-    let font = style.get_extension().font;
+    let PaletteExtension {
+        font, font_headers, ..
+    } = style.get_extension();
 
     let col_device = col_device(language, font, &sniffer.device);
 
     let col_data_representation =
         col_data_representation(language, font, sniffer.traffic_chart.chart_type);
 
-    let col_bytes_packets = col_bytes_packets(language, dropped, total, filtered, font, sniffer);
+    let col_bytes_packets = col_bytes_packets(
+        language,
+        dropped,
+        total,
+        filtered,
+        font,
+        font_headers,
+        sniffer,
+    );
 
     let content = Column::new()
         .align_items(Alignment::Center)
@@ -566,6 +590,7 @@ fn col_bytes_packets(
     total: u128,
     filtered: u128,
     font: Font,
+    font_headers: Font,
     sniffer: &Sniffer,
 ) -> Column<'static, Message, Renderer<StyleType>> {
     let filtered_bytes =
@@ -594,7 +619,13 @@ fn col_bytes_packets(
 
     Column::new()
         .spacing(10)
-        .push(get_active_filters_col(filters, language, font, false))
+        .push(get_active_filters_col(
+            filters,
+            language,
+            font,
+            font_headers,
+            false,
+        ))
         .push(TextType::highlighted_subtitle_with_desc(
             filtered_bytes_translation(language),
             &bytes_value,
@@ -686,6 +717,7 @@ fn get_active_filters_col(
     filters: &Filters,
     language: Language,
     font: Font,
+    font_headers: Font,
     show: bool,
 ) -> Column<'static, Message, Renderer<StyleType>> {
     let mut ret_val = Column::new().push(
@@ -703,16 +735,12 @@ fn get_active_filters_col(
         } else {
             Row::new().padding([0, 0, 0, 20]).push(
                 Tooltip::new(
-                    button(
-                        Text::new("i")
-                            .font(font)
-                            .vertical_alignment(Vertical::Center)
-                            .horizontal_alignment(Horizontal::Center)
-                            .size(15),
-                    )
-                    .padding(2)
-                    .height(Fixed(20.0))
-                    .width(Fixed(20.0)),
+                    Container::new(Text::new("i").font(font_headers).size(15))
+                        .align_x(Horizontal::Center)
+                        .padding(2)
+                        .height(Fixed(20.0))
+                        .width(Fixed(20.0))
+                        .style(ContainerType::Highlighted),
                     filters_string,
                     Position::FollowCursor,
                 )

src/gui/styles/button.rs

@@ -25,7 +25,6 @@ pub enum ButtonType {
     NotStarred,
     Neutral,
     Alert,
-    Badge,
     Gradient(GradientType),
 }
 
@@ -48,9 +47,7 @@ impl button::StyleSheet for StyleType {
                 ButtonType::Neutral | ButtonType::NotStarred => {
                     Background::Color(Color::TRANSPARENT)
                 }
-                ButtonType::Gradient(GradientType::None) | ButtonType::Badge => {
-                    Background::Color(colors.secondary)
-                }
+                ButtonType::Gradient(GradientType::None) => Background::Color(colors.secondary),
                 ButtonType::Gradient(gradient_type) => Background::Gradient(get_gradient_buttons(
                     &colors,
                     *gradient_type,
@@ -71,8 +68,7 @@ impl button::StyleSheet for StyleType {
                 | ButtonType::TabInactive
                 | ButtonType::Starred
                 | ButtonType::NotStarred
-                | ButtonType::Neutral
-                | ButtonType::Badge => 0.0,
+                | ButtonType::Neutral => 0.0,
                 ButtonType::BorderedRound => BORDER_WIDTH * 2.0,
                 _ => BORDER_WIDTH,
             },
@@ -82,7 +78,7 @@ impl button::StyleSheet for StyleType {
             },
             text_color: match style {
                 ButtonType::Starred => Color::BLACK,
-                ButtonType::Badge | ButtonType::Gradient(_) => colors.text_headers,
+                ButtonType::Gradient(_) => colors.text_headers,
                 _ => colors.text_body,
             },
             border_color: match style {

src/gui/styles/container.rs

@@ -20,6 +20,7 @@ pub enum ContainerType {
     Neutral,
     Gradient(GradientType),
     Modal,
+    Highlighted,
 }
 
 impl iced::widget::container::StyleSheet for StyleType {
@@ -30,11 +31,13 @@ impl iced::widget::container::StyleSheet for StyleType {
         let ext = self.get_extension();
         Appearance {
             text_color: Some(match style {
-                ContainerType::Gradient(_) => colors.text_headers,
+                ContainerType::Gradient(_) | ContainerType::Highlighted => colors.text_headers,
                 _ => colors.text_body,
             }),
             background: Some(match style {
-                ContainerType::Gradient(GradientType::None) => Background::Color(colors.secondary),
+                ContainerType::Gradient(GradientType::None) | ContainerType::Highlighted => {
+                    Background::Color(colors.secondary)
+                }
                 ContainerType::Tooltip => Background::Color(ext.buttons_color),
                 ContainerType::BorderedRound => Background::Color(Color {
                     a: ext.alpha_round_containers,
@@ -59,14 +62,15 @@ impl iced::widget::container::StyleSheet for StyleType {
                     [0.0, 0.0, BORDER_ROUNDED_RADIUS, BORDER_ROUNDED_RADIUS].into()
                 }
                 ContainerType::Tooltip => 7.0.into(),
-                ContainerType::Badge => 100.0.into(),
+                ContainerType::Badge | ContainerType::Highlighted => 100.0.into(),
                 _ => 0.0.into(),
             },
             border_width: match style {
                 ContainerType::Standard
                 | ContainerType::Modal
                 | ContainerType::Neutral
-                | ContainerType::Gradient(_) => 0.0,
+                | ContainerType::Gradient(_)
+                | ContainerType::Highlighted => 0.0,
                 ContainerType::Tooltip => BORDER_WIDTH / 2.0,
                 ContainerType::BorderedRound => BORDER_WIDTH * 2.0,
                 _ => BORDER_WIDTH,