Jaishree2310/GlassyUI-Components

Improve Navbar Visibility and Contrast on Stories Page

Open

#571 opened on May 23, 2026

View on GitHub
 (6 comments) (0 reactions) (1 assignee)TypeScript (217 forks)auto 404
good first issuegssoc'26gssoc:approvedlevel:beginnertype:fix

Repository metrics

Stars
 (114 stars)
PR merge metrics
 (PR metrics pending)

Description

Description

On the Stories page, the navbar text/logo becomes difficult to notice because of low contrast against the light background. This reduces visibility and affects navigation clarity for users.

Current Issue

  • Navbar content blends with the page background
  • Reduced readability and visual hierarchy
  • Navigation does not stand out clearly
  • Creates an inconsistent user experience

Steps to Reproduce

  1. Open the Stories page
  2. Observe the navbar on a light background
  3. Notice that the navbar text/logo lacks sufficient contrast and appears visually faded

Suggested Improvements

  • Increase text/logo contrast
  • Add a glassmorphism navbar background layer
  • Introduce blur, shadow, or border effects
  • Improve visibility in both light and dark themes
  • Maintain design consistency with the overall UI style

Expected Outcome

The navbar should remain clearly visible and distinguishable regardless of the page background.

I would like to work on this issue if assigned.

###Screenshot:

Contributor guide

Research direction
Add a glassmorphism background to the navbar with backdrop blur, semi transparent white background, and subtle shadow to improve contrast against light backgrounds.
Tech stack
typescriptreactcss
Domain
frontend
Issue type
Accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80