Improve UI selection and command bar (#1299)

* Added new color for commands bar
* Made commit list item and file tree item fill the entire row

3 files changed, 28 insertions, 4 deletions

diff --git a/src/components/commitlist.rs b/src/components/commitlist.rs
index ed7a6961..e8ebc817 100644
--- a/src/components/commitlist.rs
+++ b/src/components/commitlist.rs
@@ -301,9 +301,13 @@ impl CommitList {
 
 		txt.push(splitter);
 
+		let message_width = width.saturating_sub(
+			txt.iter().map(|span| span.content.len()).sum(),
+		);
+
 		// commit msg
 		txt.push(Span::styled(
-			Cow::from(&*e.msg),
+			format!("{:w$}", &e.msg, w = message_width),
 			theme.text(true, selected),
 		));
 
diff --git a/src/components/revision_files.rs b/src/components/revision_files.rs
index be1466c3..c9146620 100644
--- a/src/components/revision_files.rs
+++ b/src/components/revision_files.rs
@@ -119,6 +119,7 @@ impl RevisionFilesComponent {
 	fn tree_item_to_span<'a>(
 		item: &'a FileTreeItem,
 		theme: &SharedTheme,
+		width: usize,
 		selected: bool,
 	) -> Span<'a> {
 		let path = item.info().path_str();
@@ -141,7 +142,17 @@ impl RevisionFilesComponent {
 			symbol::EMPTY_STR
 		};
 
-		let path = format!("{}{}{}", indent_str, path_arrow, path);
+		let available_width =
+			width.saturating_sub(indent_str.len() + path_arrow.len());
+
+		let path = format!(
+			"{}{}{:w$}",
+			indent_str,
+			path_arrow,
+			path,
+			w = available_width
+		);
+
 		Span::styled(path, theme.file_tree_item(is_path, selected))
 	}
 
@@ -221,6 +232,7 @@ impl RevisionFilesComponent {
 
 	fn draw_tree<B: Backend>(&self, f: &mut Frame<B>, area: Rect) {
 		let tree_height = usize::from(area.height.saturating_sub(2));
+		let tree_width = usize::from(area.width);
 
 		self.tree.visual_selection().map_or_else(
 			|| {
@@ -239,7 +251,12 @@ impl RevisionFilesComponent {
 			.tree
 			.iterate(self.scroll.get_top(), tree_height)
 			.map(|(item, selected)| {
-				Self::tree_item_to_span(item, &self.theme, selected)
+				Self::tree_item_to_span(
+					item,
+					&self.theme,
+					tree_width,
+					selected,
+				)
 			});
 
 		let is_tree_focused = matches!(self.focus, Focus::Tree);
diff --git a/src/ui/style.rs b/src/ui/style.rs
index fdc2d95f..2cc9a166 100644
--- a/src/ui/style.rs
+++ b/src/ui/style.rs
@@ -23,6 +23,8 @@ pub struct Theme {
 	#[serde(with = "Color")]
 	selection_bg: Color,
 	#[serde(with = "Color")]
+	cmdbar_bg: Color,
+	#[serde(with = "Color")]
 	cmdbar_extra_lines_bg: Color,
 	#[serde(with = "Color")]
 	disabled_fg: Color,
@@ -220,7 +222,7 @@ impl Theme {
 			Style::default().fg(self.disabled_fg)
 		}
 		.bg(if line == 0 {
-			self.selection_bg
+			self.cmdbar_bg
 		} else {
 			self.cmdbar_extra_lines_bg
 		})
@@ -323,6 +325,7 @@ impl Default for Theme {
 			selected_tab: Color::Reset,
 			command_fg: Color::White,
 			selection_bg: Color::Blue,
+			cmdbar_bg: Color::Reset,
 			cmdbar_extra_lines_bg: Color::Blue,
 			disabled_fg: Color::DarkGray,
 			diff_line_add: Color::Green,