From e4de9c1be76c758f36e5068a8395bb3abd19069a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 18 Oct 2022 21:02:41 +0530
Subject: [PATCH] fix: hide dynamic panels & focused mode options on mobile

---
 .../QuickSettingsMenu/FocusModeSwitch.tsx     | 23 +++++++++++--------
 .../QuickSettingsMenu/ThemesMenuButton.tsx    |  6 ++++-
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index 02eedc513..154de6eaf 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -21,17 +21,20 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
     [onToggle, isEnabled, onClose],
   )
 
+  const isMobile = application.isNativeMobileWeb() || isMobileScreen()
+
+  if (isMobile) {
+    return null
+  }
+
   return (
-    <>
-      <button
-        className="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2"
-        onClick={toggle}
-        disabled={application.isNativeMobileWeb() || isMobileScreen()}
-      >
-        <div className="flex items-center">Focused Writing</div>
-        <Switch className="px-0" checked={isEnabled} />
-      </button>
-    </>
+    <button
+      className="group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2"
+      onClick={toggle}
+    >
+      <div className="flex items-center">Focused Writing</div>
+      <Switch className="px-0" checked={isEnabled} />
+    </button>
   )
 }
 
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index 16e3a5206..efe16a736 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -46,13 +46,17 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
   )
 
   const isMobile = application.isNativeMobileWeb() || isMobileScreen()
+  const shouldHideButton = item.identifier === FeatureIdentifier.DynamicTheme && isMobile
+
+  if (shouldHideButton) {
+    return null
+  }
 
   return (
     <button
       className={
         'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm'
       }
-      disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
       onClick={toggleTheme}
     >
       {item.component?.isLayerable() ? (