The "Favourite", "Draw", "Download" and "Delete" strings are wrongly moving their position while the buttons are clicked

[SoftVision-CosminMuntean]

[Notes]:

• For the "Favourite" button, it seems that the strings and also the icon move their position when the button is clicked.
• For the rest of the buttons only the string is moving.
• The issue is not reproducible on Mac OS.

[Affected versions]:

• Nightly 64.0a1
• Screenshots 34.0.0 dev

[Affected Platforms]:

• All Windows
• All Linux

[Prerequisites]:

• The "xpinstall.signatures.required" boolean pref is set to "false".
• The "extensions.legacy.enabled" boolean pref is set to "true".
• Have the Screenshots 34.0.0 dev version installed from here, on a new clean profile.
• You are signed in on the Screenshots FxA.

[Steps to reproduce]:

1. Open the Firefox browser with the profile from prerequisites.
2. Navigate to any website and save a selection on the page.
3. Click an hold on the "Favourite" button and observe the behavior.

[Expected result]:

• The button is activated; the icon and string do not change its position.

[Actual results]:

• The button is activated; the icon and the string move its position.

[Additional Notes]:

• Here is a screen recording of the issue:
  

[testeaxeax]

The buttons' images and texts are supposed to move like the "Favourite" button (See #4845).

The problem is that the icon is set for the button element itself and not in a extra child.
So I think implementing the buttons in "static/css/partials/_header.scss" like the "Favourite" button should fix this.
@chenba What do you think? Should the buttons stay in "_buttons.scss" or be move to "_header.scss"?

[chenba]

@testeaxeax Ideally page specific buttons should have their style in the page specific scss. And _buttons.scss should contain the global and shared button styles. @punamdahiya What do you think?

[johngruen]

The button positions should not move at all

[punamdahiya]

@testeaxeax @chenba As John pointed, button images or text should not move on click and yes we should keep global shared button styles in _buttons.scss

[chenba]

@testeaxeax did you want to work on this?

[chenba]

Hey @testeaxeax, I'm adding you as a collaborator to the Screenshots repo. That way we can assign issues to you. You wouldn't be able to self-assign, but leave a comment on something you want to work on, and someone will assign it to you. It'd help with coordination when it's an issue in the current sprint.

[SoftVision-CosminMuntean]

I have verified this issue using latest Screenshots 34.0.0 dev version and is no longer reproducible for the "Favourite", "Draw", "Download" and "Delete".

Unfortunately, it seems that now the "All Shots" button and the "Settings" button from "My Shots" page move its position when it's clicked.
It is more visible for "All Shots" button since the title on the shot is also moved when the button is clicked.
The issue is also reproducible for the "All Shots" and "Settings" button from the Screenshots homepage if you are logged in (https://screenshots.dev.mozaws.net/).
The issue is reproducible on Windows, Mac and also Linux.

Here is a screen recording of the issue:

[johngruen]

yeah i noticed that too...should be an easy fix.

[punamdahiya]

nav-button style is used by both link and buttons, keeping active state padding 0 8px to button.nav-button should take away shift from links

[punamdahiya]

With #4848 fix, labels are going away and should fix this issue.

[punamdahiya]

With #4848 in master this issue can be closed

[SoftVision-CosminMuntean]

I have verified this issue using the latest Screenshots (34.0.0) dev version and is no longer reproducible. Tested on Windows 7 x64, Mac 10.13 and Arch Linux 4.12.