Improve task group UI in new graph

[bbovenzi]

• Add a background opacity to task groups
• Increase the touch area for the expand/collapse button on a task group

---

^ 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.

[set92]

Yes, looks clearer now 😄. Now it's easier to differentiate between a task and a Taskgroup.
I still think that is annoying the position of the text to open the Taskgroup, but is true that there isn't a better place. A coworker told me it was better for it to be on the left side because that way you don't need to move around to close it, but then the left side would have too many things. Although, it is true that I had a fun thought of an animated accordion moving the name of the Taskgroup to the right while opening. But I'm a random DE who doesn't know much about UI/UX, better listen to your guts or what other experienced guys say 😀.

I suppose having colors for each task could also be useful, specially with many tasks in a Taskgroup. E.g. Finding a random Operator between plenty of python Operators, can be hard since all have the same white background.

Another function related to Taskgroups that I don't know if it is working as intended is the clears. For example, if you filter upstream to see better some part of a DAG, and then want to clear some tasks, I see 3 possible options:

• Clear from some task to the end of DAG.
• Clear from some task to the end of its Taskgroup.
• Clear from some task to the end of what he sees on screen (the filtered DAG).

Right now is working as case 1, not sure whether it would make sense (or how easy is) to implement the other 2.