refactor: minor text and styling updates

Author: canerakdas

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -10,6 +10,7 @@ import { useContext, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
+import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
 import { createSval } from '#site/next.jsx.compiler.mjs';
 import {
   ReleaseContext,
@@ -114,17 +115,10 @@ const ReleaseCodeBox: FC = () => {
         </AlertBox>
       </noscript>
 
-      {release.status === 'End-of-life' && (
-        <AlertBox
-          title={t('components.common.alertBox.warning')}
-          level="warning"
-          size="small"
-        >
-          {t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
-            link: text => <Link href="/about/previous-releases/">{text}</Link>,
-          })}
-        </AlertBox>
-      )}
+      <WithReleaseAlertBox
+        status={release.status}
+        link="/about/previous-releases"
+      />
 
       {!currentPlatform || currentPlatform.recommended || (
         <AlertBox

apps/site/components/withReleaseAlertBox.tsx

@@ -2,24 +2,38 @@ import AlertBox from '@node-core/ui-components/Common/AlertBox';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import Link from '#site/components/Link';
 import type { NodeReleaseStatus } from '#site/types';
 
 type WithReleaseAlertBoxProps = {
   status: NodeReleaseStatus;
+  link?: string;
 };
 
-const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({ status }) => {
+const WithReleaseAlertBox: FC<WithReleaseAlertBoxProps> = ({
+  status,
+  link,
+}) => {
   const t = useTranslations();
 
+  const getAlertContent = () => {
+    if (link) {
+      return t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
+        link: text => <Link href={link}>{text}</Link>,
+      });
+    }
+
+    return t('components.releaseModal.unsupportedVersionWarning');
+  };
+
   switch (status) {
     case 'End-of-life':
       return (
         <AlertBox
           title={t('components.common.alertBox.warning')}
           level="warning"
-          size="small"
         >
-          {t('components.releaseModal.unsupportedVersionWarning')}
+          {getAlertContent()}
         </AlertBox>
       );
     default:

apps/site/pages/en/download/archive.mdx

@@ -6,7 +6,7 @@ layout: download-archive
 <WithDownloadArchive>
   {({ binaries, installers, version, release, sources, navigation }) => (
     <>
-      <h1>Node.js Download Archive</h1>
+      <h1>Node.js® Download Archive</h1>
 
       <h2 className="flex items-center gap-2">
         <img
@@ -19,11 +19,11 @@ layout: download-archive
         {release.codename && ` (${release.codename})`}
       </h2>
 
-      <WithReleaseAlertBox status={release.status} />
+      <WithReleaseAlertBox status={release.status} link="/about/previous-releases" />
 
       <ReleaseOverview release={release} />
 
-      <ul>
+      <ul className='flex list-none flex-col gap-2 p-0 text-sm'>
 
         <li>
           Learn more about <Link href="/about/previous-releases">Node.js releases</Link>, including the release schedule and LTS status.

apps/site/pages/en/index.mdx

@@ -29,7 +29,7 @@ layout: home
       {({ release }) => (
         <small>
           Want new features sooner?
-          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
+          Get <b>Node.js <Link href="/download/current">{release.versionWithPrefix}</Link></b>
           <sup title="Downloads a Node.js installer for your current platform">1</sup> instead.
         </small>
       )}