refactor: Clean up share buttons and UI tweaks on referral page (#130)

Co-authored-by: Ryan Hansz <ryan@Ryans-MacBook-Pro-2.local>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 3 people

frontend/src/app/[locale]/generate-referrals/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { ChevronLeft, Printer, Sparkles } from "lucide-react";
+import { ChevronLeft, Sparkles } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
@@ -16,7 +16,7 @@ import { ActionPlanSection } from "@/components/ActionPlanSection";
 import ResourcesList from "@/components/ResourcesList";
 import { useSearchParams } from "next/navigation";
 import { UploadIntakeTab } from "@/components/UploadIntakeTab";
-import { EmailReferralsButton } from "@/components/EmailReferralsButton";
+import { ShareButtons } from "@/components/ShareButtons";
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Upload } from "lucide-react";
@@ -345,10 +345,10 @@ export default function Page() {
           setUserEmail={setUserEmail}
         />
       ) : (
-        <div className="print:hidden">
+        <div className="print:hidden overflow-x-hidden">
           <PilotFeedbackBanner />
           <GoodwillReferralToolHeaderPilot />
-          <div className="flex flex-col gap-2 m-4">
+          <div className="max-w-5xl mx-auto px-4 flex flex-col gap-2">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
@@ -413,25 +413,11 @@ export default function Page() {
                     <ChevronLeft className="w-4 h-4" />
                     Return To Search
                   </Button>
-                  <div className="flex gap-2">
-                    <Button
-                      onClick={handlePrint}
-                      variant="outline"
-                      className="hover:bg-gray-100 hover:text-gray-900"
-                    >
-                      <Printer
-                        data-testid="printReferralsButton"
-                        className="w-4 h-4"
-                      />
-                      Print Referrals
-                    </Button>
-                    {resourcesResultId && (
-                      <EmailReferralsButton
-                        resultId={resourcesResultId}
-                        actionPlanResultId={actionPlanResultId || undefined}
-                      />
-                    )}
-                  </div>
+                  <ShareButtons
+                    onPrint={handlePrint}
+                    resourcesResultId={resourcesResultId}
+                    actionPlanResultId={actionPlanResultId}
+                  />
                 </div>
               </div>
             )}
@@ -463,6 +449,21 @@ export default function Page() {
                   onGenerateActionPlan={() => void generateActionPlan()}
                 />
               )}
+
+            {readyToPrint && (
+              <div className="pt-4 border-t mt-6 pb-8">
+                <h4 className="text-sm font-medium text-gray-700 mb-3 text-right">
+                  Share
+                </h4>
+                <ShareButtons
+                  onPrint={handlePrint}
+                  resourcesResultId={resourcesResultId}
+                  actionPlanResultId={actionPlanResultId}
+                  className="justify-end"
+                  testIdSuffix="bottom"
+                />
+              </div>
+            )}
           </div>
         </div>
       )}

frontend/src/app/[locale]/view.tsx

@@ -4,7 +4,7 @@ export function View() {
   const t = useTranslations("home");
 
   return (
-    <>
+    <div className="max-w-5xl mx-auto px-4">
       <h1>{t("title")}</h1>
 
       {/* Demonstration of more complex translated strings, with safe-listed links HTML elements */}
@@ -15,7 +15,7 @@ export function View() {
           ),
         })}
       </p>
-      <div className="measure-6">
+      <div>
         {t.rich("body", {
           ul: (content) => <ul>{content}</ul>,
           li: (content) => <li>{content}</li>,
@@ -29,6 +29,6 @@ export function View() {
           })}
         </p>
       </div>
-    </>
+    </div>
   );
 }

frontend/src/components/ActionPlanSection.tsx

@@ -64,16 +64,9 @@ export function ActionPlanSection({
                 />
                 <label
                   htmlFor={`resource-${index}`}
-                  className="flex-1 cursor-pointer"
+                  className="flex-1 cursor-pointer font-medium text-gray-900"
                 >
-                  <div className="font-medium text-gray-900">
-                    {resource.name}
-                  </div>
-                  {resource.description && (
-                    <div className="text-sm text-gray-600">
-                      {resource.description}
-                    </div>
-                  )}
+                  {resource.name}
                 </label>
               </div>
             ))}

frontend/src/components/EmailReferralsButton.tsx

@@ -74,7 +74,7 @@ export function EmailReferralsButton({
           data-testid="emailReferralsButton"
         >
           <Mail className="w-4 h-4" />
-          Email Referrals
+          Email
         </Button>
       </DialogTrigger>
       <DialogContent>

frontend/src/components/ResourcesList.tsx

@@ -141,7 +141,7 @@ const ResourcesList = ({
                   href={normalizeUrl(r.website)}
                   rel="noopener noreferrer"
                   target="_blank"
-                  className="text-base text-gray-800"
+                  className="text-blue-600 hover:underline"
                 >
                   {r.website}
                 </Link>

frontend/src/components/ShareButtons.tsx

@@ -0,0 +1,40 @@
+import { Printer } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { EmailReferralsButton } from "@/components/EmailReferralsButton";
+import { cn } from "@/lib/utils";
+
+interface ShareButtonsProps {
+  onPrint: () => void;
+  resourcesResultId: string;
+  actionPlanResultId: string;
+  className?: string;
+  testIdSuffix?: string;
+}
+
+export function ShareButtons({
+  onPrint,
+  resourcesResultId,
+  actionPlanResultId,
+  className,
+  testIdSuffix,
+}: ShareButtonsProps) {
+  return (
+    <div className={cn("flex gap-2", className)}>
+      <Button
+        onClick={onPrint}
+        variant="outline"
+        className="hover:bg-gray-100 hover:text-gray-900"
+        data-testid={`printReferralsButton${testIdSuffix ? `-${testIdSuffix}` : ""}`}
+      >
+        <Printer className="w-4 h-4" aria-hidden="true" />
+        Print
+      </Button>
+      {resourcesResultId && (
+        <EmailReferralsButton
+          resultId={resourcesResultId}
+          actionPlanResultId={actionPlanResultId || undefined}
+        />
+      )}
+    </div>
+  );
+}