From 289c20ecb319c34c75d7f40e8ae1c8d7e7a3068f Mon Sep 17 00:00:00 2001
From: Temuulen Ankhbayar <a.temuuleenn@gmail.com>
Date: Mon, 9 Mar 2026 17:24:18 +0900
Subject: [PATCH] fix: replace remaining raw buttons in internet service
 components

Late-completing agent changes for InstallationOptions, InternetModalShell,
PublicOfferingCard, ServiceConfigurationStep, and PublicInternetPlans.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../internet/InstallationOptions.tsx          |  8 ++++---
 .../internet/InternetModalShell.tsx           |  7 ++++--
 .../internet/PublicOfferingCard.tsx           | 22 +++++++++++--------
 .../steps/ServiceConfigurationStep.tsx        |  9 ++++----
 .../services/views/PublicInternetPlans.tsx    |  7 +++---
 5 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/apps/portal/src/features/services/components/internet/InstallationOptions.tsx b/apps/portal/src/features/services/components/internet/InstallationOptions.tsx
index 1fb6944d..7688bb7d 100644
--- a/apps/portal/src/features/services/components/internet/InstallationOptions.tsx
+++ b/apps/portal/src/features/services/components/internet/InstallationOptions.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { InternetInstallationCatalogItem } from "@customer-portal/domain/services";
+import { Button } from "@/components/atoms/button";
 import { CardPricing } from "@/features/services/components/base/CardPricing";
 
 interface InstallationOptionsProps {
@@ -42,12 +43,13 @@ export function InstallationOptions({
               : "Pay the full installation fee in one payment.");
 
         return (
-          <button
+          <Button
             key={installation.sku}
+            variant="ghost"
             type="button"
             onClick={() => onInstallationSelect(installation)}
             aria-pressed={isSelected}
-            className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 flex flex-col gap-4 ${
+            className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 flex flex-col gap-4 h-auto whitespace-normal items-stretch ${
               isSelected
                 ? "border-blue-500 bg-blue-50 shadow-md"
                 : "border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 shadow-sm hover:shadow-md"
@@ -101,7 +103,7 @@ export function InstallationOptions({
                 SKU: {installation.sku}
               </div>
             )}
-          </button>
+          </Button>
         );
       })}
     </div>
diff --git a/apps/portal/src/features/services/components/internet/InternetModalShell.tsx b/apps/portal/src/features/services/components/internet/InternetModalShell.tsx
index 2ebb4d15..158f7838 100644
--- a/apps/portal/src/features/services/components/internet/InternetModalShell.tsx
+++ b/apps/portal/src/features/services/components/internet/InternetModalShell.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useId, useRef } from "react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { cn } from "@/shared/utils";
+import { Button } from "@/components/atoms/button";
 
 interface InternetModalShellProps {
   isOpen: boolean;
@@ -125,14 +126,16 @@ export function InternetModalShell({
             ) : null}
           </div>
 
-          <button
+          <Button
+            variant="ghost"
+            size="icon"
             onClick={onClose}
             className="text-muted-foreground transition-colors hover:text-foreground flex-shrink-0"
             aria-label="Close modal"
             type="button"
           >
             <XMarkIcon className="h-5 w-5" />
-          </button>
+          </Button>
         </div>
 
         <div className="p-6">{children}</div>
diff --git a/apps/portal/src/features/services/components/internet/PublicOfferingCard.tsx b/apps/portal/src/features/services/components/internet/PublicOfferingCard.tsx
index c58376c8..39618779 100644
--- a/apps/portal/src/features/services/components/internet/PublicOfferingCard.tsx
+++ b/apps/portal/src/features/services/components/internet/PublicOfferingCard.tsx
@@ -66,13 +66,15 @@ function ConnectionTypeInfo({ onClose }: { onClose: () => void }) {
             Why does speed vary by building?
           </h4>
         </div>
-        <button
+        <Button
+          variant="ghost"
+          size="icon"
           type="button"
           onClick={onClose}
-          className="text-muted-foreground hover:text-foreground transition-colors"
+          className="text-muted-foreground hover:text-foreground transition-colors h-auto w-auto p-0"
         >
           <X className="h-3.5 w-3.5" />
-        </button>
+        </Button>
       </div>
       <div className="space-y-2.5 text-[11px] text-muted-foreground">
         <p>
@@ -185,14 +187,15 @@ function PublicOfferingExpanded({
   return (
     <div className="border-t border-border/60 px-4 py-4 bg-muted/5">
       {showConnectionInfo && !showInfo && (
-        <button
+        <Button
+          variant="ghost"
           type="button"
           onClick={() => setShowInfo(true)}
-          className="flex items-center gap-1.5 text-[11px] text-info hover:text-info/80 transition-colors mb-3"
+          className="flex items-center gap-1.5 text-[11px] text-info hover:text-info/80 transition-colors mb-3 h-auto p-0"
         >
           <Info className="h-3.5 w-3.5" />
           <span>Why does speed vary by building?</span>
-        </button>
+        </Button>
       )}
 
       {showConnectionInfo && showInfo && <ConnectionTypeInfo onClose={() => setShowInfo(false)} />}
@@ -248,10 +251,11 @@ function PublicOfferingHeader({
   const Icon = iconType === "home" ? Home : Building2;
 
   return (
-    <button
+    <Button
+      variant="ghost"
       type="button"
       onClick={onToggle}
-      className="w-full p-4 flex items-start justify-between gap-3 text-left hover:bg-muted/10 transition-colors"
+      className="w-full p-4 flex items-start justify-between gap-3 text-left hover:bg-muted/10 transition-colors h-auto whitespace-normal rounded-none"
     >
       <div className="flex items-start gap-3">
         <div
@@ -293,7 +297,7 @@ function PublicOfferingHeader({
           <ChevronDown className="h-4 w-4 text-muted-foreground" />
         )}
       </div>
-    </button>
+    </Button>
   );
 }
 
diff --git a/apps/portal/src/features/services/components/internet/configure/steps/ServiceConfigurationStep.tsx b/apps/portal/src/features/services/components/internet/configure/steps/ServiceConfigurationStep.tsx
index a97390a1..4269ef37 100644
--- a/apps/portal/src/features/services/components/internet/configure/steps/ServiceConfigurationStep.tsx
+++ b/apps/portal/src/features/services/components/internet/configure/steps/ServiceConfigurationStep.tsx
@@ -154,17 +154,18 @@ function ModeSelectionCard({
       : "bg-green-100 text-green-800 border-green-200";
 
   return (
-    <button
+    <Button
+      variant="ghost"
       type="button"
       onClick={() => onSelect(mode)}
-      className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
+      className={`p-6 rounded-xl border-2 text-left transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 h-auto whitespace-normal items-stretch flex flex-col ${
         isSelected
           ? "border-blue-500 bg-blue-50 shadow-md"
           : "border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 shadow-sm hover:shadow-md"
       }`}
       aria-pressed={isSelected}
     >
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-4 w-full">
         <h5 className="text-lg font-bold text-gray-900">{title}</h5>
         <div
           className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
@@ -178,7 +179,7 @@ function ModeSelectionCard({
       <div className={`rounded-lg border-2 px-4 py-3 text-xs leading-relaxed ${toneClasses}`}>
         {note}
       </div>
-    </button>
+    </Button>
   );
 }
 
diff --git a/apps/portal/src/features/services/views/PublicInternetPlans.tsx b/apps/portal/src/features/services/views/PublicInternetPlans.tsx
index 3bc3f6b9..1bbcf9e9 100644
--- a/apps/portal/src/features/services/views/PublicInternetPlans.tsx
+++ b/apps/portal/src/features/services/views/PublicInternetPlans.tsx
@@ -281,12 +281,13 @@ function UnifiedInternetCard({
         <div className="flex overflow-x-auto scrollbar-hide -mx-1 px-1 pb-1">
           <div className="inline-flex rounded-lg bg-muted/60 p-0.5 border border-border/60">
             {availableOptions.map(option => (
-              <button
+              <Button
                 key={option.key}
+                variant="ghost"
                 type="button"
                 onClick={() => setSelectedOffering(option.key)}
                 className={cn(
-                  "flex items-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-all whitespace-nowrap",
+                  "flex items-center gap-1.5 px-3 py-2 rounded-md text-sm font-medium transition-all whitespace-nowrap h-auto",
                   selectedOffering === option.key
                     ? "bg-card text-foreground shadow-sm"
                     : "text-muted-foreground hover:text-foreground"
@@ -295,7 +296,7 @@ function UnifiedInternetCard({
                 {option.icon}
                 <span className="hidden sm:inline">{option.label}</span>
                 <span className="sm:hidden">{option.shortLabel}</span>
-              </button>
+              </Button>
             ))}
           </div>
         </div>