Add back the settings button to the bottom buttons group for SPA mobile.

This is an edgecase where we need the settings button but have hidden it
before.

src/button/Button.tsx

@@ -22,6 +22,7 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
+import inCallViewStyles from "../room/InCallView.module.css";
 import { platform } from "../Platform";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
@@ -159,6 +160,10 @@ export const LoudspeakerButton: FC<LoudspeakerButtonProps> = (props) => {
 
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
+  /** If the button should be styled so it fits into the footer center buttons group
+   * This implies the button will be hidden unless we are on very small screens.
+   */
+  forButtonsBar?: boolean;
 }
 export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   const { t } = useTranslation();
@@ -166,11 +171,15 @@ export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   return (
     <Tooltip label={t("common.settings")}>
       <CpdButton
+        className={classNames(props.className, {
+          [inCallViewStyles.settingForButtonsBar]: props.forButtonsBar,
+          [inCallViewStyles.settingForBottomLeftCorner]: !props.forButtonsBar,
+        })}
         iconOnly
         Icon={
           platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
         }
-        kind="tertiary"
+        kind={props.forButtonsBar ? "secondary" : "tertiary"}
         {...props}
       />
     </Tooltip>

src/components/InCallFooter.stories.tsx

@@ -33,8 +33,8 @@ export const Default: Story = {
     asOverlay: false,
     showFooter: true,
     showControls: true,
-    showSettingsButton: true,
-    showLogo: false,
+    hideSettingsButton: false,
+    hideLogo: false,
     asPip: false,
     gridMode: "grid",
     audioEnabled: true,
@@ -78,7 +78,7 @@ export const WithLogo: Story = {
   ...Default,
   args: {
     ...Default.args,
-    showLogo: true,
+    hideLogo: false,
   },
 };
 export const WithAudioOutput: Story = {
@@ -101,7 +101,7 @@ export const NoControlsWithLogo: Story = {
   args: {
     ...Default.args,
     showControls: false,
-    showLogo: true,
+    hideLogo: false,
   },
 };
 
@@ -118,7 +118,7 @@ export const MobileLayout: Story = {
   ...Default,
   args: {
     ...Default.args,
-    showLogo: true,
+    hideLogo: true,
     debugTileLayout: true,
     tileStoreGeneration: 74,
     audioOutputSwitcher: null,

src/components/InCallFooter.tsx

@@ -38,8 +38,8 @@ export interface InCallFooterProps {
   asOverlay: boolean;
   showFooter: boolean;
   showControls: boolean;
-  showSettingsButton: boolean;
-  showLogo: boolean;
+  hideSettingsButton: boolean;
+  hideLogo: boolean;
   asPip: boolean;
   gridMode: GridMode;
   setGridMode: (mode: GridMode) => void;
@@ -64,8 +64,8 @@ export const InCallFooter: FC<InCallFooterProps> = ({
   asOverlay,
   showFooter,
   showControls,
-  showSettingsButton,
-  showLogo,
+  hideSettingsButton,
+  hideLogo,
   asPip,
   gridMode,
   setGridMode,
@@ -86,6 +86,17 @@ export const InCallFooter: FC<InCallFooterProps> = ({
 }) => {
   const buttons: JSX.Element[] = [];
   const buttonSize = asPip ? "sm" : "lg";
+  const showSettingsButton = !hideSettingsButton && !asPip && showControls;
+  const showLayoutSwitcher = !asPip && showControls;
+  const showLogoDebugContainer = !asPip || (!hideLogo && !debugTileLayout);
+  const showLogo = !hideLogo && !asPip;
+  if (showSettingsButton) {
+    // add the settings button to the center group of buttons, so it will be visible on small screens.
+    // On larger screens, it will be hidden and the one without `forButtonsBar` in the `settingsLogoContainer` will be visible.
+    buttons.push(
+      <SettingsButton forButtonsBar key="settings" onClick={openSettings} />,
+    );
+  }
 
   buttons.push(
     <MicButton
@@ -158,7 +169,7 @@ export const InCallFooter: FC<InCallFooterProps> = ({
     />,
   );
 
-  const logo = (
+  const logoDebugContainer = (
     <div className={styles.logo}>
       {showLogo && (
         <>
@@ -183,15 +194,15 @@ export const InCallFooter: FC<InCallFooterProps> = ({
       })}
     >
       <div className={styles.settingsLogoContainer}>
-        {showControls && showSettingsButton && !asPip && (
+        {showSettingsButton && (
           <SettingsButton key="settings" onClick={openSettings} />
         )}
 
-        {(!asPip || (!showLogo && !debugTileLayout)) && logo}
+        {showLogoDebugContainer && logoDebugContainer}
       </div>
 
       {showControls && <div className={styles.buttons}>{buttons}</div>}
-      {showControls && !asPip && (
+      {showLayoutSwitcher && (
         <LayoutToggle
           className={styles.layout}
           layout={gridMode}

src/room/InCallView.module.css

@@ -104,6 +104,20 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
+.settingForButtonsBar {
+  /*
+  never show the settings button for the buttons bar
+  show the settings button in the Buttons bar on width < 500px
+  */
+  display: none;
+}
+.settingForBottomLeftCorner {
+  /*
+  show the left corener by default (will be hidden on width < 500px)
+  */
+  display: inherit;
+}
+
 /*
 With the logo hidden >500px is enough space to show overflow, buttons, layout.
 Once we exceed 500 we hide everything except the buttons.

src/room/InCallView.tsx

@@ -568,8 +568,8 @@ export const InCallView: FC<InCallViewProps> = ({
       asOverlay={windowMode === "flat"}
       showFooter={showFooter}
       showControls={showControls}
-      showLogo={headerStyle !== HeaderStyle.None}
-      showSettingsButton={headerStyle !== HeaderStyle.AppBar}
+      hideLogo={headerStyle === HeaderStyle.None}
+      hideSettingsButton={headerStyle === HeaderStyle.AppBar}
       asPip={layout.type === "pip"}
       gridMode={gridMode}
       setGridMode={setGridMode}