From 8097865d9ebbb870e00a3dec7debb4278f724174 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Sun, 10 Jan 2021 17:39:48 +0500
Subject: [PATCH] fix: focus mode on tablet pushes editor to one side

---
 apps/web/src/app.js                              |  2 +-
 apps/web/src/components/editor/index.js          |  6 +++---
 apps/web/src/components/editor/toolbar.js        |  5 ++++-
 apps/web/src/components/navigation-menu/index.js | 12 ++++++++++--
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index ad1e63560..1100eaf8b 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -92,7 +92,7 @@ function App() {
     if (isFocusMode) {
       setShow(false);
     } else {
-      setShow(true);
+      if (!isTablet) setShow(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocusMode]);
diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index d54747324..c76860e13 100644
--- a/apps/web/src/components/editor/index.js
+++ b/apps/web/src/components/editor/index.js
@@ -109,7 +109,7 @@ function Editor(props) {
       flexDirection="column"
       sx={{
         position: "relative",
-        alignSelf: isFocusMode ? "center" : "stretch",
+        alignSelf: "stretch",
         overflow: "hidden",
       }}
       flex="1 1 auto"
@@ -131,8 +131,8 @@ function Editor(props) {
             alignSelf: ["stretch", "stretch", "center"],
           }}
           animate={{
-            marginRight: isFocusMode ? "25%" : editorMargins,
-            marginLeft: isFocusMode ? "25%" : editorMargins,
+            marginRight: isFocusMode && !isTablet ? "25%" : editorMargins,
+            marginLeft: isFocusMode && !isTablet ? "25%" : editorMargins,
           }}
           transition={{ duration: 0.3, ease: "easeOut" }}
           maxWidth={isFocusMode ? "auto" : "900px"}
diff --git a/apps/web/src/components/editor/toolbar.js b/apps/web/src/components/editor/toolbar.js
index 3973450b1..4f86e7962 100644
--- a/apps/web/src/components/editor/toolbar.js
+++ b/apps/web/src/components/editor/toolbar.js
@@ -69,8 +69,9 @@ function Toolbar(props) {
       },
       {
         title: isFocusMode ? "Normal mode" : "Focus mode",
-        icon: Icon.FocusMode,
+        icon: isFocusMode ? Icon.NormalMode : Icon.FocusMode,
         enabled: true,
+        hideOnMobile: true,
         onClick: toggleFocusMode,
       },
       {
@@ -93,6 +94,7 @@ function Toolbar(props) {
           size={18}
           onClick={() => {
             if (store.get().session.id) showToast("success", "Note saved!");
+            if (isFocusMode) toggleFocusMode();
             clearSession();
           }}
         />
@@ -115,6 +117,7 @@ function Toolbar(props) {
             title={tool.title}
             key={tool.title}
             sx={{
+              display: [tool.hideOnMobile ? "none" : "block", "block", "block"],
               color: tool.enabled ? "text" : "disabled",
               cursor: tool.enabled ? "pointer" : "not-allowed",
             }}
diff --git a/apps/web/src/components/navigation-menu/index.js b/apps/web/src/components/navigation-menu/index.js
index 3b4b5a0f9..9cb8f7471 100644
--- a/apps/web/src/components/navigation-menu/index.js
+++ b/apps/web/src/components/navigation-menu/index.js
@@ -84,8 +84,16 @@ function NavigationMenu(props) {
       sx={{
         borderRight: "1px solid",
         borderRightColor: "border",
-        minWidth: ["85%", isSideMenuOpen ? 150 : 0, isFocusMode ? 0 : 150],
-        maxWidth: ["85%", isSideMenuOpen ? 150 : 0, isFocusMode ? 0 : 150],
+        minWidth: [
+          "85%",
+          isSideMenuOpen && !isFocusMode ? 150 : 0,
+          isFocusMode ? 0 : 150,
+        ],
+        maxWidth: [
+          "85%",
+          isSideMenuOpen && !isFocusMode ? 150 : 0,
+          isFocusMode ? 0 : 150,
+        ],
         zIndex: !isSideMenuOpen ? -1 : isMobile ? 999 : isTablet ? 1 : 1,
         height: ["100%", "auto", "auto"],
         position: ["absolute", "relative", "relative"],