From 5ec296073f27eb87905b622c6bbd4fd4d2b683b9 Mon Sep 17 00:00:00 2001
From: fvitalini <francesca.vitalini@mirai-solutions.com>
Date: Mon, 27 Apr 2020 10:00:37 +0200
Subject: [PATCH] - Merge the two boxes for current and new values into
 one.(#69)

---
 NEWS.md                |  2 ++
 R/mod_caseBoxes.R      | 57 ++++++++++++++++--------------------------
 inst/app/www/style.css |  4 ++-
 3 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/NEWS.md b/NEWS.md
index 44316e2d..3d716a03 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,5 +1,7 @@
 ### Covid19 1.1.6.9000 (development version)
 
+- Merge the two boxes for current and new values into one.(#69)
+
 ### Covid19 1.1.6 (2020-04-06)
 
 - adding growth factor and lethality rate data to tables in country and country comparison tabs (#5)
diff --git a/R/mod_caseBoxes.R b/R/mod_caseBoxes.R
index 0e0d3be8..cb434dde 100644
--- a/R/mod_caseBoxes.R
+++ b/R/mod_caseBoxes.R
@@ -38,60 +38,47 @@ mod_caseBoxes_ui <- function(id) {
 mod_caseBoxes_server <- function(input, output, session, counts) {
 
   output$confirmed <- renderUI({
-    countBox("Confirmed",
-             counts()[["confirmed"]],
-             color = "white",
-             background = case_colors[["confirmed"]])
-  })
-  output$new_confirmed <- renderUI({
-    countBox("New",
-             counts()[["new_confirmed"]],
+    countBox(title1 = "Confirmed: ",
+             subtitle1 = counts()[["confirmed"]],
+             title2 = "New: ",
+             subtitle2 =  counts()[["new_confirmed"]],
              color = "white",
              background = case_colors[["confirmed"]])
   })
   output$death <- renderUI({
-    countBox("Deaths",
-             counts()[["deaths"]],
-             color = "white",
-             background = case_colors[["deaths"]])
-  })
-  output$new_death <- renderUI({
-    countBox("New",
-             counts()[["new_deaths"]],
+    countBox(title1 = "Deaths: ",
+             subtitle1 = counts()[["deaths"]],
+             title2 = "New: ",
+             subtitle2 =  counts()[["new_deaths"]],
              color = "white",
              background = case_colors[["deaths"]])
   })
   output$recovered <- renderUI({
-    countBox("Recovered",
-             counts()[["recovered"]],
-             color = "white",
-             background = case_colors[["recovered"]])
-  })
-  output$new_recovered <- renderUI({
-    countBox("New",
-             counts()[["new_recovered"]],
+    countBox(title1 = "Recovered: ",
+             subtitle1 = counts()[["recovered"]],
+             title2 = "New: ",
+             subtitle2 =  counts()[["new_recovered"]],
              color = "white",
              background = case_colors[["recovered"]])
   })
   output$active <- renderUI({
-    countBox("Active",
-             counts()[["active"]],
-             color = "white",
-             background = case_colors[["active"]])
-  })
-  output$new_active <- renderUI({
-    countBox("New",
-             counts()[["new_active"]],
+    countBox(title1 = "Active: ",
+             subtitle1 = counts()[["active"]],
+             title2 = "New: ",
+             subtitle2 =  counts()[["new_active"]],
              color = "white",
              background = case_colors[["active"]])
   })
 }
 
-countBox <- function(title, subtitle, color, background, width = "100%") {
+countBox <- function(title1, subtitle1, title2, subtitle2, color, background, width = "100%") {
   div(
     class = "count-box",
-    shiny::h3(title),
-    shiny::p(formatC(subtitle, format = "f", big.mark = ",", digits  = 0)),
+    shiny::h3(title1),
+    shiny::p(formatC(subtitle1, format = "f", big.mark = ",", digits  = 0)),
+    br(),
+    shiny::h3(title2),
+    shiny::p(formatC(subtitle2, format = "f", big.mark = ",", digits  = 0)),
     style = sprintf(
       "color: %s; background-color: %s; width: %s;",
       color, background, width
diff --git a/inst/app/www/style.css b/inst/app/www/style.css
index 2d883c27..79cb975e 100644
--- a/inst/app/www/style.css
+++ b/inst/app/www/style.css
@@ -251,8 +251,10 @@ Count Boxes
 .count-box h3 {
   font-size: 28px;
   color: inherit;
+  display: inline-block;
 }
 
 .count-box p {
-  font-size: 20px;
+  font-size: 23px;
+  display: inline-block;
 }