search

bcgov / api-services-portal

API Services Portal provides a multi-tenant frontend integrating API Gateway and Authorization services from Kong CE and Keycloak.
https://api.gov.bc.ca
Apache License 2.0
22 stars 7 forks source link

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

Open timng-bcgov opened 2 months ago

timng-bcgov commented 2 months ago

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: image

Comparison (expected from Gateway details): image

Quick mockup to illustrate: image

  1. 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 https://github.com/bcgov/api-services-portal/pull/1179#pullrequestreview-2307883242

timng-bcgov commented 2 months ago

Some more examples of expected styling from the Portal:

Actions: image

Buttons: image

Directory cards: image