Update text link styles in Fleet UI

[mike-j-thomas]

Goal

User story
As a Fleet user,
I want text-based links in the Fleet UI to follow clear, consistent visual and interaction rules based on their purpose,
so that I can easily understand what is clickable, what action it will perform, and navigate the product with confidence and minimal visual distraction.

Changes

Product

• UI changes:
  • Figma link
  • Design system docs
• CLI (fleetctl) usage changes: No changes
• YAML changes: No changes
• REST API changes: No changes
• Fleet's agent (fleetd) changes: No changes
• Fleet server configuration changes: No changes
• Exposed, public API endpoint changes: No changes
• fleetdm.com changes: No changes
• GitOps mode UI changes: No changes
• GitOps generation changes: No changes
• Activity changes: No changes
• Permissions changes: No changes
• Changes to paid features or tiers: Available in Fleet Free and Premium
• My device and fleetdm.com/better changes: No changes.
• Usage statistics: No changes
• Other reference documentation changes: No changes
• First draft of test plan added
• Once shipped, requester has been notified
• Once shipped, dogfooding issue has been filed

Engineering

• Test plan is finalized
• Contributor API changes: No changes
• Feature guide changes: No changes
• Database schema migrations: None
• Load testing: No
• Pre-QA load test: No
• Load testing/osquery-perf improvements: No

ℹ️  Please read this issue carefully and understand it. Pay special attention to UI wireframes, especially "dev notes".

Risk assessment

• Requires testing in a hosted environment : NA
• Requires load testing: NA
• Risk level: Low
• Risk description: low

Test plan

Make sure to go through the list and consider all events that might be related to this story, so we catch edge cases earlier.

Core flow

• Check links in the product to match Figma
• Check links in the tables that open details view. They should match Figma.
• Make sure that all states work as expected: hover, focus, active.

Edge cases

• TODO

Supplemental testing

Testing notes

Confirmation

1. Engineer: Added comment to user story confirming successful completion of test plan (include any special setup, test data, or configuration used during development/testing if applicable).
2. QA: Added comment to user story confirming successful completion of test plan.
3. QA: Determined whether this story needs Playwright automation.
   • Needs automation: Yes / No
   • If yes, filed a follow-up issue in the :help-qa project with status "Needs automation":

[mike-j-thomas]

@noahtalerman, can you remind me what the best labels are for this? I've kept #g-ux on it for now so I can keep track on my board of what is product related. If this gets prioritized, I think there is enough info in the description for it to go straight to frontend. EDIT: I should probably lay it out first since I included a fair few open-ended styles in the description 😅

[noahtalerman]

can you remind me what the best labels are for this?

Hey @mike-j-thomas, I don't think there is one yet!

I think let's use ~spiffier instead of #g-ux. We used #g-ux when the UX working group was active. It's no longer active. I just deleted the #g-ux label.

What do you think about ~spiffier?