From 689b7d1fe6fd325b7bfaec5162cff2dbfd83bef5 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Thu, 28 Mar 2024 15:21:57 +0100
Subject: [PATCH] fix: Switch to white icon for vercel when in dark mode
 (#22316)

* Fix the vercel icons to follow the black/white color scheme.

* Remove unused CSS classes.
---
 .../interfaces/Home/ProjectList/ProjectCard.tsx       | 11 ++++++-----
 .../VercelIntegrationWindowLayout.tsx                 |  5 +++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index bfc8edc5481..7834f039f58 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -5,6 +5,7 @@ import type { IntegrationProjectConnection } from 'data/integrations/integration
 import type { ProjectInfo } from 'data/projects/projects-query'
 import type { ResourceWarning } from 'data/usage/resource-warnings-query'
 import { BASE_PATH } from 'lib/constants'
+import InlineSVG from 'react-inlinesvg'
 import { inferProjectStatus } from './ProjectCard.utils'
 import { ProjectCardStatus } from './ProjectCardStatus'
 
@@ -43,22 +44,22 @@ const ProjectCard = ({
             <span className="text-sm lowercase text-foreground-light">{desc}</span>
             <div className="flex items-center space-x-1.5">
               {isVercelIntegrated && (
-                <div className="w-fit p-1 border rounded-md flex items-center border-controler">
-                  <img
+                <div className="w-fit p-1 border rounded-md flex items-center text-black dark:text-white">
+                  <InlineSVG
                     src={`${BASE_PATH}/img/icons/vercel-icon.svg`}
-                    alt="Vercel Icon"
+                    title="Vercel Icon"
                     className="w-3"
                   />
                 </div>
               )}
               {isBranchingEnabled && (
-                <div className="w-fit p-1 border rounded-md flex items-center border-controler">
+                <div className="w-fit p-1 border rounded-md flex items-center">
                   <GitBranch size={12} strokeWidth={1.5} />
                 </div>
               )}
               {isGithubIntegrated && (
                 <>
-                  <div className="w-fit p-1 border rounded-md flex items-center border-controler">
+                  <div className="w-fit p-1 border rounded-md flex items-center">
                     <Github size={12} strokeWidth={1.5} />
                   </div>
                   <p className="text-xs !ml-2 text-foreground-light">{githubRepository}</p>
diff --git a/apps/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx b/apps/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx
index 53e287a291a..9f272918926 100644
--- a/apps/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx
+++ b/apps/studio/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout.tsx
@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react'
+import InlineSVG from 'react-inlinesvg'
 
 import { useParams } from 'common'
 import { BASE_PATH } from 'lib/constants'
@@ -6,8 +7,8 @@ import IntegrationWindowLayout from './IntegrationWindowLayout'
 import { useIntegrationInstallationSnapshot } from 'state/integration-installation'
 
 const VERCEL_ICON = (
-  <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center">
-    <img src={`${BASE_PATH}/img/icons/vercel-icon.svg`} alt="Vercel Icon" className="w-4" />
+  <div className="bg-black shadow rounded p-1 w-8 h-8 flex justify-center items-center text-white">
+    <InlineSVG src={`${BASE_PATH}/img/icons/vercel-icon.svg`} title="Vercel Icon" className="w-4" />
   </div>
 )