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"