From 28efea22fd5c832c6fe4fbce31eaebf806ddea4e Mon Sep 17 00:00:00 2001
From: Alex <40072887+alexdcrane@users.noreply.github.com>
Date: Wed, 24 Apr 2024 13:14:24 -0700
Subject: [PATCH] Dashboard - Add background color settings (#6959)

* Dashboard - Add background color settings

* Update missed_calls.php

* Update recent_calls.php

* Update app_languages.php

* Update app_config.php

* Update dashboard_edit.php

* Update index.php

* Update css.php

* Update system_status.php

* Update system_cpu_status.php

* Update system_counts.php

* Update system_counts.php

* Update switch_status.php

* Update index.php

* Update system_counts.php

* Update domain_limits.php

* Update call_forward.php

* Update caller_id.php

* Update ring_group_forward.php
---
 .../resources/dashboard/call_forward.php      |  10 +-
 .../resources/dashboard/domain_limits.php     |  10 +-
 .../resources/dashboard/caller_id.php         |  10 +-
 .../dashboard/ring_group_forward.php          |  14 +--
 .../resources/dashboard/switch_status.php     |  10 +-
 .../resources/dashboard/system_counts.php     |  10 +-
 .../resources/dashboard/system_cpu_status.php |  10 +-
 .../resources/dashboard/system_status.php     |   6 +-
 .../resources/dashboard/voicemails.php        |  12 +-
 .../resources/dashboard/missed_calls.php      |  12 +-
 .../resources/dashboard/recent_calls.php      |  14 ++-
 core/dashboard/app_config.php                 |  10 ++
 core/dashboard/app_languages.php              | 104 +++++++++++++++
 core/dashboard/dashboard_edit.php             | 118 +++++++++++-------
 core/dashboard/index.php                      |  10 +-
 themes/default/css.php                        |  14 +--
 16 files changed, 260 insertions(+), 114 deletions(-)

diff --git a/app/call_forward/resources/dashboard/call_forward.php b/app/call_forward/resources/dashboard/call_forward.php
index 54b4bec1f3..4cfdcc6625 100644
--- a/app/call_forward/resources/dashboard/call_forward.php
+++ b/app/call_forward/resources/dashboard/call_forward.php
@@ -102,12 +102,12 @@
 //begin widget
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['header-call_forward']."</span>\n";
+	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_call_forward_details').slideToggle('fast');\">\n";
+	echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['header-call_forward']."</span>\n";
 
 //doughnut chart
 	if ($dashboard_chart_type == "doughnut") {
-		echo "<div style='width: 275px; height: 143px;'><canvas id='call_forward_chart'></canvas></div>\n";
+		echo "<div style='width: 275px; height: 150px; padding-top: 7px'><canvas id='call_forward_chart'></canvas></div>\n";
 
 		echo "<script>\n";
 		echo "	const call_forward_chart = new Chart(\n";
@@ -179,7 +179,7 @@
 		echo "				id: 'chart_number',\n";
 		echo "				beforeDraw(chart, args, options){\n";
 		echo "					const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
-		echo "					ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
+		echo "					ctx.font = chart_text_size + ' ' + chart_text_font;\n";
 		echo "					ctx.textBaseline = 'middle';\n";
 		echo "					ctx.textAlign = 'center';\n";
 		echo "					ctx.fillStyle = '".$dashboard_number_text_color."';\n";
@@ -192,7 +192,7 @@
 		echo "</script>\n";
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['call_forward']."</span>";
+		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['call_forward']."</span>";
 	}
 	echo "	</div>\n";
 
diff --git a/app/domain_limits/resources/dashboard/domain_limits.php b/app/domain_limits/resources/dashboard/domain_limits.php
index 3dc342d20a..8640b8b25b 100644
--- a/app/domain_limits/resources/dashboard/domain_limits.php
+++ b/app/domain_limits/resources/dashboard/domain_limits.php
@@ -110,12 +110,12 @@
 				$hud_stat_title = $text['label-destinations'];
 			}
 
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\">\n";
-			echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-domain_limits']."</span>\n";
+			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_domain_limits_details').slideToggle('fast');\">\n";
+			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-domain_limits']."</span>\n";
 
 		//doughnut chart
 			if ($dashboard_chart_type == "doughnut") {
-				echo "<div style='width: 275px; height: 143px;'><canvas id='domain_limits_chart'></canvas></div>\n";
+				echo "<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='domain_limits_chart'></canvas></div>\n";
 
 				echo "<script>\n";
 				echo "	const domain_limits_chart = new Chart(\n";
@@ -161,7 +161,7 @@
 				echo "				id: 'chart_number',\n";
 				echo "				beforeDraw(chart, args, options){\n";
 				echo "						const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
-				echo "						ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
+				echo "						ctx.font = chart_text_size + ' ' + chart_text_font;\n";
 				echo "						ctx.textBaseline = 'middle';\n";
 				echo "						ctx.textAlign = 'center';\n";
 				echo "						ctx.fillStyle = '".$dashboard_number_text_color."';\n";
@@ -174,7 +174,7 @@
 				echo "</script>\n";
 			}
 			if ($dashboard_chart_type == "none") {
-				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$hud_stat_used."</span>";
+				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$hud_stat_used."</span>";
 			}
 			echo "	</div>\n";
 
