feat: fix primary app color value and how it is displayed in the app

2024-10-04 12:34:50 +01:00
parent 13c0a8ceaa
commit 9c1d21fd1b
72 changed files with 90 additions and 76 deletions
--- a/packages/backend/src/apps/airtable/index.js
+++ b/packages/backend/src/apps/airtable/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.airtable.com',
  iconUrl: '{BASE_URL}/apps/airtable/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/airtable/connection',
-  primaryColor: 'FFBF00',
+  primaryColor: '#FFBF00',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/appwrite/index.js
+++ b/packages/backend/src/apps/appwrite/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: 'https://cloud.appwrite.io',
  iconUrl: '{BASE_URL}/apps/appwrite/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/appwrite/connection',
-  primaryColor: 'FD366E',
+  primaryColor: '#FD366E',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/azure-openai/index.js
+++ b/packages/backend/src/apps/azure-openai/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/azure-openai/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/azure-openai/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/carbone/index.js
+++ b/packages/backend/src/apps/carbone/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://carbone.io',
  apiBaseUrl: 'https://api.carbone.io',
-  primaryColor: '6f42c1',
+  primaryColor: '#6f42c1',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/clickup/index.js
+++ b/packages/backend/src/apps/clickup/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.clickup.com/api',
  iconUrl: '{BASE_URL}/apps/clickup/assets/favicon.svg',
  authDocUrl: 'https://automatisch.io/docs/apps/clickup/connection',
-  primaryColor: 'FD71AF',
+  primaryColor: '#FD71AF',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/code/index.js
+++ b/packages/backend/src/apps/code/index.js
@@ -8,7 +8,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/code/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/code/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: false,
  actions,
 });
--- a/packages/backend/src/apps/cryptography/index.js
+++ b/packages/backend/src/apps/cryptography/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
  actions,
 });
--- a/packages/backend/src/apps/datastore/index.js
+++ b/packages/backend/src/apps/datastore/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
  actions,
 });
--- a/packages/backend/src/apps/deepl/index.js
+++ b/packages/backend/src/apps/deepl/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://deepl.com',
  apiBaseUrl: 'https://api.deepl.com',
-  primaryColor: '0d2d45',
+  primaryColor: '#0d2d45',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/delay/index.js
+++ b/packages/backend/src/apps/delay/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
  actions,
 });
--- a/packages/backend/src/apps/discord/index.js
+++ b/packages/backend/src/apps/discord/index.js
@@ -14,7 +14,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://discord.com',
  apiBaseUrl: 'https://discord.com/api',
-  primaryColor: '5865f2',
+  primaryColor: '#5865f2',
  beforeRequest: [addAuthHeader],
  auth,
  dynamicData,
--- a/packages/backend/src/apps/disqus/index.js
+++ b/packages/backend/src/apps/disqus/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://disqus.com/api',
  iconUrl: '{BASE_URL}/apps/disqus/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/disqus/connection',
-  primaryColor: '2E9FFF',
+  primaryColor: '#2E9FFF',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/dropbox/index.js
+++ b/packages/backend/src/apps/dropbox/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://dropbox.com',
  apiBaseUrl: 'https://api.dropboxapi.com',
-  primaryColor: '0061ff',
+  primaryColor: '#0061ff',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/filter/index.js
+++ b/packages/backend/src/apps/filter/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
  actions,
 });
--- a/packages/backend/src/apps/flickr/index.js
+++ b/packages/backend/src/apps/flickr/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  iconUrl: '{BASE_URL}/apps/flickr/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/flickr/connection',
  docUrl: 'https://automatisch.io/docs/flickr',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  baseUrl: 'https://www.flickr.com/',
  apiBaseUrl: 'https://www.flickr.com/services',
--- a/packages/backend/src/apps/flowers-software/index.js
+++ b/packages/backend/src/apps/flowers-software/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://flowers-software.com',
  apiBaseUrl: 'https://webapp.flowers-software.com/api',
-  primaryColor: '02AFC7',
+  primaryColor: '#02AFC7',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/formatter/index.js
+++ b/packages/backend/src/apps/formatter/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '001F52',
+  primaryColor: '#001F52',
  actions,
  dynamicFields,
 });
