Merge branch 'master' of github.com:excalidraw/excalidraw into arnost/scroll-in-read-only-links

src/excalidraw-app/components/AppFooter.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Footer } from "../../packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
+import { isExcalidrawPlusSignedUser } from "../app_constants";
 
 export const AppFooter = React.memo(() => {
   return (
@@ -13,8 +14,11 @@ export const AppFooter = React.memo(() => {
           alignItems: "center",
         }}
       >
-        <ExcalidrawPlusAppLink />
-        <EncryptedIcon />
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
       </div>
     </Footer>
   );

src/excalidraw-app/components/AppMainMenu.tsx

@@ -26,7 +26,9 @@ export const AppMainMenu: React.FC<{
       <MainMenu.Separator />
       <MainMenu.ItemLink
         icon={PlusPromoIcon}
-        href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
+        href={`${
+          import.meta.env.VITE_APP_PLUS_LP
+        }/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger`}
         className="ExcalidrawPlus"
       >
         Excalidraw+

src/excalidraw-app/components/AppWelcomeScreen.tsx

@@ -3,6 +3,7 @@ import { PlusPromoIcon } from "../../components/icons";
 import { useI18n } from "../../i18n";
 import { WelcomeScreen } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { POINTER_EVENTS } from "../../constants";
 
 export const AppWelcomeScreen: React.FC<{
   setCollabDialogShown: (toggle: boolean) => any;
@@ -18,7 +19,7 @@ export const AppWelcomeScreen: React.FC<{
         if (bit === "Excalidraw+") {
           return (
             <a
-              style={{ pointerEvents: "all" }}
+              style={{ pointerEvents: POINTER_EVENTS.inheritFromUI }}
               href={`${
                 import.meta.env.VITE_APP_PLUS_APP
               }?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
@@ -56,7 +57,9 @@ export const AppWelcomeScreen: React.FC<{
           )}
           {!isExcalidrawPlusSignedUser && (
             <WelcomeScreen.Center.MenuItemLink
-              href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
+              href={`${
+                import.meta.env.VITE_APP_PLUS_LP
+              }/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest`}
               shortcut={null}
               icon={PlusPromoIcon}
             >

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -7,7 +7,6 @@ import { FileId, NonDeletedExcalidrawElement } from "../../element/types";
 import { AppState, BinaryFileData, BinaryFiles } from "../../types";
 import { nanoid } from "nanoid";
 import { useI18n } from "../../i18n";
-import { excalidrawPlusIcon } from "./icons";
 import { encryptData, generateEncryptionKey } from "../../data/encryption";
 import { isInitializedImageElement } from "../../element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
@@ -15,6 +14,7 @@ import { encodeFilesForUpload } from "../data/FileManager";
 import { MIME_TYPES } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
+import { ExcalidrawLogo } from "../../components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -69,7 +69,9 @@ export const exportToExcalidrawPlus = async (
   }
 
   window.open(
-    `https://plus.excalidraw.com/import?excalidraw=${id},${encryptionKey}`,
+    `${
+      import.meta.env.VITE_APP_PLUS_APP
+    }/import?excalidraw=${id},${encryptionKey}`,
   );
 };
 
@@ -82,7 +84,15 @@ export const ExportToExcalidrawPlus: React.FC<{
   const { t } = useI18n();
   return (
     <Card color="primary">
-      <div className="Card-icon">{excalidrawPlusIcon}</div>
+      <div className="Card-icon">
+        <ExcalidrawLogo
+          style={{
+            [`--color-logo-icon` as any]: "#fff",
+            width: "2.8rem",
+            height: "2.8rem",
+          }}
+        />
+      </div>
       <h2>Excalidraw+</h2>
       <div className="Card-details">
         {t("exportDialog.excalidrawplus_description")}

src/excalidraw-app/index.scss

@@ -77,13 +77,14 @@
   align-items: center;
   border: 1px solid var(--color-primary);
   padding: 0.5rem 0.75rem;
-  border-radius: var(--space-factor);
+  border-radius: var(--border-radius-lg);
+  background-color: var(--island-bg-color);
   color: var(--color-primary) !important;
   text-decoration: none !important;
 
   font-size: 0.75rem;
   box-sizing: border-box;
-  height: var(--default-button-size);
+  height: var(--lg-button-size);
 
   &:hover {
     background-color: var(--color-primary);