FIX: Updated disabled and hover states to be more accesible (#122)

All other engineers are on holiday leave. These are minor frontend changes that support a planned release

Author: michelle-hadfield-nava

frontend/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer disabled:cursor-not-allowed",
   {
     variants: {
       variant: {

frontend/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground cursor-pointer disabled:cursor-not-allowed">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

frontend/components/ui/sheet.tsx

@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 data-[state=open]:bg-secondary cursor-pointer disabled:cursor-not-allowed">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

frontend/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow cursor-pointer disabled:cursor-not-allowed",
       className,
     )}
     {...props}

frontend/components/ui/toggle.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer disabled:cursor-not-allowed",
   {
     variants: {
       variant: {

frontend/src/components/ActionPlanSection.tsx

@@ -54,7 +54,7 @@ export function ActionPlanSection({
                 <input
                   type="checkbox"
                   id={`resource-${index}`}
-                  className="mt-1 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                  className="mt-1 w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
                   onChange={(e) =>
                     onResourceSelection(resource, e.target.checked)
                   }

frontend/src/components/ClientDetailsInput.tsx

@@ -138,7 +138,7 @@ export function ClientDetailsInput({
                     key={category.id}
                     variant={isSelected ? "default" : "outline"}
                     size="sm"
-                    className={`text-sm flex-col justify-center px-1 min-h-20 w-auto whitespace-normal break-words h-auto ${
+                    className={`text-sm flex-col justify-center px-1 min-h-20 w-auto whitespace-normal break-words h-auto disabled:cursor-not-allowed ${
                       isSelected
                         ? "bg-blue-600 text-white hover:bg-blue-700"
                         : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
@@ -169,7 +169,7 @@ export function ClientDetailsInput({
                     : "outline"
                 }
                 size="sm"
-                className={`h-12 text-sm ${
+                className={`h-12 text-sm disabled:cursor-not-allowed ${
                   selectedResourceTypes.includes("goodwill")
                     ? "bg-blue-600 text-white hover:bg-blue-700"
                     : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
@@ -189,7 +189,7 @@ export function ClientDetailsInput({
                     : "outline"
                 }
                 size="sm"
-                className={`h-12 text-sm ${
+                className={`h-12 text-sm disabled:cursor-not-allowed ${
                   selectedResourceTypes.includes("government")
                     ? "bg-blue-600 text-white hover:bg-blue-700"
                     : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
@@ -209,7 +209,7 @@ export function ClientDetailsInput({
                     : "outline"
                 }
                 size="sm"
-                className={`h-12 text-sm ${
+                className={`h-12 text-sm disabled:cursor-not-allowed ${
                   selectedResourceTypes.includes("community")
                     ? "bg-blue-600 text-white hover:bg-blue-700"
                     : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"
@@ -252,7 +252,7 @@ export function ClientDetailsInput({
                 variant="ghost"
                 size="sm"
                 onClick={onClearAllFilters}
-                className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                className="text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:cursor-not-allowed"
                 data-testid="clearFiltersButton"
                 disabled={loading}
               >
@@ -287,7 +287,7 @@ export function ClientDetailsInput({
           loading ||
           (selectedCategories.length === 0 && !clientDescription.trim())
         }
-        className="min-w-[16rem] w-full row-auto generate-referrals-button text-lg pt-6 pb-6"
+        className="min-w-[16rem] w-full row-auto generate-referrals-button text-lg pt-6 pb-6 cursor-pointer disabled:!cursor-not-allowed"
         data-testid="findResourcesButton"
       >
         {!loading && (

frontend/src/components/EmailReferralsButton.tsx

@@ -104,6 +104,7 @@ export function EmailReferralsButton({ resultId }: EmailReferralsProps) {
             <div className="flex gap-2 justify-end">
               <DialogClose asChild>
                 <Button
+                  className="cursor-pointer disabled:!cursor-not-allowed"
                   type="button"
                   onClick={handleClose}
                   disabled={isLoading}
@@ -114,6 +115,7 @@ export function EmailReferralsButton({ resultId }: EmailReferralsProps) {
                 </Button>
               </DialogClose>
               <Button
+                className="cursor-pointer disabled:cursor-not-allowed"
                 type="submit"
                 onClick={() => void handleSendEmail()}
                 disabled={isLoading || !email.trim() || !isValidEmail(email)}

frontend/src/components/RemoveResourceNotification.tsx

@@ -18,7 +18,7 @@ export function RemoveResourceNotification({
         <button
           onClick={handleUndoRemove}
           aria-label="Undo resource removal"
-          className="flex items-center gap-1.5 px-3 py-1.5 bg-white text-gray-900 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium"
+          className="flex items-center gap-1.5 px-3 py-1.5 bg-white text-gray-900 rounded-md hover:bg-gray-100 transition-colors text-sm font-medium cursor-pointer"
         >
           <RotateCcw className="w-3.5 h-3.5" />
           Undo

frontend/src/components/ResourcesList.tsx

@@ -39,7 +39,7 @@ const referralTypeIndicator = (referralType: string | undefined) => {
           className="inline-flex items-center gap-1.5 bg-transparent text-green-800 ml-4 mt-3 px-2.5 py-1 max-w-[15rem] text-sm font-bold"
         >
           <Users className="h-4 w-4 shrink-0" />
-          <span className="truncate">External</span>
+          <span className="truncate">Community</span>
         </span>
       );
     }