--- a/packages/backend/src/apps/ghost/index.js
+++ b/packages/backend/src/apps/ghost/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/ghost/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/ghost/connection',
-  primaryColor: '15171A',
+  primaryColor: '#15171A',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/github/index.js
+++ b/packages/backend/src/apps/github/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.github.com',
  iconUrl: '{BASE_URL}/apps/github/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/github/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/gitlab/index.js
+++ b/packages/backend/src/apps/gitlab/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: 'https://gitlab.com',
  iconUrl: '{BASE_URL}/apps/gitlab/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/gitlab/connection',
-  primaryColor: 'FC6D26',
+  primaryColor: '#FC6D26',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/google-calendar/index.js
+++ b/packages/backend/src/apps/google-calendar/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://www.googleapis.com/calendar',
  iconUrl: '{BASE_URL}/apps/google-calendar/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/google-calendar/connection',
-  primaryColor: '448AFF',
+  primaryColor: '#448AFF',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/google-drive/index.js
+++ b/packages/backend/src/apps/google-drive/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://www.googleapis.com/drive',
  iconUrl: '{BASE_URL}/apps/google-drive/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/google-drive/connection',
-  primaryColor: '1FA463',
+  primaryColor: '#1FA463',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/google-forms/index.js
+++ b/packages/backend/src/apps/google-forms/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://forms.googleapis.com',
  iconUrl: '{BASE_URL}/apps/google-forms/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/google-forms/connection',
-  primaryColor: '673AB7',
+  primaryColor: '#673AB7',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/google-sheets/index.js
+++ b/packages/backend/src/apps/google-sheets/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: 'https://sheets.googleapis.com',
  iconUrl: '{BASE_URL}/apps/google-sheets/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/google-sheets/connection',
-  primaryColor: '0F9D58',
+  primaryColor: '#0F9D58',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/google-tasks/index.js
+++ b/packages/backend/src/apps/google-tasks/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: 'https://tasks.googleapis.com',
  iconUrl: '{BASE_URL}/apps/google-tasks/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/google-tasks/connection',
-  primaryColor: '0066DA',
+  primaryColor: '#0066DA',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/helix/index.js
+++ b/packages/backend/src/apps/helix/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://app.tryhelix.ai',
  iconUrl: '{BASE_URL}/apps/helix/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/helix/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/http-request/index.js
+++ b/packages/backend/src/apps/http-request/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  actions,
 });
--- a/packages/backend/src/apps/hubspot/index.js
+++ b/packages/backend/src/apps/hubspot/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://www.hubspot.com',
  apiBaseUrl: 'https://api.hubapi.com',
-  primaryColor: 'F95C35',
+  primaryColor: '#F95C35',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/invoice-ninja/index.js
+++ b/packages/backend/src/apps/invoice-ninja/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: 'https://invoicing.co/api',
  iconUrl: '{BASE_URL}/apps/invoice-ninja/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/invoice-ninja/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/jotform/index.js
+++ b/packages/backend/src/apps/jotform/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://www.jotform.com',
  apiBaseUrl: 'https://api.jotform.com',
-  primaryColor: 'FF6100',
+  primaryColor: '#FF6100',
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/mailchimp/index.js
+++ b/packages/backend/src/apps/mailchimp/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/mailchimp/assets/favicon.svg',
  authDocUrl: 'https://automatisch.io/docs/apps/mailchimp/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/mailerlite/index.js
+++ b/packages/backend/src/apps/mailerlite/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://www.mailerlite.com',
  apiBaseUrl: 'https://connect.mailerlite.com/api',
-  primaryColor: '09C269',
+  primaryColor: '#09C269',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/mattermost/index.js
+++ b/packages/backend/src/apps/mattermost/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  authDocUrl: '{DOCS_URL}/apps/mattermost/connection',
  baseUrl: 'https://mattermost.com',
  apiBaseUrl: '', // there is no cloud version of this app, user always need to provide address of own instance when creating connection
-  primaryColor: '4a154b',
+  primaryColor: '#4a154b',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addXRequestedWithHeader, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/miro/index.js
+++ b/packages/backend/src/apps/miro/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.miro.com',
  iconUrl: '{BASE_URL}/apps/miro/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/miro/connection',
