Revisit styling of the Gateway list items and create a reusable component

[timng-bcgov]

I have two observations on the styling of the list items.

1. I'm wondering if we're able to style the Gateway display name with an underline based on the state of the parent to better match the styling of cards in the Gateways manager:

Current:

Comparison (expected from Gateway details):

Quick mockup to illustrate:

2. Should we think about focus states for the list items? They seem to be absent on a few links throughout the Services portal. Is it possible to use a Chakra Link component (which composes <Box /> and has the desired focus state) instead of a <Flex /> with an onClick event? Might be worth discussing the composition here if we are planning on making a reusable component.

Originally posted by @timng-bcgov in #1179 (review)

[timng-bcgov]

Some more examples of expected styling from the Portal:

Actions:

Buttons:

Directory cards: