diff --git a/examples/tldraw-example/src/develop.tsx b/examples/tldraw-example/src/develop.tsx index 73559fbcc..e5fe2daee 100644 --- a/examples/tldraw-example/src/develop.tsx +++ b/examples/tldraw-example/src/develop.tsx @@ -42,7 +42,7 @@ export default function Develop() { onSignIn={handleSignIn} onSignOut={handleSignOut} onPersist={handlePersist} - showSponsorLink={false} + showSponsorLink={true} /> ) diff --git a/packages/tldraw/src/Tldraw.tsx b/packages/tldraw/src/Tldraw.tsx index 2843c7c88..456c0db19 100644 --- a/packages/tldraw/src/Tldraw.tsx +++ b/packages/tldraw/src/Tldraw.tsx @@ -107,9 +107,9 @@ export function Tldraw({ showStyles = true, showUI = true, readOnly = false, - showSponsorLink = false, disableAssets = false, darkMode = false, + showSponsorLink, onMount, onChange, onChangePresence, @@ -304,6 +304,7 @@ export function Tldraw({ interface InnerTldrawProps { id?: string autofocus: boolean + readOnly: boolean showPages: boolean showMenu: boolean showMultiplayerMenu: boolean @@ -311,8 +312,7 @@ interface InnerTldrawProps { showStyles: boolean showUI: boolean showTools: boolean - showSponsorLink: boolean - readOnly: boolean + showSponsorLink?: boolean } const InnerTldraw = React.memo(function InnerTldraw({ @@ -508,7 +508,7 @@ const InnerTldraw = React.memo(function InnerTldraw({ showMultiplayerMenu={showMultiplayerMenu} showStyles={showStyles} showZoom={showZoom} - showSponsorLink={showSponsorLink} + sponsor={showSponsorLink} /> {showTools && !readOnly && } diff --git a/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx b/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx index d4eaf5ee7..7ae43540c 100644 --- a/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx +++ b/packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx @@ -29,7 +29,6 @@ export const RowButton = React.forwardRef( hasIndicator = false, hasArrow = false, disabled = false, - isSponsor = false, variant, kbd, children, @@ -43,7 +42,6 @@ export const RowButton = React.forwardRef( bp={breakpoints} isWarning={isWarning} isActive={isActive} - isSponsor={isSponsor} disabled={disabled} onClick={onClick} variant={variant} @@ -89,6 +87,10 @@ const StyledRowButtonInner = styled('div', { strokeWidth: 1, zIndex: 1, }, + + [`& > ${SmallIcon}`]: { + paddingLeft: '$3', + }, }) export const StyledRowButton = styled('button', { diff --git a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx index 8b06390a7..abe2d37f1 100644 --- a/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx +++ b/packages/tldraw/src/components/Primitives/ToolButton/ToolButton.tsx @@ -10,7 +10,6 @@ export interface ToolButtonProps { onDoubleClick?: () => void disabled?: boolean isActive?: boolean - isSponsor?: boolean isToolLocked?: boolean variant?: 'icon' | 'text' | 'circle' | 'primary' children: React.ReactNode @@ -29,7 +28,6 @@ export const ToolButton = React.forwardRef( isToolLocked = false, disabled = false, isActive = false, - isSponsor = false, onKeyDown, id, ...rest @@ -40,7 +38,6 @@ export const ToolButton = React.forwardRef( { return s.appState.disableAssets } -export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: MenuProps) { +export const Menu = React.memo(function Menu({ sponsor, readOnly }: MenuProps) { const app = useTldrawApp() const numberOfSelectedIds = app.useStore(numberOfSelectedIdsSelector) @@ -123,13 +129,13 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu app.callbacks.onSaveProjectAs || app.callbacks.onExport - const showSignInOutMenu = app.callbacks.onSignIn || app.callbacks.onSignOut || showSponsorLink + const showSignInOutMenu = app.callbacks.onSignIn || app.callbacks.onSignOut const hasSelection = numberOfSelectedIds > 0 return ( - + @@ -332,7 +338,7 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu - {showSponsorLink && ( + {sponsor === false && ( Become a Sponsor{' '} @@ -342,6 +348,16 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu )} + {sponsor === true && ( + + + Sponsored! + + + + + + )} {showSignInOutMenu && ( <> {' '} diff --git a/packages/tldraw/src/components/TopPanel/TopPanel.tsx b/packages/tldraw/src/components/TopPanel/TopPanel.tsx index 4ef081d3c..2e4a111f1 100644 --- a/packages/tldraw/src/components/TopPanel/TopPanel.tsx +++ b/packages/tldraw/src/components/TopPanel/TopPanel.tsx @@ -18,7 +18,7 @@ interface TopPanelProps { showStyles: boolean showZoom: boolean showMultiplayerMenu: boolean - showSponsorLink: boolean + sponsor?: boolean } export function TopPanel({ @@ -27,7 +27,7 @@ export function TopPanel({ showMenu, showStyles, showZoom, - showSponsorLink, + sponsor, showMultiplayerMenu, }: TopPanelProps) { const app = useTldrawApp() @@ -36,7 +36,7 @@ export function TopPanel({ {(showMenu || showPages) && ( - {showMenu && } + {showMenu && } {showMultiplayerMenu && } {showPages && }