-  primaryColor: 'F2CA02',
+  primaryColor: '#F2CA02',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/notion/index.js
+++ b/packages/backend/src/apps/notion/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.notion.com',
  iconUrl: '{BASE_URL}/apps/notion/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/notion/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [addAuthHeader, addNotionVersionHeader],
  auth,
--- a/packages/backend/src/apps/ntfy/index.js
+++ b/packages/backend/src/apps/ntfy/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://ntfy.sh',
  apiBaseUrl: 'https://ntfy.sh',
-  primaryColor: '56bda8',
+  primaryColor: '#56bda8',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/odoo/index.js
+++ b/packages/backend/src/apps/odoo/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://odoo.com',
  apiBaseUrl: '',
-  primaryColor: '9c5789',
+  primaryColor: '#9c5789',
  auth,
  actions,
 });
--- a/packages/backend/src/apps/openai/index.js
+++ b/packages/backend/src/apps/openai/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.openai.com',
  iconUrl: '{BASE_URL}/apps/openai/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/openai/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/pipedrive/index.js
+++ b/packages/backend/src/apps/pipedrive/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/pipedrive/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/pipedrive/connection',
-  primaryColor: 'FFFFFF',
+  primaryColor: '#FFFFFF',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/placetel/index.js
+++ b/packages/backend/src/apps/placetel/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://placetel.de',
  apiBaseUrl: 'https://api.placetel.de',
-  primaryColor: '069dd9',
+  primaryColor: '#069dd9',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/postgresql/index.js
+++ b/packages/backend/src/apps/postgresql/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '336791',
+  primaryColor: '#336791',
  auth,
  actions,
 });
--- a/packages/backend/src/apps/pushover/index.js
+++ b/packages/backend/src/apps/pushover/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.pushover.net',
  iconUrl: '{BASE_URL}/apps/pushover/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/pushover/connection',
-  primaryColor: '249DF1',
+  primaryColor: '#249DF1',
  supportsConnections: true,
  auth,
  actions,
--- a/packages/backend/src/apps/reddit/index.js
+++ b/packages/backend/src/apps/reddit/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://oauth.reddit.com',
  iconUrl: '{BASE_URL}/apps/reddit/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/reddit/connection',
-  primaryColor: 'FF4500',
+  primaryColor: '#FF4500',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/removebg/index.js
+++ b/packages/backend/src/apps/removebg/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://www.remove.bg',
  apiBaseUrl: 'https://api.remove.bg/v1.0',
-  primaryColor: '55636c',
+  primaryColor: '#55636c',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/rss/index.js
+++ b/packages/backend/src/apps/rss/index.js
@@ -9,6 +9,6 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: 'ff8800',
+  primaryColor: '#ff8800',
  triggers,
 });
--- a/packages/backend/src/apps/salesforce/index.js
+++ b/packages/backend/src/apps/salesforce/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://salesforce.com',
  apiBaseUrl: '',
-  primaryColor: '00A1E0',
+  primaryColor: '#00A1E0',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/scheduler/index.js
+++ b/packages/backend/src/apps/scheduler/index.js
@@ -9,7 +9,7 @@ export default defineApp({
  authDocUrl: '{DOCS_URL}/apps/scheduler/connection',
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '0059F7',
+  primaryColor: '#0059F7',
  supportsConnections: false,
  triggers,
 });
--- a/packages/backend/src/apps/self-hosted-llm/index.js
+++ b/packages/backend/src/apps/self-hosted-llm/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/self-hosted-llm/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/self-hosted-llm/connection',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  supportsConnections: true,
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
--- a/packages/backend/src/apps/signalwire/index.js
+++ b/packages/backend/src/apps/signalwire/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://signalwire.com',
  apiBaseUrl: '',
-  primaryColor: '044cf6',
+  primaryColor: '#044cf6',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/slack/index.js
+++ b/packages/backend/src/apps/slack/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://slack.com',
  apiBaseUrl: 'https://slack.com/api',
-  primaryColor: '4a154b',
+  primaryColor: '#4a154b',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/smtp/index.js
+++ b/packages/backend/src/apps/smtp/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '2DAAE1',
+  primaryColor: '#2DAAE1',
  auth,
  actions,
 });
--- a/packages/backend/src/apps/spotify/index.js
+++ b/packages/backend/src/apps/spotify/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://spotify.com',
  apiBaseUrl: 'https://api.spotify.com',
