Refine What Others Are Reading section colors and alignment by Copilot · Pull Request #912 · rubyforgood/awbw

Copilot · 2026-02-10T13:39:48Z

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

Fix visual inconsistencies in the "What Others Are Reading" section where background overlay colors didn't match the design spec and sector name boxes misaligned when story titles had different lengths.

How did you approach the change?

Color System Refactor

Replaced Tailwind opacity classes with explicit RGBA values matching design spec
Structured color config as hash with bg and text keys per sector type
Applied inline styles for background colors to support custom RGBA values

Alignment Fix

Changed content container from justify-center to pt-16 (top-aligned with fixed offset)
Sector name boxes now maintain consistent vertical position regardless of title length

Color Mappings

"Self-Care & Personal Growth" => { bg: "rgba(77, 139, 172, 0.85)", text: "text-white" }
"Facilitator Spotlights" => { bg: "rgba(169, 62, 105, 0.85)", text: "text-white" }
"Schools & Universities" => { bg: "rgba(147, 124, 195, 0.85)", text: "text-white" }
# ... etc

Anything else to add?

None.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

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

* 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>

* 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>

Copilot AI assigned Copilot and maebeale Feb 10, 2026

Copilot AI mentioned this pull request Feb 10, 2026

WIP: story share portal #902

Merged

Copilot started work on behalf of maebeale February 10, 2026 13:40 View session

maebeale force-pushed the story-share-portal branch from 318da0d to 18939b5 Compare February 10, 2026 13:45

Copilot AI changed the title ~~[WIP] Work in progress for story share portal~~ Refine What Others Are Reading section colors and alignment Feb 10, 2026

Copilot AI requested a review from maebeale February 10, 2026 13:49

Copilot finished work on behalf of maebeale February 10, 2026 13:49

Copilot AI and others added 2 commits February 10, 2026 09:10

Initial plan

fe105f0

Update What Others Are Reading section colors and alignment

ce0d78e

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

maebeale force-pushed the copilot/sub-pr-902 branch from dc3e5b0 to ce0d78e Compare February 10, 2026 14:10

maebeale marked this pull request as ready for review February 10, 2026 14:11

maebeale merged commit 931da38 into story-share-portal Feb 10, 2026
3 checks passed

maebeale deleted the copilot/sub-pr-902 branch February 10, 2026 14:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refine What Others Are Reading section colors and alignment#912

Refine What Others Are Reading section colors and alignment#912
maebeale merged 2 commits intostory-share-portalfrom
copilot/sub-pr-902

Copilot AI commented Feb 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

How did you approach the change?

Anything else to add?

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Feb 10, 2026 •

edited

Loading