chingu-voyages / v49-tier2-team-18

Add-project-description-here | Voyage-49 | https://chingu.io/ | Twitter: https://twitter.com/ChinguCollabs

1 stars 1 forks source link

Refactor SectionHeader component and add react-scroll package for smooth scrolling functionality #78

Open TanutsaponJ opened 4 months ago

TanutsaponJ commented 4 months ago

Title: [Refactor] SectionHeader Component and Add Smooth Scrolling

Description

Summary

This pull request includes the following changes:

Refactor the SectionHeader Component: Added a prop for the text direction and updated the corresponding CSS styles in index.css.
Add Smooth Scrolling: Integrated the react-scroll package to implement smooth scrolling functionality for an enhanced user experience.

Motivation

The SectionHeader component needed more flexibility to handle different text directions, improving the overall design consistency.
Smooth scrolling improves user experience by providing a more fluid navigation through sections of the app.

Changes

SectionHeader Component:
- Added a new prop to manage text direction.
- Updated the CSS styles in index.css to accommodate the new prop and ensure proper styling based on the text direction.
Smooth Scrolling:
- Installed the react-scroll package.
- Implemented smooth scrolling using react-scroll to enhance the navigation experience.

Testing

Ensured that the SectionHeader component correctly applies text direction based on the new prop.
Verified smooth scrolling functionality across different sections of the app.

Related Issues

Fixes #77

Additional Information

Screenshots

SectionHeader Component (Text Direction):

about

Colorpicker

Smooth Scrolling:

https://github.com/chingu-voyages/v49-tier2-team-18/assets/114305352/661ebefc-b551-4bea-9b18-839ea9dbe449

Checklist

[x] Code is well-documented.
[x] Unit tests pass.
[x] Integration tests pass.
[x] Manual testing performed.
[x] Screenshots included.
[x] Issues referenced and linked.

Request for Review

Please review the changes and provide any feedback. If everything looks good, we can proceed with merging this PR into the development branch.

BrianSlaby commented 4 months ago

Resolved merge conflicts before reviewing.

For future work from your forked version of the project, please make sure to pull the current version of main from this repo before starting any work. There were a lot of merge conflicts that were mostly just due to your branch being out of date.