Move settings button out of the button bar.

User overflow button instead: at the top for mobile, bottom left for
web.

src/AppBar.tsx

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

src/button/Button.tsx

@@ -16,10 +16,12 @@ import {
   VideoCallOffSolidIcon,
   EndCallIcon,
   ShareScreenSolidIcon,
-  SettingsSolidIcon,
+  OverflowHorizontalIcon,
+  OverflowVerticalIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
+import { platform } from "../Platform";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
@@ -134,8 +136,10 @@ export const SettingsButton: FC<SettingsButtonProps> = (props) => {
     <Tooltip label={t("common.settings")}>
       <CpdButton
         iconOnly
-        Icon={SettingsSolidIcon}
+        Icon={
-        kind="secondary"
+          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
+        }
+        kind="tertiary"
         {...props}
       />
     </Tooltip>

src/room/InCallView.module.css

@@ -36,13 +36,11 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: var(--call-view-header-footer-layer);
   display: grid;
-  grid-template-columns:
+  grid-template-columns: 1fr auto 1fr;
-    minmax(0, var(--inline-content-inset))
+  grid-template-areas: ". buttons layout";
-    1fr auto 1fr minmax(0, var(--inline-content-inset));
-  grid-template-areas: ". logo buttons layout .";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-10x);
+  padding: var(--cpd-space-10x) var(--cpd-space-6x);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -73,8 +71,13 @@ Please see LICENSE in the repository root for full details.
   pointer-events: initial;
 }
 
+.settingsLogoContainer {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: row;
+}
+
 .logo {
-  grid-area: logo;
   justify-self: start;
   display: flex;
   align-items: center;
@@ -94,12 +97,23 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
+/*First hide the logo*/
 @media (max-width: 660px) {
+  .logo {
+    display: none;
+  }
+}
+
+/*
+With the logo hidden >500px is enough space to show overflow, buttons, layout.
+Once we exceed 500 we hide everything except the buttons.
+*/
+@media (max-width: 500px) {
   .footer {
-    grid-template-areas: ". buttons buttons buttons .";
+    grid-template-areas: "buttons buttons buttons";
   }
 
-  .logo {
+  .settingsLogoContainer {
     display: none;
   }
 

src/room/InCallView.tsx

@@ -42,7 +42,7 @@ import {
   ReactionToggleButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { type HeaderStyle, useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -373,30 +373,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  useAppBarSecondaryButton(
-    useMemo(() => {
-      if (audioOutputSwitcher === null) return null;
-      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      const label = isEarpieceTarget
-        ? t("settings.devices.handset")
-        : t("settings.devices.loudspeaker");
-
-      return (
-        <Tooltip label={label}>
-          <IconButton
-            onClick={(e) => {
-              e.preventDefault();
-              audioOutputSwitcher.switch();
-            }}
-          >
-            <Icon />
-          </IconButton>
-        </Tooltip>
-      );
-    }, [t, audioOutputSwitcher]),
-  );
-
   useAppBarHidden(!showHeader);
 
   let header: ReactNode = null;
@@ -643,14 +619,34 @@ export const InCallView: FC<InCallViewProps> = ({
       />,
     );
   }
-  if (layout.type !== "pip")
+
-    buttons.push(
+  // In this PR we just move the button ot the bottom bar. We do not yet update its apperance
-      <SettingsButton
+  const audioOutputButton = useMemo(() => {
-        size={buttonSize}
+    if (audioOutputSwitcher === null) return null;
-        key="settings"
+    const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-        onClick={openSettings}
+    const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      />,
+    const label = isEarpieceTarget
+      ? t("settings.devices.handset")
+      : t("settings.devices.loudspeaker");
+
+    return (
+      <Tooltip label={label}>
+        <IconButton
+          onClick={(e) => {
+            e.preventDefault();
+            audioOutputSwitcher.switch();
+          }}
+        >
+          <Icon />
+        </IconButton>
+      </Tooltip>
     );
+  }, [t, audioOutputSwitcher]);
+  if (audioOutputButton) buttons.push(audioOutputButton);
+
+  useAppBarSecondaryButton(
+    <SettingsButton key="settings" onClick={openSettings} />,
+  );
 
   buttons.push(
     <EndCallButton
@@ -662,6 +658,20 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_leave"
     />,
   );
+
+  const logo = (
+    <div className={styles.logo}>
+      <LogoMark width={24} height={24} aria-hidden />
+      <LogoType
+        width={80}
+        height={11}
+        aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+      />
+      {/* Don't mind this odd placement, it's just a little debug label */}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+    </div>
+  );
+
   const footer = (
     <div
       ref={footerRef}
@@ -671,20 +681,16 @@ export const InCallView: FC<InCallViewProps> = ({
           !showFooter || (!showControls && headerStyle === "none"),
       })}
     >
-      {headerStyle !== "none" && (
+      <div className={styles.settingsLogoContainer}>
-        <div className={styles.logo}>
+        {showControls &&
-          <LogoMark width={24} height={24} aria-hidden />
+          headerStyle !== HeaderStyle.AppBar &&
-          <LogoType
+          layout.type !== "pip" && (
-            width={80}
+            <SettingsButton key="settings" onClick={openSettings} />
-            height={11}
+          )}
-            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+
-          />
+        {headerStyle !== "none" && logo}
-          {/* Don't mind this odd placement, it's just a little debug label */}
+      </div>
-          {debugTileLayout
+
-            ? `Tiles generation: ${tileStoreGeneration}`
-            : undefined}
-        </div>
-      )}
       {showControls && <div className={styles.buttons}>{buttons}</div>}
       {showControls && (
         <LayoutToggle

src/room/LobbyView.tsx

@@ -228,6 +228,7 @@ export const LobbyView: FC<Props> = ({
         </div>
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
+          <SettingsButton onClick={openSettings} />
           <div className={inCallStyles.buttons}>
             <MicButton
               enabled={audioEnabled}
@@ -239,7 +240,6 @@ export const LobbyView: FC<Props> = ({
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />
-            <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
           </div>
         </div>