mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Danny White
5fbf1ac4ff
## Problem Some destination marks need different assets to maintain contrast across light and dark surfaces. Their paths are also duplicated between Pipelines and Wrappers. ## Solution Add a shared brand-icon registry that supports either one asset or light and dark variants. Pipeline destination logos resolve against the active theme, while Wrappers continue using the light variant for their white logo tiles. This keeps single-asset destinations unchanged and preserves the existing monogram treatment where applicable. | Light | Dark | | --- | --- | | <img width="926" height="742" alt="CleanShot 2026-09-30 at 15 03 31@2x" src="https://github.com/user-attachments/assets/d76e5995-1bb8-4cb7-b991-c5dc1a5d8cb0" /> | <img width="926" height="732" alt="CleanShot 2026-09-30 at 15 03 03@2x" src="https://github.com/user-attachments/assets/83d45f30-3bf6-4ddc-8607-e27628cb4966" /> | ## Review instructions 1. Open `/project/<ref>/database/replication` with pipelines using the themed destination marks. 2. Switch between light and dark themes from the account menu. 3. Confirm each themed mark swaps assets and remains legible in the pipeline list, diagram, and child-route header. 4. Open Database Integrations and confirm the corresponding Wrapper tiles continue using their light-surface assets. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the BigQuery, ClickHouse, DuckLake, and Snowflake icons in integration and replication views to use branded marks. Icons now use theme-appropriate variants where available, helping them display consistently across light and dark themes. ClickHouse’s previous “CH” monogram is replaced with its branded mark. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}