diff --git a/app/extensions/resources/dashboard/caller_id.php b/app/extensions/resources/dashboard/caller_id.php
index 2ef2869f99..3a787e2886 100644
--- a/app/extensions/resources/dashboard/caller_id.php
+++ b/app/extensions/resources/dashboard/caller_id.php
@@ -173,12 +173,12 @@
 		//caller id
 			echo "<div class='hud_box'>\n";
 
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\">\n";
-			echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-caller_id_number']."</span>\n";
+			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_caller_id_details').slideToggle('fast');\">\n";
+			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-caller_id_number']."</span>\n";
 
 		//doughnut chart
 			if ($dashboard_chart_type == "doughnut") {
-				echo "<div style='width: 275px; height: 143px;'><canvas id='caller_id_chart'></canvas></div>\n";
+				echo "<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='caller_id_chart'></canvas></div>\n";
 
 				echo "<script>\n";
 				echo "	const caller_id_chart = new Chart(\n";
@@ -225,7 +225,7 @@
 				echo "				id: 'chart_number',\n";
 				echo "				beforeDraw(chart, args, options){\n";
 				echo "					const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
-				echo "					ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
+				echo "					ctx.font = chart_text_size + ' ' + chart_text_font;\n";
 				echo "					ctx.textBaseline = 'middle';\n";
 				echo "					ctx.textAlign = 'center';\n";
 				echo "					ctx.fillStyle = '".$dashboard_number_text_color."';\n";
@@ -238,7 +238,7 @@
 				echo "</script>\n";
 			}
 			if ($dashboard_chart_type == "none") {
-				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['undefined']."</span>";
+				echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['undefined']."</span>";
 			}
 			echo "	</div>\n";
 
diff --git a/app/ring_groups/resources/dashboard/ring_group_forward.php b/app/ring_groups/resources/dashboard/ring_group_forward.php
index 8bbc383126..550d3e9f45 100644
--- a/app/ring_groups/resources/dashboard/ring_group_forward.php
+++ b/app/ring_groups/resources/dashboard/ring_group_forward.php
@@ -152,15 +152,15 @@
 
 //ring group forward
 	echo "<div class='hud_box'>\n";
-		
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['header-ring-group-forward']."</span>\n";
+
+	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_ring_group_forward_details').slideToggle('fast');\">\n";
+	echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['header-ring-group-forward']."</span>\n";
 
 
 //doughnut chart
 	if ($dashboard_chart_type == "doughnut") {
-		echo "	<div style='width: 275px; height: 143px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
-	
+		echo "	<div style='width: 275px; height: 150px; padding-top: 7px;'><canvas id='ring_group_forward_chart'></canvas></div>\n";
+
 		echo "<script>\n";
 		echo "	const ring_group_forward_chart = new Chart(\n";
 		echo "		document.getElementById('ring_group_forward_chart').getContext('2d'),\n";
@@ -210,7 +210,7 @@
 		echo "				id: 'chart_number',\n";
 		echo "				beforeDraw(chart, args, options){\n";
 		echo "					const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;\n";
-		echo "					ctx.font = chart_text_size + 'px ' + chart_text_font;\n";
+		echo "					ctx.font = chart_text_size + ' ' + chart_text_font;\n";
 		echo "					ctx.textBaseline = 'middle';\n";
 		echo "					ctx.textAlign = 'center';\n";
 		echo "					ctx.fillStyle = '".$dashboard_number_text_color."';\n";
@@ -223,7 +223,7 @@
 		echo "</script>\n";
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$stats['forwarding']."</span>";
+		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$stats['forwarding']."</span>";
 	}
 	echo "	</div>\n";
 
diff --git a/app/switch/resources/dashboard/switch_status.php b/app/switch/resources/dashboard/switch_status.php
index de4278c0e8..d5f2425739 100644
--- a/app/switch/resources/dashboard/switch_status.php
+++ b/app/switch/resources/dashboard/switch_status.php
@@ -76,13 +76,13 @@
 		$registrations = $registration->count();
 	}
 
