From ed01dbd0efecb16076ec3f33397a13bda990b29f Mon Sep 17 00:00:00 2001
From: Murtuza Zabuawala <murtuza.zabuawala@enterprisedb.com>
Date: Thu, 20 Dec 2018 09:53:35 +0000
Subject: [PATCH] Ensure the dashboard tabs are styles correctly. Fixes #3824

---
 .../templates/dashboard/database_dashboard.html   |  9 ++++++---
 .../templates/dashboard/server_dashboard.html     | 12 ++++++++----
 web/pgadmin/static/scss/_bootstrap.overrides.scss | 15 +++++++++++++--
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
index 30c02dfad..4b43b0951 100644
--- a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
@@ -65,14 +65,17 @@
                 <div class="dashboard-tab-container">
                     <!-- Nav tabs -->
                     <ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
-                        <li role="presentation" class="active dashboard-tab"><a href="#tab_panel_database_activity"
+                        <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_activity"
+                                                                                class="nav-link active"
                                                                                 aria-controls="tab_database_activity"
                                                                                 role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
                         </li>
-                        <li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_locks"
+                        <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_locks"
+                                                                         class="nav-link"
                                                                          aria-controls="tab_database_locks" role="tab"
                                                                          data-toggle="tab">{{ _('Locks') }}</a></li>
-                        <li role="presentation" class="dashboard-tab"><a href="#tab_panel_database_prepared"
+                        <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_database_prepared"
+                                                                         class="nav-link"
                                                                          aria-controls="tab_database_prepared" role="tab"
                                                                          data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
                     </ul>
diff --git a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
index 57e0b47b5..c81ab34fb 100644
--- a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
@@ -65,17 +65,21 @@
                     <div class="dashboard-tab-container">
                         <!-- Nav tabs -->
                         <ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
-                            <li role="presentation" class="active dashboard-tab"><a href="#tab_panel_server_activity"
+                            <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_activity"
+                                                                                    class="nav-link active"
                                                                                     aria-controls="tab_server_activity"
                                                                                     role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
                             </li>
-                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_locks"
+                            <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_locks"
+                                                                             class="nav-link"
                                                                              aria-controls="tab_server_locks" role="tab"
                                                                              data-toggle="tab">{{ _('Locks') }}</a></li>
-                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_prepared"
+                            <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_prepared"
+                                                                             class="nav-link"
                                                                              aria-controls="tab_server_prepared" role="tab"
                                                                              data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
-                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_config"
+                            <li role="presentation" class="nav-item dashboard-tab"><a href="#tab_panel_server_config"
+                                                                             class="nav-link"
                                                                              aria-controls="tab_server_config" role="tab"
                                                                              data-toggle="tab">{{ _('Configuration') }}</a></li>
                         </ul>
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 1d3eb2adc..d00dd66ee 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -219,8 +219,11 @@ td.switch-cell > div.bootstrap-switch {
   }
 }
 
-.nav-tabs>.nav-item>.nav-link.active {
+/* If Bootstrap tab is already active then don't show pointer cursor */
+.nav-tabs > .nav-item > .nav-link.active {
 	color: $color-fg;
+	background-color: $color-fg-inverse;
+	cursor: default;
 }
 
 .bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
@@ -257,4 +260,12 @@ td.switch-cell > div.bootstrap-switch {
 
 .bootstrap-datetimepicker-widget thead th {
   background-color: $color-fg-inverse;
-}
\ No newline at end of file
+}
+
+.nav-tabs {
+  background-color: $color-gray-lighter;
+}
+
+.nav-tabs > .nav-item > .nav-link:hover:not(.active) {
+  background-color: $color-gray-white;
+}