Repository: tarkah/tickrs (language: rust)

Issue:
Background color issues
@daniel-j-h I noticed in your screenshots that there was weird coloring going on in places with the background. I've found the issue and will be fixing it, see my before and after.

![image](https://user-images.githubusercontent.com/10239377/92956279-7a37e800-f41b-11ea-85e9-e9cc0602e5fe.png)

![image](https://user-images.githubusercontent.com/10239377/92956225-5e344680-f41b-11ea-91a9-ba8b1b356e14.png)




Discussion / hints:

Fix patch:
diff --git a/src/draw.rs b/src/draw.rs
index e9e69fe..d1969ff 100644
--- a/src/draw.rs
+++ b/src/draw.rs
@@ -128,8 +128,8 @@ fn draw_main<B: Backend>(frame: &mut Frame<B>, app: &mut App, area: Rect) {
             header[1] = add_padding(header[1], 2, PaddingDirection::Right);
 
             frame.render_widget(
-                Paragraph::new([Text::raw("Help '?'")].iter())
-                    .style(Style::default().fg(Color::White).bg(Color::Black))
+                Paragraph::new([Text::styled("Help '?'", Style::default())].iter())
+                    .style(Style::default().fg(Color::White))
                     .alignment(Alignment::Center)
                     .wrap(false),
                 header[1],
@@ -203,8 +203,8 @@ fn draw_summary<B: Backend>(frame: &mut Frame<B>, app: &mut App, area: Rect) {
         header[1] = add_padding(header[1], 2, PaddingDirection::Right);
 
         frame.render_widget(
-            Paragraph::new([Text::raw("Help '?'")].iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+            Paragraph::new([Text::styled("Help '?'", Style::default())].iter())
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Center),
             header[1],
         );
@@ -254,7 +254,13 @@ fn draw_help<B: Backend>(frame: &mut Frame<B>, app: &mut App, area: Rect) {
 
     if layout.width < HELP_WIDTH || layout.height < HELP_HEIGHT {
         frame.render_widget(
-            Paragraph::new([Text::raw("Increase screen size to display help")].iter()),
+            Paragraph::new(
+                [Text::styled(
+                    "Increase screen size to display help",
+                    Style::default(),
+                )]
+                .iter(),
+            ),
             layout,
         );
     } else {
@@ -267,7 +273,7 @@ fn draw_help<B: Backend>(frame: &mut Frame<B>, app: &mut App, area: Rect) {
 fn draw_debug<B: Backend>(frame: &mut Frame<B>, app: &mut App, area: Rect) {
     app.debug.mode = app.mode;
 
-    let debug_text = [Text::raw(format!("{:?}", app.debug))];
+    let debug_text = [Text::styled(format!("{:?}", app.debug), Style::default())];
     let debug_paragraph = Paragraph::new(debug_text.iter()).wrap(true);
 
     frame.render_widget(debug_paragraph, area);
diff --git a/src/widget/add_stock.rs b/src/widget/add_stock.rs
index 02f7f98..186eae3 100644
--- a/src/widget/add_stock.rs
+++ b/src/widget/add_stock.rs
@@ -48,7 +48,7 @@ impl StatefulWidget for AddStockWidget {
     fn render(self, area: Rect, buf: &mut Buffer, state: &mut Self::State) {
         let text = if !state.has_user_input && state.error_msg.is_some() {
             [
-                Text::raw("> "),
+                Text::styled("> ", Style::default()),
                 Text::styled(
                     state.error_msg.as_ref().unwrap(),
                     Style::default().modifier(Modifier::BOLD).fg(Color::Red),
@@ -56,7 +56,7 @@ impl StatefulWidget for AddStockWidget {
             ]
         } else {
             [
-                Text::raw("> "),
+                Text::styled("> ", Style::default()),
                 Text::styled(
                     &state.search_string,
                     Style::default().modifier(Modifier::BOLD).fg(Color::Cyan),
diff --git a/src/widget/help.rs b/src/widget/help.rs
index ad5c87a..e8aa89e 100644
--- a/src/widget/help.rs
+++ b/src/widget/help.rs
@@ -3,6 +3,7 @@ use crate::draw::{add_padding, PaddingDirection};
 
 use tui::buffer::Buffer;
 use tui::layout::Rect;
+use tui::style::Style;
 use tui::widgets::{Paragraph, Text, Widget};
 
 const TEXT: &str = r#"
@@ -54,7 +55,7 @@ impl Widget for HelpWidget {
 
         let text: Vec<_> = TEXT
             .lines()
-            .map(|line| Text::raw(format!("{}\n", line)))
+            .map(|line| Text::styled(format!("{}\n", line), Style::default()))
             .collect();
 
         let mut help_area = area;
diff --git a/src/widget/options.rs b/src/widget/options.rs
index 7ae3f79..b6b782a 100644
--- a/src/widget/options.rs
+++ b/src/widget/options.rs
@@ -246,7 +246,7 @@ impl StatefulWidget for OptionsWidget {
                         },
                     ),
                 ),
-                Text::raw(" | "),
+                Text::styled(" | ", Style::default()),
                 Text::styled(
                     "Put",
                     Style::default().fg(Color::Red).modifier(
@@ -264,7 +264,7 @@ impl StatefulWidget for OptionsWidget {
             chunks[0] = add_padding(chunks[0], 1, PaddingDirection::Top);
 
             Paragraph::new(call_put_selector.iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Center)
                 .wrap(false)
                 .render(chunks[0], buf);
@@ -292,11 +292,11 @@ impl StatefulWidget for OptionsWidget {
 
             let dates = state.exp_dates.iter().map(|d| {
                 let date = NaiveDateTime::from_timestamp(*d, 0).date();
-                Text::raw(date.format("%b-%d-%y").to_string())
+                Text::styled(date.format("%b-%d-%y").to_string(), Style::default())
             });
 
             let list = List::new(dates)
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .highlight_style(Style::default().bg(
                     if state.selection_mode == SelectionMode::Dates {
                         Color::LightBlue
@@ -351,8 +351,8 @@ impl StatefulWidget for OptionsWidget {
                 });
 
                 let table = Table::new(["Strike", "Price", "% Change"].iter(), rows)
-                    .style(Style::default().fg(Color::White).bg(Color::Black))
-                    .header_style(Style::default().fg(Color::Cyan).bg(Color::Black))
+                    .style(Style::default().fg(Color::White))
+                    .header_style(Style::default().fg(Color::Cyan))
                     .highlight_style(Style::default().bg(
                         if state.selection_mode == SelectionMode::Options {
                             Color::LightBlue
@@ -424,45 +424,62 @@ impl StatefulWidget for OptionsWidget {
                             + 11);
 
                     let column_0 = [
-                        Text::raw(format!(
-                            "strike:{}{:.2} {}\n\n",
-                            " ".repeat(gap_strike),
-                            option.strike,
-                            currency
-                        )),
-                        Text::raw(format!(
-                            "price:{}{:.2}\n\n",
-                            " ".repeat(gap_last),
-                            option.last_price,
-                        )),
-                        Text::raw(format!(
-                            "bid:{}{:.2}\n\n",
-                            " ".repeat(gap_ask),
-                            option.bid.unwrap_or_default(),
-                        )),
-                        Text::raw(format!(
-                            "ask:{}{:.2}",
-                            " ".repeat(gap_bid),
-                            option.ask.unwrap_or_default(),
-                        )),
+                        Text::styled(
+                            format!(
+                                "strike:{}{:.2} {}\n\n",
+                                " ".repeat(gap_strike),
+                                option.strike,
+                                currency
+                            ),
+                            Style::default(),
+                        ),
+                        Text::styled(
+                            format!("price:{}{:.2}\n\n", " ".repeat(gap_last), option.last_price,),
+                            Style::default(),
+                        ),
+                        Text::styled(
+                            format!(
+                                "bid:{}{:.2}\n\n",
+                                " ".repeat(gap_ask),
+                                option.bid.unwrap_or_default(),
+                            ),
+                            Style::default(),
+                        ),
+                        Text::styled(
+                            format!(
+                                "ask:{}{:.2}",
+                                " ".repeat(gap_bid),
+                                option.ask.unwrap_or_default(),
+                            ),
+                            Style::default(),
+                        ),
                     ];
 
                     let column_1 = [
-                        Text::raw(format!(
-                            "volume:{}{}\n\n",
-                            " ".repeat(gap_volume),
-                            option.volume.unwrap_or_default(),
-                        )),
-                        Text::raw(format!(
-                            "interest:{}{}\n\n",
-                            " ".repeat(gap_open_int),
-                            option.open_interest.unwrap_or_default()
-                        )),
-                        Text::raw(format!(
-                            "volatility:{}{:.0}%",
-                            " ".repeat(gap_impl_vol),
-                            option.implied_volatility.unwrap_or_default() * 100.0
-                        )),
+                        Text::styled(
+                            format!(
+                                "volume:{}{}\n\n",
+                                " ".repeat(gap_volume),
+                                option.volume.unwrap_or_default(),
+                            ),
+                            Style::default(),
+                        ),
+                        Text::styled(
+                            format!(
+                                "interest:{}{}\n\n",
+                                " ".repeat(gap_open_int),
+                                option.open_interest.unwrap_or_default()
+                            ),
+                            Style::default(),
+                        ),
+                        Text::styled(
+                            format!(
+                                "volatility:{}{:.0}%",
+                                " ".repeat(gap_impl_vol),
+                                option.implied_volatility.unwrap_or_default() * 100.0
+                            ),
+                            Style::default(),
+                        ),
                     ];
 
                     Paragraph::new(column_0.iter()).render(columns[0], buf);
diff --git a/src/widget/stock.rs b/src/widget/stock.rs
index 82a8416..a0a1602 100644
--- a/src/widget/stock.rs
+++ b/src/widget/stock.rs
@@ -275,7 +275,7 @@ impl StatefulWidget for StockWidget {
             let (high, low) = state.high_low();
 
             let company_info = [
-                Text::raw("c: "),
+                Text::styled("c: ", Style::default()),
                 Text::styled(
                     format!("{:.2} {}", state.current_price, currency),
                     Style::default().modifier(Modifier::BOLD).fg(Color::Yellow),
@@ -290,38 +290,37 @@ impl StatefulWidget for StockWidget {
                             Color::Red
                         }),
                 ),
-                Text::raw("h: "),
+                Text::styled("h: ", Style::default()),
                 Text::styled(
                     format!("{:.2}\n", high),
                     Style::default().fg(Color::LightCyan),
                 ),
-                Text::raw("l: "),
+                Text::styled("l: ", Style::default()),
                 Text::styled(format!("{:.2}", low), Style::default().fg(Color::LightCyan)),
             ];
 
             let expand_info = [
-                Text::raw("\n\n"),
                 Text::styled(
-                    "Options  'o'\n",
+                    "\n\nOptions  'o'\n",
                     Style::default().bg(if state.show_options {
                         Color::DarkGray
                     } else {
-                        Color::Black
+                        Color::Reset
                     }),
                 ),
-                Text::raw("Summary  's'\n"),
+                Text::styled("Summary  's'\n", Style::default()),
                 Text::styled(
                     "X Labels 'x'",
                     Style::default().bg(if show_x_labes {
                         Color::DarkGray
                     } else {
-                        Color::Black
+                        Color::Reset
                     }),
                 ),
             ];
 
             Paragraph::new(company_info.iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Left)
                 .wrap(true)
                 .render(info_chunks[0], buf);
@@ -332,7 +331,7 @@ impl StatefulWidget for StockWidget {
             info_chunks[1].width -= 2;
 
             Paragraph::new(expand_info.iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Left)
                 .wrap(false)
                 .render(info_chunks[1], buf);
diff --git a/src/widget/stock_summary.rs b/src/widget/stock_summary.rs
index e2dc071..fdaeb8e 100644
--- a/src/widget/stock_summary.rs
+++ b/src/widget/stock_summary.rs
@@ -30,7 +30,6 @@ impl StatefulWidget for StockSummaryWidget {
         Block::default()
             .title(&format!(" {} ", &title[..24.min(title.len())]))
             .borders(Borders::TOP)
-            .border_style(Style::default().fg(Color::White))
             .render(area, buf);
 
         let mut layout = Layout::default()
@@ -46,17 +45,17 @@ impl StatefulWidget for StockSummaryWidget {
             let (high, low) = state.high_low();
 
             let prices = [
-                Text::raw("c: "),
+                Text::styled("c: ", Style::default()),
                 Text::styled(
                     format!("{:.2} {}\n", state.current_price, currency),
                     Style::default().modifier(Modifier::BOLD).fg(Color::Yellow),
                 ),
-                Text::raw("h: "),
+                Text::styled("h: ", Style::default()),
                 Text::styled(
                     format!("{:.2}\n", high),
                     Style::default().fg(Color::LightCyan),
                 ),
-                Text::raw("l: "),
+                Text::styled("l: ", Style::default()),
                 Text::styled(format!("{:.2}", low), Style::default().fg(Color::LightCyan)),
             ];
 
@@ -72,12 +71,12 @@ impl StatefulWidget for StockSummaryWidget {
             )];
 
             Paragraph::new(prices.iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Left)
                 .render(layout[0], buf);
 
             Paragraph::new(pct.iter())
-                .style(Style::default().fg(Color::White).bg(Color::Black))
+                .style(Style::default().fg(Color::White))
                 .alignment(Alignment::Right)
                 .render(layout[0], buf);
         }


Test patch: