Fixed Back-to-Top Arrow Icon #377

[KasakAnand07]

Description

This PR addresses the issue where the back-to-top arrow icon was not properly centered within the circular button. The icon was misaligned vertically and/or horizontally, affecting the user interface's overall appearance.

Steps to Reproduce

1. Create a back-to-top button with a circular design.
2. Add an arrow icon (e.g., a Font Awesome arrow) inside the button.
3. Observe that the arrow icon is not centered as expected.

Changes Made

• Adjusted the CSS styles for the circular button to ensure the icon is perfectly centered both vertically and horizontally.
• Used flexbox properties for alignment:
  • Set the button to display: flex.
  • Used align-items: center and justify-content: center to center the icon.

Expected Behavior

• The arrow icon should now be perfectly centered within the circular button.

Actual Behavior

• Previously, the arrow icon appeared slightly misaligned within the circular button.

Screenshots

Before Fix:

After Fix: