Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI Enhancement: Update Navbar Styling for a Modern Look #423

Open
Mohitranag18 opened this issue Nov 10, 2024 · 1 comment
Open

UI Enhancement: Update Navbar Styling for a Modern Look #423

Mohitranag18 opened this issue Nov 10, 2024 · 1 comment
Labels
gssoc-ext hacktoberfest hacktoberfest-accepted

Comments

@Mohitranag18
Copy link
Contributor

Description:

The current navbar in the Waste Management project has an outdated style, including green buttons that don’t align with the modern design standards we aim for. This issue proposes a redesign of the navbar to improve aesthetics and enhance user experience.

Requirements:

  • Replace the green button styling with a background color that matches the website’s main color scheme.
  • On hover, the text within navbar links should change to green to retain the theme and provide visual feedback to the user.
  • Ensure that the new navbar styling is responsive and visually appealing on all screen sizes and devices.

Acceptance Criteria:

  • Navbar background color is updated to match the website’s primary color palette.
  • Text color of navbar items changes to green on hover.
  • Navbar styling is consistent and responsive across all devices.
  • New design aligns with the website’s overall modern look and feel.

Additional Context:

This update aims to bring a fresher and more cohesive look to the navbar, enhancing the visual appeal and user interaction on the site.
@github-actions GitHub Actions
Copy link

Thank you for creating this issue! 🎉 We'll look into it as soon as possible.

@coderabbitai coderabbitai bot mentioned this issue Nov 10, 2024
Merged
khushi-joshi-05 added a commit that referenced this issue Nov 10, 2024
@khushi-joshi-05
UI Enhancement: Update Navbar Styling for a Modern Look (#423) (#426)
1c8edc1 
### Description:
This PR updates the styling of the navbar in the Waste Management
project to align with modern design standards and improve user
experience. The current navbar includes green buttons that feel outdated
and inconsistent with the overall aesthetic. The new design introduces a
cohesive look that complements the website’s main color scheme.

### Requirements:

- Replaced the green button styling with a background color that matches
the website’s primary color palette.
- Added hover effects to navbar links, changing the text color to green
to maintain thematic consistency and provide visual feedback.
- Ensured the navbar styling is responsive and visually appealing across
all screen sizes and devices.

### Acceptance Criteria:

- Navbar background color aligns with the website’s primary color
palette.
- Navbar link text color changes to green on hover for visual feedback.
- Navbar styling remains consistent and responsive across all devices.
- The updated navbar design complements the website’s modern look and
feel.

### Additional Context: 
This UI enhancement refreshes the navbar’s appearance, creating a more
cohesive and visually appealing experience that matches the overall
design standards of the site. The improved styling aims to enhance
usability and user interaction.

### Screenshot:
![Screenshot
(238)](https://github.com/user-attachments/assets/35ddd10f-ab84-4a1c-9b6f-834c28e84c5f)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced dark mode styling for various header elements and
components.
- Enhanced form validation with clearer error messages for signup and
newsletter forms.
  - Added functionality for a scroll-to-top button.

- **Bug Fixes**
  - Standardized `required` attribute syntax in feedback forms.

- **Style**
  - Updated button and section styles, including new hover effects.
  - Implemented dark mode classes for improved visual coherence.

- **Chores**
  - Added event listeners for dark mode toggle functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
gssoc-ext hacktoberfest hacktoberfest-accepted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Mohitranag18