From 7488cae113e40042e9234f2b6b93869a8916349c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:42:38 +0000
Subject: [PATCH 1/2] Initial plan


From 3c0768ce79e486dbc97ecb622d514e9c14247539 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:46:55 +0000
Subject: [PATCH 2/2] Update Story Share Portal layout per feedback

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
---
 .../shared/_share_portal_navbar.html.erb      | 27 +++++++++---------
 app/views/stories/share_portal.html.erb       | 28 ++++++++++---------
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/views/shared/_share_portal_navbar.html.erb b/app/views/shared/_share_portal_navbar.html.erb
index 65b357a5b..01a8d8fa0 100644
--- a/app/views/shared/_share_portal_navbar.html.erb
+++ b/app/views/shared/_share_portal_navbar.html.erb
@@ -5,8 +5,7 @@
       <div class="flex items-center space-x-8 absolute left-2 sm:left-6 lg:left-8">
         <div class="flex shrink-0 items-center">
           <%= link_to share_portal_stories_path, class: "relative group" do %>
-            <%= image_tag("logo.png", class: "h-12 sm:h-14 w-auto block") %>
-            <%= image_tag("logo-color.png", class: "h-12 sm:h-14 absolute inset-0 w-auto opacity-0 transition-opacity duration-400 ease-out group-hover:opacity-100") %>
+            <%= image_tag("logo-with-tagline-436x80.jpg", class: "h-16 sm:h-20 w-auto block") %>
           <% end %>
         </div>
       </div>
@@ -111,19 +110,21 @@
       </div>
     </div>
 
-    <!-- Row 3: Participant Type Navigation -->
+    <!-- Row 3: Participant Type Navigation and Search - Centered Below Row 2 -->
     <div class="nav-row border-t border-gray-200">
-      <div class="hidden lg:flex items-center justify-center py-3 space-x-6">
-        <%= link_to "Children", share_portal_stories_path(focus: "children"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Families", share_portal_stories_path(focus: "families"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Community", share_portal_stories_path(focus: "community"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Self", share_portal_stories_path(focus: "self"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+      <div class="hidden lg:flex flex-col items-center justify-center py-3 space-y-3">
+        <div class="flex items-center space-x-6">
+          <%= link_to "Children", share_portal_stories_path(focus: "children"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Teens", share_portal_stories_path(focus: "teens"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Adults", share_portal_stories_path(focus: "adults"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Families", share_portal_stories_path(focus: "families"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Community", share_portal_stories_path(focus: "community"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Self", share_portal_stories_path(focus: "self"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+          <%= link_to "Colleagues", share_portal_stories_path(focus: "colleagues"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        </div>
         
-        <!-- Search Box -->
-        <div class="ml-auto">
+        <!-- Search Box - Centered Below -->
+        <div>
           <form action="<%= share_portal_stories_path %>" method="get" class="relative">
             <input
               type="search"
diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 03093c35f..e0399629a 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -40,7 +40,7 @@
             <%= @featured_story.sectors.first&.name || "SELF-CARE & PERSONAL GROWTH" %>
           </div>
           <!-- Black overlay bar at bottom with title -->
-          <div class="absolute bottom-0 left-0 right-0 bg-black/70 p-8 text-white">
+          <div class="absolute bottom-0 left-0 right-0 bg-black/50 p-8 text-white">
             <h2 class="font-telefon text-3xl mb-2">
               <%= @featured_story.title %>
             </h2>
@@ -310,19 +310,19 @@
     
     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-0">
       <% 
-        # Define color mapping for different categories
+        # Define color mapping for different categories with translucent overlays
         category_colors = {
-          "Self-Care & Personal Growth" => "bg-blue-600",
-          "Schools & Universities" => "bg-purple-600",
-          "Grief & Loss" => "bg-purple-600",
-          "Community Engagement" => "bg-teal-600",
-          "Domestic Violence" => "bg-pink-600",
-          "Social Justice" => "bg-green-600",
-          "Facilitator Spotlights" => "bg-purple-600"
+          "Self-Care & Personal Growth" => "bg-blue-600/70",
+          "Schools & Universities" => "bg-purple-600/70",
+          "Grief & Loss" => "bg-purple-600/70",
+          "Community Engagement" => "bg-teal-600/70",
+          "Domestic Violence" => "bg-pink-600/70",
+          "Social Justice" => "bg-green-600/70",
+          "Facilitator Spotlights" => "bg-purple-600/70"
         }
         
         # Default color for categories not in the mapping
-        default_color = "bg-gray-600"
+        default_color = "bg-gray-600/70"
       %>
       
       <% @popular_stories.first(4).each do |story| %>
@@ -333,18 +333,20 @@
         %>
         
         <%= link_to story_path(story), class: "group block relative aspect-[3/4] overflow-hidden hover:opacity-90 transition-opacity" do %>
+          <!-- Background image -->
           <div class="absolute inset-0 bg-gray-200">
             <%= render "assets/display_image",
                        resource: story,
                        variant: :hero %>
           </div>
-          <!-- Overlay gradient -->
-          <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/60"></div>
+          
+          <!-- Colored translucent overlay -->
+          <div class="absolute inset-0 <%= bg_color %>"></div>
           
           <!-- Centered content -->
           <div class="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
             <!-- Square sector box -->
-            <div class="<%= bg_color %> text-white text-xs font-bold uppercase px-4 py-3 mb-4 w-32 h-12 flex items-center justify-center">
+            <div class="bg-white/20 backdrop-blur-sm text-white text-xs font-bold uppercase px-4 py-3 mb-4 w-32 h-12 flex items-center justify-center border border-white/30">
               <%= sector_name %>
             </div>
             <!-- Title below -->