feat(ui/graph): enhance task status visibility

[hainenber]

Closes #34455

Enhance DAG's task visibility by adding border color to task's node and increase size for task's status note.

UI change

Before

After

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

[bbovenzi]

Thanks @hainenber Could you provide some before and after screenshots?

[hainenber]

@bbovenzi thanks for the review! I've provided the screenshots in the PR's description and also fixed the linting issue caught during CI

[hussein-awala]

Looks good!

[bbovenzi]

I'm still a bit stuck on the border color signifying two different things, task state and if its selected. And when I have a selected node, it would become less clear what the status is.

One possibility: Don't change the border color on selection, but instead change the node background?

[hainenber]

I think your proposal works pretty fine. I've made a draft change and the selected task looks identifiable re: its status here. Do let me know what you think

[hainenber]

@bbovenzi does this look good to you? 👀 Sorry if it appears I'm nagging you.

[bbovenzi]

@hainenber much better! One final piece, let's make the border width bigger if the task is selected. and then we can merge this

[hainenber]

Done enlarging node's border when selected. Kindly PTAL

[boring-cyborg]

Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions.