refactor(web): move two more IconButtons to Opal Button

The send button only needed `iconClassName` for its loading spinner, and
wrapping the icon component says the same thing — the pattern the file
picker already uses. Nothing else about it was custom.

The rename button sized itself with `h-6 w-6`, which is exactly what
size="sm" gives (--height-line-label is 1.5rem). Its resting opacity moves
to a wrapper, since that dims the button rather than restyling it.

BaseInputBar keeps IconButton for its stop button, whose 1.5px border has no
Opal equivalent.

Author: raunakab

web/src/refresh-components/tiles/FileTile.tsx

@@ -1,11 +1,10 @@
 import type { FunctionComponent } from "react";
 import { Button } from "@opal/components";
-
-import { noProp } from "@/lib/utils";
 import { cn, clickOnKeyDown } from "@opal/utils";
 import { SvgMaximize2, SvgTextLines, SvgX } from "@opal/icons";
 import type { IconProps } from "@opal/types";
 import { Hoverable } from "@opal/core";
+import { noProp } from "@/lib/utils";
 import Text from "../texts/Text";
 import Truncated from "../texts/Truncated";
 

web/src/sections/actions/ActionCardHeader.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import React, { useState } from "react";
+import { Button } from "@opal/components";
 import { cn } from "@opal/utils";
 import { ActionStatus } from "@/lib/tools/types";
 import Text from "@/refresh-components/texts/Text";
-import IconButton from "@/refresh-components/buttons/IconButton";
 import ButtonRenaming from "@/refresh-components/buttons/ButtonRenaming";
 import type { IconProps } from "@opal/types";
 import Truncated from "@/refresh-components/texts/Truncated";
@@ -116,16 +116,16 @@ function ActionCardHeader({
           )}
           {showRenameIcon && (
             <Hoverable.Item group="action-card" variant="appear-on-hover">
-              {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
-              <IconButton
-                icon={SvgEdit}
-                tooltip="Rename"
-                internal
-                tertiary
-                onClick={handleRenameClick}
-                className="h-6 w-6 opacity-70 hover:opacity-100"
-                aria-label={`Rename ${title}`}
-              />
+              <div className="opacity-70 hover:opacity-100">
+                <Button
+                  icon={SvgEdit}
+                  tooltip="Rename"
+                  prominence="tertiary"
+                  size="sm"
+                  onClick={handleRenameClick}
+                  aria-label={`Rename ${title}`}
+                />
+              </div>
             </Hoverable.Item>
           )}
         </div>

web/src/sections/actions/OpenApiActionCard.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "@opal/layouts";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import ActionCard from "@/sections/actions/ActionCard";
 import Actions from "@/sections/actions/Actions";
 import ToolsList from "@/sections/actions/ToolsList";

web/src/sections/input/BaseInputBar.tsx

@@ -17,7 +17,7 @@ import PasteTilePopover from "@/sections/input/PasteTilePopover";
 import { cn } from "@opal/utils";
 import { Disabled } from "@opal/core";
 import IconButton from "@/refresh-components/buttons/IconButton";
-import { Text } from "@opal/components";
+import { Button, Text } from "@opal/components";
 import { SvgArrowUp, SvgLoader, SvgStop } from "@opal/icons";
 import Keycap from "@/refresh-components/Keycap";
 import { useContentEditable } from "@/hooks/useContentEditable";
@@ -368,8 +368,16 @@ const BaseInputBar = memo(
                     aria-label="Stop generating"
                   />
                 </div>
-                <IconButton
-                  icon={sandboxInitializing ? SvgLoader : SvgArrowUp}
+                <Button
+                  icon={
+                    sandboxInitializing
+                      ? ({ className }) => (
+                          <SvgLoader
+                            className={cn(className, "animate-spin")}
+                          />
+                        )
+                      : SvgArrowUp
+                  }
                   onClick={handleSubmit}
                   disabled={!canSubmit}
                   tooltip={
@@ -380,9 +388,6 @@ const BaseInputBar = memo(
                         : "Send"
                   }
                   aria-label={isRunning ? "Queue message" : "Send"}
-                  iconClassName={
-                    sandboxInitializing ? "animate-spin" : undefined
-                  }
                 />
               </div>
             </div>