-	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_switch_status_details').slideToggle('fast');\">\n";
-	echo "	<span class='hud_title' style='color: ".$dashboard_heading_text_color.";'>".$text['label-switch_status']."</span>\n";
+	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_switch_status_details').slideToggle('fast');\">\n";
+	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";'>".$text['label-switch_status']."</span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 143px;'><canvas id='switch_status_chart'></canvas></div>
+		<div style='height: 150px; padding-top: 7px;'><canvas id='switch_status_chart'></canvas></div>
 
 		<script>
 			const switch_status_chart = new Chart(
@@ -109,7 +109,7 @@
 						id: 'chart_number',
 						beforeDraw(chart, args, options){
 							const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-							ctx.font = chart_text_size + 'px ' + chart_text_font;
+							ctx.font = chart_text_size + ' ' + chart_text_font;
 							ctx.textBaseline = 'middle';
 							ctx.textAlign = 'center';
 							ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -123,7 +123,7 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$registrations."</span>";
+		echo "	<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$registrations."</span>";
 	}
 	echo "	</div>\n";
 
diff --git a/app/system/resources/dashboard/system_counts.php b/app/system/resources/dashboard/system_counts.php
index d3f327c3b3..30d453882e 100644
--- a/app/system/resources/dashboard/system_counts.php
+++ b/app/system/resources/dashboard/system_counts.php
@@ -295,13 +295,13 @@
 	echo "<div class='hud_box'>\n";
 	if ($show_stat) {
 
-		echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\">\n";
-		echo "	<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</span>\n";
+		echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_system_counts_details').slideToggle('fast');\">\n";
+		echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-system_counts']."</span>\n";
 
 		if ($dashboard_chart_type == "doughnut") {
 			//add doughnut chart
 			?>
-			<div style='height: 143px;'><canvas id='system_counts_chart'></canvas></div>
+			<div style='height: 150px; padding-top: 7px;'><canvas id='system_counts_chart'></canvas></div>
 
 			<script>
 				const system_counts_chart = new Chart(
@@ -341,7 +341,7 @@
 							id: 'chart_number',
 							beforeDraw(chart, args, options){
 								const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-								ctx.font = chart_text_size + 'px ' + chart_text_font;
+								ctx.font = chart_text_size + ' ' + chart_text_font;
 								ctx.textBaseline = 'middle';
 								ctx.textAlign = 'center';
 								ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -355,7 +355,7 @@
 			<?php
 		}
 		if ($dashboard_chart_type == "none") {
-			echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$domain_total."</span>";
+			echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color."; padding-bottom: 27px;'>".$domain_total."</span>";
 		}
 		echo "	</div>\n";
 	}
diff --git a/app/system/resources/dashboard/system_cpu_status.php b/app/system/resources/dashboard/system_cpu_status.php
index b47806a720..0477ac7d92 100644
--- a/app/system/resources/dashboard/system_cpu_status.php
+++ b/app/system/resources/dashboard/system_cpu_status.php
@@ -51,8 +51,8 @@
 	}
 
 //add half doughnut chart
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</span>\n";
+	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_system_cpu_status_details').slideToggle('fast');\">\n";
+	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-cpu_usage']."</span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
 		?>
@@ -99,7 +99,7 @@
 						id: 'chart_number_2',
 						beforeDraw(chart, args, options){
 							const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-							ctx.font = (chart_text_size - 7) + 'px ' + chart_text_font;
+							ctx.font = chart_text_size + ' ' + chart_text_font;
 							ctx.textBaseline = 'middle';
 							ctx.textAlign = 'center';
 							ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -113,9 +113,9 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_cpu)."%</span>";
+		echo "<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".round($percent_cpu)."%</span>";
 	}
-	echo "	</div>\n";
+	echo "</div>\n";
 
 //show the content
 	echo "<div class='hud_details hud_box' id='hud_system_cpu_status_details'>";
diff --git a/app/system/resources/dashboard/system_status.php b/app/system/resources/dashboard/system_status.php
index 59079b3bbb..daf7c783f0 100644
--- a/app/system/resources/dashboard/system_status.php
+++ b/app/system/resources/dashboard/system_status.php
@@ -37,8 +37,8 @@
 		if (!empty($percent_disk_usage)) {
 
 			//add half doughnut chart
-			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_system_status_details').slideToggle('fast');\">\n";
-			echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</span>\n";
+			echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_system_status_details').slideToggle('fast');\">\n";
+			echo "		<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/system/system.php'\">".$text['label-disk_usage']."</span>\n";
 
 			if ($dashboard_chart_type == "doughnut") {
 				?>
@@ -81,7 +81,7 @@
 								id: 'chart_number_2',
 								beforeDraw(chart, args, options){
 									const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-									ctx.font = (chart_text_size - 7) + 'px ' + chart_text_font;
+									ctx.font = chart_text_size + ' ' + chart_text_font;
 									ctx.textBaseline = 'middle';
 									ctx.textAlign = 'center';
 									ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
diff --git a/app/voicemails/resources/dashboard/voicemails.php b/app/voicemails/resources/dashboard/voicemails.php
index 2f63d2a0c0..abdfd5203d 100644
--- a/app/voicemails/resources/dashboard/voicemails.php
+++ b/app/voicemails/resources/dashboard/voicemails.php
@@ -52,13 +52,13 @@
 		}
 	}
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_voicemail_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php'\">".$text['label-new_messages']."</span>";
+	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_voicemail_details').slideToggle('fast');\">\n";
+	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/voicemails/voicemail_messages.php'\">".$text['label-new_messages']."</span>";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 143px;'><canvas id='new_messages_chart'></canvas></div>
+		<div style='width: 150px; height: 150px; padding-top: 7px;'><canvas id='new_messages_chart'></canvas></div>
 
 		<script>
 			const new_messages_chart = new Chart(
@@ -87,7 +87,7 @@
 						id: 'chart_number',
 						beforeDraw(chart, args, options){
 							const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-							ctx.font = chart_text_size + 'px ' + chart_text_font;
+							ctx.font = chart_text_size + ' ' + chart_text_font;
 							ctx.textBaseline = 'middle';
 							ctx.textAlign = 'center';
 							ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -101,9 +101,9 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$messages['new']."</span>";
+		echo "	<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$messages['new']."</span>";
 	}
-	echo "	</div>\n";
+	echo "</div>\n";
 
 	echo "<div class='hud_details hud_box' id='hud_voicemail_details'>";
 	if (sizeof($voicemails) > 0) {
diff --git a/app/xml_cdr/resources/dashboard/missed_calls.php b/app/xml_cdr/resources/dashboard/missed_calls.php
index 71c886566b..f16a32a9ae 100644
--- a/app/xml_cdr/resources/dashboard/missed_calls.php
+++ b/app/xml_cdr/resources/dashboard/missed_calls.php
@@ -90,13 +90,13 @@
 //missed calls
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
+	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">\n";
+	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php?call_result=missed'\">".$text['label-missed_calls']."</span>";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 143px;'><canvas id='missed_calls_chart'></canvas></div>
+		<div style='height: 150px; padding-top: 7px;'><canvas id='missed_calls_chart'></canvas></div>
 
 		<script>
 			const missed_calls_chart = new Chart(
@@ -125,7 +125,7 @@
 						id: 'chart_number',
 						beforeDraw(chart, args, options){
 							const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-							ctx.font = chart_text_size + 'px ' + chart_text_font;
+							ctx.font = chart_text_size + ' ' + chart_text_font;
 							ctx.textBaseline = 'middle';
 							ctx.textAlign = 'center';
 							ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -139,9 +139,9 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$num_rows."</span>";
+		echo "<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";' onclick=\"$('#hud_missed_calls_details').slideToggle('fast');\">".$num_rows."</span>";
 	}
-	echo "	</div>\n";
+	echo "</div>\n";
 
 	echo "<div class='hud_details hud_box' id='hud_missed_calls_details'>";
 	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
diff --git a/app/xml_cdr/resources/dashboard/recent_calls.php b/app/xml_cdr/resources/dashboard/recent_calls.php
index 25dec02602..bc0530725a 100644
--- a/app/xml_cdr/resources/dashboard/recent_calls.php
+++ b/app/xml_cdr/resources/dashboard/recent_calls.php
@@ -87,13 +87,15 @@
 //recent calls
 	echo "<div class='hud_box'>\n";
 
-	echo "	<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 20px;' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\">\n";
-	echo "		<span class='hud_title' style='color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</span>\n";
+	echo "<div style='display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 13px; background-color: ".$dashboard_number_background_color.";' onclick=\"$('#hud_recent_calls_details').slideToggle('fast');\">\n";
+	echo "	<span class='hud_title' style='background-color: ".$dashboard_heading_background_color."; color: ".$dashboard_heading_text_color.";' onclick=\"document.location.href='".PROJECT_PATH."/app/xml_cdr/xml_cdr.php';\">".$text['label-recent_calls']."</span>\n";
 
 	if ($dashboard_chart_type == "doughnut") {
 		//add doughnut chart
 		?>
-		<div style='height: 143px;'><canvas id='recent_calls_chart'></canvas></div>
+
+		<div style='width: 150px; height: 150px; padding-top: 7px;'><canvas id='recent_calls_chart'></canvas></div>
+
 		<script>
 			const recent_calls_chart = new Chart(
 				document.getElementById('recent_calls_chart').getContext('2d'),
@@ -121,7 +123,7 @@
 						id: 'chart_number',
 						beforeDraw(chart, args, options){
 							const {ctx, chartArea: {top, right, bottom, left, width, height} } = chart;
-							ctx.font = chart_text_size + 'px ' + chart_text_font;
+							ctx.font = chart_text_size + ' ' + chart_text_font;
 							ctx.textBaseline = 'middle';
 							ctx.textAlign = 'center';
 							ctx.fillStyle = '<?php echo $dashboard_number_text_color; ?>';
@@ -135,9 +137,9 @@
 		<?php
 	}
 	if ($dashboard_chart_type == "none") {
-		echo "	<span class='hud_stat' style='color: ".$dashboard_number_text_color.";'>".$num_rows."</span>";
+		echo "<span class='hud_stat' style='padding-bottom: 27px; color: ".$dashboard_number_text_color.";'>".$num_rows."</span>";
 	}
-	echo "	</div>\n";
+	echo "</div>\n";
 
 	echo "<div class='hud_details hud_box' id='hud_recent_calls_details'>";
 	echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
diff --git a/core/dashboard/app_config.php b/core/dashboard/app_config.php
index fb285d83bf..2a50357cab 100644
--- a/core/dashboard/app_config.php
+++ b/core/dashboard/app_config.php
@@ -77,11 +77,21 @@
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the chart type.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading background color.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_heading_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
 		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the heading text color.';
 		$z++;
+		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_background_color';
+		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
+		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
+		$apps[$x]['db'][$y]['fields'][$z]['description']['en-us'] = 'Enter the number text color.';
+		$z++;
 		$apps[$x]['db'][$y]['fields'][$z]['name'] = 'dashboard_number_text_color';
 		$apps[$x]['db'][$y]['fields'][$z]['type'] = 'text';
 		$apps[$x]['db'][$y]['fields'][$z]['search_by'] = '';
diff --git a/core/dashboard/app_languages.php b/core/dashboard/app_languages.php
index 88bb709ad3..11e5d075bb 100644
--- a/core/dashboard/app_languages.php
+++ b/core/dashboard/app_languages.php
@@ -338,6 +338,58 @@ $text['label-doughnut']['zh-cn'] = "油炸圈饼";
 $text['label-doughnut']['ja-jp'] = "ドーナツ";
 $text['label-doughnut']['ko-kr'] = "도넛";
 
+$text['label-dashboard_heading_background_color']['en-us'] = "Heading Background Color";
+$text['label-dashboard_heading_background_color']['en-gb'] = "Heading Background Color";
+$text['label-dashboard_heading_background_color']['ar-eg'] = "";
+$text['label-dashboard_heading_background_color']['de-at'] = "";
+$text['label-dashboard_heading_background_color']['de-ch'] = "";
+$text['label-dashboard_heading_background_color']['de-de'] = "";
+$text['label-dashboard_heading_background_color']['el-gr'] = "";
+$text['label-dashboard_heading_background_color']['es-cl'] = "";
+$text['label-dashboard_heading_background_color']['es-mx'] = "";
+$text['label-dashboard_heading_background_color']['fr-ca'] = "";
+$text['label-dashboard_heading_background_color']['fr-fr'] = "";
+$text['label-dashboard_heading_background_color']['he-il'] = "";
+$text['label-dashboard_heading_background_color']['it-it'] = "";
+$text['label-dashboard_heading_background_color']['nl-nl'] = "";
+$text['label-dashboard_heading_background_color']['pl-pl'] = "";
+$text['label-dashboard_heading_background_color']['pt-br'] = "";
+$text['label-dashboard_heading_background_color']['pt-pt'] = "";
+$text['label-dashboard_heading_background_color']['ro-ro'] = "";
+$text['label-dashboard_heading_background_color']['ru-ru'] = "";
+$text['label-dashboard_heading_background_color']['sv-se'] = "";
+$text['label-dashboard_heading_background_color']['uk-ua'] = "";
+$text['label-dashboard_heading_background_color']['tr-tr'] = "";
+$text['label-dashboard_heading_background_color']['zh-cn'] = "";
+$text['label-dashboard_heading_background_color']['ja-jp'] = "";
+$text['label-dashboard_heading_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_heading_background_color']['en-us'] = "Enter the dashboard widget heading background color";
+$text['description-dashboard_heading_background_color']['en-gb'] = "Enter the dashboard widget heading background color";
+$text['description-dashboard_heading_background_color']['ar-eg'] = "";
+$text['description-dashboard_heading_background_color']['de-at'] = "";
+$text['description-dashboard_heading_background_color']['de-ch'] = "";
+$text['description-dashboard_heading_background_color']['de-de'] = "";
+$text['description-dashboard_heading_background_color']['el-gr'] = "";
+$text['description-dashboard_heading_background_color']['es-cl'] = "";
+$text['description-dashboard_heading_background_color']['es-mx'] = "";
+$text['description-dashboard_heading_background_color']['fr-ca'] = "";
+$text['description-dashboard_heading_background_color']['fr-fr'] = "";
+$text['description-dashboard_heading_background_color']['he-il'] = "";
+$text['description-dashboard_heading_background_color']['it-it'] = "";
+$text['description-dashboard_heading_background_color']['nl-nl'] = "";
+$text['description-dashboard_heading_background_color']['pl-pl'] = "";
+$text['description-dashboard_heading_background_color']['pt-br'] = "";
+$text['description-dashboard_heading_background_color']['pt-pt'] = "";
+$text['description-dashboard_heading_background_color']['ro-ro'] = "";
+$text['description-dashboard_heading_background_color']['ru-ru'] = "";
+$text['description-dashboard_heading_background_color']['sv-se'] = "";
+$text['description-dashboard_heading_background_color']['uk-ua'] = "";
+$text['description-dashboard_heading_background_color']['tr-tr'] = "";
+$text['description-dashboard_heading_background_color']['zh-cn'] = "";
+$text['description-dashboard_heading_background_color']['ja-jp'] = "";
+$text['description-dashboard_heading_background_color']['ko-kr'] = "";
+
 $text['label-dashboard_heading_text_color']['en-us'] = "Heading Text Color";
 $text['label-dashboard_heading_text_color']['en-gb'] = "Heading Text Color";
 $text['label-dashboard_heading_text_color']['ar-eg'] = "لون نص العنوان";
@@ -390,6 +442,58 @@ $text['description-dashboard_heading_text_color']['zh-cn'] = "输入仪表板小
 $text['description-dashboard_heading_text_color']['ja-jp'] = "ダッシュボード ウィジェットの見出しのテキストの色を入力します。";
 $text['description-dashboard_heading_text_color']['ko-kr'] = "대시보드 위젯 제목 텍스트 색상을 입력합니다.";
 
+$text['label-dashboard_number_background_color']['en-us'] = "Number Background Color";
+$text['label-dashboard_number_background_color']['en-gb'] = "Number Background Color";
+$text['label-dashboard_number_background_color']['ar-eg'] = "";
+$text['label-dashboard_number_background_color']['de-at'] = "";
+$text['label-dashboard_number_background_color']['de-ch'] = "";
+$text['label-dashboard_number_background_color']['de-de'] = "";
+$text['label-dashboard_number_background_color']['el-gr'] = "";
+$text['label-dashboard_number_background_color']['es-cl'] = "";
+$text['label-dashboard_number_background_color']['es-mx'] = "";
+$text['label-dashboard_number_background_color']['fr-ca'] = "";
+$text['label-dashboard_number_background_color']['fr-fr'] = "";
+$text['label-dashboard_number_background_color']['he-il'] = "";
+$text['label-dashboard_number_background_color']['it-it'] = "";
+$text['label-dashboard_number_background_color']['nl-nl'] = "";
+$text['label-dashboard_number_background_color']['pl-pl'] = "";
+$text['label-dashboard_number_background_color']['pt-br'] = "";
+$text['label-dashboard_number_background_color']['pt-pt'] = "";
+$text['label-dashboard_number_background_color']['ro-ro'] = "";
+$text['label-dashboard_number_background_color']['ru-ru'] = "";
+$text['label-dashboard_number_background_color']['sv-se'] = "";
+$text['label-dashboard_number_background_color']['uk-ua'] = "";
+$text['label-dashboard_number_background_color']['tr-tr'] = "";
+$text['label-dashboard_number_background_color']['zh-cn'] = "";
+$text['label-dashboard_number_background_color']['ja-jp'] = "";
+$text['label-dashboard_number_background_color']['ko-kr'] = "";
+
+$text['description-dashboard_number_background_color']['en-us'] = "Enter the dashboard widget number background color.";
+$text['description-dashboard_number_background_color']['en-gb'] = "Enter the dashboard widget number background color.";
+$text['description-dashboard_number_background_color']['ar-eg'] = "";
+$text['description-dashboard_number_background_color']['de-at'] = "";
+$text['description-dashboard_number_background_color']['de-ch'] = "";
+$text['description-dashboard_number_background_color']['de-de'] = "";
+$text['description-dashboard_number_background_color']['el-gr'] = "";
+$text['description-dashboard_number_background_color']['es-cl'] = "";
+$text['description-dashboard_number_background_color']['es-mx'] = "";
+$text['description-dashboard_number_background_color']['fr-ca'] = "";
+$text['description-dashboard_number_background_color']['fr-fr'] = "";
+$text['description-dashboard_number_background_color']['he-il'] = "";
+$text['description-dashboard_number_background_color']['it-it'] = "";
+$text['description-dashboard_number_background_color']['nl-nl'] = "";
+$text['description-dashboard_number_background_color']['pl-pl'] = "";
+$text['description-dashboard_number_background_color']['pt-br'] = "";
+$text['description-dashboard_number_background_color']['pt-pt'] = "";
+$text['description-dashboard_number_background_color']['ro-ro'] = "";
+$text['description-dashboard_number_background_color']['ru-ru'] = "";
+$text['description-dashboard_number_background_color']['sv-se'] = "";
+$text['description-dashboard_number_background_color']['uk-ua'] = "";
+$text['description-dashboard_number_background_color']['tr-tr'] = "";
+$text['description-dashboard_number_background_color']['zh-cn'] = "";
+$text['description-dashboard_number_background_color']['ja-jp'] = "";
+$text['description-dashboard_number_background_color']['ko-kr'] = "";
+
 $text['label-dashboard_number_text_color']['en-us'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['en-gb'] = "Number Text Color";
 $text['label-dashboard_number_text_color']['ar-eg'] = "رقم لون النص";
diff --git a/core/dashboard/dashboard_edit.php b/core/dashboard/dashboard_edit.php
index c436d6cbf0..ac80045f08 100644
--- a/core/dashboard/dashboard_edit.php
+++ b/core/dashboard/dashboard_edit.php
@@ -66,7 +66,9 @@
 		$dashboard_path = $_POST["dashboard_path"] ?? '';
 		$dashboard_groups = $_POST["dashboard_groups"] ?? '';
 		$dashboard_chart_type = $_POST["dashboard_chart_type"] ?? '';
+		$dashboard_heading_background_color = $_POST["dashboard_heading_background_color"] ?? '';
 		$dashboard_heading_text_color = $_POST["dashboard_heading_text_color"] ?? '';
+		$dashboard_number_background_color = $_POST["dashboard_number_background_color"] ?? '';
 		$dashboard_number_text_color = $_POST["dashboard_number_text_color"] ?? '';
 		$dashboard_column_span = $_POST["dashboard_column_span"] ?? '';
 		$dashboard_details_state = $_POST["dashboard_details_state"] ?? '';
@@ -167,7 +169,9 @@
 			$array['dashboard'][0]['dashboard_name'] = $dashboard_name;
 			$array['dashboard'][0]['dashboard_path'] = $dashboard_path;
 			$array['dashboard'][0]['dashboard_chart_type'] = $dashboard_chart_type;
+			$array['dashboard'][0]['dashboard_heading_background_color'] = $dashboard_heading_background_color;
 			$array['dashboard'][0]['dashboard_heading_text_color'] = $dashboard_heading_text_color;
+			$array['dashboard'][0]['dashboard_number_background_color'] = $dashboard_number_background_color;
 			$array['dashboard'][0]['dashboard_number_text_color'] = $dashboard_number_text_color;
 			$array['dashboard'][0]['dashboard_column_span'] = $dashboard_column_span;
 			$array['dashboard'][0]['dashboard_details_state'] = $dashboard_details_state;
@@ -215,7 +219,9 @@
 		$sql .= " dashboard_name, ";
 		$sql .= " dashboard_path, ";
 		$sql .= " dashboard_chart_type, ";
+		$sql .= " dashboard_heading_background_color, ";
 		$sql .= " dashboard_heading_text_color, ";
+		$sql .= " dashboard_number_background_color, ";
 		$sql .= " dashboard_number_text_color, ";
 		$sql .= " dashboard_column_span, ";
 		$sql .= " dashboard_details_state, ";
@@ -231,7 +237,9 @@
 			$dashboard_name = $row["dashboard_name"];
 			$dashboard_path = $row["dashboard_path"];
 			$dashboard_chart_type = $row["dashboard_chart_type"];
+			$dashboard_heading_background_color = $row["dashboard_heading_background_color"];
 			$dashboard_heading_text_color = $row["dashboard_heading_text_color"];
+			$dashboard_number_background_color = $row["dashboard_number_background_color"];
 			$dashboard_number_text_color = $row["dashboard_number_text_color"];
 			$dashboard_column_span = $row["dashboard_column_span"];
 			$dashboard_details_state = $row["dashboard_details_state"];
@@ -408,51 +416,75 @@
 	echo "</td>\n";
 	echo "</tr>\n";
 
-	echo "<tr>\n";
-	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_chart_type']."\n";
-	echo "</td>\n";
-	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<select name='dashboard_chart_type' class='formfld'>\n";
-	if ($dashboard_chart_type == "doughnut") {
-		echo "		<option value='doughnut' selected='selected'>".$text['label-doughnut']."</option>\n";
-	}
-	else {
-		echo "		<option value='doughnut'>".$text['label-doughnut']."</option>\n";
-	}
-	if ($dashboard_chart_type == "none") {
-		echo "		<option value='none' selected='selected'>".$text['label-none']."</option>\n";
-	}
-	else {
-		echo "		<option value='none'>".$text['label-none']."</option>\n";
-	}
-	echo "	</select>\n";
-	echo "<br />\n";
-	echo $text['description-dashboard_chart_type']."\n";
-	echo "</td>\n";
-	echo "</tr>\n";
+	if ($dashboard_path != "app/devices/resources/dashboard/device_keys.php" || $dashboard_path != "app/call_centers/resources/dashboard/call_center_agents.php") {
+		echo "<tr>\n";
+		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+		echo $text['label-dashboard_chart_type']."\n";
+		echo "</td>\n";
+		echo "<td class='vtable' style='position: relative;' align='left'>\n";
+		echo "	<select name='dashboard_chart_type' class='formfld'>\n";
+		if ($dashboard_chart_type == "doughnut") {
+			echo "		<option value='doughnut' selected='selected'>".$text['label-doughnut']."</option>\n";
+		}
+		else {
+			echo "		<option value='doughnut'>".$text['label-doughnut']."</option>\n";
+		}
+		if ($dashboard_chart_type == "none") {
+			echo "		<option value='none' selected='selected'>".$text['label-none']."</option>\n";
+		}
+		else {
+			echo "		<option value='none'>".$text['label-none']."</option>\n";
+		}
+		echo "	</select>\n";
+		echo "<br />\n";
+		echo $text['description-dashboard_chart_type']."\n";
+		echo "</td>\n";
+		echo "</tr>\n";
 
-	echo "<tr>\n";
-	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_heading_text_color']."\n";
-	echo "</td>\n";
-	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_text_color' value='".escape($dashboard_heading_text_color)."'>\n";
-	echo "<br />\n";
-	echo $text['description-dashboard_heading_text_color']."\n";
-	echo "</td>\n";
-	echo "</tr>\n";
+		echo "<tr>\n";
+		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+		echo $text['label-dashboard_heading_background_color']."\n";
+		echo "</td>\n";
+		echo "<td class='vtable' style='position: relative;' align='left'>\n";
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_background_color' value='".escape($dashboard_heading_background_color)."'>\n";
+		echo "<br />\n";
+		echo $text['description-dashboard_heading_background_color']."\n";
+		echo "</td>\n";
+		echo "</tr>\n";
 
-	echo "<tr>\n";
-	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
-	echo $text['label-dashboard_number_text_color']."\n";
-	echo "</td>\n";
-	echo "<td class='vtable' style='position: relative;' align='left'>\n";
-	echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_text_color' value='".escape($dashboard_number_text_color)."'>\n";
-	echo "<br />\n";
-	echo $text['description-dashboard_number_text_color']."\n";
-	echo "</td>\n";
-	echo "</tr>\n";
+		echo "<tr>\n";
+		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+		echo $text['label-dashboard_heading_text_color']."\n";
+		echo "</td>\n";
+		echo "<td class='vtable' style='position: relative;' align='left'>\n";
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_heading_text_color' value='".escape($dashboard_heading_text_color)."'>\n";
+		echo "<br />\n";
+		echo $text['description-dashboard_heading_text_color']."\n";
+		echo "</td>\n";
+		echo "</tr>\n";
+
+		echo "<tr>\n";
+		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+		echo $text['label-dashboard_number_background_color']."\n";
+		echo "</td>\n";
+		echo "<td class='vtable' style='position: relative;' align='left'>\n";
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_background_color' value='".escape($dashboard_number_background_color)."'>\n";
+		echo "<br />\n";
+		echo $text['description-dashboard_number_background_color']."\n";
+		echo "</td>\n";
+		echo "</tr>\n";
+
+		echo "<tr>\n";
+		echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
+		echo $text['label-dashboard_number_text_color']."\n";
+		echo "</td>\n";
+		echo "<td class='vtable' style='position: relative;' align='left'>\n";
+		echo "	<input type='text' class='formfld colorpicker' name='dashboard_number_text_color' value='".escape($dashboard_number_text_color)."'>\n";
+		echo "<br />\n";
+		echo $text['description-dashboard_number_text_color']."\n";
+		echo "</td>\n";
+		echo "</tr>\n";
+	}
 
 	echo "<tr>\n";
 	echo "<td class='vncell' valign='top' align='left' nowrap='nowrap'>\n";
diff --git a/core/dashboard/index.php b/core/dashboard/index.php
index b9d6bd71d0..3fe3cd62fe 100644
--- a/core/dashboard/index.php
+++ b/core/dashboard/index.php
@@ -73,7 +73,9 @@
 	$sql .= "dashboard_name, \n";
 	$sql .= "dashboard_path, \n";
 	$sql .= "dashboard_chart_type, \n";
+	$sql .= "dashboard_heading_background_color, \n";
 	$sql .= "dashboard_heading_text_color, \n";
+	$sql .= "dashboard_number_background_color, \n";
 	$sql .= "dashboard_number_text_color, \n";
 	$sql .= "dashboard_column_span, \n";
 	$sql .= "dashboard_details_state, \n";
@@ -145,8 +147,8 @@
 
 //chart variables
 	echo "<script>\n";
-	echo "	var chart_text_font = 'arial';\n";
-	echo "	var chart_text_size = 30;\n";
+	echo "	var chart_text_font = '".($settings->get('theme', 'dashboard_number_text_font') ?? 'arial')."';\n";
+	echo "	var chart_text_size = '30px';\n";
 	echo "	Chart.defaults.responsive = true;\n";
 	echo "	Chart.defaults.maintainAspectRatio = false;\n";
 	echo "	Chart.defaults.plugins.legend.display = false;\n";
@@ -304,8 +306,10 @@
 		$dashboard_name = strtolower($row['dashboard_name']);
 		$dashboard_name = str_replace(" ", "_", $dashboard_name);
 		$dashboard_chart_type = $row['dashboard_chart_type'] ?? 'doughnut';
+		$dashboard_heading_background_color = $row['dashboard_heading_background_color'] ?? $settings->get('theme', 'dashboard_heading_background_color');
 		$dashboard_heading_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_heading_text_color');
-		$dashboard_number_text_color = $row['dashboard_heading_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
+		$dashboard_number_background_color = $row['dashboard_number_background_color'] ?? $settings->get('theme', 'dashboard_number_background_color');
+		$dashboard_number_text_color = $row['dashboard_number_text_color'] ?? $settings->get('theme', 'dashboard_number_text_color');
 		echo "<div class='widget' id='".$dashboard_name."' draggable='false'>\n";
 			include($row['dashboard_path']);
 		echo "</div>\n";
diff --git a/themes/default/css.php b/themes/default/css.php
index c5c8a8b222..3cce04155b 100644
--- a/themes/default/css.php
+++ b/themes/default/css.php
@@ -219,15 +219,15 @@ $dashboard_heading_text_size = $_SESSION['theme']['dashboard_heading_text_size']
 $dashboard_heading_text_font = $_SESSION['theme']['dashboard_heading_text_font']['text'] ?? 'Arial, Calibri, Candara, Segoe, "Segoe UI", Optima, sans-serif';
 $dashboard_heading_text_shadow_color = $_SESSION['theme']['dashboard_heading_text_shadow_color']['text'] ?? 'rgba(0,0,0,0)';
 $dashboard_heading_background_color = $_SESSION['theme']['dashboard_heading_background_color']['text'] ?? '';
-$dashboard_heading_background_color_hover = $_SESSION['theme']['dashboard_heading_background_color_hover']['text'] ?? color_adjust($dashboard_heading_background_color, 0.03);
+$dashboard_heading_background_color_hover = $_SESSION['theme']['dashboard_heading_background_color_hover']['text'] ?? '';
 $dashboard_number_text_color = $_SESSION['theme']['dashboard_number_text_color']['text'] ?? '#444';
 $dashboard_number_text_color_hover = $_SESSION['theme']['dashboard_number_text_color_hover']['text'] ?? '';
 $dashboard_number_text_font = $_SESSION['theme']['dashboard_number_text_font']['text'] ?? 'Arial, Calibri, Candara, Segoe, "Segoe UI", Optima, sans-serif';
-$dashboard_number_text_size = $_SESSION['theme']['dashboard_number_text_size']['text'] ?? '100px';
+$dashboard_number_text_size = $_SESSION['theme']['dashboard_number_text_size']['text'] ?? '60pt';
 $dashboard_number_text_shadow_color = $_SESSION['theme']['dashboard_number_text_shadow_color']['text'] ?? 'rgba(0,0,0,0)';
 $dashboard_number_text_shadow_color_hover = $_SESSION['theme']['dashboard_number_text_shadow_color_hover']['text'] ?? 'rgba(0,0,0,0)';
 $dashboard_number_background_color = $_SESSION['theme']['dashboard_number_background_color']['text'] ?? '';
-$dashboard_number_background_color_hover = $_SESSION['theme']['dashboard_number_background_color_hover']['text'] ?? color_adjust($dashboard_number_background_color, 0.03);
+$dashboard_number_background_color_hover = $_SESSION['theme']['dashboard_number_background_color_hover']['text'] ?? '';
 $dashboard_number_title_text_color = $_SESSION['theme']['dashboard_number_title_text_color']['text'] ?? '#fff';
 $dashboard_number_title_text_size = $_SESSION['theme']['dashboard_number_title_text_size']['text'] ?? '14px';
 $dashboard_number_title_text_font = $_SESSION['theme']['dashboard_number_title_text_font']['text'] ?? 'Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif';
@@ -2620,7 +2620,6 @@ else { //default: white
 		border-top: 1px solid <?php echo color_adjust($dashboard_number_background_color, 0.2); ?>;
 		overflow: hidden;
 		<?php
-		/*
 		//calculate font padding
 		$font_size = strtolower($dashboard_heading_text_size);
 		$tmp = str_replace(' ', '', $font_size);
@@ -2630,14 +2629,9 @@ else { //default: white
 		$tmp = str_replace('%', '', $tmp);
 		$font_size_number = $tmp;
 		$padding_top_bottom = (int) floor((100-$tmp) * 0.25);
-		*/
 		?>
-		<!--
 		padding-top: <?php echo $padding_top_bottom.'px' ?>;
-		padding-bottom: <?php echo $padding_top_bottom.'px' ?>;
-		-->
-		padding-top: 5px;
-		padding-bottom: 10px;
+		padding-bottom: <?php echo ($padding_top_bottom).'px' ?>;
 		}
 
 	span.hud_stat:hover {