[improvement] remove sponsorship color (#691)

* remove sponsorship variations

* Update menu

examples/tldraw-example/src/develop.tsx

@@ -42,7 +42,7 @@ export default function Develop() {
         onSignIn={handleSignIn}
         onSignOut={handleSignOut}
         onPersist={handlePersist}
-        showSponsorLink={false}
+        showSponsorLink={true}
       />
     </div>
   )

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
+  showSponsorLink?: boolean
-  readOnly: 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}
               />
               <StyledSpacer />
               {showTools && !readOnly && <ToolsPanel />}

packages/tldraw/src/components/Primitives/RowButton/RowButton.tsx

@@ -29,7 +29,6 @@ export const RowButton = React.forwardRef<HTMLButtonElement, RowButtonProps>(
       hasIndicator = false,
       hasArrow = false,
       disabled = false,
-      isSponsor = false,
       variant,
       kbd,
       children,
@@ -43,7 +42,6 @@ export const RowButton = React.forwardRef<HTMLButtonElement, RowButtonProps>(
         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', {

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<HTMLButtonElement, ToolButtonProps>(
       isToolLocked = false,
       disabled = false,
       isActive = false,
-      isSponsor = false,
       onKeyDown,
       id,
       ...rest
@@ -40,7 +38,6 @@ export const ToolButton = React.forwardRef<HTMLButtonElement, ToolButtonProps>(
       <StyledToolButton
         ref={ref}
         isActive={isActive}
-        isSponsor={isSponsor}
         variant={variant}
         onClick={onClick}
         disabled={disabled}
@@ -211,30 +208,6 @@ export const StyledToolButton = styled('button', {
         },
       },
     },
-    {
-      isActive: true,
-      isSponsor: false,
-      css: {
-        [`${StyledToolButtonInner}`]: {
-          backgroundColor: '$selected',
-          color: '$selectedContrast',
-        },
-      },
-    },
-    {
-      isActive: false,
-      isSponsor: false,
-      bp: 'small',
-      css: {
-        [`&:hover:not(:disabled) ${StyledToolButtonInner}`]: {
-          backgroundColor: '$hover',
-          border: '1px solid $panel',
-        },
-        [`&:focus:not(:disabled) ${StyledToolButtonInner}`]: {
-          backgroundColor: '$hover',
-        },
-      },
-    },
   ],
 })
 

packages/tldraw/src/components/TopPanel/Menu/Menu.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { ExitIcon, GitHubLogoIcon, HamburgerMenuIcon, TwitterLogoIcon } from '@radix-ui/react-icons'
+import {
+  ExitIcon,
+  GitHubLogoIcon,
+  HamburgerMenuIcon,
+  HeartFilledIcon,
+  TwitterLogoIcon,
+} from '@radix-ui/react-icons'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useTldrawApp } from '~hooks'
 import { PreferencesMenu } from '../PreferencesMenu'
@@ -19,7 +25,7 @@ import { TDExportType, TDSnapshot } from '~types'
 import { Divider } from '~components/Primitives/Divider'
 
 interface MenuProps {
-  showSponsorLink: boolean
+  sponsor: boolean | undefined
   readOnly: boolean
 }
 
@@ -31,7 +37,7 @@ const disableAssetsSelector = (s: TDSnapshot) => {
   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 (
     <DropdownMenu.Root dir="ltr">
-      <DMTriggerIcon isSponsor={showSponsorLink} id="TD-MenuIcon">
+      <DMTriggerIcon id="TD-MenuIcon">
         <HamburgerMenuIcon />
       </DMTriggerIcon>
       <DMContent variant="menu" id="TD-Menu">
@@ -332,7 +338,7 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
             </SmallIcon>
           </DMItem>
         </a>
-        {showSponsorLink && (
+        {sponsor === false && (
           <a href="https://github.com/sponsors/steveruizok" target="_blank" rel="nofollow">
             <DMItem isSponsor id="TD-MenuItem-Become_a_Sponsor">
               Become a Sponsor{' '}
@@ -342,6 +348,16 @@ export const Menu = React.memo(function Menu({ showSponsorLink, readOnly }: Menu
             </DMItem>
           </a>
         )}
+        {sponsor === true && (
+          <a href="https://github.com/sponsors/steveruizok" target="_blank" rel="nofollow">
+            <DMItem id="TD-MenuItem-is_a_Sponsor">
+              Sponsored!
+              <SmallIcon>
+                <HeartFilledIcon />
+              </SmallIcon>
+            </DMItem>
+          </a>
+        )}
         {showSignInOutMenu && (
           <>
             <DMDivider dir="ltr" />{' '}

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({
     <StyledTopPanel>
       {(showMenu || showPages) && (
         <Panel side="left" id="TD-MenuPanel">
-          {showMenu && <Menu showSponsorLink={showSponsorLink} readOnly={readOnly} />}
+          {showMenu && <Menu sponsor={sponsor} readOnly={readOnly} />}
           {showMultiplayerMenu && <MultiplayerMenu />}
           {showPages && <PageMenu />}
         </Panel>