Improve logic for settings button show/hide.

Fix button shown in appbar

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}