Refine insights

src/admin/insights/AdminAppInsightsClient.tsx

@@ -10,7 +10,6 @@ import { FaTag } from 'react-icons/fa';
 import { FaRegCalendar } from 'react-icons/fa6';
 import {
   HiOutlinePhotograph,
-  HiOutlineRefresh,
   HiSparkles,
 } from 'react-icons/hi';
 import { MdLightbulbOutline } from 'react-icons/md';
@@ -27,6 +26,8 @@ import {
 } from '@/app-core/config';
 import { AdminAppInsight } from '.';
 import EnvVar from '@/components/EnvVar';
+import { IoSyncCircle } from 'react-icons/io5';
+import clsx from 'clsx/lite';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -68,6 +69,37 @@ export default function AdminAppInsightsClient({
     <div className="space-y-6 md:space-y-8">
       {(codeMeta?.isBaseRepo || codeMeta?.isForkedFromBase || debug) && <>
         <ScoreCard title="Build details">
+          {(codeMeta?.behindBy || debug) &&
+            <ScoreCardRow
+              icon={<IoSyncCircle
+                size={18}
+                className="text-blue-500"
+              />}
+              content={<>
+                This fork is
+                {' '}
+                <span className={clsx(
+                  'text-blue-600 bg-blue-100/70',
+                  'dark:text-blue-400 dark:bg-blue-900/50',
+                  'px-1.5 pt-[1px] pb-0.5 rounded-md',
+                )}>
+                  {codeMeta?.behindBy ?? 9} commits
+                </span>
+                {' '}
+                behind
+              </>}
+              additionalContent={<>
+                <a
+                  href={codeMeta?.urlRepo}
+                  target="blank"
+                  className="underline"
+                >
+                  Sync your fork
+                </a>
+                {' '}
+                to receive the latest fixes and features
+              </>}
+            />}
           <ScoreCardRow
             icon={<BiLogoGithub size={17} />}
             content={<div
@@ -111,17 +143,6 @@ export default function AdminAppInsightsClient({
               </div>
             </div>}
           />
-          {(codeMeta?.behindBy || debug) &&
-            <ScoreCardRow
-              icon={<HiOutlineRefresh
-                size={17}
-                className="translate-x-[0.5px] text-blue-500"
-              />}
-              content={`This fork is ${codeMeta?.behindBy ?? 9} commits behind`}
-              additionalContent={<>
-                Sync your fork to receive new features and fixes
-              </>}
-            />}
         </ScoreCard>
       </>}
       <ScoreCard title="Template recommendations">
@@ -132,7 +153,7 @@ export default function AdminAppInsightsClient({
           />}
           content="AI enabled without rate limiting"
           // eslint-disable-next-line max-len
-          additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting."
+          additionalContent="Create Vercel KV store and link o this project in order to enable rate limiting."
         />}
         {(noAi || debug) && <ScoreCardRow
           icon={<MdLightbulbOutline size={19} />}

src/components/EnvVar.tsx

@@ -20,8 +20,8 @@ export default function EnvVar({
       <span className="inline-flex items-center gap-1">
         <span className={clsx(
           'text-[11px] font-medium tracking-wider',
-          'px-1 py-[0.5px]',
-          'rounded-[4px]',
+          'px-1.5 py-[0.5px]',
+          'rounded-md',
           'bg-gray-100 dark:bg-gray-800',
         )}>
           {variable}{value && ` = ${value}`}

src/components/ScoreCardRow.tsx

@@ -1,6 +1,6 @@
-import { clsx } from 'clsx';
+import { clsx } from 'clsx/lite';
 import { ReactNode, useState } from 'react';
-import { FaMinus, FaPlus } from 'react-icons/fa6';
+import { LuChevronsDownUp, LuChevronsUpDown } from 'react-icons/lu';
 
 export default function ScoreCardRow({
   icon,
@@ -39,11 +39,15 @@ export default function ScoreCardRow({
       {additionalContent && <button
         type="button"
         onClick={() => setIsExpanded(!isExpanded)}
-        className="px-[9px] self-start"
+        className={clsx(
+          'flex items-center justify-center',
+          'w-9 h-8',
+          '*:shrink-0',
+        )}
       >
         {isExpanded
-          ? <FaMinus />
-          : <FaPlus />}
+          ? <LuChevronsDownUp size={16} />
+          : <LuChevronsUpDown size={16} />}
       </button>}
     </div>
   );

tailwind.css

@@ -304,8 +304,7 @@
   }
   a, .link {
     @apply
-      hover:text-gray-600
-      hover:dark:text-gray-400
+      hover:text-medium
   }
 }