fix: fixed issue with border for image

[neatbyte-vnobis]

Changes

Resolve issue "Image border not applied correctly"
Task provided by @SvenAlHamad no reference to issue or Notion.

Before Changes

After Changes

How Has This Been Tested?

Manually

Documentation

None

[neatbyte-ivelychko]

There are two solutions for this issue.
First of the solutions is used in this PR, and the second one I will provide in this comment.

In the second solution we would not need to use useEffect and loop through the styles for the element as we do in the first solution. What we need is to use

const borderStyles = border({ element: { ...element, type: "" }, theme });
const borderAssignedStyles = assignStyles({
   breakpoints: theme.breakpoints,
    styles: borderStyles || {}
});
const PbImg = styled.img({
  width: element.data.image.width,
  height: element.data.image.height,
  maxWidth: "100%",
  ...borderAssignedStyles
});

in packages/app-page-builder-elements/src/renderers/image.tsx.

And we should add additional if statement here packages/app-page-builder-elements/src/modifiers/styles/border.ts

if (element.type === "image") {
        return {};
}

And it would also work.
@adrians5j What do you think?

[neatbyte-vnobis]

/cypress

[github-actions]

Cypress E2E tests have been initiated (for more information, click here). ✨

[adrians5j]

Will need to think a bit about this. Will need to see if we can do this in a better way.

[neatbyte-vnobis]

@adrians5j Any new thoughts on this PR? Or should we stick with one of the provided solutions?

[neatbyte-vnobis]

/cypress

[github-actions]

Cypress E2E tests have been initiated (for more information, click here). ✨