From 50b954eb33e2a681c2629cee1e1e278341c12733 Mon Sep 17 00:00:00 2001
From: Ahed <ahed@compucorp.co.uk>
Date: Wed, 26 Jul 2023 10:28:34 +0300
Subject: [PATCH 1/2] CIWEMB-376: Update search-kit tables styles to match
 Shoreditch theme

---
 scss/bootstrap/overrides/_variables.scss      |  4 +++-
 .../overrides/style/_pagination.scss          |  7 +++---
 scss/civicrm/_variables.scss                  |  4 ++++
 scss/civicrm/common/_common.scss              |  1 +
 .../civicrm/common/_search-display-pager.scss | 23 +++++++++++++++++++
 5 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 scss/civicrm/common/_search-display-pager.scss

diff --git a/scss/bootstrap/overrides/_variables.scss b/scss/bootstrap/overrides/_variables.scss
index 88297938..032bc93c 100644
--- a/scss/bootstrap/overrides/_variables.scss
+++ b/scss/bootstrap/overrides/_variables.scss
@@ -148,7 +148,7 @@ $border-radius-child:         4px !default;
 //
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:          10px 20px !default;
+$table-cell-padding:          16px 10px !default;
 $table-bg:                    $crm-white !default;
 $table-border-color:          $gray-light !default;
 
@@ -323,6 +323,8 @@ $pagination-active-bg:           $pagination-bg !default;
 $pagination-disabled-color:      $gray-light !default;
 $pagination-disabled-bg:         $pagination-bg !default;
 
+$pagination-a-padding:           5px 15px !default;
+
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
diff --git a/scss/bootstrap/overrides/style/_pagination.scss b/scss/bootstrap/overrides/style/_pagination.scss
index dece0874..0fcfca2e 100644
--- a/scss/bootstrap/overrides/style/_pagination.scss
+++ b/scss/bootstrap/overrides/style/_pagination.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable selector-no-qualifying-type */
+
 .pagination {
   margin: 0;
   vertical-align: top;
@@ -10,7 +12,6 @@
     &.last:not(.disabled),
     &.next:not(.disabled),
     &.prev:not(.disabled) {
-
       > a {
         color: $gray-darker;
         font-weight: bold;
@@ -19,8 +20,8 @@
 
     > a,
     > span {
-      border: none;
-      padding: 0 5px;
+      border: 0;
+      padding: $pagination-a-padding;
 
       &:hover {
         text-decoration: underline;
diff --git a/scss/civicrm/_variables.scss b/scss/civicrm/_variables.scss
index a98830b7..6f8a3508 100644
--- a/scss/civicrm/_variables.scss
+++ b/scss/civicrm/_variables.scss
@@ -48,6 +48,10 @@ $crm-section-title-spacing-y: 11px;
 
 $crm-line-height: 135%;
 
+$crm-search-display-pager-padding-y: 20px;
+$crm-search-display-pager-padding-x: 70px;
+$crm-search-display-pager-label-margin-top: 3px;
+
 $fa-var-alert: '\f06a';
 $fa-var-info-msg: '\f05a';
 $fa-var-success: '\f00c';
diff --git a/scss/civicrm/common/_common.scss b/scss/civicrm/common/_common.scss
index f1c3f2b3..4cbe6bdd 100644
--- a/scss/civicrm/common/_common.scss
+++ b/scss/civicrm/common/_common.scss
@@ -13,6 +13,7 @@
 @import 'scrollbar';
 @import 'input_file';
 @import 'pager';
+@import 'search-display-pager';
 @import 'base';
 @import 'help';
 @import 'pagination';
diff --git a/scss/civicrm/common/_search-display-pager.scss b/scss/civicrm/common/_search-display-pager.scss
new file mode 100644
index 00000000..5defaf52
--- /dev/null
+++ b/scss/civicrm/common/_search-display-pager.scss
@@ -0,0 +1,23 @@
+.crm-search-display {
+  padding-top: $crm-search-display-pager-padding-y/2;
+}
+
+.crm-search-display-pager {
+  background: $crm-white;
+  border-radius: 0;
+  border-top: 1px solid $table-border-color;
+  font-size: $font-size-base;
+  padding-bottom: $crm-search-display-pager-padding-y/2;
+  padding-left: $crm-search-display-pager-padding-x/2;
+  padding-right: $crm-search-display-pager-padding-x/2;
+  padding-top: $crm-search-display-pager-padding-y/2;
+
+  &,
+  a {
+    color: $gray-darker !important;
+  }
+
+  label {
+    margin-top: $crm-search-display-pager-label-margin-top;
+  }
+}

From d4fabdb7aca19174b8a274009f23eb0601809dce Mon Sep 17 00:00:00 2001
From: Ahed <ahed@compucorp.co.uk>
Date: Wed, 26 Jul 2023 11:33:39 +0300
Subject: [PATCH 2/2] CIWEMB-376: Update default table styles

---
 scss/civicrm/_variables.scss     |  3 +++
 scss/civicrm/common/_tables.scss | 12 +++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/scss/civicrm/_variables.scss b/scss/civicrm/_variables.scss
index 6f8a3508..46f5104c 100644
--- a/scss/civicrm/_variables.scss
+++ b/scss/civicrm/_variables.scss
@@ -1,5 +1,8 @@
 $crm-standard-gap: 20px;
 $crm-table-form-cell-padding: 4px;
+$crm-table-cell-line-height: 18px;
+$crm-table-cell-padding: 16px 10px;
+$crm-table-first-cell-padding-left: 20px;
 
 $crm-contact-info-block-min-height: 60px;
 $crm-contact-info-block-padding-top: 20px;
diff --git a/scss/civicrm/common/_tables.scss b/scss/civicrm/common/_tables.scss
index 98de058b..592aedb8 100644
--- a/scss/civicrm/common/_tables.scss
+++ b/scss/civicrm/common/_tables.scss
@@ -34,7 +34,17 @@ table {
   tr td {
     border: initial;
     border-bottom: solid 1px $table-border-color;
-    line-height: 35px;
+    line-height: $crm-table-cell-line-height;
+  }
+
+  tr > th:first-child,
+  tr > td:first-child {
+    padding-left: $crm-table-first-cell-padding-left;
+  }
+
+  tr > td,
+  tr > th {
+    padding: $crm-table-cell-padding;
   }
 
   tr:last-child {