From b56b4d7a8b42379339c130bf90e17ed0bc2f8b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ji=C5=99=C3=AD=20Hofman?= <jiri.hofman@gmail.com>
Date: Sat, 1 Feb 2025 21:52:53 +0100
Subject: [PATCH] feat(ui): add upgrade icon to VercelInfo component for
 Next.js version alerts

---
 app/components/vercel-info.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/vercel-info.jsx b/app/components/vercel-info.jsx
index a134640..f53dd91 100644
--- a/app/components/vercel-info.jsx
+++ b/app/components/vercel-info.jsx
@@ -3,6 +3,7 @@ import { getNextjsLatestRelease, getRepositoryPackageJson, checkAppJsxExistence
 import Popover from './popover';
 import { RiTailwindCssFill } from "react-icons/ri";
 import { SiReactbootstrap } from 'react-icons/si';
+import { MdUpgrade } from "react-icons/md";
 
 export const VercelInfo = async ({ info }) => {
 
@@ -38,7 +39,7 @@ export const VercelInfo = async ({ info }) => {
 	// Icons copied from https://vercel.com/design/brands
 
 	const upgradeIcon = info.framework === 'nextjs' && nextjsVersion && nextjsVersion < nextjsLatestRelease.tagName
-		? <Popover button={<span style={{ fontSize: 'medium' }}>⏫</span>} content={<span><p><strong>Upgrade available</strong></p>Next.js: {nextjsVersion} ➡️ {nextjsLatestRelease.tagName}</span>} />
+		? <Popover button={<MdUpgrade color='white' size={'20'} className='-mb-1' />} content={<span><p><strong>Upgrade available</strong></p>Next.js: {nextjsVersion} ➡️ {nextjsLatestRelease.tagName}</span>} />
 		: null;
 
 	const vercelIcon = <Popover button={<svg aria-label="Vercel logomark" height="16" role="img" style={{ width: 'auto', overflow: 'visible' }} viewBox="0 0 74 64">