refactor(protocol-designer): add some styling to navigation bar

[jerader]

closes AUTH-624

Overview

add some temporary styling to the nav bar and rename to navigationBar

Test Plan and Hands on Testing

turn on the redesign feature flag and look at the navigation after clicking on "create new protocol". It is not final but wanted to add a bit of design. We will have to go back and add the breadcrumbs and remove the other routes from the nav, it would be good to work on that after the Protocol Overview page is a bit developed

Changelog

refactor navigation slightly so there is some styling

Review requests

see test plan

Risk assessment

low

[jerader]

i did try naming this Navigation but got confusing since react-router-dom has navigate. SOOO decided to add bar to the end so at least its a unique name to the nav bar in the app

[koji]

Suggested change

	align-self: ${ALIGN_STRETCH};
	align-self: ${ALIGN_CENTER};

or (if need to keep stretch

<Flex alignItems={ALIGN_CENTER}>
              <NavbarLink key="createNew" to={'/createNew'}>
                <StyledText desktopStyle="bodyDefaultRegular">
                  {t('create_new_protocol')}
                </StyledText>
              </NavbarLink>
            </Flex>

[jerader]

thanks! i couldn't figure out what was happening, didn't see this align-self i added

[koji]

left a couple of comments on styling but overall looks good!
new create protocol's ui is sick!