diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index e83f0587fc..b63eb23936 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/app/views/admin/products_v3/_filters.html.haml
@@ -10,4 +10,4 @@
= select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'), "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
.submit
.search-button
- = button_tag t(".search"), class: "secondary icon-search"
+ = button_tag t(".search"), class: "secondary icon-search relaxed"
diff --git a/app/views/admin/products_v3/_no_products.html.haml b/app/views/admin/products_v3/_no_products.html.haml
index 7b0bbb328c..4cb82d2eb5 100644
--- a/app/views/admin/products_v3/_no_products.html.haml
+++ b/app/views/admin/products_v3/_no_products.html.haml
@@ -1,6 +1,6 @@
- if search_term.present? || producer_id.present? || category_id.present?
= t('.no_products_found_for_search')
- %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } }
+ %a{ href: "#", class: "button disruptive relaxed", data: { reflex: "click->products#clear_search" } }
= t("admin.products_v3.sort.pagination.clear_search")
- else
= t('.no_products_found')
diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml
index d3daa5eaa3..20c67e083b 100644
--- a/app/views/admin/products_v3/_sort.html.haml
+++ b/app/views/admin/products_v3/_sort.html.haml
@@ -2,7 +2,7 @@
%div
= t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
- if search_term.present? || producer_id.present? || category_id.present?
- %a{ href: "#", class: "button disruptive medium", data: { reflex: "click->products#clear_search" } }
+ %a{ href: "#", class: "button disruptive", data: { reflex: "click->products#clear_search" } }
= t(".pagination.clear_search")
%div.with-dropdown
= t(".pagination.per_page.show")
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index d138376ac1..ba34c089d4 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -83,8 +83,10 @@
justify-content: center;
align-items: center;
flex-direction: column;
- font-size: $h3-size;
+ font-size: $h6-size;
+ font-weight: 600;
gap: 20px;
+ margin-top: 116px;
#no-products-actions {
display: flex;
@@ -102,8 +104,8 @@
}
#sort {
- line-height: $btn-medium-height;
- height: $btn-medium-height;
+ line-height: $btn-relaxed-height;
+ height: $btn-relaxed-height;
.with-dropdown {
display: flex;
@@ -148,8 +150,8 @@
background-color: $lighter-grey;
border: 1px solid $lighter-grey;
border-radius: 4px;
- height: $btn-height;
- line-height: $btn-height;
+ height: $btn-relaxed-height;
+ line-height: $btn-relaxed-height;
&:has(input:focus),
&:has(input:active) {
@@ -157,7 +159,10 @@
}
> input {
- background-color: $lighter-grey;
+ // Totally hide the input from its container
+ background-color: transparent;
+ border: none;
+ width: calc(100% - 30px); // 30px is the width of the search icon + padding
}
&:before {
@@ -174,7 +179,7 @@
.categories {
select {
width: 150px;
- height: $btn-height;
+ height: $btn-relaxed-height;
}
}
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 71b38206b8..f233e23a48 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -12,8 +12,8 @@ button:not(.plain):not(.trix-button),
border: 1px solid $color-btn-bg;
color: $color-btn-text;
text-transform: uppercase;
- line-height: 40px;
- height: 40px;
+ line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
+ height: $btn-regular-height;
font-weight: bold;
&:before {
@@ -79,9 +79,14 @@ button:not(.plain):not(.trix-button),
}
}
- &.medium {
- line-height: $btn-medium-height;
- height: $btn-medium-height;
+ &.condensed {
+ line-height: $btn-condensed-height - 2px; // remove 2px to compensate for border
+ height: $btn-condensed-height;
+ }
+
+ &.relaxed {
+ line-height: $btn-relaxed-height - 2px; // remove 2px to compensate for border
+ height: $btn-relaxed-height;
}
.badge {
@@ -106,3 +111,14 @@ button:not(.plain):not(.trix-button),
}
}
}
+
+a.button {
+ text-decoration: none;
+}
+
+.button.disruptive::before {
+ margin-right: 3px;
+
+ @extend .icon-remove-sign;
+ font-family: FontAwesome;
+}
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index de8975e93d..cf8fa70498 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -155,5 +155,6 @@ $border-radius: 4px !default;
$font-weight-bold: 600 !default;
$font-weight-normal: 400 !default;
-$btn-height: 40px !default;
-$btn-medium-height: 32px !default;
+$btn-relaxed-height: 40px !default;
+$btn-regular-height: 32px !default;
+$btn-condensed-height: 26px !default;
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d3e147cf25..5462c301e5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -797,7 +797,7 @@ en:
loading: Loading your products
sort:
pagination:
- total_html: "%{total} products in your catalogue. Showing %{from} to %{to}."
+ total_html: "%{total} products found for your search criteria. Showing %{from} to %{to}."
per_page:
show: Show
per_page: "%{num} per page"