margin fix of the heding FILTER BY inside the filters menu

[anton202]

the top and bottom margins should be 32px

Fixes

Fixes #1581 by @panchovm

Description

cahnged the top and bottom margin of the heading: FILTER BY to match the margins in the design
screenshot

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[obulat]

Thank you for working on this, @anton202!

The VSearchGridFilter component is used in several places: in the sidebar and in the modal, both with the old_header designs (that you can see on the Audio Release Figma mockup) and on the new_header designs (that we are currently implementing under a feature flag, and you can see here).
In each place, the VSearchGridFilter component has different padding. So, it is best to add the padding in the parent components instead of the component itself.

Could you please remove the padding values from section here, and add the following values:

openverse-frontend/src/components/VHeaderOld/VHeaderFilter.vue

Line 19 in a8842fb

<VSearchGridFilter @close="onTriggerClick" />

This line should become:
<VSearchGridFilter class="px-10 py-8" @close="onTriggerClick" />

And this line:

openverse-frontend/src/components/VHeaderOld/VHeaderFilter.vue

Line 28 in a8842fb

<VSearchGridFilter @close="onTriggerClick" />

Should be class="px-6 pt-[7px] pb-10" to match the mockups.

class="px-10 pt-8"

[obulat]

Thank you for fixing it so quickly, @anton202! This works really well for the old_header design, which you can currently see on wordpress.org/openverse.
Could you also add changes for the new_header version?
To turn it on locally, you will need to go to http://localhost:8443/preferences and check the new header checkbox there. Then, you will see the site with a different header design. And the desktop sidebar filters there now have no padding :) Could you add the same padding to them:

openverse-frontend/src/components/VHeader/VHeaderDesktop.vue

Line 45 in a8842fb

<VSearchGridFilter @close="toggleSidebar" />

And also, remove the now-unnecessary !p-0 from the modal version here:

openverse-frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue

Line 44 in a8842fb

class="!p-0"

[dhruvkb]

The #filters-heading <h4> has a much taller line height (leading-8) compared to the mockups (130%). This is causing the padding to appear more than it actually is. I added the spaces of and they only add up to 24px, the rest being incalculable height added due to line height.

Reducing the line height to the expected value and increasing the padding will ensure the correct 32px padding.

[obulat]

Reducing the line height to the expected value and increasing the padding will ensure the correct 32px padding.

I believe that the line height was added to prevent the jumping of the filters when the filters are selected, @dhruvkb, and the 'Clear filters' button appears. The button must have enough paddings to be accessible and tappable. I think it would be easier to fix it in a separate PR by making the button absolutely positioned. This way, it wouldn't affect the positioning of other elements.