UX Enhancement: Separate actions from links in DAG navigation

[ryanahamilton]

• Separates the "actions" (trigger, refresh, and delete) from the "view navigation" to visually differentiate between these two different logical groupings.
• The action buttons all have tooltips and aria attributes to offset the removal of the text from the buttons.
• Updated the icons used for "Trigger" and "Delete". The non-circled icons have a cleaner appearance in an icon-only button. These icons have also been updated in the "DAGs" index view.
• Swapped the position of the "Tree View" and "Graph View" navigation links given "Tree View" is the default view when clicking from the "DAGs" index view.
• UI screenshots in documentation have been updated to reflect these changes.

DAG Navigation - Before:

DAG Navigation - After:

DAGs Index Icons - Before:

DAGs Index Icons - After:

---

Make sure to mark the boxes below before creating PR: [x]

• Description above provides context of the change
• Unit tests coverage for changes (not needed for documentation changes)
• Target Github ISSUE in description if exists
• Commits follow "How to write a good git commit message"
• Relevant documentation is updated including usage instructions.
• I will engage committers as explained in Contribution Workflow Example.

---

In case of fundamental code change, 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 UPDATING.md.
Read the Pull Request Guidelines for more information.

[mik-laj]

Fantastic. I started working on it once but never got motivated to finish it.
#4796

[ryanahamilton]

@mik-laj ah, I hadn't seen that PR. Glad to see we're on the same page!

[ryw]

Nice improvement @ryanahamilton - looks good

[kaxil]

Nice work @ryanahamilton