diff --git a/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx b/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx index 11d3fa54b286..78518099726b 100644 --- a/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx +++ b/apps/dotcom/client/src/components/ErrorPage/ErrorPage.tsx @@ -1,6 +1,7 @@ import { Component, ReactNode } from 'react' import { Link } from 'react-router-dom' import translationsEnJson from '../../../public/tla/locales-compiled/en.json' +import { TlaButton } from '../../tla/components/TlaButton/TlaButton' import { F, IntlProvider } from '../../tla/utils/i18n' import { isInIframe } from '../../utils/iFrame' @@ -81,7 +82,11 @@ export class RefreshErrorBoundary extends Component< return ( window.location.reload()}>{this.props.messages.cta}} + cta={ + window.location.reload()}> + {this.props.messages.cta} + + } /> ) } diff --git a/apps/dotcom/client/src/components/IFrameProtector.tsx b/apps/dotcom/client/src/components/IFrameProtector.tsx index 3af0348efbea..f37cca502de7 100644 --- a/apps/dotcom/client/src/components/IFrameProtector.tsx +++ b/apps/dotcom/client/src/components/IFrameProtector.tsx @@ -1,5 +1,6 @@ import { ReactNode, useEffect } from 'react' import { useUrl } from '../hooks/useUrl' +import { TlaIcon } from '../tla/components/TlaIcon/TlaIcon' import { trackEvent } from '../utils/analytics' import { getParentOrigin, isInIframe } from '../utils/iFrame' @@ -64,20 +65,7 @@ export function IFrameProtector({
{'Visit this page on tldraw.com'} - - - +
diff --git a/apps/dotcom/client/src/components/StoreErrorScreen.tsx b/apps/dotcom/client/src/components/StoreErrorScreen.tsx index e2de14690b13..731e53eaec29 100644 --- a/apps/dotcom/client/src/components/StoreErrorScreen.tsx +++ b/apps/dotcom/client/src/components/StoreErrorScreen.tsx @@ -1,4 +1,5 @@ import { TLRemoteSyncError, TLSyncErrorCloseEventReason } from '@tldraw/sync-core' +import { TlaButton } from '../tla/components/TlaButton/TlaButton' import { ErrorPage } from './ErrorPage/ErrorPage' import LoginRedirectPage from './LoginRedirectPage/LoginRedirectPage' @@ -24,7 +25,11 @@ export function StoreErrorScreen({ error }: { error: Error }) { header: 'Refresh the page', para1: 'You need to update to the latest version of tldraw to continue.', }} - cta={} + cta={ + window.location.reload()}> + Refresh + + } /> ) } diff --git a/apps/dotcom/client/src/pages/admin.module.css b/apps/dotcom/client/src/pages/admin.module.css index cfbc4685b603..14a5638d6325 100644 --- a/apps/dotcom/client/src/pages/admin.module.css +++ b/apps/dotcom/client/src/pages/admin.module.css @@ -40,19 +40,19 @@ padding: 24px 32px; display: flex; flex-direction: column; - gap: 32px; + gap: var(--tl-space-8); overflow: auto; } .adminSection { display: flex; flex-direction: column; - gap: 16px; + gap: var(--tl-space-5); } .searchContainer { display: flex; - gap: 12px; + gap: var(--tl-space-4); align-items: center; } @@ -100,7 +100,7 @@ .userActions { display: flex; - gap: 12px; + gap: var(--tl-space-4); align-items: center; } @@ -116,7 +116,7 @@ background-color: var(--tl-color-low); border: 1px solid var(--tl-color-divider); border-radius: var(--tl-radius-1); - padding: 16px; + padding: var(--tl-space-5); font-family: 'IBMPlexMono', monospace; font-size: 11px; line-height: 1.4; @@ -129,14 +129,14 @@ .fileOperations { display: flex; flex-direction: column; - gap: 16px; + gap: var(--tl-space-5); } .fileOperation { display: flex; flex-direction: column; - gap: 12px; - padding: 16px; + gap: var(--tl-space-4); + padding: var(--tl-space-5); background-color: var(--tl-color-panel); border: 1px solid var(--tl-color-divider); border-radius: var(--tl-radius-1); @@ -144,15 +144,15 @@ .downloadContainer { display: flex; - gap: 12px; + gap: var(--tl-space-4); align-items: center; } .dangerZone { display: flex; flex-direction: column; - gap: 12px; - padding: 16px; + gap: var(--tl-space-4); + padding: var(--tl-space-5); background-color: var(--tl-color-panel); border: 1px solid var(--tl-color-danger); border-radius: var(--tl-radius-1); @@ -160,7 +160,7 @@ .deleteContainer { display: flex; - gap: 12px; + gap: var(--tl-space-4); align-items: center; } @@ -171,7 +171,7 @@ /* Progress Log */ .progressLog { margin-top: 16px; - padding: 16px; + padding: var(--tl-space-5); background-color: var(--tl-color-low); border: 1px solid var(--tl-color-divider); border-radius: var(--tl-radius-1); @@ -196,7 +196,7 @@ background-color: var(--tl-color-selected-contrast); border: 1px solid var(--tl-color-divider); border-radius: var(--tl-radius-1); - padding: 8px; + padding: var(--tl-space-3); } .logEntry { @@ -215,7 +215,7 @@ position: relative; display: flex; flex-direction: column; - gap: 12px; + gap: var(--tl-space-4); } .copyButton { @@ -227,7 +227,7 @@ /* User Summary */ .userSummary { - padding: 16px; + padding: var(--tl-space-5); background-color: var(--tl-color-panel); border: 1px solid var(--tl-color-divider); border-radius: var(--tl-radius-1); @@ -236,13 +236,13 @@ .summaryGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 12px; + gap: var(--tl-space-4); } .summaryItem { display: flex; flex-direction: column; - gap: 4px; + gap: var(--tl-space-2); } .fieldLabel { @@ -264,8 +264,8 @@ .migrationSection { display: flex; flex-direction: column; - gap: 12px; - padding: 16px; + gap: var(--tl-space-4); + padding: var(--tl-space-5); background-color: var(--tl-color-panel); border: 1px solid var(--tl-color-primary); border-radius: var(--tl-radius-1); @@ -275,15 +275,15 @@ /* Stats Display */ .statsContainer { display: flex; - gap: 16px; - padding: 12px; + gap: var(--tl-space-5); + padding: var(--tl-space-4); flex-wrap: wrap; } .statItem { display: flex; flex-direction: column; - gap: 4px; + gap: var(--tl-space-2); } .statLabel { @@ -302,7 +302,7 @@ /* Count Container */ .countContainer { display: flex; - gap: 12px; + gap: var(--tl-space-4); align-items: center; } @@ -314,7 +314,7 @@ /* Config Container */ .configContainer { display: flex; - gap: 16px; + gap: var(--tl-space-5); flex-wrap: wrap; } @@ -330,20 +330,20 @@ .featureFlagsContainer { display: flex; flex-direction: column; - gap: 16px; + gap: var(--tl-space-5); margin-top: 16px; } .featureFlagItem { display: flex; align-items: center; - gap: 12px; + gap: var(--tl-space-4); } .featureFlagLabel { display: flex; align-items: center; - gap: 8px; + gap: var(--tl-space-3); cursor: pointer; min-width: 200px; } diff --git a/apps/dotcom/client/src/tla/app/TldrawApp.ts b/apps/dotcom/client/src/tla/app/TldrawApp.ts index 6f86250fc201..fcf1dba2b891 100644 --- a/apps/dotcom/client/src/tla/app/TldrawApp.ts +++ b/apps/dotcom/client/src/tla/app/TldrawApp.ts @@ -1,4 +1,4 @@ -import { Zero } from '@rocicorp/zero' +import { QueryResultType, Zero } from '@rocicorp/zero' import { captureException } from '@sentry/react' import { AcceptInviteResponseBody, @@ -10,12 +10,9 @@ import { ROOM_PREFIX, TlaFile, WELCOME_CREATE_SOURCE, - TlaFileState, TlaFileStatePartial, TlaFlags, - TlaGroup, TlaGroupFile, - TlaGroupUser, TlaMutators, TlaSchema, TlaUser, @@ -122,13 +119,13 @@ export class TldrawApp { readonly z: Zero private readonly user$: Signal - private readonly fileStates$: Signal<(TlaFileState & { file: TlaFile })[]> + // These signal types are derived from the query definitions in dotcom-shared rather than + // hand-written, so the shape (and the nullability of `.one()` joins like `file`) stays in + // sync with the queries automatically. A previous hand-written annotation claimed `file` was + // always present, which hid a production crash when a `.one()` join resolved to undefined. + private readonly fileStates$: Signal> private readonly workspaceMemberships$: Signal< - (TlaGroupUser & { - group: TlaGroup - groupFiles: Array - groupMembers: Array - })[] + QueryResultType > private readonly useProperZero: boolean @@ -1229,10 +1226,10 @@ export class TldrawApp { copyWorkspaceInvite(workspaceId: string, showToast = true): boolean { // The home workspace can't be invited to. if (workspaceId === this.getHomeWorkspaceId()) return false - const membership = this.getWorkspaceMembership(workspaceId) - if (!membership?.group.inviteSecret) return false + const group = this.getWorkspaceMembership(workspaceId)?.group + if (!group?.inviteSecret) return false - const inviteText = `${location.origin}/invite/${membership.group.inviteSecret}` + const inviteText = `${location.origin}/invite/${group.inviteSecret}` navigator.clipboard.writeText(inviteText) if (showToast) { diff --git a/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx b/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx index cba81ff966f6..20004f6c7275 100644 --- a/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx +++ b/apps/dotcom/client/src/tla/components/MaybeForceUserRefresh/MaybeForceUserRefresh.tsx @@ -22,6 +22,9 @@ export function MaybeForceUserRefresh({ children }: { children: ReactNode }) { > {children} + {/* A custom overlay rather than TldrawUiDialog: it renders at the app-provider root + to dim the whole app when the client is outdated — a context where the Radix-based + dialog primitives and their UI-context hooks are not available. */} {showModal ? (
diff --git a/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css b/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css index 18f18e4e0333..13ca963da0f9 100644 --- a/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css +++ b/apps/dotcom/client/src/tla/components/TlaAnonDotDevLink/TlaAnonDotDevLink.module.css @@ -4,7 +4,7 @@ right: max(var(--tl-space-2), env(safe-area-inset-right)); z-index: calc(var(--tl-layer-watermark) + 1); height: 36px; - padding: 2px; + padding: var(--tl-space-1); } .anonDotDevLink > div { @@ -38,7 +38,7 @@ position: relative; display: flex; align-items: center; - gap: 4px; + gap: var(--tl-space-2); height: 100%; padding: 0 8px; color: inherit; diff --git a/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx b/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx index f27bb49e90cf..2019bd0716b2 100644 --- a/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx +++ b/apps/dotcom/client/src/tla/components/TlaEditor/TlaDebug.tsx @@ -1,6 +1,7 @@ /* eslint-disable tldraw/jsx-no-literals */ import { memo } from 'react' import { ExampleDialog, TldrawUiMenuItem, useDialogs } from 'tldraw' +import { ExternalLink } from '../ExternalLink/ExternalLink' export function A11yAudit() { const { addDialog } = useDialogs() @@ -74,11 +75,7 @@ export const A11yResultTable = memo(({ results }: { results: any }) => { ))} - {issue.helpUrl ? ( - - More info - - ) : null} + {issue.helpUrl ? More info : null} ))} diff --git a/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css b/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css index a60e4635969e..7abd5774bbe1 100644 --- a/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css +++ b/apps/dotcom/client/src/tla/components/TlaFileError/TlaFileError.module.css @@ -6,7 +6,7 @@ justify-content: center; height: 100%; text-align: center; - gap: 20px; + gap: var(--tl-space-6); } .content { diff --git a/apps/dotcom/client/src/tla/components/TlaFileMenu/TlaFileMenu.tsx b/apps/dotcom/client/src/tla/components/TlaFileMenu/TlaFileMenu.tsx index 02806fbbfe70..c6db575863df 100644 --- a/apps/dotcom/client/src/tla/components/TlaFileMenu/TlaFileMenu.tsx +++ b/apps/dotcom/client/src/tla/components/TlaFileMenu/TlaFileMenu.tsx @@ -128,9 +128,10 @@ export function FileItems({ // labelled with its own name like any other workspace. const currentWorkspaceId = file?.owningGroupId ?? app.getHomeWorkspaceId() const homeWorkspaceName = workspaceMemberships.find((g) => g.groupId === app.getHomeWorkspaceId()) - ?.group.name + ?.group?.name const moveToWorkspaces = workspaceMemberships.filter( - (g) => g.groupId !== app.getHomeWorkspaceId() + (g): g is typeof g & { group: NonNullable<(typeof g)['group']> } => + g.groupId !== app.getHomeWorkspaceId() && !!g.group ) const handleCopyLinkClick = useCallback(() => { diff --git a/apps/dotcom/client/src/tla/components/TlaFileShareMenu/file-share-menu.module.css b/apps/dotcom/client/src/tla/components/TlaFileShareMenu/file-share-menu.module.css index 9a0c09804688..a5decadf96e2 100644 --- a/apps/dotcom/client/src/tla/components/TlaFileShareMenu/file-share-menu.module.css +++ b/apps/dotcom/client/src/tla/components/TlaFileShareMenu/file-share-menu.module.css @@ -13,7 +13,7 @@ height: 100%; overflow: hidden; border-radius: 4px; - padding: 8px; + padding: var(--tl-space-3); border: 1px solid var(--tl-color-divider); background-color: var(--tl-color-panel); } diff --git a/apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx b/apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx index dd07601fecaa..837b990951b2 100644 --- a/apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx +++ b/apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx @@ -34,17 +34,23 @@ export function TlaSidebarWorkspaceSwitcher() { const workspaces = useValue( 'workspaceMemberships', - () => app.getWorkspaceMemberships().filter((g) => g.groupId !== homeWorkspaceId), + () => + app + .getWorkspaceMemberships() + .filter( + (g): g is typeof g & { group: NonNullable<(typeof g)['group']> } => + g.groupId !== homeWorkspaceId && !!g.group + ), [app, homeWorkspaceId] ) const activeWorkspaceName = useValue( 'active workspace name', - () => app.getWorkspaceMembership(activeWorkspaceId)?.group.name, + () => app.getWorkspaceMembership(activeWorkspaceId)?.group?.name, [app, activeWorkspaceId] ) const homeWorkspaceName = useValue( 'home workspace name', - () => app.getWorkspaceMembership(homeWorkspaceId)?.group.name, + () => app.getWorkspaceMembership(homeWorkspaceId)?.group?.name, [app, homeWorkspaceId] ) diff --git a/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css b/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css index 334b5c392d79..fbb44d51e566 100644 --- a/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css +++ b/apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css @@ -226,7 +226,7 @@ .sidebar[data-workspaces='true'] .sidebarTopRow { height: 44px; padding: 3px 8px 0px 4px; - gap: 8px; + gap: var(--tl-space-3); } /* Workspace link */ @@ -466,7 +466,7 @@ display: flex; flex-direction: row; align-items: center; - gap: 4px; + gap: var(--tl-space-2); color: var(--tl-color-text-3); } @@ -782,7 +782,7 @@ } .sidebarSearchEmpty { - padding: 8px; + padding: var(--tl-space-3); color: var(--tl-color-text-3); } @@ -844,7 +844,7 @@ flex-direction: row; align-items: center; justify-content: flex-start; - gap: 8px; + gap: var(--tl-space-3); position: relative; pointer-events: none; z-index: 2; @@ -881,7 +881,7 @@ justify-content: flex-start; padding: 0px 8px 0px calc(8px + var(--tla-sidebar-group-item-padding-left, 0px)); outline-offset: -2px; - gap: 8px; + gap: var(--tl-space-3); position: relative; } diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaInviteDialog.module.css b/apps/dotcom/client/src/tla/components/dialogs/TlaInviteDialog.module.css index aa227bc6f4d5..ca5c51d91f88 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/TlaInviteDialog.module.css +++ b/apps/dotcom/client/src/tla/components/dialogs/TlaInviteDialog.module.css @@ -52,7 +52,7 @@ border: none; color: var(--tl-color-text-3); cursor: pointer; - padding: 8px; + padding: var(--tl-space-3); height: 32px; } diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaInviteExpiredDialog.module.css b/apps/dotcom/client/src/tla/components/dialogs/TlaInviteExpiredDialog.module.css index aed864abaafc..5887145bfa2b 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/TlaInviteExpiredDialog.module.css +++ b/apps/dotcom/client/src/tla/components/dialogs/TlaInviteExpiredDialog.module.css @@ -10,7 +10,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 8px; + gap: var(--tl-space-3); padding: 0 24px 24px; width: 300px; } diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaLegalAcceptance.tsx b/apps/dotcom/client/src/tla/components/dialogs/TlaLegalAcceptance.tsx index 91d285f44075..2e9dbda872f7 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/TlaLegalAcceptance.tsx +++ b/apps/dotcom/client/src/tla/components/dialogs/TlaLegalAcceptance.tsx @@ -4,6 +4,7 @@ import { useCallback, useRef, useState } from 'react' import { TldrawUiDialogBody, TldrawUiDialogHeader, TldrawUiDialogTitle } from 'tldraw' import { useAnalyticsConsent } from '../../hooks/useAnalyticsConsent' import { F } from '../../utils/i18n' +import { ExternalLink } from '../ExternalLink/ExternalLink' import { TlaMenuSwitch } from '../tla-menu/tla-menu' import { TlaCtaButton } from '../TlaCtaButton/TlaCtaButton' import { TlaLogo } from '../TlaLogo/TlaLogo' @@ -74,16 +75,8 @@ export function TlaLegalAcceptance({ onClose }: { onClose(): void }) { ( - - {chunks} - - ), - privacy: (chunks) => ( - - {chunks} - - ), + tos: (chunks) => {chunks}, + privacy: (chunks) => {chunks}, }} />

@@ -94,11 +87,7 @@ export function TlaLegalAcceptance({ onClose }: { onClose(): void }) { ( - - {chunks} - - ), + cookies: (chunks) => {chunks}, }} /> diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaManageCookiesDialog.tsx b/apps/dotcom/client/src/tla/components/dialogs/TlaManageCookiesDialog.tsx index a6575641ace7..0b53724c8ca2 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/TlaManageCookiesDialog.tsx +++ b/apps/dotcom/client/src/tla/components/dialogs/TlaManageCookiesDialog.tsx @@ -7,6 +7,7 @@ import { } from 'tldraw' import { useAnalyticsConsent } from '../../hooks/useAnalyticsConsent' import { F } from '../../utils/i18n' +import { ExternalLink } from '../ExternalLink/ExternalLink' import { TlaMenuControl, TlaMenuControlGroup, @@ -35,11 +36,7 @@ export function TlaManageCookiesDialog() { ( - - {chunks} - - ), + a: (chunks) => {chunks}, }} />

@@ -71,11 +68,7 @@ export function TlaManageCookiesDialog() { ( - - {chunks} - - ), + a: (chunks) => {chunks}, }} />

diff --git a/apps/dotcom/client/src/tla/components/dialogs/TlaSignInDialog.tsx b/apps/dotcom/client/src/tla/components/dialogs/TlaSignInDialog.tsx index d55868c1f837..cff963e9b857 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/TlaSignInDialog.tsx +++ b/apps/dotcom/client/src/tla/components/dialogs/TlaSignInDialog.tsx @@ -13,6 +13,7 @@ import { } from 'tldraw' import { defineMessages, F, useMsg } from '../../utils/i18n' import { setRedirectOnSignIn } from '../../utils/redirect' +import { ExternalLink } from '../ExternalLink/ExternalLink' import { TlaCtaButton } from '../TlaCtaButton/TlaCtaButton' import { TlaLogo } from '../TlaLogo/TlaLogo' import styles from './auth.module.css' @@ -266,14 +267,14 @@ function TlaEnterEmailStep({

- + - + {/* eslint-disable-next-line tldraw/jsx-no-literals */} {' · '} - + - +

diff --git a/apps/dotcom/client/src/tla/components/dialogs/auth.module.css b/apps/dotcom/client/src/tla/components/dialogs/auth.module.css index 258effd39c24..5edde124501c 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/auth.module.css +++ b/apps/dotcom/client/src/tla/components/dialogs/auth.module.css @@ -58,7 +58,7 @@ .authCtaButton img { width: 22px; height: 22px; - padding: 4px; + padding: var(--tl-space-2); z-index: 2; background-color: var(--tl-color-selected-contrast); border-radius: 100%; @@ -187,7 +187,7 @@ .authOtpBoxes { display: grid; grid-template-columns: repeat(6, 40px); - gap: 8px; + gap: var(--tl-space-3); } .authOtpBox { diff --git a/apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css b/apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css index f48c1ca4d830..cf1ee43e77c3 100644 --- a/apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css +++ b/apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css @@ -70,7 +70,7 @@ } .cookieText { - padding: 8px; + padding: var(--tl-space-3); padding-bottom: 12px; font-size: 12px; color: var(--tl-color-text-0); @@ -83,14 +83,14 @@ .cookieButtonsRow { display: flex; - gap: 4px; + gap: var(--tl-space-2); justify-content: space-between; flex-wrap: wrap; } .cookieButtons { display: flex; - gap: 4px; + gap: var(--tl-space-2); flex-wrap: wrap; justify-content: space-between; } diff --git a/apps/dotcom/client/src/tla/components/tla-menu/menu.module.css b/apps/dotcom/client/src/tla/components/tla-menu/menu.module.css index 4f78d128c362..e452fe83c21a 100644 --- a/apps/dotcom/client/src/tla/components/tla-menu/menu.module.css +++ b/apps/dotcom/client/src/tla/components/tla-menu/menu.module.css @@ -1,8 +1,8 @@ .menuSection { display: flex; - padding: 12px; + padding: var(--tl-space-4); flex-direction: column; - gap: 12px; + gap: var(--tl-space-4); } .menuSection:nth-of-type(n + 2) { @@ -12,7 +12,7 @@ .menuControlGroup { display: flex; flex-direction: column; - gap: 4px; + gap: var(--tl-space-2); } .menuControlGroup + .menuControlGroup { @@ -109,7 +109,7 @@ display: flex; align-items: center; height: 24px; - gap: 4px; + gap: var(--tl-space-2); justify-content: flex-end; cursor: pointer; padding-left: 2px; @@ -154,8 +154,8 @@ div:has(> .menuSelectContent):not([data-radix-popper-content-wrapper]) { position: relative; display: flex; align-items: center; - padding: 8px; - gap: 4px; + padding: var(--tl-space-3); + gap: var(--tl-space-2); cursor: pointer; z-index: 1; margin-bottom: -4px; @@ -210,7 +210,7 @@ div:has(> .menuSelectContent):not([data-radix-popper-content-wrapper]) { .menuSelectSeparator { height: 1px; - margin: 4px; + margin: var(--tl-space-2); background-color: var(--tl-color-divider); } @@ -334,7 +334,7 @@ div:has(> .menuSelectContent):not([data-radix-popper-content-wrapper]) { position: relative; overflow-x: auto; flex: 1; - --tab-padding: 12px; + --tab-padding: var(--tl-space-4); --line-height: 2px; } diff --git a/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx b/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx index 59ba6fbef489..05a04ad1f3d5 100644 --- a/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx +++ b/apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx @@ -30,6 +30,7 @@ import { globalEditor } from '../../utils/globalEditor' import { TlaCookieConsent } from '../components/dialogs/TlaCookieConsent' import { TlaLegalAcceptance } from '../components/dialogs/TlaLegalAcceptance' import { MaybeForceUserRefresh } from '../components/MaybeForceUserRefresh/MaybeForceUserRefresh' +import { TlaButton } from '../components/TlaButton/TlaButton' import { components } from '../components/TlaEditor/TlaEditor' import { WorkspaceInviteHandler } from '../components/WorkspaceInviteHandler' import { AppStateProvider, useMaybeApp } from '../hooks/useAppState' @@ -282,9 +283,9 @@ function SignedInProvider({ para1: intl.formatMessage(appMessages.clerkUnavailablePara), }} cta={ - + } /> )