fix nested button

Signed-off-by: Nik Nasr <[email protected]>
restatedev · Nov 5, 2024 · c2accf5 · c2accf5
1 parent c0f0497
commit c2accf5
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx b/libs/features/overview-route/src/lib/RegisterDeployment/Results.tsx
@@ -6,7 +6,10 @@ import {
   UNSTABLE_DisclosurePanel as DisclosurePanel,
 } from 'react-aria-components';
 import { Button } from '@restate/ui/button';
-import { ServiceTypeExplainer } from '@restate/features/explainers';
+import {
+  HandlerTypeExplainer,
+  ServiceTypeExplainer,
+} from '@restate/features/explainers';
 
 export function RegisterDeploymentResults() {
   const { services = [] } = useRegisterDeploymentContext();
@@ -48,11 +51,14 @@ function Service({
           isExpanded ? '[&_.disclosure-icon]:rotate-180' : ''
         }
       >
-        <Button
-          variant="secondary"
-          slot="trigger"
-          className="w-full rounded-[calc(0.75rem-0.125rem)] bg-white border shadow-sm flex items-center flex-row p-0 pr-2 text-sm"
-        >
+        <div className="relative w-full rounded-[calc(0.75rem-0.125rem)] bg-white border shadow-sm flex items-center flex-row p-0 pr-2 text-sm">
+          <Button
+            variant="icon"
+            slot="trigger"
+            className="p-2 text-zinc-400 text-sm inset-0 absolute justify-end rounded-[calc(0.75rem-0.175rem)] hover:bg-black/[0.03] pressed:bg-black/5"
+          >
+            <Icon name={IconName.ChevronDown} className="disclosure-icon" />
+          </Button>
           <div className="h-12 aspect-square p-1">
             <div className="rounded-lg text-blue-400 h-full w-full flex items-center justify-center">
               <div className="p-1 w-8 h-8">
@@ -70,21 +76,17 @@ function Service({
                 <ServiceTypeExplainer
                   type={service.ty}
                   variant="indicator-button"
+                  className="z-10"
                 >
                   {service.ty}
                 </ServiceTypeExplainer>
               </div>
             </div>
           </div>
-          <div className="ml-auto uppercase font-semibold text-2xs font-mono items-center rounded-xl px-2 leading-4 bg-gray-50 ring-1 ring-inset ring-zinc-500/20 text-zinc-500">
+          <div className="ml-auto mr-7 uppercase font-semibold text-2xs font-mono items-center rounded-xl px-2 leading-4 bg-gray-50 ring-1 ring-inset ring-zinc-500/20 text-zinc-500">
             rev. {service.revision}
           </div>
-
-          <Icon
-            name={IconName.ChevronDown}
-            className="disclosure-icon flex-shrink-0 text-zinc-400 ml-1.5 text-sm"
-          />
-        </Button>
+        </div>
         <DisclosurePanel>
           {service.handlers.length > 0 && (
             <div className="flex flex-col mt-2 mx-1.5 mb-1.5">
@@ -122,7 +124,9 @@ function ServiceHandler({
 
       <div className="text-code text-zinc-600">{handler.name}</div>
       <div className="ml-auto mr-1.5 text-2xs font-medium bg-white text-zinc-500 ring-zinc-500/20 inline-flex gap-1 items-center rounded-md px-2 py-0 ring-1 ring-inset">
-        {handler.ty}
+        <HandlerTypeExplainer type={handler.ty} variant="indicator-button">
+          {handler.ty}
+        </HandlerTypeExplainer>
       </div>
     </div>
   );