Skip to content

fix: make dashboard buttons look clickable#190

Open
Rohit544 wants to merge 1 commit intokubeflow:mainfrom
Rohit544:fix/dashboard-clickable-buttons-7722
Open

fix: make dashboard buttons look clickable#190
Rohit544 wants to merge 1 commit intokubeflow:mainfrom
Rohit544:fix/dashboard-clickable-buttons-7722

Conversation

@Rohit544
Copy link
Copy Markdown

@Rohit544 Rohit544 commented Feb 3, 2026

What this PR does

Makes dashboard buttons more visually clickable by adding proper hover states, cursor pointers, and interaction feedback.

Before/After

Before: Buttons looked flat with no visual indication they were clickable
After: Buttons have clear hover effects, pointer cursor, and smooth animations

Changes Made

  • ✅ Added cursor: pointer to mat-icon-button and mat-list-item elements
  • ✅ Implemented hover effects with scale transforms for icon buttons
  • ✅ Added slide animation for navigation links on hover
  • ✅ Added subtle shadows and background changes
  • ✅ Smooth 0.2s transitions for better UX
  • ✅ Respects disabled states with :not([disabled]) selectors

Testing

  • Menu toggle button scales on hover and shows pointer cursor
  • Navigation links slide right on hover with shadow effect
  • All animations are smooth with proper transitions
  • Active link styling is preserved
  • Disabled states work correctly

Screenshots

[Add before/after screenshots if possible]

Fixes #7722

- Add cursor pointer to mat-icon-button and mat-list-item elements
- Implement hover effects with scale and translate transforms
- Add subtle shadows and background changes on hover
- Improve visual feedback for better user experience
- Add smooth 0.2s transitions for all interactive elements
- Ensure disabled states are respected

Makes navigation more intuitive by providing clear visual cues
that elements are interactive and clickable.

Fixes #7722
@google-oss-prow
Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign orfeas-k for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@thesuperzapper thesuperzapper changed the title fix(dashboard): make buttons look clickable fix: make dashboard buttons look clickable Feb 15, 2026
@christian-heusel
Copy link
Copy Markdown
Contributor

I think this already has been marked as fixed in https://github.com/kubeflow/kubeflow/pull/7722/changes, however I'm not quite sure where the fix can be found in this repository 🤔

Also please DCO certify your changes 🤗

@github-actions
Copy link
Copy Markdown

This pull request has been automatically marked as stale because it has not had recent activity.
It will be closed if no further activity occurs.
Thank you for your contributions.

Members may comment /lifecycle frozen to prevent this pull request from being marked as stale.

@christian-heusel
Copy link
Copy Markdown
Contributor

@Rohit544 are you interested in further pursuing this PR? 😊 It seems like the issue is still present in the latest beta-release, so we will still need some fix for it 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants