Improved UI & Optimized Padding for Connect-Socials Component

[Piyusss]

Purpose of this PR

Clearly described in Issue : #235

Description

This PR enhances the Connect-Socials component by improving its UI and optimizing padding.
The improvements include:

1. Increased the size of Icons and its text to make it eye-catching.
2. Made Background color match with its content.
3. Optimized Padding to great extent.
4. Added Hover-Effect over all Four-Icons. This helps to distinguish one social from another.
5. Changed the Font (so that it doesn't look sharp as before).

Related Issue

Closes #235

Motivation and Context

The previous design was too basic without optimized spacing. I have visited a lot of sites so have a descent understanding of modern UI/UX and what a user loves to see at first sight.
I implemented the same here.

How Has This Been Tested?

I verified that padding optimizations do not break the existing layout.
I tested this on my local machine on various web-browsers.

Screenshots or GIF (In case of UI changes):

Before:

After:

Hover-Effect(For Reference):

new-connect-social-look.mp4

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

Thank You.