review: smaller changes

- use correct button styles
 - move overrides to options
 - add flex-wrap: nowrap

src/AppBar.tsx

@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Button, Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 

src/button/Button.tsx

@@ -130,9 +130,24 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
+interface SettingsIconButtonProps extends ComponentPropsWithoutRef<"button"> {
+  kind?: "secondary" | "primary";
+}
+export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
+  const { t } = useTranslation();
+  const Icon =
+    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
+  return (
+    <Tooltip label={t("common.settings")}>
+      <IconButton {...props}>
+        <Icon />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
-  forAppBar?: boolean;
 }
 export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   const { t } = useTranslation();
@@ -140,14 +155,7 @@ export const SettingsButton: FC<SettingsButtonProps> = (props) => {
     platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
-      {!props.forAppBar && (
+      <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
-        <CpdButton iconOnly Icon={Icon} kind="tertiary" {...props} />
-      )}
-      {props.forAppBar && (
-        <IconButton {...props}>
-          <Icon />
-        </IconButton>
-      )}
     </Tooltip>
   );
 };

src/room/InCallView.module.css

@@ -79,6 +79,7 @@ Please see LICENSE in the repository root for full details.
   display: flex;
   gap: var(--cpd-space-4x);
   flex-direction: row;
+  flex-wrap: nowrap;
 }
 
 .logo {

src/room/InCallView.test.tsx

@@ -113,8 +113,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const { vm, rtcSession } = getBasicCallViewModelEnvironment(
     [local, alice],
     undefined,
-    {},
+    { mediaDeviceOverride: args.mediaDevices },
-    args.mediaDevices,
   );
 
   rtcSession.joined = true;

src/room/InCallView.tsx

@@ -38,8 +38,8 @@ import {
   MicButton,
   VideoButton,
   ShareScreenButton,
-  SettingsButton,
   ReactionToggleButton,
+  SettingsIconButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (audioOutputButton) buttons.push(audioOutputButton);
 
   useAppBarSecondaryButton(
-    <SettingsButton forAppBar key="settings" onClick={openSettings} />,
+    <SettingsIconButton key="settings" onClick={openSettings} />,
   );
 
   buttons.push(
@@ -686,7 +686,11 @@ export const InCallView: FC<InCallViewProps> = ({
           // Settings button is also shown in the app bar if present
           headerStyle !== HeaderStyle.AppBar &&
           layout.type !== "pip" && (
-            <SettingsButton key="settings" onClick={openSettings} />
+            <SettingsIconButton
+              kind="secondary"
+              key="settings"
+              onClick={openSettings}
+            />
           )}
 
         {headerStyle !== "none" && logo}

src/room/LobbyView.tsx

@@ -36,7 +36,7 @@ import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,
   MicButton,
-  SettingsButton,
+  SettingsIconButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -228,7 +228,7 @@ export const LobbyView: FC<Props> = ({
         </div>
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
-          <SettingsButton onClick={openSettings} />
+          <SettingsIconButton kind="secondary" onClick={openSettings} />
           <div className={inCallStyles.buttons}>
             <MicButton
               enabled={audioEnabled}

src/state/CallViewModel/CallViewModel.ts

@@ -172,6 +172,7 @@ export interface CallViewModelOptions {
   windowSize$?: Behavior<{ width: number; height: number }>;
   /** The version & compatibility mode of MatrixRTC that we should use. */
   matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  mediaDeviceOverride?: MediaDevices;
 }
 
 // Do not play any sounds if the participant count has exceeded this

src/utils/test-viewmodel.ts

@@ -34,7 +34,6 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
-import { type MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
@@ -133,7 +132,6 @@ export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
   callViewModelOptions: Partial<CallViewModelOptions> = {},
-  mediaDevicesOverride?: MediaDevices,
 ): {
   vm: CallViewModel;
   rtcMemberships$: BehaviorSubject<CallMembership[]>;
@@ -154,7 +152,7 @@ export function getBasicCallViewModelEnvironment(
     testScope(),
     rtcSession.asMockedSession(),
     matrixRoom,
-    mediaDevicesOverride ?? mockMediaDevices({}),
+    callViewModelOptions.mediaDeviceOverride ?? mockMediaDevices({}),
     mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },