mirror of
https://github.com/supabase/supabase.git
synced 2026-07-07 09:30:21 +08:00
* Add templates to RLS assistant * Update button * lint * Chore/rls assistant iteration templates styling (#21459) * Update index.tsx * update icon pack * add new classes * expose hover card * add slight shadow to scroll area * monaco editor updated * tabs border-b updated * message styling updated to use circle AI icon * templates side panel updated to use new tailwind classes and ScrollArea * Updated tab label to "Assistant" and adjusted background colors * header updated to use simpler open/close button * divide-y styling added to chat * fix tabs bg state * shadcn tooltip updated to use correct bg color and added default delay duration * updated styling of codeblocks in chat * updated open / close button. also added a tooltip * divide border styling * add 'slide in' animation option for Hover Card * update code block * switch to Card Button * Update CardButton to expose props and allow any props to be applied * init * Apply suggestions from code review * Add entry step when clicking on create new policy for rls ai * templates code replacement state highlight selected template * Ai message code replacement state highlight selected message * Opt to leave templates panel open * Fix templates to use template name in policy sql * Fixes * fix * Remove unused imports --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Styles
When to write custom styles
Tailwind should be sufficient to cover the majority of styling needs. We typically only write custom styles here in the event where we're working with an external library and we need to override some styles (e.g Monaco, or even our own UI library).
Ideally, keep custom styling here to a minimum, use tailwind directly in the pages and components where possible, so that we have less code to maintain.
If you're writing custom styles
Group custom styles into separate stylesheets based on their context. For styles which are generic and global, we can write them in main.scss.