190 the captions need to be modified to appear inside the green border

[elenamarinaki]

Resolves #190 Resolves #192

In this PR, I am implementing the new request from the CA team regarding the image captions. Instead of them appearing outside and below the image, they now appear inside a green container placed inside the image. Underneath the image appears the credit, with the credited name being a link.

The images do not come pre-rendered with the green stripe, instead, this is now coming from css.

What was before this:

⬇️

Now becomes this:

⬇️

Known issue ⚠️

There is one component which presents a problem with its image caption, the OpeningBlock. The same component renders the opening blocks in both pages ('Our Mission' & 'What we do').

The green caption is getting detached from the image at certain breakpoints, like so:

Where this comes from?

After some search, I realised it was coming from the spacing between the paragraphs of the copy next to the image. Initially, I had this component rendering as a string and was applying paragraph changes though using the whiteSpace: pre-line rule.

One (partial) solution

To have more flexibility, I changed the type to a ReactNode, so that I can render each paragraph separately as a p tag and apply the spacing in between through css margins.

This solved the problem for the first component:

🔴 The problem still persists in the second component though, so we will have to find another way to address this.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
climate-agency	✅ Ready (Inspect)	Visit Preview	Sep 7, 2022 at 1:56PM (UTC)

[elenamarinaki]

Up to this point I made all content changes requested in this notion file: https://www.notion.so/companionstudio/c88d4bb0a15f4566b3c6217242a76f13?v=261955e17b21480381db11abf6ee868f

[elenamarinaki]

• [x] position of the menu aligned with the right edge of the images
• [x] fontSize of the menu in desktop should be 14 and fontWeight medium
• [x] fontWeight of the inner captions should be medium
• [x] adjust space between paragraphs in the opening blocks (in both pages)