refactor(ui): update date picker format and input ring styles#91
Conversation
📝 WalkthroughWalkthroughThis PR applies styling refinements across multiple UI components, including border radius standardization (rounded-xl to rounded-lg in dropdown and popover), spacing adjustments (space-y-0 added to popover filters), and input focus styling updates. The main feature addition is a comprehensive date range preset system in the date picker component, introducing preset detection utilities, dropdown menu selection, new i18n entries for preset labels, and CSS updates for improved date cell sizing and dark mode support. A new dependency (baseline-browser-mapping) is also added. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Fix all issues with AI Agents 🤖
In @services/platform/components/ui/date-range-picker.tsx:
- Around line 210-235: The preset dropdown trigger lacks ARIA markup to indicate
it opens a menu; update the DropdownMenuTrigger/Button combo so the trigger
element (the Button used inside DropdownMenuTrigger) includes
aria-haspopup="menu" and an appropriate aria-expanded attribute bound to the
menu open state (or boolean isOpen) and ensure the Button still uses existing
props like disabled={isLoading} and className; locate the DropdownMenuTrigger
rendering the Button (where presetLabel is shown and
presetOptions/onPresetSelect are used) and add aria-haspopup="menu" and
aria-expanded={isOpen} (or the relevant open state variable) to the Button to
improve screen-reader accessibility.
- Around line 35-44: The type name DatePreset conflicts with another DatePreset
elsewhere; rename this type to DateRangePreset and update every usage in this
file (e.g., the type declaration and any variables, function parameters, return
types, or JSX props referencing DatePreset) to DateRangePreset to avoid
collisions and clarify intent.
- Around line 256-273: presetOptions is recreated on every render causing
needless allocations; wrap its creation in useMemo so it is only rebuilt when
the translation function changes. Update the declaration of presetOptions to use
React.useMemo (or useMemo) with a dependency array containing t, keeping the
same array contents, and leave detectPresetFromRange and presetLabel logic
unchanged so presetOptions is stable across renders.
In @services/platform/package.json:
- Line 132: Remove the unused devDependency "baseline-browser-mapping" from
services/platform/package.json; locate the entry "baseline-browser-mapping":
"^2.9.11" in the devDependencies block and delete that line, then run yarn/npm
install (or update lockfile) to ensure lockfile is updated and CI uses the new
dependency list.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro (Legacy)
⛔ Files ignored due to path filters (1)
services/platform/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (13)
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsxservices/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsxservices/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsxservices/platform/components/ui/data-table/data-table-filters.tsxservices/platform/components/ui/date-range-picker.module.cssservices/platform/components/ui/date-range-picker.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/input.tsxservices/platform/components/ui/popover.tsxservices/platform/messages/en.jsonservices/platform/package.json
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: ALL pages should be optimized for accessibility (Level AA)
ALWAYS put imports at the top and exports at the bottom. Keep them sorted correctly
PREFER named exports. AVOID default exports (only if needed)
Files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsxservices/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsxservices/platform/components/ui/data-table/data-table-filters.tsxservices/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsxservices/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/input.tsxservices/platform/components/ui/popover.tsxservices/platform/components/ui/date-range-picker.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: USE implicit typing whenever possible
DO NOT use type casting. Avoidany, andunknownwhenever possible
Files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsxservices/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsxservices/platform/components/ui/data-table/data-table-filters.tsxservices/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsxservices/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/input.tsxservices/platform/components/ui/popover.tsxservices/platform/components/ui/date-range-picker.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{tsx,jsx}: Do NOT hardcode text, use the translation hooks/functions instead for user-facing UI
CONSIDER ALWAYS TO add optimistic updates withwithOptimisticUpdateforuseMutation. If you decide to NOT add a optimistic update you need to provide a good reason why and comment the hook
USEuseMemo,useCallbackandmemothe right moment
DO NOT overuseuseEffect
USEcvaif a component has multiple variants
AVOIDrouter.refresh()
CONSIDER TO preload queries withpreloadQueryandusePreloadedQueryin React
ALWAYS CONSIDER semantic HTML elements (<button>,<nav>,<main>,<header>,<footer>,<article>,<section>)
ALWAYS provide text alternatives for non-text content (altfor images,aria-labelfor icon buttons)
ENSURE all interactive elements are keyboard accessible and have visible focus states
USE proper heading hierarchy (h1→h2→h3), never skip heading levels
ALWAYS associate form labels with inputs usinghtmlForor wrapping
PROVIDE clear error messages that identify the field and describe how to fix the issue
AVOID using color alone to convey information
USEaria-liveregions for dynamic content updates
Files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsxservices/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsxservices/platform/components/ui/data-table/data-table-filters.tsxservices/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsxservices/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/input.tsxservices/platform/components/ui/popover.tsxservices/platform/components/ui/date-range-picker.tsx
🧠 Learnings (31)
📚 Learning: 2025-12-26T02:23:20.245Z
Learnt from: larryro
Repo: tale-project/tale PR: 35
File: services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx:58-90
Timestamp: 2025-12-26T02:23:20.245Z
Learning: In services/platform/app/(app)/dashboard/[id]/chat/components/integration-approval-card.tsx, prefer reading the approving user from the authenticated session context rather than passing a userId from the frontend. The hardcoded 'user' string can be acceptable only as a temporary placeholder during the initial implementation until a user profile feature is added; plan to replace with proper user identity via session context or user service once backend supports it.
Applied to files:
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsxservices/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsxservices/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsxservices/platform/components/ui/data-table/data-table-filters.tsxservices/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsxservices/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/input.tsxservices/platform/components/ui/popover.tsxservices/platform/components/ui/date-range-picker.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS use the Table component (`Table`, `TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`) instead of custom flex layouts; apply proper column widths using rem units and use semantic colors for all text and backgrounds
Applied to files:
services/platform/components/ui/data-table/data-table-filters.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[8px] with m-2
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/date-range-picker.module.cssservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[14px] with text-sm
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/date-range-picker.module.cssservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace m-[4px] with m-1
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[4px] with p-1
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use border-border for borders instead of border-gray-200 or border-gray-300
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace p-[8px] with p-2
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[18px] with text-lg
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use `leading-normal` instead of `leading-[normal]` in Tailwind classes
Applied to files:
services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[20px] with text-xl
Applied to files:
services/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[24px] with text-2xl
Applied to files:
services/platform/components/ui/dropdown-menu.tsxservices/platform/components/ui/popover.tsx
📚 Learning: 2025-11-30T03:53:00.316Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/convex_rules.mdc:0-0
Timestamp: 2025-11-30T03:53:00.316Z
Learning: Applies to package.json : Always add `types/node` to `package.json` when using any Node.js built-in modules in Convex functions
Applied to files:
services/platform/package.json
📚 Learning: 2025-10-03T11:34:20.628Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/convex_rules.mdc:0-0
Timestamp: 2025-10-03T11:34:20.628Z
Learning: Applies to package.json : Add types/node when using Node.js built-in modules
Applied to files:
services/platform/package.json
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Convert pixel-based width/height utilities to rem using a 16px base (e.g., w-[278px] → w-[17.375rem])
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use standard font size classes instead of arbitrary values: `text-xs` for 12px, `text-sm` for 14px, `text-base` for 16px, `text-lg` for 18px, `text-xl` for 20px, `text-2xl` for 24px
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Convert pixel values to rem using the 16px base for width and height measurements (e.g., `w-[278px]` → `w-[17.375rem]`, `h-[48px]` → `h-[3rem]`, `min-w-[120px]` → `min-w-[7.5rem]`, `max-w-[400px]` → `max-w-[25rem]`)
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : Use semantic spacing classes when available: `p-1` for 4px, `p-2` for 8px, `m-1` for 4px, `m-2` for 8px
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[12px] with text-xs
Applied to files:
services/platform/components/ui/date-range-picker.module.cssservices/platform/components/ui/popover.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use text-foreground for primary text instead of text-gray-950 or text-black
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-11-25T04:37:44.394Z
Learnt from: CR
Repo: tale-project/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-11-25T04:37:44.394Z
Learning: Applies to **/*.{tsx,jsx} : NEVER use hardcoded colors like `text-gray-500`, `bg-gray-100`, `border-gray-200`; ALWAYS use design system semantic colors: `text-foreground` for primary text, `text-muted-foreground` for secondary text, `bg-background` for main backgrounds, `bg-muted` for subtle backgrounds and hover states, `border-border` for borders
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use semantic design-system colors for all text and backgrounds within tables
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Never use hardcoded Tailwind gray/black/white color utilities (e.g., text-gray-500, bg-gray-100, border-gray-200, text-black)
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use bg-muted for subtle backgrounds and hover states instead of bg-gray-100 or bg-gray-50
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2026-01-05T12:04:10.554Z
Learnt from: CR
Repo: tale-project/tale PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-05T12:04:10.554Z
Learning: Applies to **/*.{tsx,jsx} : AVOID using color alone to convey information
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use text-muted-foreground for secondary text instead of text-gray-500 or text-gray-600
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Use bg-background for main backgrounds instead of bg-white
Applied to files:
services/platform/components/ui/date-range-picker.module.css
📚 Learning: 2026-01-05T12:04:10.554Z
Learnt from: CR
Repo: tale-project/tale PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-05T12:04:10.554Z
Learning: Applies to **/*.{tsx,jsx} : ENSURE all interactive elements are keyboard accessible and have visible focus states
Applied to files:
services/platform/components/ui/input.tsx
📚 Learning: 2026-01-05T12:04:10.554Z
Learnt from: CR
Repo: tale-project/tale PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-05T12:04:10.554Z
Learning: Applies to **/*.{tsx,jsx} : USE `cva` if a component has multiple variants
Applied to files:
services/platform/components/ui/input.tsx
📚 Learning: 2026-01-05T12:04:10.554Z
Learnt from: CR
Repo: tale-project/tale PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-05T12:04:10.554Z
Learning: Applies to **/*.{tsx,jsx} : ALWAYS associate form labels with inputs using `htmlFor` or wrapping
Applied to files:
services/platform/components/ui/input.tsx
📚 Learning: 2025-10-01T17:12:39.508Z
Learnt from: CR
Repo: talecorp/poc2 PR: 0
File: .cursor/rules/figma_rules.mdc:0-0
Timestamp: 2025-10-01T17:12:39.508Z
Learning: Applies to **/*.tsx : Replace text-[16px] with text-base
Applied to files:
services/platform/components/ui/popover.tsx
🧬 Code graph analysis (4)
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsx (1)
services/platform/components/ui/popover.tsx (1)
PopoverContent(41-41)
services/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsx (1)
services/platform/components/ui/popover.tsx (1)
PopoverContent(41-41)
services/platform/components/ui/data-table/data-table-filters.tsx (1)
services/platform/components/ui/popover.tsx (1)
PopoverContent(41-41)
services/platform/components/ui/date-range-picker.tsx (3)
services/platform/lib/utils/date/format.ts (1)
DatePreset(4-4)services/platform/components/ui/button.tsx (1)
Button(134-134)services/platform/components/ui/dropdown-menu.tsx (4)
DropdownMenu(198-198)DropdownMenuTrigger(199-199)DropdownMenuContent(200-200)DropdownMenuItem(201-201)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build Docker Image
🔇 Additional comments (18)
services/platform/package.json (1)
132-132: Package version is valid and secure. The specified version ofbaseline-browser-mapping(^2.9.11) is the current latest version available on npm, and no publicly reported security vulnerabilities are known for this package.services/platform/app/(app)/(auth)/log-in/components/log-in-form.tsx (1)
134-134: LGTM - Styling simplification aligns with base input changes.The removal of
border-borderis appropriate since theInputcomponent now includesring-1 ring-borderin its baseinputVariants(as updated in input.tsx). The input will receive consistent border styling from the component's default styles.services/platform/components/ui/dropdown-menu.tsx (1)
63-63: LGTM - Border radius standardization.The border radius change from
rounded-xltorounded-lgaligns with the broader UI consistency updates across dropdown and popover components in this PR.Also applies to: 81-81
services/platform/components/ui/input.tsx (1)
12-12: LGTM - Effective consolidation of ring styles.The refactoring consolidates ring border and focus styles into the base
inputVariants, eliminating duplication across password and non-password input paths. The addition ofring-1 ring-borderprovides a consistent default border, whilefocus-visible:ring-primaryensures accessible focus states across all input variants.Also applies to: 126-126
services/platform/messages/en.json (1)
7-20: LGTM - i18n support for date picker preset system.The new translation keys properly support the date range picker preset system mentioned in the PR summary. The preset labels follow a consistent naming pattern, and the
resetaction is appropriately placed in the generic actions namespace for potential reuse across components.Also applies to: 50-50
services/platform/components/ui/date-range-picker.module.css (2)
36-38: LGTM - Improved accessibility with larger touch targets.Increasing the day cell dimensions from
1.75remto2remimproves both accessibility and readability. The larger clickable areas benefit touch interactions and meet accessibility guidelines for minimum target sizes.Note: The day cells use
line-height: 1(line 59) while day-name cells useline-height: 2rem(line 38). This difference appears intentional since day cells use flexbox centering (inline-flex items-center justify-center), but verify this produces the desired vertical alignment.Also applies to: 57-59
237-263: LGTM - Enhanced dark mode visibility for date ranges.The dark mode improvements are well-implemented:
- Increased in-range opacity (
0.1→0.2) provides better visual feedback- New explicit rules for
range-startandrange-endstates ensure primary colors display correctly in dark mode- Covers both
in-rangeandin-selecting-rangestates consistentlyThese changes address potential visibility issues where range endpoints might have been difficult to distinguish in dark mode.
services/platform/app/(app)/dashboard/[id]/(knowledge)/customers/components/customer-filter.tsx (1)
87-87: LGTM! Consistent styling refinement applied.The
space-y-0className removes default vertical spacing within the PopoverContent, allowing more precise control through child components like FilterSection. This change is part of a consistent UI update applied across all filter components in the PR.services/platform/app/(app)/dashboard/[id]/(knowledge)/vendors/components/vendor-filter.tsx (1)
84-84: LGTM! Consistent styling refinement applied.The
space-y-0className aligns with the same styling adjustment made across all filter components in this PR, ensuring consistent vertical spacing control within PopoverContent.services/platform/app/(app)/dashboard/[id]/automations/[amId]/executions/components/executions-filter-dropdown.tsx (1)
78-78: LGTM! Consistent styling refinement applied.The
space-y-0className maintains consistency with the vertical spacing adjustments made across all PopoverContent instances in filter components throughout this PR.services/platform/components/ui/data-table/data-table-filters.tsx (1)
147-147: LGTM! Consistent styling refinement applied.The
space-y-0className ensures consistent vertical spacing across all data table filter popovers. Since this is a reusable component, the change benefits all data tables throughout the application.services/platform/app/(app)/dashboard/[id]/conversations/components/filter-dropdown.tsx (1)
119-119: LGTM! Consistent styling refinement applied.The
space-y-0className completes the uniform styling adjustment across all filter PopoverContent components in this PR, ensuring consistent vertical spacing behavior throughout the application.services/platform/components/ui/popover.tsx (1)
28-31: LGTM!The border radius change from
rounded-xltorounded-lgaligns with the broader UI styling updates in this PR (consistent with dropdown-menu.tsx changes). The implementation is clean with proper class composition usingcn().services/platform/components/ui/date-range-picker.tsx (5)
3-33: LGTM!Imports are well-organized with proper aliasing for
CalendarDaysasCalendarIcon. The new date-fns functions and dropdown components are necessary for the preset functionality.
46-69: LGTM!The
getPresetDateRangefunction correctly calculates date ranges for all preset options. The switch statement exhaustively covers allDatePresetvalues, and TypeScript's exhaustiveness checking ensures type safety.
71-105: LGTM!The preset detection logic correctly normalizes dates with
startOfDaybefore comparison and handles null inputs appropriately. UsingisSameDayfor comparison is the right approach.
124-156: LGTM!The
DateInputHeadercomponent is properly memoized and uses semantic button elements with correcttype="button"attributes. The styling updates usingsize-6are consistent with Tailwind conventions.
347-359: LGTM!The reset button uses proper semantic HTML with
type="button", appropriate styling with the ghost variant, and i18n for the label. Good implementation.
1 participant
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.