Fix/5133/update borders

[pete-watters]

Try out Leather build 5dffaf7 — Extension build, Test report, Storybook, Chromatic

This PR:

• adds borders to the <Page component so all pages have the required border
• refactors some other cards to deprecate <InfoCardFooter and standardise UI
• adds a fix for the BG location of the send ordinal flow dialog

[fbwoolf]

"space.00"?

[fbwoolf]

Might be worth revisiting the card stories? I'm not sure what the footer variant="card" means?

[pete-watters]

Might be worth revisiting the card stories? I'm not sure what the footer variant="card" means?

You're right, I will update the stories and add better documentation to make it clearer.

Footer variant='card' is used when the <Footer needs to be used inside of a Card.

   <Card
      ...
        footer={
          <Footer variant="card">
            <Button
              Continue
            </Button>
          </Footer>
        }
      >

In those cases it needs to be positioned differently based on the browser width:

export function Footer({ children, variant = 'page', flexDirection = 'column' }: FooterProps) {
  return (
    <styled.footer
     ....
      maxWidth={variant === 'card' ? 'pageWidth' : '100%'}
      position={variant === 'card' ? ' absolute' : 'fixed'}
      ...
      bg={variant === 'page' ? 'ink.background-primary' : undefined}
      borderTop={variant === 'page' ? ' default' : 'none'}
    >
    ...
    </styled.footer>
  );
}

The only other footer variant is page which it defaults to. I can update it so that page is set explicitly elsewhere?

The concept is that sometimes we have a <Page container with a footer and other times we have a <Card which is sometimes nested in a page.

Here is an example of what it's doing on the Swap page:

Area.mp4

[pete-watters]

@fbwoolf - I had to switch from working on this to fixing another bug I had introduced.

I was going to update storybook in here but decided to take that into a different branch and merge this first. The storybook update branch is - fix/5133/update-container-storybook, which I pushed it just in case. I'll clean up all the stories for containers and make it easier to understand how I have set things up.