-  primaryColor: '000000',
+  primaryColor: '#000000',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/strava/index.js
+++ b/packages/backend/src/apps/strava/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://www.strava.com',
  apiBaseUrl: 'https://www.strava.com/api',
-  primaryColor: 'fc4c01',
+  primaryColor: '#fc4c01',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/stripe/index.js
+++ b/packages/backend/src/apps/stripe/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://stripe.com',
  apiBaseUrl: 'https://api.stripe.com',
-  primaryColor: '635bff',
+  primaryColor: '#635bff',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/telegram-bot/index.js
+++ b/packages/backend/src/apps/telegram-bot/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://telegram.org',
  apiBaseUrl: 'https://api.telegram.org',
-  primaryColor: '2AABEE',
+  primaryColor: '#2AABEE',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/todoist/index.js
+++ b/packages/backend/src/apps/todoist/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://todoist.com',
  apiBaseUrl: 'https://api.todoist.com/rest/v2',
-  primaryColor: 'e44332',
+  primaryColor: '#e44332',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/trello/index.js
+++ b/packages/backend/src/apps/trello/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  iconUrl: '{BASE_URL}/apps/trello/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/trello/connection',
  supportsConnections: true,
-  primaryColor: '0079bf',
+  primaryColor: '#0079bf',
  beforeRequest: [addAuthHeader],
  auth,
  actions,
--- a/packages/backend/src/apps/twilio/index.js
+++ b/packages/backend/src/apps/twilio/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://twilio.com',
  apiBaseUrl: 'https://api.twilio.com',
-  primaryColor: 'e1000f',
+  primaryColor: '#e1000f',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/twitter/index.js
+++ b/packages/backend/src/apps/twitter/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://twitter.com',
  apiBaseUrl: 'https://api.twitter.com',
-  primaryColor: '1da1f2',
+  primaryColor: '#1da1f2',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/typeform/index.js
+++ b/packages/backend/src/apps/typeform/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://typeform.com',
  apiBaseUrl: 'https://api.typeform.com',
-  primaryColor: '262627',
+  primaryColor: '#262627',
  beforeRequest: [addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/vtiger-crm/index.js
+++ b/packages/backend/src/apps/vtiger-crm/index.js
@@ -14,7 +14,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '39a86d',
+  primaryColor: '#39a86d',
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/webhook/index.js
+++ b/packages/backend/src/apps/webhook/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  supportsConnections: false,
  baseUrl: '',
  apiBaseUrl: '',
-  primaryColor: '0059F7',
+  primaryColor: '#0059F7',
  actions,
  triggers,
 });
