add always visible lock icon on top right to show info about e… (#1403)

* improvement(layerui.js): add lock icon on top right to show encrypted info about excalidraw

fixes https://github.com/excalidraw/excalidraw/issues/1313

* swap lock with shield

* fix dimensions

* make link open in new tab

* add newline between toolip text and link

* increase tooltip line-height

* remove unused GitHubCorner compo

* reposition; reintroduce GH icon

* make shield into link

* make tooltip not show when drawing

* Review fix

* remove link from tooltip

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/LayerUI.tsx

@@ -25,8 +25,11 @@ import { RoomDialog } from "./RoomDialog";
 import { ErrorDialog } from "./ErrorDialog";
 import { ShortcutsDialog } from "./ShortcutsDialog";
 import { LoadingMessage } from "./LoadingMessage";
-import { GitHubCorner } from "./GitHubCorner";
 import { CLASSES } from "../constants";
+import { shield } from "./icons";
+import { GitHubCorner } from "./GitHubCorner";
+
+import "./LayerUI.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -53,6 +56,18 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
+  const renderEncryptedIcon = () => (
+    <a
+      className="encrypted-icon tooltip"
+      href="https://blog.excalidraw.com/end-to-end-encryption/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span className="tooltip-text">{t("encrypted.tooltip")}</span>
+      {shield}
+    </a>
+  );
+
   const renderExportDialog = () => {
     const createExporter = (type: ExportType): ExportCB => (
       exportedElements,
@@ -178,6 +193,7 @@ const LayerUI = ({
                   zoom={appState.zoom}
                 />
               </Island>
+              {renderEncryptedIcon()}
             </Section>
           </Stack.Col>
         </div>
@@ -222,7 +238,7 @@ const LayerUI = ({
       onLockToggle={onLockToggle}
     />
   ) : (
-    <>
+    <div className="layer-ui__wrapper">
       {appState.isLoading && <LoadingMessage />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -240,7 +256,7 @@ const LayerUI = ({
         <GitHubCorner />
       </aside>
       {renderFooter()}
-    </>
+    </div>
   );
 };