Update styles for buttons

README.md

@@ -25,6 +25,8 @@ commands for quick API testing and integration.
 
 <img alt="screenshot" src="./screenshots/2.png" style="max-width: 100%" />
 
+<img alt="screenshot" src="./screenshots/3.png" style="max-width: 100%" />
+
 ## Additional configuration on Firefox
 
 Firefox by default doesn't grant `host_permission` for manifest V3 extensions

src/components/inspect-resource-button.tsx

@@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/react-query";
 import { TwilioResource } from "../twilio-resources";
 import { Tooltip } from "react-tooltip";
 import Modal from "./modal";
+import { GiMagicPortal } from "react-icons/gi";
 
 interface InspectResourceButtonProperties {
   resource: TwilioResource;
@@ -18,7 +19,7 @@ const InspectResourceButton: React.FC<InspectResourceButtonProperties> = ({
   return (
     <>
       <button className={`inspect-${resource.sid}`} onClick={openModal}>
-        Inspect
+        <GiMagicPortal />
       </button>
       <Tooltip anchorSelect={`.inspect-${resource.sid}`} place="top">
         Click to inspect {resource.getName()}

src/main.tsx

@@ -56,10 +56,10 @@ const setupResourceDetailInfoButtons = debounce(() => {
       const parent = link.parentElement;
       const ptContainer = parent.querySelector(".pt-root");
       if (!ptContainer) {
-        const div = document.createElement("div");
-        div.classList.add("pt-root");
-        parent.append(div);
-        createRoot(div).render(
+        const span = document.createElement("span");
+        span.classList.add("pt-root");
+        link.before(span);
+        createRoot(span).render(
           <QueryClientProvider client={QUERY_CLIENT}>
             <InspectResourceButton resource={twilioResource} />
           </QueryClientProvider>,