bug: Fix battery widget color and mouse (#504)

Fixes two bugs causing the battery widget colours and mouse events to be broken.

4 files changed, 32 insertions, 23 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f2fae81f..d8ad0ba3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.2]/[0.7.0] - Unreleased
+
+## Bug Fixes
+
+- [#504](https://github.com/ClementTsang/bottom/pull/504): Fixes two bugs causing the battery widget colours and mouse events to be broken.
+
 ## [0.6.1] - 2021-05-11
 
 ## Bug Fixes
diff --git a/assets/battery.png b/assets/battery.png
index 38ce220a..1570a449 100644
--- a/assets/battery.png
+++ b/assets/battery.png
diff --git a/src/app.rs b/src/app.rs
index e34d6337..5e281a86 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -3112,7 +3112,8 @@ impl App {
                                 for (itx, ((tlc_x, tlc_y), (brc_x, brc_y))) in
                                     tab_spacing.iter().enumerate()
                                 {
-                                    if (x >= *tlc_x && y >= *tlc_y) && (x < *brc_x && y < *brc_y) {
+                                    if (x >= *tlc_x && y >= *tlc_y) && (x <= *brc_x && y <= *brc_y)
+                                    {
                                         battery_widget_state.currently_selected_battery_index = itx;
                                         break;
                                     }
diff --git a/src/canvas/widgets/battery_display.rs b/src/canvas/widgets/battery_display.rs
index 89b55bfd..52b769df 100644
--- a/src/canvas/widgets/battery_display.rs
+++ b/src/canvas/widgets/battery_display.rs
@@ -9,7 +9,7 @@ use tui::{
     layout::{Constraint, Direction, Layout, Rect},
     terminal::Frame,
     text::{Span, Spans},
-    widgets::{Block, Borders, Paragraph, Row, Table, Tabs},
+    widgets::{Block, Borders, Cell, Paragraph, Row, Table, Tabs},
 };
 use unicode_segmentation::UnicodeSegmentation;
 
@@ -129,30 +129,33 @@ impl BatteryDisplayWidget for Painter {
                     charge_percentage,
                 );
 
-                let battery_items: Vec<Vec<&str>> = vec![
-                    vec!["Charge %", &bars],
-                    vec!["Consumption", &battery_details.watt_consumption],
+                let battery_rows = vec![
+                    Row::new(vec![
+                        Cell::from("Charge %").style(self.colours.text_style),
+                        Cell::from(bars).style(if charge_percentage < 10.0 {
+                            self.colours.low_battery_colour
+                        } else if charge_percentage < 50.0 {
+                            self.colours.medium_battery_colour
+                        } else {
+                            self.colours.high_battery_colour
+                        }),
+                    ]),
+                    Row::new(vec!["Consumption", &battery_details.watt_consumption])
+                        .style(self.colours.text_style),
                     if let Some(duration_until_full) = &battery_details.duration_until_full {
-                        vec!["Time to full", duration_until_full]
+                        Row::new(vec!["Time to full", duration_until_full])
+                            .style(self.colours.text_style)
                     } else if let Some(duration_until_empty) = &battery_details.duration_until_empty
                     {
-                        vec!["Time to empty", duration_until_empty]
+                        Row::new(vec!["Time to empty", duration_until_empty])
+                            .style(self.colours.text_style)
                     } else {
-                        vec!["Time to full/empty", "N/A"]
+                        Row::new(vec!["Time to full/empty", "N/A"]).style(self.colours.text_style)
                     },
-                    vec!["Health %", &battery_details.health],
+                    Row::new(vec!["Health %", &battery_details.health])
+                        .style(self.colours.text_style),
                 ];
 
-                let battery_rows = battery_items.into_iter().map(|item| {
-                    Row::new(item).style(if charge_percentage < 10.0 {
-                        self.colours.low_battery_colour
-                    } else if charge_percentage < 50.0 {
-                        self.colours.medium_battery_colour
-                    } else {
-                        self.colours.high_battery_colour
-                    })
-                });
-
                 // Draw
                 f.render_widget(
                     Table::new(battery_rows)
@@ -183,14 +186,13 @@ impl BatteryDisplayWidget for Painter {
                     let mut tab_click_locs: Vec<((u16, u16), (u16, u16))> = vec![];
                     for battery in battery_names {
                         // +1 because there's a space after the tab label.
-                        let width =
-                            unicode_width::UnicodeWidthStr::width(battery.as_str()) as u16 + 1;
+                        let width = unicode_width::UnicodeWidthStr::width(battery.as_str()) as u16;
                         tab_click_locs
                             .push(((current_x, current_y), (current_x + width, current_y)));
 
-                        // +2 because we want to go one space past to get to the '|', then one MORE
+                        // +4 because we want to go one space, then one space past to get to the '|', then 2 more
                         // to start at the blank space before the tab label.
-                        current_x = current_x + width + 2;
+                        current_x += width + 4;
                     }
                     battery_widget_state.tab_click_locs = Some(tab_click_locs);
                 }