Padding reduced and margin removed to avoid the clicking issue

[Maxslide]

Fixes #168

Description
Changed the Padding and margin. Margin -> 0 px and padding -> 6%.

Other information
Made the padding to be precisely 6%, which causes exactly no overlap

Checklist:

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the master branch of the repository.
• My commit messages follow best practices.
• I added 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
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.

[makkoncept]

@Maxslide Please post a screenshot of the icons.

[makkoncept]

The issue has not been resolved when I run this locally because you have made changes to the social media share icons which appear on the info popup.

[makkoncept]

@Maxslide Can you please fix this soon. This is to be shipped with the new update.

[Maxslide]

I'll work on this, the changes need to be made to the filer and search icon right? I believe I have done that..I'll recheck

[makkoncept]

Filter, search and cross icon.

[Maxslide]

I'll just check and try to update it as soon as possible

[Maxslide]

Hey, I did make change to the fa class but however on inspect element I don't see any change for the same, I have added the extension from the load unpacked option on Google chrome, is there any further steps I need to take to make sure the changes are reflected, that is for debugging do I need it do any other step?

[makkoncept]

You are looking in the wrong file. The correct one is _search.scss

[Maxslide]

I did look into this file, i did not find any margin tag for the filter-icon or any other class, i know this is a super simple issue, but idk why i cant find any margin option for any of the buttons, i dont see from where they get the margin they do
I am looking under the .section_search.i in the _search.scss file

[makkoncept]

@Maxslide Do the following change in _search.scss

Before

  i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: $color-secondary-light;

    &#filter-icon {
      right: 6%;
    }

    &.clear-search-button {
      color: #ff4e14;
      right: 12%;

      &:hover {
        color: #fb4102;
      }
    }
    &:hover {
      color: $color-secondary-dark;
      cursor: pointer;
    }
  }

After

  i {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    color: $color-secondary-light;

    &#search-icon {
      right: 4%;
    }

    &#filter-icon {
      right: 10%;
    }

    &.clear-search-button {
      color: #ff4e14;
      right: 16%;

      &:hover {
        color: #fb4102;
      }
    }
    &:hover {
      color: $color-secondary-dark;
      cursor: pointer;
    }
  }
}

[makkoncept]

It will work.

[Maxslide]

I did the exact same thing right now, but i see now changes in my extension, i even reloaded teh extension, all i need to do is save the code after my changes and reload teh extension adn view it right?

[makkoncept]

@Maxslide You have to build it again -> npm run dev

[Maxslide]

[Maxslide]

@Maxslide You have to build it again.

OHH! MY BAD!

[Maxslide]

I have made the changes, kindly review

[makkoncept]

@Maxslide This was not #search-margin but #search-icon. This was also mentioned in the comment above.
Nevermind, it has been fixed in 5ac81e6