From 5b80ad045bafc86e419c863f84e550e09013f248 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Sat, 9 May 2020 18:17:22 +0530
Subject: [PATCH] show reset icon with zoom percentage during zen mode (#1540)

---
 src/components/LayerUI.scss  |  8 ++++----
 src/components/LayerUI.tsx   |  6 ++++--
 src/components/LockIcon.tsx  |  2 +-
 src/components/ToolIcon.scss | 12 ------------
 src/css/styles.scss          | 26 ++++++++++++++++++++++++++
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/components/LayerUI.scss b/src/components/LayerUI.scss
index 32c851a9..3fb1b923 100644
--- a/src/components/LayerUI.scss
+++ b/src/components/LayerUI.scss
@@ -105,6 +105,10 @@
     :root[dir="rtl"] &.transition-right {
       transform: translate(-999px, 0);
     }
+
+    &.App-menu_bottom--transition-left {
+      transform: translate(-92px, 0);
+    }
   }
 
   .disable-zen-mode {
@@ -127,7 +131,3 @@
     }
   }
 }
-
-.disable-pointerEvents {
-  pointer-events: none !important;
-}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index ac9e111d..f59c147a 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -62,7 +62,9 @@ const LayerUI = ({
 
   const renderEncryptedIcon = () => (
     <a
-      className="encrypted-icon tooltip"
+      className={`encrypted-icon tooltip zen-mode-visibility ${
+        zenModeEnabled ? "zen-mode-visibility--hidden" : ""
+      }`}
       href="https://blog.excalidraw.com/end-to-end-encryption/"
       target="_blank"
       rel="noopener noreferrer"
@@ -204,7 +206,7 @@ const LayerUI = ({
         {
           <div
             className={`App-menu App-menu_bottom zen-mode-transition ${
-              zenModeEnabled && "transition-left disable-pointerEvents"
+              zenModeEnabled && "App-menu_bottom--transition-left"
             }`}
           >
             <Stack.Col gap={2}>
diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx
index b73c15c6..dfd32980 100644
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@@ -46,7 +46,7 @@ export function LockIcon(props: LockIconProps) {
   return (
     <label
       className={`ToolIcon ToolIcon__lock ToolIcon_type_floating ${sizeCn} zen-mode-visibility ${
-        props.zenModeEnabled && "hidden disable-pointerEvents"
+        props.zenModeEnabled && "zen-mode-visibility--hidden"
       }`}
       title={`${props.title} — Q`}
     >
diff --git a/src/components/ToolIcon.scss b/src/components/ToolIcon.scss
index 845dfcca..17d7b3e0 100644
--- a/src/components/ToolIcon.scss
+++ b/src/components/ToolIcon.scss
@@ -167,15 +167,3 @@
     right: 2px;
   }
 }
-
-.zen-mode-visibility {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0s linear 0s, opacity 0.5s;
-
-  &.hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s linear 300ms, opacity 0.5s;
-  }
-}
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 949959cd..202dbc39 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -267,6 +267,12 @@ button,
   cursor: default;
   pointer-events: none !important;
 
+  &--transition-left {
+    section {
+      width: 185px;
+    }
+  }
+
   section {
     display: flex;
   }
@@ -458,3 +464,23 @@ button,
     left: 0;
   }
 }
+
+.zen-mode-visibility {
+  visibility: visible;
+  opacity: 1;
+  height: auto;
+  width: auto;
+  transition: opacity 0.5s;
+
+  &.zen-mode-visibility--hidden {
+    visibility: hidden;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    transition: opacity 0.5s;
+  }
+}
+
+.disable-pointerEvents {
+  pointer-events: none !important;
+}