IRSA-6706, IRSA-6571: Add Image on background of Results tab

[jaladh-singhal]

Fixes IRSA-6706, IRSA-6571

See ife PR: https://github.com/IPAC-SW/irsa-ife/pull/388

• HydraLanding styles change if bgImage is supplied by consumers (ife apps) and changes in LandingPage to support that
• Edit webpack config to support .webp files (SPHEREx image is available as webp) and to switch to asset/resource for large files (background images are large, we don't want them inline)
• Several cleanups:
  • topSection now accepts title (to distinguish from appTitle), and desc that are used by Hydra apps
  • icon prop of HydraLanding is never used by topSection in any apps but bottomSection uses it, so moved it there to avoid confusion and make it easier for consumers to define it (without going through slotProps route)
  • Replaced setIfUndefined with defaultsDeep since there are lot of slotProps modification, and having single nested object is more readable when overriding

Testing

Check background image in landing page of:

• https://irsa-6571-bg-img.irsakudev.ipac.caltech.edu/applications/euclid
• https://irsa-6571-bg-img.irsakudev.ipac.caltech.edu/applications/spherex

Regression Testing in landing page of:

• https://irsa-6571-bg-img.irsakudev.ipac.caltech.edu/irsaviewer
• https://irsa-6571-bg-img.irsakudev.ipac.caltech.edu/applications/wise

[loitly]

Looks great.

[vandesai1]

Love seeing the images! Some comments/questions:

1. The text for Euclid was changed in a different PR. That won't change things, right?
2. Similarly, we will probably want to change the text for SPHEREx. We can do that later, right?
3. Is there a possibility of having the spacecraft image to one side rather than directly behind the text box? (not sure if it would look better, but wondering if it's a possibility to consider)

[jaladh-singhal]

Love seeing the images! Some comments/questions:

1. The text for Euclid was changed in a different PR. That won't change things, right?
2. Similarly, we will probably want to change the text for SPHEREx. We can do that later, right?
3. Is there a possibility of having the spacecraft image to one side rather than directly behind the text box? (not sure if it would look better, but wondering if it's a possibility to consider)

@vandesai1 answers:

1. yes (updated the build) - does the centre-aligned text look awkward, because we have too much text now?
2. yes
3. let me try - I have to crop image manually and then use it

[loitly]

3. let me try - I have to crop image manually and then use it

@jaladh-singhal have you tried background-position-x/background-position-y? You may need to set min-width so the spacecraft does not wrap around.

[jaladh-singhal]

3. let me try - I have to crop image manually and then use it

@jaladh-singhal have you tried background-position-x/background-position-y? You may need to set min-width so the spacecraft does not wrap around.

@loitly I did, it doesn't work as intended because we're using background-size: cover which forces the image to fill the container always. We talked in FF-CCB to let ICE edit it and possibly also dim the background stars.