Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Update logic graph styling #2912

Merged
merged 8 commits into from
Apr 26, 2024
Merged

Conversation

ianjon3s
Copy link
Contributor

@ianjon3s ianjon3s commented Mar 20, 2024

What does this PR do?

Visual changes to the logic graph, summarised as:

  • Increased contrast to nodes, branches and add-node links
  • Standardised padding across hangers and branches to increase visibility of structure
  • Updated styling of portal nodes to show clear demarcation between node link (enter portal) and menu link (configure portal)
  • Only questions and checklists without answers present in sticky-note styling
  • Section nodes have dashed border to add subtle visual organisation to graph
  • Assigned flag colours no longer apply to full background of an option - reduces contrast issue (made more acute by small size)
  • GOV.UK focus style on nodes and add-node links
  • Clearer green outline to mark traversed nodes

Preview

Before:
image

After:
image

Copy link

github-actions bot commented Mar 21, 2024

Removed vultr server and associated DNS entries

@ianjon3s ianjon3s force-pushed the ian/editor-logic-graph-style-update branch from f359e7d to 3b1472d Compare March 26, 2024 10:27
@ianjon3s ianjon3s force-pushed the ian/editor-logic-graph-style-update branch 2 times, most recently from 1e6b5a8 to 88c3def Compare April 12, 2024 08:15
@ianjon3s ianjon3s force-pushed the ian/editor-logic-graph-style-update branch from 88c3def to 50d0d12 Compare April 24, 2024 08:43
@DafyddLlyr
Copy link
Contributor

@ianjon3s Destroyed and recreated the Vultr instance here this morning as I noticed it was failing.

Let us know when this is ready for review as I know you're keen to move it forward 👍

@ianjon3s ianjon3s marked this pull request as ready for review April 25, 2024 13:31
@ianjon3s
Copy link
Contributor Author

@ianjon3s ianjon3s requested a review from a team April 25, 2024 13:32
@ianjon3s
Copy link
Contributor Author

Thanks @DafyddLlyr ! I've marked this as ready-to-review as I believe it is in good shape from a code perspective.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A nice refactor in future would be to replace this with styled components to match the rest of the codebase. Not a small task and no rush really, but it would be nice from a consistency point of view.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, I'll see about doing this as a longer-term piece of work.

className={classNames(
"card",
"decision",
"type-" + TYPES[props.type as TYPES],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ha! I forgot about this neat little trick.

I think this means we need to update the "how to add a component" guide to say we need to add a style for a new component also (not sure how this would handle defaults / new components right now).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case the style is only being used/applied as an enhancement for type-Section, so we wouldn't need a style unless it needed to be distinctive from the other components. As long as the type is set on a new component it'll pull through and be used if necessary (if I understand your point correctly).

@DafyddLlyr
Copy link
Contributor

Looking great!

@ianjon3s ianjon3s merged commit 60818b4 into main Apr 26, 2024
12 checks passed
@ianjon3s ianjon3s deleted the ian/editor-logic-graph-style-update branch April 26, 2024 08:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants