[React components] Consider organizing consequtive `<Image>` components within an `<ImageSpan>`

[novusnota]

That is, instead of the following:

<div
  style={{ display: "flex", justifyContent: "center", gap: "16px" }}
>
  <Image
    src="/resources/images/wallets/tonkeeper/backup-light.png"
    darkSrc="/resources/images/wallets/tonkeeper/backup-dark.png"
    width={228}
    height={300}
    alt="Back up"
  />
  
  <Image
    src="/resources/images/wallets/tonkeeper/backup-manually-light.png"
    darkSrc="/resources/images/wallets/tonkeeper/backup-manually-dark.png"
    width={228}
    height={342}
    alt="Confirm the passcode"
  />
</div>

We would have an additional import from /snippets/image.jsx and a component to replace the prior <div>:

import { Image, ImageSpan } from '/snippets/image.jsx';

...

<ImageSpan>
  <Image
    src="/resources/images/wallets/tonkeeper/backup-light.png"
    darkSrc="/resources/images/wallets/tonkeeper/backup-dark.png"
    width={228}
    height={300}
    alt="Back up"
  />
  
  <Image
    src="/resources/images/wallets/tonkeeper/backup-manually-light.png"
    darkSrc="/resources/images/wallets/tonkeeper/backup-manually-dark.png"
    width={228}
    height={342}
    alt="Confirm the passcode"
  />
</ImageSpan>

[novusnota]

Resolved in #1971: <Image> components have a center property, so we can just put consecutive images with center set.