diff --git a/.env.production b/.env.production index ee2bfe7b2..183db7ea2 100644 --- a/.env.production +++ b/.env.production @@ -13,3 +13,5 @@ REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU"," # production-only vars REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13 + +REACT_APP_PLUS_APP=https://app.excalidraw.com diff --git a/src/constants.ts b/src/constants.ts index 47bbc8aed..afb7ecf3e 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -193,3 +193,7 @@ export const VERTICAL_ALIGN = { }; export const ELEMENT_READY_TO_ERASE_OPACITY = 20; + +export const COOKIES = { + AUTH_STATE_COOKIE: "excplus-auth", +} as const; diff --git a/src/excalidraw-app/index.scss b/src/excalidraw-app/index.scss index 59585573f..3bd16dbcd 100644 --- a/src/excalidraw-app/index.scss +++ b/src/excalidraw-app/index.scss @@ -32,3 +32,25 @@ pointer-events: none; } } + +.plus-button { + display: flex; + justify-content: center; + cursor: pointer; + align-items: center; + border: 1px solid var(--color-primary); + padding: 0.6em 0.7em; + border-radius: var(--space-factor); + color: var(--color-primary) !important; + margin: 8px; + text-decoration: none !important; + + &:hover { + background-color: var(--color-primary); + color: white !important; + } + + &:active { + background-color: var(--color-primary-darker); + } +} diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index f4e4efe9d..2f89e3c33 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -4,7 +4,13 @@ import { trackEvent } from "../analytics"; import { getDefaultAppState } from "../appState"; import { ErrorDialog } from "../components/ErrorDialog"; import { TopErrorBoundary } from "../components/TopErrorBoundary"; -import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants"; +import { + APP_NAME, + COOKIES, + EVENT, + TITLE_TIMEOUT, + VERSION_TIMEOUT, +} from "../constants"; import { loadFromBlob } from "../data/blob"; import { ExcalidrawElement, @@ -68,6 +74,10 @@ import { isBrowserStorageStateNewer } from "./data/tabSync"; import clsx from "clsx"; import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library"; +const isExcalidrawPlusSignedUser = document.cookie.includes( + COOKIES.AUTH_STATE_COOKIE, +); + const languageDetector = new LanguageDetector(); languageDetector.init({ languageUtils: { @@ -182,7 +192,7 @@ const initializeScene = async (opts: { return { scene: null, isExternalScene: false }; }; -const PlusLinkJSX = ( +const PlusLPLinkJSX = (

Introducing Excalidraw+
@@ -196,6 +206,17 @@ const PlusLinkJSX = (

); +const PlusAppLinkJSX = ( + + Go to Excalidraw+ + +); + const ExcalidrawWrapper = () => { const [errorMessage, setErrorMessage] = useState(""); let currentLangCode = languageDetector.detect() || defaultLang.code; @@ -524,17 +545,16 @@ const ExcalidrawWrapper = () => { if (isMobile) { return null; } + return (
- {/* */} - {/* FIXME remove after 2021-05-20 */} - {PlusLinkJSX} + {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
); }, @@ -586,12 +606,14 @@ const ExcalidrawWrapper = () => { marginTop: isTinyDevice ? 16 : undefined, marginLeft: "auto", marginRight: isTinyDevice ? "auto" : undefined, - padding: "4px 2px", - border: "1px dashed #aaa", + padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px", + border: isExcalidrawPlusSignedUser + ? undefined + : "1px dashed #aaa", borderRadius: 12, }} > - {PlusLinkJSX} + {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX} );