--- a/packages/backend/src/apps/wordpress/index.js
+++ b/packages/backend/src/apps/wordpress/index.js
@@ -13,7 +13,7 @@ export default defineApp({
  supportsConnections: true,
  baseUrl: 'https://wordpress.com',
  apiBaseUrl: '',
-  primaryColor: '464342',
+  primaryColor: '#464342',
  beforeRequest: [setBaseUrl, addAuthHeader],
  auth,
  triggers,
--- a/packages/backend/src/apps/xero/index.js
+++ b/packages/backend/src/apps/xero/index.js
@@ -11,7 +11,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.xero.com',
  iconUrl: '{BASE_URL}/apps/xero/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/xero/connection',
-  primaryColor: '13B5EA',
+  primaryColor: '#13B5EA',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/you-need-a-budget/index.js
+++ b/packages/backend/src/apps/you-need-a-budget/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  apiBaseUrl: 'https://api.ynab.com/v1',
  iconUrl: '{BASE_URL}/apps/you-need-a-budget/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/you-need-a-budget/connection',
-  primaryColor: '19223C',
+  primaryColor: '#19223C',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/youtube/index.js
+++ b/packages/backend/src/apps/youtube/index.js
@@ -10,7 +10,7 @@ export default defineApp({
  apiBaseUrl: 'https://www.googleapis.com/youtube',
  iconUrl: '{BASE_URL}/apps/youtube/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/youtube/connection',
-  primaryColor: 'FF0000',
+  primaryColor: '#FF0000',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/src/apps/zendesk/index.js
+++ b/packages/backend/src/apps/zendesk/index.js
@@ -12,7 +12,7 @@ export default defineApp({
  apiBaseUrl: '',
  iconUrl: '{BASE_URL}/apps/zendesk/assets/favicon.svg',
  authDocUrl: '{DOCS_URL}/apps/zendesk/connection',
-  primaryColor: '17494d',
+  primaryColor: '#17494d',
  supportsConnections: true,
  beforeRequest: [addAuthHeader],
  auth,
--- a/packages/backend/test/mocks/rest/api/v1/users/get-apps.js
+++ b/packages/backend/test/mocks/rest/api/v1/users/get-apps.js
@@ -7,7 +7,7 @@ const getAppsMock = () => {
      iconUrl: 'http://localhost:3000/apps/deepl/assets/favicon.svg',
      key: 'deepl',
      name: 'DeepL',
-      primaryColor: '0d2d45',
+      primaryColor: '#0d2d45',
      supportsConnections: true,
    },
    {
@@ -17,7 +17,7 @@ const getAppsMock = () => {
      iconUrl: 'http://localhost:3000/apps/github/assets/favicon.svg',
      key: 'github',
      name: 'GitHub',
-      primaryColor: '000000',
+      primaryColor: '#000000',
      supportsConnections: true,
    },
    {
@@ -26,7 +26,7 @@ const getAppsMock = () => {
      iconUrl: 'http://localhost:3000/apps/slack/assets/favicon.svg',
      key: 'slack',
      name: 'Slack',
-      primaryColor: '4a154b',
+      primaryColor: '#4a154b',
      supportsConnections: true,
    },
    {
@@ -35,7 +35,7 @@ const getAppsMock = () => {
      iconUrl: 'http://localhost:3000/apps/webhook/assets/favicon.svg',
      key: 'webhook',
      name: 'Webhook',
-      primaryColor: '0059F7',
+      primaryColor: '#0059F7',
      supportsConnections: false,
    },
  ];
--- a/packages/web/src/components/AddNewAppConnection/index.jsx
+++ b/packages/web/src/components/AddNewAppConnection/index.jsx
@@ -121,7 +121,7 @@ function AddNewAppConnection(props) {
                >
                  <ListItemIcon sx={{ minWidth: 74 }}>
                    <AppIcon
-                      color="transparent"
+                      color={app.primaryColor}
                      url={app.iconUrl}
                      name={app.name}
                    />
--- a/packages/web/src/components/AppIcon/index.jsx
+++ b/packages/web/src/components/AppIcon/index.jsx
@@ -7,11 +7,18 @@ const inlineImgStyle = {
 function AppIcon(props) {
  const { name, url, color, sx = {}, variant = 'square', ...restProps } = props;
  const initialLetter = name?.[0];
+
  return (
    <Avatar
      component="span"
      variant={variant}
-      sx={{ bgcolor: color, display: 'flex', width: 50, height: 50, ...sx }}
+      sx={{
+        bgcolor: url ? null : color,
+        display: 'flex',
+        width: 50,
+        height: 50,
+        ...sx,
+      }}
      imgProps={{ style: inlineImgStyle }}
      src={url}
      alt={name}
--- a/packages/web/src/components/ExecutionStep/index.jsx
+++ b/packages/web/src/components/ExecutionStep/index.jsx
@@ -106,8 +106,11 @@ function ExecutionStep(props) {
        <Stack direction="row" gap={3}>
          <AppIconWrapper>
            <AppIconStatusIconWrapper>
-              <AppIcon url={app?.iconUrl} name={app?.name} />
-
+              <AppIcon
+                url={app?.iconUrl}
+                name={app?.name}
+                color={app?.primaryColor}
+              />
              {validationStatusIcon}
            </AppIconStatusIconWrapper>
          </AppIconWrapper>
--- a/packages/web/src/components/FlowStep/index.jsx
+++ b/packages/web/src/components/FlowStep/index.jsx
@@ -228,7 +228,11 @@ function FlowStep(props) {
      <Header collapsed={collapsed}>
        <Stack direction="row" alignItems="center" gap={2}>
          <AppIconWrapper>
-            <AppIcon url={app?.iconUrl} name={app?.name} />
+            <AppIcon
+              url={app?.iconUrl}
+              name={app?.name}
+              color={app?.primaryColor}
+            />

            <AppIconStatusIconWrapper>
              {validationStatusIcon}