diff --git a/e2e/playwright/flow-tests.spec.ts b/e2e/playwright/flow-tests.spec.ts index 0ed1de2e7..55ed20ccf 100644 --- a/e2e/playwright/flow-tests.spec.ts +++ b/e2e/playwright/flow-tests.spec.ts @@ -131,6 +131,7 @@ test('Basic sketch', async ({ page }) => { // selected two lines therefore there should be two cursors await expect(page.locator('.cm-cursor')).toHaveCount(2) + await page.getByRole('button', { name: 'Constrain' }).click() await page.getByRole('button', { name: 'Equal Length' }).click() await expect(page.locator('.cm-content')) @@ -937,11 +938,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => { // click a segment hold shift and click an axis, see that a relevant constraint is enabled await topHorzSegmentClick() await page.keyboard.down('Shift') + const constrainButton = page.getByRole('button', { name: 'Constrain' }) const absYButton = page.getByRole('button', { name: 'ABS Y' }) + await constrainButton.click() await expect(absYButton).toBeDisabled() await page.waitForTimeout(100) await xAxisClick() await page.keyboard.up('Shift') + await constrainButton.click() await absYButton.and(page.locator(':not([disabled])')).waitFor() await expect(absYButton).not.toBeDisabled() @@ -951,12 +955,14 @@ test('Selections work on fresh and edited sketch', async ({ page }) => { await page.waitForTimeout(100) // same selection but click the axis first await xAxisClick() + await constrainButton.click() await expect(absYButton).toBeDisabled() await page.keyboard.down('Shift') await page.waitForTimeout(100) await topHorzSegmentClick() await page.keyboard.up('Shift') + await constrainButton.click() await expect(absYButton).not.toBeDisabled() // clear selection by clicking on nothing @@ -965,10 +971,12 @@ test('Selections work on fresh and edited sketch', async ({ page }) => { // check the same selection again by putting cursor in code first then selecting axis await page.getByText(` |> line([-${commonPoints.num2}, 0], %)`).click() await page.keyboard.down('Shift') + await constrainButton.click() await expect(absYButton).toBeDisabled() await page.waitForTimeout(100) await xAxisClick() await page.keyboard.up('Shift') + await constrainButton.click() await expect(absYButton).not.toBeDisabled() // clear selection by clicking on nothing @@ -1902,6 +1910,7 @@ test('Can code mod a line length', async ({ page }) => { const startXPx = 500 await page.mouse.move(startXPx + PUR * 15, 250 - PUR * 10) await page.mouse.click(615, 102) + await page.getByRole('button', { name: 'Constrain', exact: true }).click() await page.getByRole('button', { name: 'length', exact: true }).click() await page.getByText('Add constraining value').click() diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png index 1c414c87b..6a96fc218 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png index 394c3c8f1..54b54272e 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Inch-scale-2-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png index 4142e8a9a..930fa6a16 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png index 08ab9ae1f..7ac401a94 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Client-side-scene-scale-should-match-engine-scale-Millimeter-scale-2-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png index 6c84d2b50..8b84b3ffc 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-rectangles-should-look-right-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png index df843705a..4919b9d92 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png index 0c1d57eef..efb060122 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png index e29293ea4..dd4724ce6 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Sketch-on-face-with-none-z-up-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png index bf819f0b2..d71267eab 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XY-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png index 9d722e965..59a3e7d8b 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--XZ-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png index e1c908485..563d7e2fd 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable--YZ-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png index 7de73f20d..ef60418b1 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XY-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png index 143c8b797..c448d5d14 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-XZ-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png index c45202189..75f771fac 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/extrude-on-default-planes-should-be-stable-YZ-1-Google-Chrome-linux.png differ diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx index d0ad4445a..46a4765fb 100644 --- a/src/Toolbar.tsx +++ b/src/Toolbar.tsx @@ -11,17 +11,18 @@ import { useNetworkStatus, } from 'components/NetworkHealthIndicator' import { useStore } from 'useStore' +import { ActionButtonDropdown } from 'components/ActionButtonDropdown' export const Toolbar = () => { const { commandBarSend } = useCommandsContext() const { state, send, context } = useModelingContext() const toolbarButtonsRef = useRef(null) const iconClassName = - 'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-chalkboard-10 group-pressed:!text-chalkboard-10' + 'group-disabled:text-chalkboard-50 group-enabled:group-hover:!text-primary dark:group-enabled:group-hover:!text-inherit group-pressed:!text-chalkboard-10 group-ui-open:!text-chalkboard-10 dark:group-ui-open:!text-chalkboard-10' const bgClassName = - 'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary group-pressed:bg-primary' + 'group-disabled:!bg-transparent group-enabled:group-hover:bg-primary/10 dark:group-enabled:group-hover:bg-primary group-pressed:bg-primary group-ui-open:bg-primary' const buttonClassName = - 'bg-chalkboard-10 dark:bg-chalkboard-100 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-100' + 'bg-chalkboard-10 dark:bg-chalkboard-100 enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!border-primary ui-open:!border-primary' const pathId = useMemo(() => { if (!isSingleCursorInPipe(context.selectionRanges, kclManager.ast)) { return false @@ -57,10 +58,7 @@ export const Toolbar = () => { {...props} ref={toolbarButtonsRef} onWheel={handleToolbarButtonsWheelEvent} - className={ - 'm-0 py-1 rounded-l-sm flex gap-2 items-center overflow-x-auto ' + - className - } + className={'m-0 py-1 rounded-l-sm flex gap-2 items-center ' + className} style={{ scrollbarWidth: 'thin' }} > {state.nextEvents.includes('Enter sketch') && ( @@ -71,7 +69,7 @@ export const Toolbar = () => { onClick={() => send({ type: 'Enter sketch', data: { forceNewSketch: true } }) } - icon={{ + iconStart={{ icon: 'sketch', iconClassName, bgClassName, @@ -88,7 +86,7 @@ export const Toolbar = () => { className={buttonClassName} Element="button" onClick={() => send({ type: 'Enter sketch' })} - icon={{ + iconStart={{ icon: 'sketch', iconClassName, bgClassName, @@ -105,7 +103,7 @@ export const Toolbar = () => { className={buttonClassName} Element="button" onClick={() => send({ type: 'Cancel' })} - icon={{ + iconStart={{ icon: 'arrowLeft', iconClassName, bgClassName, @@ -128,7 +126,7 @@ export const Toolbar = () => { : send('Equip Line tool') } aria-pressed={state?.matches('Sketch.Line tool')} - icon={{ + iconStart={{ icon: 'line', iconClassName, bgClassName, @@ -148,7 +146,7 @@ export const Toolbar = () => { : send('Equip tangential arc to') } aria-pressed={state.matches('Sketch.Tangential arc to')} - icon={{ + iconStart={{ icon: 'arc', iconClassName, bgClassName, @@ -172,7 +170,7 @@ export const Toolbar = () => { : send('Equip rectangle tool') } aria-pressed={state.matches('Sketch.Rectangle tool')} - icon={{ + iconStart={{ icon: 'rectangle', iconClassName, bgClassName, @@ -194,52 +192,54 @@ export const Toolbar = () => { )} {state.matches('Sketch.SketchIdle') && - state.nextEvents - .filter( - (eventName) => - eventName.includes('Make segment') || - eventName.includes('Constrain') - ) - .sort((a, b) => { - const aisEnabled = state.nextEvents - .filter((event) => state.can(event as any)) - .includes(a) - const bIsEnabled = state.nextEvents - .filter((event) => state.can(event as any)) - .includes(b) - if (aisEnabled && !bIsEnabled) { - return -1 - } - if (!aisEnabled && bIsEnabled) { - return 1 - } - return 0 - }) - .map((eventName) => ( -
  • - send(eventName)} - disabled={ + state.nextEvents.filter( + (eventName) => + eventName.includes('Make segment') || + eventName.includes('Constrain') + ).length > 0 && ( + + eventName.includes('Make segment') || + eventName.includes('Constrain') + ) + .sort((a, b) => { + const aisEnabled = state.nextEvents + .filter((event) => state.can(event as any)) + .includes(a) + const bIsEnabled = state.nextEvents + .filter((event) => state.can(event as any)) + .includes(b) + if (aisEnabled && !bIsEnabled) { + return -1 + } + if (!aisEnabled && bIsEnabled) { + return 1 + } + return 0 + }) + .map((eventName) => ({ + label: eventName + .replace('Make segment ', '') + .replace('Constrain ', ''), + onClick: () => send(eventName), + disabled: !state.nextEvents .filter((event) => state.can(event as any)) - .includes(eventName) || disableAllButtons - } - title={eventName} - icon={{ - icon: 'line', - iconClassName, - bgClassName, - }} - > - {eventName - .replace('Make segment ', '') - .replace('Constrain ', '')} - -
    • - ))} + .includes(eventName) || disableAllButtons, + }))} + className={buttonClassName} + Element="button" + iconStart={{ + icon: 'dimension', + iconClassName, + bgClassName, + }} + > + Constrain + + )} {state.matches('idle') && (
  • { ? 'extrude' : 'sketches need to be closed, or not already extruded' } - icon={{ + iconStart={{ icon: 'extrude', iconClassName, bgClassName, @@ -272,7 +272,7 @@ export const Toolbar = () => { } return ( - + ) diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx index 0a9664ca8..4bf392272 100644 --- a/src/components/ActionButton.tsx +++ b/src/components/ActionButton.tsx @@ -1,11 +1,12 @@ import { ActionIcon, ActionIconProps } from './ActionIcon' -import React from 'react' +import React, { ForwardedRef, forwardRef } from 'react' import { paths } from 'lib/paths' import { Link } from 'react-router-dom' import type { LinkProps } from 'react-router-dom' interface BaseActionButtonProps { - icon?: ActionIconProps + iconStart?: ActionIconProps + iconEnd?: ActionIconProps className?: string } @@ -32,15 +33,15 @@ type ActionButtonAsElement = BaseActionButtonProps & Element: React.ComponentType> } -type ActionButtonProps = +export type ActionButtonProps = | ActionButtonAsButton | ActionButtonAsLink | ActionButtonAsExternal | ActionButtonAsElement -export const ActionButton = (props: ActionButtonProps) => { - const classNames = `action-button m-0 group mono text-sm flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 p-[3px] text-chalkboard-100 dark:text-chalkboard-10 ${ - props.icon ? 'pr-2' : 'px-2' +export const ActionButton = forwardRef((props: ActionButtonProps, ref) => { + const classNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${ + props.iconStart ? (props.iconEnd ? 'px-0' : 'pr-2') : 'px-2' } ${props.className ? props.className : ''}` switch (props.Element) { @@ -48,11 +49,23 @@ export const ActionButton = (props: ActionButtonProps) => { // Note we have to destructure 'className' and 'Element' out of props // because we don't want to pass them to the button element; // the same is true for the other cases below. - const { Element, icon, children, className: _className, ...rest } = props + const { + Element, + iconStart, + iconEnd, + children, + className: _className, + ...rest + } = props return ( - ) } @@ -60,15 +73,22 @@ export const ActionButton = (props: ActionButtonProps) => { const { Element, to, - icon, + iconStart, + iconEnd, children, className: _className, ...rest } = props return ( - - {icon && } + } + to={to || paths.INDEX} + className={classNames} + {...rest} + > + {iconStart && } {children} + {iconEnd && } ) } @@ -76,33 +96,42 @@ export const ActionButton = (props: ActionButtonProps) => { const { Element, to, - icon, + iconStart, + iconEnd, children, className: _className, ...rest } = props return ( } to={to || paths.INDEX} className={classNames} {...rest} target="_blank" > - {icon && } + {iconStart && } {children} + {iconEnd && } ) } default: { - const { Element, icon, children, className: _className, ...rest } = props - if (!Element) throw new Error('Element is required') + const { + Element, + iconStart, + children, + className: _className, + ...rest + } = props return ( - {props.icon && } + {props.iconStart && } {children} + {props.iconEnd && } ) } } -} +}) diff --git a/src/components/ActionButtonDropdown.tsx b/src/components/ActionButtonDropdown.tsx new file mode 100644 index 000000000..75ddb6722 --- /dev/null +++ b/src/components/ActionButtonDropdown.tsx @@ -0,0 +1,55 @@ +import { Popover } from '@headlessui/react' +import { ActionButton, ActionButtonProps } from './ActionButton' + +type ActionButtonSplitProps = Omit & { + splitMenuItems: { + label: string + shortcut?: string + onClick: () => void + disabled?: boolean + }[] +} + +export function ActionButtonDropdown({ + splitMenuItems, + className, + ...props +}: ActionButtonSplitProps) { + return ( + + + + {splitMenuItems.map((item) => ( +
  • + +
    • + ))} +     +     + ) +} diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx index 0e0759679..2064bf541 100644 --- a/src/components/ActionIcon.tsx +++ b/src/components/ActionIcon.tsx @@ -29,10 +29,8 @@ export const ActionIcon = ({ size = 'md', children, }: ActionIconProps) => { - // By default, we reverse the icon color and background color in dark mode - const computedIconClassName = `h-auto text-primary dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}` - - const computedBgClassName = `bg-primary/10 dark:bg-chalkboard-90 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}` + const computedIconClassName = `h-auto text-inherit dark:text-current !group-disabled:text-chalkboard-60 !group-disabled:text-chalkboard-60 ${iconClassName}` + const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 !group-disabled:bg-chalkboard-30 !dark:group-disabled:bg-chalkboard-80 ${bgClassName}` return (
    ), + caretDown: ( + + + + ), clipboardCheckmark: ( ), + dimension: ( + + + + ), equal: ( { setIsBannerDismissed(true)} - icon={{ + iconStart={{ icon: 'close', className: 'p-1', bgClassName: diff --git a/src/components/ErrorPage.tsx b/src/components/ErrorPage.tsx index 23e5bcb75..52d2185c6 100644 --- a/src/components/ErrorPage.tsx +++ b/src/components/ErrorPage.tsx @@ -29,7 +29,7 @@ export const ErrorPage = () => { Go Home @@ -37,14 +37,14 @@ export const ErrorPage = () => { )} window.location.reload()} > Reload { window.localStorage.clear() }} @@ -53,7 +53,7 @@ export const ErrorPage = () => { Report Bug diff --git a/src/components/FileTree.tsx b/src/components/FileTree.tsx index 2aed27844..b8c5a7593 100644 --- a/src/components/FileTree.tsx +++ b/src/components/FileTree.tsx @@ -109,7 +109,7 @@ function DeleteConfirmationDialog({ send({ type: 'Delete file', data: fileOrDir }) setIsOpen(false) }} - icon={{ + iconStart={{ icon: faTrashAlt, bgClassName: 'bg-destroy-80', iconClassName: @@ -340,7 +340,7 @@ export const FileTreeMenu = () => { <> { @@ -185,7 +185,7 @@ function ProjectMenuPopover({ // Clear the scene and end the session. engineCommandManager.endSession() }} - icon={{ + iconStart={{ icon: 'arrowLeft', className: 'p-1', }} diff --git a/src/components/SetVarNameModal.tsx b/src/components/SetVarNameModal.tsx index 4fadf6fac..c27f575bf 100644 --- a/src/components/SetVarNameModal.tsx +++ b/src/components/SetVarNameModal.tsx @@ -78,7 +78,7 @@ export const SetVarNameModal = ({ Element="button" type="submit" disabled={!isNewVariableNameUnique} - icon={{ icon: faPlus }} + iconStart={{ icon: faPlus }} > Add variable diff --git a/src/components/UpdaterModal.tsx b/src/components/UpdaterModal.tsx index 6da0a4dcd..8742851e1 100644 --- a/src/components/UpdaterModal.tsx +++ b/src/components/UpdaterModal.tsx @@ -59,7 +59,7 @@ export const UpdaterModal = ({ onResolve({ wantUpdate: false })} - icon={{ + iconStart={{ icon: 'close', bgClassName: 'bg-destroy-80', iconClassName: 'text-destroy-20 group-hover:text-destroy-10', @@ -72,7 +72,10 @@ export const UpdaterModal = ({ onResolve({ wantUpdate: true })} - icon={{ icon: 'arrowRight', bgClassName: 'dark:bg-chalkboard-80' }} + iconStart={{ + icon: 'arrowRight', + bgClassName: 'dark:bg-chalkboard-80', + }} className="dark:hover:bg-chalkboard-80/50" data-testid="update-button-update" > diff --git a/src/components/UpdaterRestartModal.tsx b/src/components/UpdaterRestartModal.tsx index d6cad915c..0be9f82f8 100644 --- a/src/components/UpdaterRestartModal.tsx +++ b/src/components/UpdaterRestartModal.tsx @@ -31,7 +31,7 @@ export const UpdaterRestartModal = ({ onResolve({ wantRestart: false })} - icon={{ + iconStart={{ icon: 'close', bgClassName: 'bg-destroy-80', iconClassName: 'text-destroy-20 group-hover:text-destroy-10', @@ -44,7 +44,10 @@ export const UpdaterRestartModal = ({ onResolve({ wantRestart: true })} - icon={{ icon: 'arrowRight', bgClassName: 'dark:bg-chalkboard-80' }} + iconStart={{ + icon: 'arrowRight', + bgClassName: 'dark:bg-chalkboard-80', + }} className="dark:hover:bg-chalkboard-80/50" data-testid="update-restrart-button-update" > diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx index b71cecc5f..c82df3c15 100644 --- a/src/components/UserSidebarMenu.tsx +++ b/src/components/UserSidebarMenu.tsx @@ -55,7 +55,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => { ) : ( @@ -120,7 +120,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
    { // since /settings is a nested route the sidebar doesn't close @@ -138,7 +138,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => { Request a feature @@ -146,7 +146,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => { Report a bug @@ -154,7 +154,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => { send('Log out')} - icon={{ + iconStart={{ icon: faSignOutAlt, className: 'p-1', bgClassName: '!bg-transparent', diff --git a/src/components/WasmErrBanner.tsx b/src/components/WasmErrBanner.tsx index 456054ec5..67bc3fdd3 100644 --- a/src/components/WasmErrBanner.tsx +++ b/src/components/WasmErrBanner.tsx @@ -24,7 +24,7 @@ export function WasmErrBanner() { setBannerDismissed(true)} - icon={{ + iconStart={{ icon: 'close', className: 'p-1', bgClassName: diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index a2a73cd95..938c00a81 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -210,7 +210,7 @@ const Home = () => { : '') } onClick={() => setSearchParams(getNextSearchParams(sort, 'name'))} - icon={{ + iconStart={{ icon: getSortIcon(sort, 'name'), className: 'p-1.5', iconClassName: !sort.includes('name') @@ -232,7 +232,7 @@ const Home = () => { onClick={() => setSearchParams(getNextSearchParams(sort, 'modified')) } - icon={{ + iconStart={{ icon: sort ? getSortIcon(sort, 'modified') : faArrowDown, className: 'p-1.5', iconClassName: !isSortByModified ? '!text-chalkboard-40' : '', @@ -278,7 +278,7 @@ const Home = () => { send('Create project')} - icon={{ icon: faPlus, iconClassName: 'p-1 w-4' }} + iconStart={{ icon: faPlus, iconClassName: 'p-1 w-4' }} data-testid="home-new-file" > New project diff --git a/src/routes/Onboarding/Units.tsx b/src/routes/Onboarding/Units.tsx index 1dee6dc6a..ad469b983 100644 --- a/src/routes/Onboarding/Units.tsx +++ b/src/routes/Onboarding/Units.tsx @@ -51,7 +51,7 @@ export default function Units() { Next: Camera diff --git a/src/routes/Onboarding/index.tsx b/src/routes/Onboarding/index.tsx index c71457a4c..7d751a785 100644 --- a/src/routes/Onboarding/index.tsx +++ b/src/routes/Onboarding/index.tsx @@ -144,7 +144,7 @@ export function OnboardingButtons({ diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 199cbd30b..5617b8e8a 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -269,7 +269,7 @@ export const Settings = () => { { ) showInFolder(paths[searchParamTab]) }} - icon={{ + iconStart={{ icon: 'folder', size: 'sm', className: 'p-1', @@ -319,7 +319,7 @@ export const Settings = () => { }) toast.success('Settings restored to default') }} - icon={{ + iconStart={{ icon: 'refresh', size: 'sm', className: 'p-1 text-chalkboard-10', diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx index 4fc8ce2d6..36bba0d5a 100644 --- a/src/routes/SignIn.tsx +++ b/src/routes/SignIn.tsx @@ -65,7 +65,7 @@ const SignIn = () => { @@ -80,7 +80,7 @@ const SignIn = () => { typeof window !== 'undefined' && window.location.href.replace('signin', '') )}`} - icon={{ icon: 'arrowRight' }} + iconStart={{ icon: 'arrowRight' }} className="w-fit mt-4" > Sign in