Sharing buttons on both Country and Measurement pages

[kronaemmanuel]

Things to be discussed:

• Design changes?
• We can include a default text with the link on twitter. Should we include something like: "Check out this measurement on OONI Explorer: {link goes here}" ?

[kronaemmanuel]

Country Page sharing buttons:

Measurement Page sharing buttons:

[hellais]

Great job on this!

I have some suggestions about the design.

The issues I see with the current approach are:

1. The icons are a bit hidden and they don't stand out much
2. It's not clear what is going to happen when you click on them, because of 1., but also because the context might also reference social media itself (ex. we are talking about the blocking of the website twitter.com or the blocking of the facebook app)
3. I am not a fan of us promoting the logos of facebook and twitter
4. We should be absolutely sure users understand we will not track them and this is not the facebook/twitter evil tracking button, but our own tracker free option!

To this end I propose the following designs which I think address all the points above:

The share icon should be inside of the material design icon set and it's called share-variant.

Let me know if you have any questions about the implementation.

[hellais]

TODO, following call with @sarathms:

• Ensure that no external assets are loaded from facebook on first load.
• Write copy for the boilerplate text in the share on facebook or twitter action (cc @agrabeli )
• How does this behave on mobile? Is the design responsive?
• What happens on mobile when you click on the links, does it trigger the app or what type of workflow occurs?

[hellais]

Wrong issue. See: #480 (comment)

[kronaemmanuel]

Completed the changes. Here are the new screenshots:
Country Desktop:

Country Mobile:

Measurement Desktop:

Measurement Mobile (this whole page could use some redesign on mobile btw):

[hellais]

This is great work @kronaemmanuel ! Thanks for putting it together.

I checked the screenshots and it looks good to me!

@sarathms can you deploy this to our testing instance of OONI Explorer so I can do some functional testing as well, before we deploy it in production?

[sarathms]

Deployed. Note that it had to be merged with the branch using test API server.

[sarathms]

Also the social media previews may not look as good without the other metatag changes. Especially on Facebook.

[sarathms]

@hellais Did you see the preview on explorer-test? Shall we merge this and consider tweaks for another PR?

[sarathms]

Ready to merge 🐳