Skip to content

Refine Story Share Portal layout and visual hierarchy#911

Merged
maebeale merged 2 commits intostory-share-portalfrom
copilot/sub-pr-902
Feb 10, 2026
Merged

Refine Story Share Portal layout and visual hierarchy#911
maebeale merged 2 commits intostory-share-portalfrom
copilot/sub-pr-902

Conversation

Copy link
Contributor

Copilot AI commented Feb 10, 2026

What is the goal of this PR and why is this important?

Improves visual hierarchy and image visibility in the Story Share Portal based on design feedback. Key changes align the layout with reference mockups, emphasizing story images through better transparency controls and centered navigation patterns.

How did you approach the change?

Navigation restructuring

  • Vertically stacked 3rd nav row (participant types + search) below 2nd row, centered
  • Replaced dual-logo hover with logo-with-tagline-436x80.jpg

Hero section transparency

  • Reduced bottom overlay from 70% to 50% opacity (bg-black/50) for better image visibility

What Others Are Reading section

  • Replaced gradient overlays with sector-specific colored translucent overlays at 70% opacity
  • Colors: bg-blue-600/70 (Self-Care), bg-purple-600/70 (Facilitator Spotlights), bg-pink-600/70 (Domestic Violence), etc.
  • Sector name boxes now use semi-transparent white (bg-white/20) with backdrop blur and consistent dimensions (w-32 h-12)
  • Story images render directly behind colored overlays instead of being obscured by gradients

Anything else to add?

The flex layout changes in the 3rd nav row use flex-col with space-y-3 to vertically stack navigation links above the search box, eliminating the previous ml-auto right-alignment.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
Copilot AI changed the title [WIP] Update work in progress for story share portal Refine Story Share Portal layout and visual hierarchy Feb 10, 2026
Copilot AI requested a review from maebeale February 10, 2026 12:50
@maebeale maebeale marked this pull request as ready for review February 10, 2026 13:23
@maebeale maebeale merged commit ab0fd42 into story-share-portal Feb 10, 2026
3 checks passed
@maebeale maebeale deleted the copilot/sub-pr-902 branch February 10, 2026 13:23
maebeale added a commit that referenced this pull request Feb 10, 2026
* Initial plan

* Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
maebeale added a commit that referenced this pull request Feb 11, 2026
* Initial plan

* Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
maebeale added a commit that referenced this pull request Feb 11, 2026
* Initial plan

* Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
maebeale added a commit that referenced this pull request Feb 12, 2026
* Initial plan

* Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
maebeale added a commit that referenced this pull request Feb 12, 2026
* WIP: story share portal

* WIP: show page for story

* Isolate Story Share Portal with dedicated purple-themed layout (#903)

* Initial plan

* Redesign share_portal page with Tailwind CSS to match design

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Add full-width layout support for share_portal page

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Address code review feedback: add accessibility labels and use dynamic story links

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Create separate layout for story share portal with purple navigation

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Address code review feedback: remove redundant nav wrapper and duplicate link

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Redesign Story Share Portal to match visual specifications (#904)

* Initial plan

* Add Telefon font, redesign navbar with 3 rows, update sector styling and overlays

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Refine font declarations and remove unused CSS variables

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Fix Tailwind class interpolation and improve scroll performance

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Use actual story sectors for category badges in What Others Are Reading

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Add new logo image and merge conflict

* Redesign Story Share Portal to match visual specifications (#905)

* Initial plan

* Update story share portal navigation and layout to match design

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Force first 5 stories for stories_by_focus for now

* Refine Story Share Portal layout and visual hierarchy (#911)

* Initial plan

* Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Visual tweaks

* WIP: messing w hero height

* Fixes

* Refine What Others Are Reading section colors and alignment (#912)

* Initial plan

* Update What Others Are Reading section colors and alignment

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Constrain hero carousel height and stretch to full width on story share portal (#913)

* Initial plan

* Limit hero image height to prevent vertical growth

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Allow extra classes to be sent in

* Don't hard-code the size

* Stretch hero image to full width horizontally

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Hard-code nav item colors

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
Co-authored-by: maebeale <maebeale@users.noreply.github.com>

* Add individual story view with share portal layout and navigation (#915)

* Initial plan

* Add show_share_portal page with matching layout and navigation

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Improve popular stories query and sector fallback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>

* Fix test

---------

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
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