Red delete button with trashcan text

Author: Buckminsterfullerene02

src/gui/mod.rs

@@ -15,7 +15,7 @@ use std::{
 };
 
 use anyhow::{anyhow, Context, Result};
-use eframe::egui::{CollapsingHeader, RichText};
+use eframe::egui::{Button, CollapsingHeader, RichText};
 use eframe::epaint::{Pos2, Vec2};
 use eframe::{
     egui::{self, FontSelection, Layout, TextFormat, Ui},
@@ -60,6 +60,16 @@ pub fn gui(args: Option<Vec<String>>) -> Result<()> {
     Ok(())
 }
 
+pub mod colors {
+    use eframe::epaint::Color32;
+
+    pub const DARK_RED: Color32 = Color32::DARK_RED;
+    pub const DARKER_RED: Color32 = Color32::from_rgb(110, 0, 0);
+
+    pub const DARK_GREEN: Color32 = Color32::DARK_GREEN;
+    pub const DARKER_GREEN: Color32 = Color32::from_rgb(0, 80, 0);
+}
+
 const MODIO_LOGO_PNG: &[u8] = include_bytes!("../../assets/modio-cog-blue.png");
 
 pub struct App {
@@ -350,7 +360,7 @@ impl App {
 
                 if ui
                     .add(toggle_switch(&mut mc.enabled))
-                    .on_hover_text_at_pointer("enabled?")
+                    .on_hover_text_at_pointer("Enabled?")
                     .changed()
                 {
                     ctx.needs_save = true;
@@ -540,9 +550,17 @@ impl App {
 
             let mut ui_item =
                 |ctx: &mut Ctx, ui: &mut Ui, mc: &mut ModOrGroup, state: egui_dnd::ItemState| {
-                    if ui.button(" ➖ ").clicked() {
-                        ctx.btn_remove = Some(state.index);
-                    }
+                    ui.scope(|ui| {
+                        ui.visuals_mut().widgets.hovered.weak_bg_fill = colors::DARK_RED;
+                        ui.visuals_mut().widgets.active.weak_bg_fill = colors::DARKER_RED;
+                        if ui
+                            .add(Button::new(" 🗑 "))
+                            .on_hover_text_at_pointer("Delete mod")
+                            .clicked()
+                        {
+                            ctx.btn_remove = Some(state.index);
+                        };
+                    });
 
                     match mc {
                         ModOrGroup::Individual(mc) => {
@@ -554,7 +572,7 @@ impl App {
                         } => {
                             if ui
                                 .add(toggle_switch(enabled))
-                                .on_hover_text_at_pointer("enabled?")
+                                .on_hover_text_at_pointer("Enabled?")
                                 .changed()
                             {
                                 ctx.needs_save = true;
@@ -597,7 +615,7 @@ impl App {
                     frame.show(ui, |ui| {
                         ui.horizontal(|ui| {
                             handle.ui(ui, |ui| {
-                                ui.label("☰");
+                                ui.label("   ☰  ");
                             });
 
                             ui_item(&mut ctx, ui, item, state);

src/gui/named_combobox.rs

@@ -1,6 +1,6 @@
 use std;
 
-use super::{custom_popup_above_or_below_widget, is_committed};
+use super::{colors, custom_popup_above_or_below_widget, is_committed};
 
 use eframe::egui;
 
@@ -84,8 +84,8 @@ where
     let mut modified = false;
     ui.push_id(name, |ui| {
         ui.horizontal(|ui| {
-            mk_delete(ui, name, entries, &mut modified);
             mk_add(ui, name, entries, &mut modified);
+            mk_delete(ui, name, entries, &mut modified);
             mk_rename(ui, name, entries, &mut modified);
 
             ui.with_layout(egui::Layout::right_to_left(egui::Align::TOP), |ui| {
@@ -109,14 +109,18 @@ where
     N: NamedEntries<E>,
 {
     ui.add_enabled_ui(entries.len() > 1, |ui| {
-        if ui
-            .button(" ➖ ")
-            .on_hover_text_at_pointer(format!("Delete {name}"))
-            .clicked()
-        {
-            entries.remove_selected();
-            *modified = true;
-        }
+        ui.scope(|ui| {
+            ui.visuals_mut().widgets.hovered.weak_bg_fill = colors::DARK_RED;
+            ui.visuals_mut().widgets.active.weak_bg_fill = colors::DARKER_RED;
+            if ui
+                .button(" 🗑 ")
+                .on_hover_text_at_pointer(format!("Delete {name}"))
+                .clicked()
+            {
+                entries.remove_selected();
+                *modified = true;
+            }
+        });
     });
 }
 
@@ -126,8 +130,14 @@ where
 {
     ui.add_enabled_ui(true, |ui| {
         let response = ui
-            .button(" ➕ ")
-            .on_hover_text_at_pointer(format!("Add new {name}"));
+            .scope(|ui| {
+                ui.visuals_mut().widgets.hovered.weak_bg_fill = colors::DARK_GREEN;
+                ui.visuals_mut().widgets.active.weak_bg_fill = colors::DARKER_GREEN;
+                ui.button(" ➕ ")
+                    .on_hover_text_at_pointer(format!("Add new {name}"))
+            })
+            .inner;
+
         let popup_id = ui.make_persistent_id(format!("add-{name}"));
         if response.clicked() {
             ui.memory_mut(|mem| mem.open_popup(popup_id));