review: make appBar styling use IconButton (fix margins)

src/AppBar.tsx

@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Button, Heading, Tooltip } from "@vector-im/compound-web";
+import { Button, Heading, IconButton, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
@@ -68,12 +68,9 @@ export const AppBar: FC<Props> = ({ children }) => {
         >
           <LeftNav>
             <Tooltip label={t("common.back")}>
-              <Button
+              <IconButton onClick={onBackClick}>
-                kind={"tertiary"}
+                <CollapseIcon />
-                iconOnly
+              </IconButton>
-                Icon={CollapseIcon}
-                onClick={onBackClick}
-              />
             </Tooltip>
           </LeftNav>
           {title && (

src/button/Button.tsx

@@ -8,7 +8,11 @@ Please see LICENSE in the repository root for full details.
 import { type ComponentPropsWithoutRef, type FC } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
+import {
+  Button as CpdButton,
+  IconButton,
+  Tooltip,
+} from "@vector-im/compound-web";
 import {
   MicOnSolidIcon,
   MicOffSolidIcon,
@@ -128,20 +132,22 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
 
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
+  forAppBar?: boolean;
 }
 export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   const { t } = useTranslation();
-
+  const Icon =
+    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
-      <CpdButton
+      {!props.forAppBar && (
-        iconOnly
+        <CpdButton iconOnly Icon={Icon} kind="tertiary" {...props} />
-        Icon={
+      )}
-          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
+      {props.forAppBar && (
-        }
+        <IconButton {...props}>
-        kind="tertiary"
+          <Icon />
-        {...props}
+        </IconButton>
-      />
+      )}
     </Tooltip>
   );
 };

src/room/InCallView.tsx

@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (audioOutputButton) buttons.push(audioOutputButton);
 
   useAppBarSecondaryButton(
-    <SettingsButton key="settings" onClick={openSettings} />,
+    <SettingsButton forAppBar key="settings" onClick={openSettings} />,
   );
 
   buttons.push(