Skip to content

UI/UX Enhancement – Improve Layout & Navigation#196

Open
Himaanshuuuu04 wants to merge 8 commits intonishantwrp:masterfrom
Himaanshuuuu04:master
Open

UI/UX Enhancement – Improve Layout & Navigation#196
Himaanshuuuu04 wants to merge 8 commits intonishantwrp:masterfrom
Himaanshuuuu04:master

Conversation

@Himaanshuuuu04
Copy link

Related Issue

Closes #195 – UI/UX Enhancement – Improve Layout & Navigation


Summary

This PR enhances the overall UI/UX by refining layout structure, spacing, typography, and navigation to create a more modern, intuitive, and responsive interface across all screen sizes.


Key Improvements

🎨 Layout & Styling

  • Refactored project card components with improved spacing, layout, and hover effects.
  • Replaced Semantic UI Card with custom-built components for better flexibility and consistent design.
  • Refined global CSS to maintain consistent padding, spacing, and visual hierarchy across the application.

📊 Data Visualization

  • Updated the projects graph to use a Line Chart for clearer trend representation and improved readability.

🧭 Navigation & Usability

  • Enhanced sidebar layout with redesigned header and footer sections.
  • Added a Back button on the organization page to improve navigation flow.
  • Improved the search component to dynamically display the total results count.
  • Better section separation and filter hierarchy for easier scanning and selection.

📱 Responsiveness

  • Improved responsiveness of the navbar and layout to ensure a smooth experience on mobile and tablet devices.

Screenshots

Updated Project Cards & Layout

Project Cards UI

Improved Sidebar & Navigation

Sidebar Navigation

Enhanced Graph & Overall UI

Graph UI


Commits Included

  • c993c51 – Refactor dependencies
  • 6700273 – Refactor project card and sidebar components for improved styling and functionality

Notes

  • No breaking changes introduced.
  • Focused on UI consistency, accessibility, and improved user flow.
  • Ready for review and feedback.

… functionality

- Updated project card styles to enhance hover effects and layout.
- Replaced Semantic UI Card with custom components for project display.
- Improved projects graph to use Line chart for better data visualization.
- Enhanced sidebar layout with new header and footer styles.
- Added back button to organization page for better navigation.
- Updated search component to display results count dynamically.
- Refined overall CSS for consistency in design across components.
@netlify
Copy link

netlify bot commented Dec 19, 2025

Deploy Preview for gsoc-organizations ready!

Name Link
🔨 Latest commit c993c51
🔍 Latest deploy log https://app.netlify.com/projects/gsoc-organizations/deploys/6945622a2ca6d900086c1925
😎 Deploy Preview https://deploy-preview-196--gsoc-organizations.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@nishantwrp
Copy link
Owner

nishantwrp commented Jan 26, 2026

Hi @Himaanshuuuu04, thanks for the pr. will start reviewing it. Can you please resolve the merge conflicts? (Apologies for the delay)

@Himaanshuuuu04
Copy link
Author

Hi @Himaanshuuuu04, thanks for the pr. will start reviewing it. Can you please resolve the merge conflicts? (Apologies for the delay)

Okay @nishantwrp , I will solve this deps conflicts

@nishantwrp
Copy link
Owner

@Himaanshuuuu04 you can patch my commits in #203 to solve the dependency issues.

@netlify
Copy link

netlify bot commented Jan 26, 2026

Deploy Preview for gsoc-organizations ready!

Name Link
🔨 Latest commit db22018
🔍 Latest deploy log https://app.netlify.com/projects/gsoc-organizations/deploys/6977b01a3bd1bb0007851156
😎 Deploy Preview https://deploy-preview-196--gsoc-organizations.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments