fix background color style

[JerryWu1234]

fix #2301

• I've read and followed the contributing guide on how to create great pull requests.
• I've updated the relevant documentation for any new or updated feature
• I've linked relevant GitHub issue with "Closes #"
• I've added a visual demonstration under the form of a screenshot or video

[JerryWu1234]

if the inset was set, background was #f7f7f7, I think the preview mode follows the dev

[Janpot]

I believe the preview is correct, it's the canvas that overlays a slight transparent grey when nothing is selected. The idea is to emphasize something is selected by slightly dimming the rest. It gives the illusion of a grey background.

We can start by disabling this overlay when nothing is selected. If this turns out to still be confusing we will disable it altogether and rely purely on the blue box to indicate selection.

[JerryWu1234]

we will disable it altogether and rely purely on the blue box to indicate selection

I chose this way

[Janpot]

If we don't want a background at all, you may as well remove this whole component

[JerryWu1234]

If we don't want a background at all, you may as well remove this whole component

actually, I removed the whole component(PinholeOverlay.tsx) but the [chromium] › integration/rest-basic/index.spec.ts:36:5 › rest runtime basics this test will occur an error.
let me dive into deeper

[JerryWu1234]

[Janpot]

Yes, you may have to move the data-testid="page-overlay" one comonent up

[JerryWu1234]

@Janpot
after my in-depth study,
We can’t maybe directly delete this part of PinholeOverlay, because it is not only for emphasizing something that is selected, but also for canceling the status of active when something is selected.

[JerryWu1234]

I added a test for status switching

[apedroferreira]

If the PinholeOverlay does have utility and the only issue was the darkening of the UI I think just removing that darkening should do.

And thanks for adding a test for this! Adding some suggestions for the test:

[JerryWu1234]

@apedroferreira
please help approve this pr if it is mergeable.

[apedroferreira]

Almost there, just a few more important changes in the test!
Also just a nitpick, but feel free to use more vertical space in the test to separate bits of logic, it can really help improve the readability!

[apedroferreira]

With my comments above, here's how I would vertically space the test, order the variables and change variable names to improve readability and make the test as easy to understand as possible:

  const editorModel = new ToolpadEditor(page);

  await editorModel.goToPageById('K7SkzhT');

  await editorModel.waitForOverlay();

  const textField = editorModel.appCanvas.locator('input');
  const textFieldNodeHudTag = editorModel.appCanvas
    .getByTestId('node-hud-tag')
    .filter({ hasText: 'textField' });

  await clickCenter(page, textField);
  await expect(textFieldNodeHudTag).toBeVisible();

  const textFieldBoundingBox = await textField.boundingBox();
  await page.mouse.click(textFieldBoundingBox!.x + 150, textFieldBoundingBox!.y + 150);
  await expect(textFieldNodeHudTag).toBeHidden();

[apedroferreira]

Awesome, thanks a lot!

[apedroferreira]

@JerryWu1234 feel free to merge this!
Nevermind, I didn't know external contributors can't merge :D I'll merge it now, thanks again!