From 9dfeac74897594628c0bf657226f3e5e586267dc Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 21 Sep 2022 22:09:02 +0530
Subject: [PATCH] fix: disable focus mode and dynamic panel switches on mobile
 (#1607)

---
 .../src/javascripts/Components/Icon/PremiumFeatureIcon.ts | 2 +-
 .../Components/QuickSettingsMenu/FocusModeSwitch.tsx      | 6 ++++--
 .../Components/QuickSettingsMenu/ThemesMenuButton.tsx     | 8 ++++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts b/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts
index b476b0e64..c42eb8503 100644
--- a/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts
+++ b/packages/web/src/javascripts/Components/Icon/PremiumFeatureIcon.ts
@@ -1,4 +1,4 @@
 import { IconType } from '@standardnotes/snjs'
 
 export const PremiumFeatureIconName: IconType = 'asterisk'
-export const PremiumFeatureIconClass = 'text-info'
+export const PremiumFeatureIconClass = 'text-info group-disabled:text-passive-2'
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index a32595802..c733f97d7 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -5,6 +5,7 @@ import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import Switch from '@/Components/Switch/Switch'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   application: WebApplication
@@ -34,11 +35,12 @@ const FocusModeSwitch: FunctionComponent<Props> = ({ application, onToggle, onCl
   return (
     <>
       <button
-        className="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"
+        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">
-          <Icon type="menu-close" className="mr-2 text-neutral" />
+          <Icon type="menu-close" className="mr-2 text-neutral group-disabled:text-passive-2" />
           Focused Writing
         </div>
         {isEntitled ? (
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index e7e4506f9..d52c5bf16 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { FeatureStatus } from '@standardnotes/snjs'
+import { FeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
@@ -7,6 +7,7 @@ import Switch from '@/Components/Switch/Switch'
 import { ThemeItem } from './ThemeItem'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
+import { isMobileScreen } from '@/Utils'
 
 type Props = {
   item: ThemeItem
@@ -43,11 +44,14 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
     [application, canActivateTheme, item, premiumModal],
   )
 
+  const isMobile = application.isNativeMobileWeb() || isMobileScreen()
+
   return (
     <button
       className={
-        '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:bg-info-backdrop focus:shadow-none focus:shadow-none'
+        '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'
       }
+      disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
       onClick={toggleTheme}
     >
       {item.component?.isLayerable() ? (