HUE-6938 [indexes] Harmonized section titles

apps/metastore/src/metastore/templates/metastore.mako

@@ -118,7 +118,6 @@ ${ components.menubar(is_embeddable) }
 <script type="text/html" id="metastore-columns-table">
   <div style="overflow-x: auto; overflow-y: hidden">
     <table class="table table-condensed table-nowrap">
-      <br/>
       <thead>
       <tr>
         <th width="2%">&nbsp;</th>
@@ -891,7 +890,7 @@ ${ components.menubar(is_embeddable) }
     <div data-bind="html: comment, attr:{ title: comment }" class="table-description"></div>
   %endif
 
-  <ul class="nav nav-pills margin-top-30">
+  <ul class="nav nav-tabs nav-tabs-border margin-top-30">
     <li><a href="#overview" data-toggle="tab" data-bind="click: function(){ $root.currentTab('table-overview'); }">${_('Overview')}</a></li>
     <li><a href="#columns" data-toggle="tab" data-bind="click: function(){ $root.currentTab('table-columns'); }">${_('Columns')} (<span data-bind="text: columns().length"></span>)</a></li>
     <!-- ko if: tableDetails() && tableDetails().partition_keys.length -->
@@ -921,7 +920,9 @@ ${ components.menubar(is_embeddable) }
     <div class="tab-pane" id="columns">
       <!-- ko if: $root.currentTab() == 'table-columns' -->
         <input class="input-xlarge search-query margin-left-10" type="text" placeholder="${ _('Search for a column...') }" data-bind="clearable: columnQuery, value: columnQuery, valueUpdate: 'afterkeydown'"/>
+        <div class="margin-top-10">
         <!-- ko template: 'metastore-columns-tab' --><!-- /ko -->
+        </div>
       <!-- /ko -->
     </div>
 

desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -507,3 +507,7 @@ ul.errorlist {
   word-break: break-all;
   white-space: initial !important;
 }
+
+.nav-pills-border, .nav-tabs-border {
+  border-bottom: 1px solid @cui-default-border-color;
+}

desktop/core/src/desktop/static/desktop/less/hue-helpers.less

@@ -133,10 +133,10 @@ pre, .like-pre {
 
 .section-h4-border {
   font-weight: bold;
-  color: @cui-gray-600;
+  color: @cui-blue-700;
   font-size: 14px;
   text-transform: uppercase;
   padding-left: 4px;
-  border-bottom: 1px solid @cui-gray-300;
   padding-bottom: 3px;
+  display: inline-block;
 }

desktop/libs/indexer/src/indexer/static/indexer/css/indexes.css

@@ -14,4 +14,4 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
- */.indexer-main{padding:20px;padding-top:10px}.indexer-main h4{font-weight:bold;color:#A0A0A0;font-size:14px;text-transform:uppercase;padding-left:4px;border-bottom:1px solid #DCDCDC;padding-bottom:3px}.divider{padding-left:12px;color:#C8C8C8}
+ */.indexer-main{padding:20px;padding-top:10px}.indexer-main h4{font-weight:bold;color:#0B7FAD;font-size:14px;text-transform:uppercase;padding-left:4px;padding-bottom:3px;display:inline-block}.divider{padding-left:12px;color:#C8C8C8}

desktop/libs/indexer/src/indexer/templates/indexes.mako

@@ -289,18 +289,18 @@ ${ assist.assistPanel() }
 
 
 <script type="text/html" id="list-index">
-  <ul class="nav nav-pills margin-top-30">
+  <ul class="nav nav-tabs nav-tabs-border">
     <li class="active"><a href="#index-overview" data-toggle="tab" data-bind="click: function(){ $root.tab('index-overview'); }">${_('Overview')}</a></li>
     <li><a href="#index-columns" data-toggle="tab" data-bind="click: function(){ $root.tab('index-columns'); }">${_('Fields')} (<span data-bind="text: fields().length"></span>)</a></li>
     <li><a href="#index-sample" data-toggle="tab" data-bind="click: function(){ $root.tab('index-sample'); }">${_('Sample')}</a></li>
   </ul>
 
-  <div class="tab-content margin-top-10" style="border: none; overflow: hidden">
-    <div class="tab-pane active" id="index-overview">
+  <div class="tab-content" style="border: none; overflow: hidden">
+    <div class="tab-pane active margin-top-30" id="index-overview">
       <!-- ko template: { if: $root.tab() == 'index-overview', name: 'indexes-index-overview' }--><!-- /ko -->
     </div>
 
-    <div class="tab-pane" id="index-columns">
+    <div class="tab-pane margin-top-10" id="index-columns">
       <!-- ko if: $root.tab() == 'index-columns' -->
         <input class="input-xlarge search-query margin-left-10" type="text" placeholder="${ _('Search for a field...') }" data-bind="clearable: $root.fieldFilter, value: $root.fieldFilter, valueUpdate: 'afterkeydown'"/>
         <div class="margin-top-10">