[PR #24831] fix: improve TimePicker footer layout and button styling #30812

Closed
opened 2026-02-21 20:48:16 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/24831

State: closed
Merged: Yes


Related #24001

Summary

Improved the TimePicker footer component layout and button styling to enhance user experience:

  • Changed footer layout from right-aligned to full-width horizontal distribution using justify-between
  • Replaced plain button element with proper Button component for the "Now" button
  • Applied secondary-accent variant to maintain blue text color for the "Now" button
  • Used flex-1 classes to make both buttons share equal width
  • Maintained proper spacing between buttons with margin classes

The footer now provides a more balanced and consistent visual appearance while preserving the original blue color scheme for the "Now" button.

Screenshots

Before After
image image

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/24831 **State:** closed **Merged:** Yes --- Related #24001 ## Summary Improved the TimePicker footer component layout and button styling to enhance user experience: - Changed footer layout from right-aligned to full-width horizontal distribution using `justify-between` - Replaced plain button element with proper Button component for the "Now" button - Applied `secondary-accent` variant to maintain blue text color for the "Now" button - Used `flex-1` classes to make both buttons share equal width - Maintained proper spacing between buttons with margin classes The footer now provides a more balanced and consistent visual appearance while preserving the original blue color scheme for the "Now" button. ## Screenshots | Before | After | |--------|-------| |<img width="262" height="310" alt="image" src="https://github.com/user-attachments/assets/2e614e8d-9e7b-4ced-9460-0efc81008700" />|<img width="264" height="306" alt="image" src="https://github.com/user-attachments/assets/2795e27b-6752-4783-8d2b-bd411d508dab" />| ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:48:16 -05:00
yindo closed this issue 2026-02-21 20:48:16 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30812