Updates screenshots and screencaps for new Firefox design

[dialectrical]

Includes updated screenshots and screencaps for the new Firefox design.

Addresses issue #268

[rugk]

Hi @dialectrical,
so thanks for your first contribution to this project! 🎉 👍 🏅
I hope you'll like this project and enjoy hacking on it… 😃

The GIFs and so on look really good, also the dark design of Firefox may not be a bad idea to use.

However, there is unfortunately some minor problems. The thing is, all images get image descriptions on AMO. These are defined here.
That means, the text needs to match what is shown:

• qrBig.png should show a big QR code.
• Also, for all images that show a popup that is opened, it unfortunately. E.g./especially for qrText.png the text says "after clicking the button" – if one does not see a button/know which one to click that does not really demonstrate what the text talks about. Also, that opening the add-on with a button in a popup is the main feature, so it should be present in all screenshots that show the popup.
  Maybe you need to use a new profile in Firefox for that job in case the issue was there are (too many) (unrelated) icons. Note that of course you may feel free to install the Awesome Emoji picker in that profile to just sneakily also present an related add-on 😉 (though I'd advise you to disable the colored icon for that, as that otherwise distracts too much)

[rugk]

FYI, BTW, you can (automatically) let issues close when a PR is merged by adding some "magic" text to your PR body. (Manually linked it now.)

[dialectrical]

Just to clarify, you're saying screenshots should look similar to the qrSmall.png screenshot I included, right? In that, they should show the Offline QR Code button on Firefox in the frame?

[rugk]

Yeah, that's what I mean. Just also add some padding around that thing (you don't need to crop it too exactly, it looks more "natural" if one also sees other buttons and the hamburger button/part of the address bar of Firefox e.g. - so one sees where that image is taken from) and you can vary (or just use the same as I did) with the colored icon option, to demonstrate that the icon can be black/white and also colored. (IMHO in that dark mode, the colored icon is actually less readable, so I'd tend to more screenshots with the non-colored icon.)

[rugk]

@dialectrical If you need any pointers/help or have questions, feel free to ask.

[rugk]

@dialectrical Are you still interested in completing this? If not, that's no problem, just add a notice, so I know what the current status of this PR is.