From 8e597f9d348d28ccc21809b4f0e27d474a4c9f04 Mon Sep 17 00:00:00 2001
From: colemanw <coleman@civicrm.org>
Date: Mon, 18 Dec 2023 13:52:58 -0500
Subject: [PATCH] SearchKit - Update tab styling

---
 .../ang/crmSearchAdmin/crmSearch-fields.html  |  4 +--
 .../ang/crmSearchAdmin/crmSearch-for.html     | 10 +++---
 .../ang/crmSearchAdmin/crmSearch-query.html   | 22 ++++++-------
 .../crmSearchAdmin/crmSearch-settings.html    |  4 +--
 .../ang/crmSearchAdmin/crmSearchAdmin.html    | 10 +++---
 ext/search_kit/ang/crmSearchAdmin/tabs.html   |  2 +-
 ext/search_kit/css/crmSearchAdmin.css         | 32 +++++++++++++++++--
 7 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html
index e699ea56e2..1aff32f010 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-fields.html
@@ -1,3 +1,3 @@
-<fieldset class="crm-search-select-fields">
+<div class="crm-search-select-fields">
   <crm-search-admin-fields></crm-search-admin-fields>
-</fieldset>
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html
index e09ee67efd..deaa53466d 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-for.html
@@ -1,9 +1,7 @@
-<fieldset>
-  <div class="form-inline">
-    <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
-    <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id">
-  </div>
-</fieldset>
+<div class="form-inline">
+  <label for="crm-search-main-entity">{{:: ts('Search for') }}</label>
+  <input id="crm-search-main-entity" class="form-control huge collapsible-optgroups" ng-model="$ctrl.savedSearch.api_entity" crm-ui-select="::{allowClear: false, data: mainEntitySelect}" ng-disabled="$ctrl.savedSearch.id">
+</div>
 <div ng-if=":: $ctrl.paramExists('join')" class="crm-search-joins">
   <fieldset ng-repeat="join in $ctrl.savedSearch.api_params.join" class="crm-search-join">
     <div class="form-inline">
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
index d22e34909a..9968ff7f88 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-query.html
@@ -1,12 +1,10 @@
-  <fieldset>
-    <div>
-      <strong>API:</strong>
-    </div>
-    <pre>{{ $ctrl.debug.apiParams }}</pre>
-    <pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
-    <div ng-if="$ctrl.perm.viewDebugOutput">
-      <strong>SQL:</strong>
-      <pre ng-if="!$ctrl.debug.sql">{{:: ts('Run search to view SQL') }}</pre>
-      <pre ng-repeat="query in $ctrl.debug.sql">{{ query }}</pre>
-    </div>
-  </fieldset>
+<div>
+  <strong>API:</strong>
+</div>
+<pre>{{ $ctrl.debug.apiParams }}</pre>
+<pre ng-if="$ctrl.debug.timeIndex">{{ ts('Request took %1 seconds.', {1: $ctrl.debug.timeIndex}) }}</pre>
+<div ng-if="$ctrl.perm.viewDebugOutput">
+  <strong>SQL:</strong>
+  <pre ng-if="!$ctrl.debug.sql">{{:: ts('Run search to view SQL') }}</pre>
+  <pre ng-repeat="query in $ctrl.debug.sql">{{ query }}</pre>
+</div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html
index 46a0bceaf2..ee4bb9bd14 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearch-settings.html
@@ -1,6 +1,4 @@
-<fieldset>
-  <textarea class="form-control" placeholder="{{:: ts('Description (shown above default display)') }}" ng-model="$ctrl.savedSearch.description"></textarea>
-</fieldset>
+<textarea class="form-control" placeholder="{{:: ts('Description (shown above default display)') }}" ng-model="$ctrl.savedSearch.description"></textarea>
 <div class="form-group">
   <label class="sr-only" for="expires_date">{{:: ts('Search Expiry Date') }}</label>
   <div class="input-group">
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
index 1e16b9e1d1..2bb1a7b941 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.html
@@ -12,7 +12,7 @@
   </div>
 
   <form>
