fix(styling): fix styling inconsistencies in dark mode, fix invites fetching to show active members#1229
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR addresses two main issues: dark mode styling inconsistencies and improper invite fetching for active workspace members.
Dark Mode Styling Fixes:
The changes systematically fix dark mode color inconsistencies across the application by replacing problematic color tokens with theme-aware alternatives. Key fixes include:
- Removing
text-muted-foregroundfrom tooltips in tool-input components for better readability - Replacing
text-primarywithtext-foregroundin chat deploy success view links and wand prompt bar buttons - Removing hardcoded light mode styles (
bg-white text-gray-900) from chat input tooltips - Adding tooltip overrides to the chat.css file to maintain consistent dark tooltips in forced light mode contexts
- Removing native browser tooltip titles that don't respect custom dark mode styling
- Replacing Button components with native buttons in chat messages for more direct styling control
Active Members Functionality:
The PR enhances workspace permission management by adding a refetch function to the workspace permissions system. This allows components to manually refresh permission data, particularly important for the invite modal to show up-to-date member lists. The implementation adds refetchPermissions to the workspace permissions context and hooks, then calls it when the invite modal opens to ensure users see current active members alongside pending invitations.
Code Quality Improvements:
The changes also include beneficial refactoring, such as consolidating AI wand button functionality into the CodeEditor component (removing duplicate implementations in custom-tool-modal) and extracting a reusable DocumentList component from duplicated JSX in knowledge-base-tags dialogs. These improvements follow DRY principles and improve maintainability.
The fixes integrate well with the existing codebase architecture, leveraging established patterns like the workspace permissions provider context and the existing tooltip components' built-in dark mode support.
Confidence score: 4/5
- This PR is generally safe to merge with minor considerations around accessibility and component consistency
- Score reflects solid dark mode fixes and proper permission refetching, but includes some changes that remove established design system patterns
- Pay attention to the chat message component changes and ensure tooltip styling works consistently across all contexts
14 files reviewed, 2 comments
| <button | ||
| className='text-muted-foreground transition-colors hover:bg-muted' |
There was a problem hiding this comment.
style: Replacing Button component with native button removes accessibility features like focus management and consistent styling from the design system
| <div className='truncate font-medium text-sm' style={{ maxWidth: '300px' }}> | ||
| {doc.name} |
There was a problem hiding this comment.
style: Consider using Tailwind's max-w-[300px] instead of inline styles for consistency with the project's styling approach
| <div className='truncate font-medium text-sm' style={{ maxWidth: '300px' }}> | |
| {doc.name} | |
| <div className='truncate font-medium text-sm max-w-[300px]'> | |
| {doc.name} |
…etching to show active members (simstudioai#1229) * fix(styling): fix unreadble text in dark mode * fix styling inconsistencies in kb * refetch permissions on invite modal open --------- Co-authored-by: Vikhyath Mondreti <vikhyath@simstudio.ai>
2 participants
Summary
fix styling inconsistencies in dark mode, fix invites fetching to show active members
Type of Change
Testing
UI refreshes, NA
Checklist