improve star buttons

src/gui/pages/inspect_page.rs

@@ -368,7 +368,7 @@ fn additional_filters_row<'a>(
                 ..search_params.clone()
             })
         },
-        Icon::Star.codepoint(),
+        Icon::StarEmpty.codepoint(),
         only_show_favorites_translation(language),
     );
 

src/gui/pages/notifications_page.rs

@@ -211,7 +211,7 @@ fn favorite_notification_log<'a>(
         .spacing(30)
         .align_y(Alignment::Center)
         .push(
-            Icon::Star
+            Icon::StarEmpty
                 .to_text()
                 .size(80)
                 .line_height(LineHeight::Relative(1.0)),

src/gui/pages/overview_page.rs

@@ -5,7 +5,6 @@
 
 use crate::chart::types::donut_chart::donut_chart;
 use crate::countries::country_utils::get_flag_tooltip;
-use crate::countries::flags_pictures::{FLAGS_HEIGHT_BIG, FLAGS_WIDTH_BIG};
 use crate::countries::types::country::Country;
 use crate::gui::components::ellipsized_text::EllipsizedText;
 use crate::gui::components::tab::get_pages_tabs;
@@ -158,7 +157,7 @@ fn col_host<'a>(sniffer: &Sniffer) -> Column<'a, Message, StyleType> {
 
         scroll_host = scroll_host.push(
             button(content)
-                .padding(Padding::new(5.0).right(15).left(10))
+                .padding(Padding::new(5.0).right(10))
                 .on_press(Message::Search(SearchParameters::new_host_search(host)))
                 .class(ButtonType::Neutral),
         );
@@ -688,21 +687,22 @@ pub fn get_bars<'a>(in_len: u16, out_len: u16) -> Row<'a, Message, StyleType> {
 }
 
 fn get_star_button<'a>(is_favorite: bool, host: Host) -> Button<'a, Message, StyleType> {
+    let (icon, class) = if is_favorite {
+        (Icon::StarFull, ButtonType::Starred)
+    } else {
+        (Icon::StarEmpty, ButtonType::NotStarred)
+    };
+
     button(
-        Icon::Star
-            .to_text()
-            .size(20)
+        icon.to_text()
+            .size(16)
             .align_x(Alignment::Center)
             .align_y(Alignment::Center),
     )
     .padding(0)
-    .height(FLAGS_HEIGHT_BIG)
-    .width(FLAGS_WIDTH_BIG)
-    .class(if is_favorite {
-        ButtonType::Starred
-    } else {
-        ButtonType::NotStarred
-    })
+    .height(25)
+    .width(25)
+    .class(class)
     .on_press(Message::AddOrRemoveFavorite(host, !is_favorite))
 }
 
@@ -739,7 +739,7 @@ fn sort_arrows<'a>(
         .class(active_sort_type.button_type())
         .on_press(message(active_sort_type.next_sort())),
     )
-    .width(60.0)
+    .width(50.0)
     .align_x(Alignment::Center)
 }
 

src/gui/styles/button.rs

@@ -41,13 +41,13 @@ impl ButtonType {
                 ButtonType::TabActive | ButtonType::BorderedRoundSelected => {
                     Background::Color(mix_colors(colors.primary, ext.buttons_color))
                 }
-                ButtonType::Starred => Background::Color(colors.starred),
                 ButtonType::BorderedRound => Background::Color(Color {
                     a: ext.alpha_round_containers,
                     ..ext.buttons_color
                 }),
                 ButtonType::Neutral
                 | ButtonType::Thumbnail
+                | ButtonType::Starred
                 | ButtonType::NotStarred
                 | ButtonType::SortArrows
                 | ButtonType::SortArrowActive => Background::Color(Color::TRANSPARENT),
@@ -92,7 +92,7 @@ impl ButtonType {
                 },
             },
             text_color: match self {
-                ButtonType::Starred => Color::BLACK,
+                ButtonType::Starred => colors.starred,
                 ButtonType::SortArrows => Color {
                     a: ext.alpha_chart_badge,
                     ..colors.text_body
@@ -136,7 +136,6 @@ impl ButtonType {
                 },
             },
             background: Some(match self {
-                ButtonType::Starred => Background::Color(colors.starred),
                 ButtonType::SortArrows | ButtonType::SortArrowActive | ButtonType::Thumbnail => {
                     Background::Color(Color::TRANSPARENT)
                 }
@@ -165,6 +164,7 @@ impl ButtonType {
                 },
                 width: match self {
                     ButtonType::Starred
+                    | ButtonType::NotStarred
                     | ButtonType::TabActive
                     | ButtonType::SortArrows
                     | ButtonType::SortArrowActive
@@ -175,7 +175,7 @@ impl ButtonType {
                 },
                 color: match self {
                     ButtonType::Alert => ext.red_alert_color,
-                    ButtonType::BorderedRound | ButtonType::NotStarred => Color {
+                    ButtonType::BorderedRound => Color {
                         a: ext.alpha_round_borders,
                         ..ext.buttons_color
                     },
@@ -184,7 +184,7 @@ impl ButtonType {
                 },
             },
             text_color: match self {
-                ButtonType::Starred => Color::BLACK,
+                ButtonType::Starred => colors.starred,
                 ButtonType::Gradient(_) | ButtonType::Thumbnail => colors.text_headers,
                 ButtonType::SortArrowActive | ButtonType::SortArrows => colors.secondary,
                 _ => colors.text_body,

src/utils/types/icon.rs

@@ -50,7 +50,8 @@ pub enum Icon {
     SortAscending,
     SortDescending,
     SortNeutral,
-    Star,
+    StarEmpty,
+    StarFull,
     Sun,
     ThumbnailOpen,
     ThumbnailClose,
@@ -101,7 +102,8 @@ impl Icon {
             Icon::Sniffnet2 => '"',
             Icon::Sniffnet3 => '#',
             Icon::Sniffnet4 => '$',
-            Icon::Star => 'g',
+            Icon::StarEmpty => 'g',
+            Icon::StarFull => 'X',
             Icon::Warning => 'T',
             Icon::Waves => 'y',
             Icon::Copy => 'u',