[Improvement] Use colored icons in connector cards #650
Conversation
- Add 18 branded SVG icons to public/connectors/ - Clean naming convention (e.g., slack.svg, google-drive.svg) - Includes: Slack, Notion, GitHub, Jira, Google (Drive/Gmail/Calendar), Linear, Discord, Confluence, BookStack, ClickUp, Elasticsearch, Baidu, Airtable, YouTube, Teams, Zoom
- Use Next.js Image component for SVG icons (20x20px) - Replace 16 Tabler/Lucide icons with branded SVGs - Add support for Teams, Zoom, YouTube string cases - Clean up unused icon imports - Maintain fallback for connectors without SVG icons
- Replace IconBrandWindows with Teams SVG icon - Replace IconBrandZoom with Zoom SVG icon - Remove unused Tabler icon imports - Use getConnectorIcon helper for consistency
|
@CREDO23 is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel. A member of the Team first needs to authorize it. |
![recurseml[bot]](https://avatars.githubusercontent.com/in/1054195?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by RecurseML
🔍 Review performed on b0b7d33..e2c062c
✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (20)
• surfsense_web/components/sources/connector-data.tsx
• surfsense_web/contracts/enums/connectorIcons.tsx
• surfsense_web/public/connectors/airtable.svg
• surfsense_web/public/connectors/baidu-search.svg
• surfsense_web/public/connectors/bookstack.svg
• surfsense_web/public/connectors/clickup.svg
• surfsense_web/public/connectors/confluence.svg
• surfsense_web/public/connectors/discord.svg
• surfsense_web/public/connectors/elasticsearch.svg
• surfsense_web/public/connectors/github.svg
• surfsense_web/public/connectors/google-calendar.svg
• surfsense_web/public/connectors/google-drive.svg
• surfsense_web/public/connectors/google-gmail.svg
• surfsense_web/public/connectors/jira.svg
• surfsense_web/public/connectors/linear.svg
• surfsense_web/public/connectors/microsoft-teams.svg
• surfsense_web/public/connectors/notion.svg
• surfsense_web/public/connectors/slack.svg
• surfsense_web/public/connectors/youtube.svg
• surfsense_web/public/connectors/zoom.svg
2 participants
Description
Change Type
High-level PR Summary
This PR replaces monochrome icon components with colored SVG images for various connector cards. The main change involves refactoring the
getConnectorIconfunction to returnImagecomponents that reference colored SVG files instead of using icon components from@tabler/icons-reactandlucide-react. This update includes adding 18 new SVG files for connectors like Linear, GitHub, Slack, Notion, Discord, Jira, Google services, and others, along with cleanup of unused icon imports.⏱️ Estimated Review Time: 30-90 minutes
💡 Review Order Suggestion
surfsense_web/contracts/enums/connectorIcons.tsxsurfsense_web/components/sources/connector-data.tsxsurfsense_web/public/connectors/linear.svgsurfsense_web/public/connectors/github.svgsurfsense_web/public/connectors/baidu-search.svgsurfsense_web/public/connectors/slack.svgsurfsense_web/public/connectors/notion.svgsurfsense_web/public/connectors/discord.svgsurfsense_web/public/connectors/jira.svgsurfsense_web/public/connectors/google-calendar.svgsurfsense_web/public/connectors/google-gmail.svgsurfsense_web/public/connectors/google-drive.svgsurfsense_web/public/connectors/airtable.svgsurfsense_web/public/connectors/confluence.svgsurfsense_web/public/connectors/bookstack.svgsurfsense_web/public/connectors/clickup.svgsurfsense_web/public/connectors/elasticsearch.svgsurfsense_web/public/connectors/youtube.svgsurfsense_web/public/connectors/microsoft-teams.svgsurfsense_web/public/connectors/zoom.svg