Remove login icon from React player alternate image and make padding consistent

[vishnus17]

Current Behavior

1. There is a login button inside the image displayed for the React player which is misleading.

   

2. Padding is inconsistent between the React player and the text above and below it

   

Desired Behavior

1. Removing the login icon.
2. Adding 3rem as margin-top for caption element similar to the other elements to make it consistent.

Implementation

1. Fix for issue 1

   

2. Fix for issue 2

   

Acceptance Tests

Mockups

---

Contributor Guide

[vishnus17]

Hi. If you feel this needs a fix, I have it ready and I can submit the PR.

[leecalcote]

Thanks, @vishnus17. Please ensure that no image quality is lost as you edit the thumbnail.

[leecalcote]

here is the original Figma design - https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI?node-id=4199%3A21678&t=p40GR93P9GDgeX6o-4

[vishnus17]

@leecalcote . I've requested access. I used canva to add a rectangle on the thumbnail png which I got from the assets folder. The image quality seems to be intact. Shall I submit the PR so that you can review it from the preview?

[leecalcote]

Access granted. Yes, sounds good. I'm hailing @Avi-88 and @Yashsharma1911 as folks that will review.

[vishnus17]

Here's the preview link: https://deploy-preview-76--meshery-play.netlify.app