show reset icon with zoom percentage during zen mode (#1540)

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;
-}

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}>

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`}
     >

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;
-  }
-}

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;
+}