Certificate actions buttons and input fields

[dc-andysign]

---

name: Certificate actions buttons
about: Certificate actions buttons including container wrapper and dummy button(s)

Summary

This includes a set of divs that will serve as container wrapper divs for the 3 right-hand side buttons. Those will be added later.

Motivation

Crying on the implementation of the UI

Describe alternatives you've considered

Alternatively I have looked at doing this design ( especially the section on the right ) with divs

function C() {
  return (
      <Sidebar area="sidebar">
        <PaddedDiv>
          <GriddedDiv>
            <Div>SaveDraft</Div>
            <Div>Cancel</Div>
            <DivDouble></DivDouble>
          </GriddedDiv>
        </PaddedDiv>
      </Sidebar>
  )
}

const PaddedDiv = styled.div`
  padding: 34px 21px;
  width: 100%;
`

const GriddedDiv = styled.div`
  display: grid;
  gap: 20px 10px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 44px 69px;
  background-color: #25928b;
`

const Div = styled.div`
  min-width: 132px;

  padding: 1em;
  background-color: #369a93;
  color: #454545;
`

const DivDouble = styled(Div)`
  grid-column: 1 / -1;
`

const BoxDoubleAlternative = styled(Box)`
  grid-column-start: 1;
  grid-column-end: 3;
`

Also this looks also good with

const FlexItem = styled.div`
  // ...
  flex-grow: 1;
`

Additional context

The button area is split into three parts. The top part contains a left-right set of 2 divs while the bottom just one large div.

NEW-ish:

---

NEW:

NEW2:

---

[mattdean-digicatapult]

I'm approving as this fixes all the major isues. Well done.

There are some tiny fixes you could do if you want but don't worry