Improve logic for settings button show/hide.

Fix button shown in appbar

src/AppBar.tsx

@@ -88,7 +88,7 @@ export const AppBar: FC<Props> = ({ children }) => {
               {title}
             </Heading>
           )}
-          <RightNav>{secondaryButton ?? "x"}</RightNav>
+          <RightNav>{secondaryButton}</RightNav>
         </Header>
       </div>
       <AppBarContext value={context}>{children}</AppBarContext>

src/button/Button.tsx

@@ -160,26 +160,33 @@ 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.
-   */
+  /** If the button should be styled so it fits into the footer center buttons group */
   forButtonsBar?: boolean;
+  /** If this buttons should be setup to be used in the app bar */
+  showForScreenWidth?: "wide" | "narrow";
 }
-export const SettingsButton: FC<SettingsButtonProps> = (props) => {
+export const SettingsButton: FC<SettingsButtonProps> = ({
+  showForScreenWidth,
+  forButtonsBar,
+  className,
+  ...props
+}) => {
   const { t } = useTranslation();
 
   return (
     <Tooltip label={t("common.settings")}>
       <CpdButton
-        className={classNames(props.className, {
-          [inCallViewStyles.settingForButtonsBar]: props.forButtonsBar,
-          [inCallViewStyles.settingForBottomLeftCorner]: !props.forButtonsBar,
+        className={classNames(className, {
+          [inCallViewStyles.settingsOnlyShowWide]:
+            showForScreenWidth === "wide",
+          [inCallViewStyles.settingsOnlyShowNarrow]:
+            showForScreenWidth === "narrow",
         })}
         iconOnly
         Icon={
           platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
         }
-        kind={props.forButtonsBar ? "secondary" : "tertiary"}
+        kind={forButtonsBar ? "secondary" : "tertiary"}
         {...props}
       />
     </Tooltip>

src/components/InCallFooter.module.css

@@ -78,17 +78,10 @@ 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
-  */
+.settingsOnlyShowNarrow {
   display: none;
 }
-.settingForBottomLeftCorner {
-  /*
-  show the settings button in the bottom left corner by default (will be hidden on width < 500px)
-  */
+.settingsOnlyShowWide {
   display: inherit;
 }
 
@@ -101,12 +94,13 @@ Once we exceed 500 we hide everything except the buttons.
     grid-template-areas: "buttons buttons buttons";
   }
 
-  .settingForButtonsBar {
+  .settingsOnlyShowNarrow {
     display: inherit;
   }
-  .settingForBottomLeftCorner {
+  .settingsOnlyShowWide {
     display: none;
   }
+
   .settingsLogoContainer {
     display: none;
   }

src/components/InCallFooter.tsx

@@ -94,7 +94,12 @@ export const InCallFooter: FC<InCallFooterProps> = ({
     // 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} />,
+      <SettingsButton
+        forButtonsBar
+        key="settings"
+        showForScreenWidth="narrow"
+        onClick={openSettings}
+      />,
     );
   }
 
@@ -157,8 +162,7 @@ export const InCallFooter: FC<InCallFooterProps> = ({
   if (audioOutputButton) buttons.push(audioOutputButton);
 
   useAppBarSecondaryButton(
-    // <SettingsButton key="settings" onClick={openSettings} />,
-    <div style={{ backgroundColor: "red", width: "20px", height: "20px" }} />,
+    <SettingsButton key="settings" onClick={openSettings} />,
   );
 
   buttons.push(
@@ -196,7 +200,11 @@ export const InCallFooter: FC<InCallFooterProps> = ({
     >
       <div className={styles.settingsLogoContainer}>
         {showSettingsButton && (
-          <SettingsButton key="settings" onClick={openSettings} />
+          <SettingsButton
+            key="settings"
+            showForScreenWidth="wide"
+            onClick={openSettings}
+          />
         )}
 
         {showLogoDebugContainer && logoDebugContainer}