-    <div class="crm-flex-box">
+    <div class="crm-flex-box crm-search-admin-outer">
       <div class="crm-flex-1">
         <input id="crm-saved-search-label" class="form-control" ng-model="$ctrl.savedSearch.label" type="text" required placeholder="{{:: ts('Untitled Search') }}" ng-model-options="$ctrl.debounceMode">
       </div>
@@ -90,15 +90,15 @@
       </div>
     </div>
 
-    <div class="crm-flex-box">
+    <div class="crm-flex-box crm-search-admin-outer">
       <nav class="crm-search-admin-main-tabs">
         <ul class="nav nav-pills nav-stacked" role="tablist" aria-orientation="vertical" ng-include="'~/crmSearchAdmin/tabs.html'"></ul>
       </nav>
-      <div class="crm-flex-4">
-        <div ng-if="!$ctrl.selectedDisplay()" role="tabpanel">
+      <div class="crm-flex-4 panel panel-default">
+        <div ng-if="!$ctrl.selectedDisplay()" class="panel-body" role="tabpanel">
           <div ng-include="'~/crmSearchAdmin/crmSearch-' + controls.tab + '.html'" class="crm-search-admin-relative"></div>
         </div>
-        <div ng-if="$ctrl.selectedDisplay()" role="tabpanel">
+        <div ng-if="$ctrl.selectedDisplay()" class="panel-body" role="tabpanel">
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
             <crm-search-admin-display class="crm-search-admin-relative" display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html
index 93505c3828..4ba77099db 100644
--- a/ext/search_kit/ang/crmSearchAdmin/tabs.html
+++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html
@@ -10,7 +10,7 @@
     <i class="crm-i fa-users"></i>
     {{:: ts('Smart Group') }} {{ $ctrl.savedSearch.groups[0].title }}
   </a>
-  <button type="button" class="btn-xs btn-danger-outline crm-search-display-control" ng-click="$ctrl.removeGroup()" title="{{ $ctrl.groupExists ? ts('Delete') : ts('Undelete') }}">
+  <button type="button" class="btn btn-xs btn-danger-outline crm-search-display-control" ng-click="$ctrl.removeGroup()" title="{{ $ctrl.groupExists ? ts('Delete') : ts('Undelete') }}">
     <i class="crm-i fa-{{ $ctrl.groupExists ? 'trash' : 'undo' }}"></i>
   </button>
 </li>
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index 9e2f10ada7..71093879f4 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -7,12 +7,16 @@
   top: 0;
 }
 
+#bootstrap-theme #crm-saved-search-label {
+  width: calc(100% - 1rem);
+}
+
 #bootstrap-theme .crm-search-admin-search-listing-buttons {
   min-width: 66px;
 }
 
-#bootstrap-theme.crm-search .crm-search-admin-main-tabs {
-  margin: 10px 20px 20px 0;
+#bootstrap-theme.crm-search .crm-search-admin-outer {
+  margin-bottom: 20px;
 }
 
 #bootstrap-theme.crm-search .help-block.bg-warning {
@@ -42,14 +46,36 @@
   color: #8a1f11;
 }
 
+#bootstrap-theme.crm-search .crm-search-admin-main-tabs {
+  margin-top: 10px;
+}
+
 #bootstrap-theme.crm-search ul.nav-stacked li {
   cursor: default;
+  margin: 0;
+  padding: 0;
+}
+
+#bootstrap-theme.crm-search ul.nav-stacked li.active {
+  border-right: 0 none;
+  width: calc(100% + 1px);
+}
+#bootstrap-theme.crm-search ul.nav-stacked li.active a {
+  background-color: white;
+  color: inherit;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border: 1px solid lightgrey;
+  border-right: 0 none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 }
 
 #bootstrap-theme.crm-search ul.nav-stacked li[role=separator] {
-  height: 8px;
+  height: 12px;
   border-top: 1px solid lightgrey;
   margin-top: 8px;
+  margin-left: 15px;
+  margin-right: 30px;
 }
 
 #bootstrap-theme.crm-search ul.nav-stacked li a[disabled] {
-- 
2.25.1