ATLAS-3909: UI: Improve readability for the table view in the entity detail page

dashboardv2/public/css/scss/table.scss

@@ -14,6 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+.table.bold-key>tbody>tr>td:first-child {
+    font-weight: 600;
+}
+
 tr.empty {
     td {
         display: table-cell;

dashboardv2/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html

@@ -38,7 +38,7 @@
         <div id="collapse1" class="panel-collapse collapse in">
             <div class="panel-body">
                 <div class="entity-detail-table">
-                    <table class="table">
+                    <table class="table bold-key">
                         <tbody data-id="detailValue" class="hide-empty-value">
                         </tbody>
                     </table>

dashboardv2/public/js/templates/entity/EntityUserDefineView_tmpl.html

@@ -75,7 +75,7 @@
                     <div id="r_entityUserDefinedItemView"></div>
                     {{else}}
                     <div class="entity-detail-table">
-                        <table class="table">
+                        <table class="table bold-key">
                             <tbody>
                                 {{#each customAttibutes}}
                                 <tr>

dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -123,13 +123,7 @@
             <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
         </div>
         <div class="body">
-            <table class='table table-quickMenu'>
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
+            <table class='table bold-key'>
                 <tbody data-id="nodeDetailTable"></tbody>
             </table>
         </div>

dashboardv2/public/js/templates/graph/RelationshipLayoutView_tmpl.html

@@ -61,7 +61,7 @@
             </div>
         </div>
     </div>
-    <table class="table table-quickMenu" data-id="relationshipDetailTable">
+    <table class="table table-quickMenu bold-key" data-id="relationshipDetailTable">
         <thead>
             <tr>
                 <th>Key</th>

dashboardv2/public/js/views/entity/EntityBusinessMetaDataView.js

@@ -262,7 +262,7 @@ define([
                 '<div class="btn-group pull-left"> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button></div>' +
                 '</div>' +
                 '<div id="' + _.escape(obj.get("__internal_UI_businessMetadataName")) + '" class="panel-collapse collapse in">' +
-                '<div class="panel-body"><table class="table">' + tableBody + '</table></div>' +
+                '<div class="panel-body"><table class="table bold-key">' + tableBody + '</table></div>' +
                 '</div></div>';
         },
         onRender: function() {

dashboardv3/public/css/scss/table.scss

@@ -14,6 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+.table.bold-key>tbody>tr>td:first-child {
+    font-weight: 600;
+}
+
 tr.empty {
     td {
         display: table-cell;

dashboardv3/public/css/scss/theme.scss

@@ -131,7 +131,7 @@ header.atlas-header {
     border-bottom: 1px $color_mystic_approx solid;
     position: fixed;
     width: 100%;
-    z-index: 3;
+    z-index: 4;
     box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
 
     .navbar-nav {

dashboardv3/public/js/templates/entity/EntityDetailTableLayoutView_tmpl.html

@@ -38,7 +38,7 @@
         <div id="collapse1" class="panel-collapse collapse in">
             <div class="panel-body">
                 <div class="entity-detail-table">
-                    <table class="table">
+                    <table class="table bold-key">
                         <tbody data-id="detailValue" class="hide-empty-value">
                         </tbody>
                     </table>

dashboardv3/public/js/templates/entity/EntityUserDefineView_tmpl.html

@@ -75,7 +75,7 @@
                     <div id="r_entityUserDefinedItemView"></div>
                     {{else}}
                     <div class="entity-detail-table">
-                        <table class="table">
+                        <table class="table bold-key">
                             <tbody>
                                 {{#each customAttibutes}}
                                 <tr>

dashboardv3/public/js/templates/graph/LineageLayoutView_tmpl.html

@@ -123,13 +123,7 @@
             <span data-id="box-close" class="btn btn-sm btn-close lineage-node-detail-close"><i class="fa fa-close"></i></span>
         </div>
         <div class="body">
-            <table class='table table-quickMenu'>
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
+            <table class='table bold-key'>
                 <tbody data-id="nodeDetailTable"></tbody>
             </table>
         </div>

dashboardv3/public/js/templates/graph/RelationshipLayoutView_tmpl.html

@@ -62,7 +62,7 @@
                 </div>
             </div>
         </div>
-        <table class="table table-quickMenu" data-id="relationshipDetailTable">
+        <table class="table table-quickMenu bold-key" data-id="relationshipDetailTable">
             <thead>
                 <tr>
                     <th>Key</th>

dashboardv3/public/js/views/entity/EntityBusinessMetaDataView.js

@@ -262,7 +262,7 @@ define([
                 '<div class="btn-group pull-left"> <button type="button" title="Collapse"><i class="ec-icon fa"></i></button></div>' +
                 '</div>' +
                 '<div id="' + _.escape(obj.get("__internal_UI_businessMetadataName")) + '" class="panel-collapse collapse in">' +
-                '<div class="panel-body"><table class="table">' + tableBody + '</table></div>' +
+                '<div class="panel-body"><table class="table bold-key">' + tableBody + '</table></div>' +
                 '</div></div>';
         },
         onRender: function() {