website: add join program link, reorganize icons, UI tweaks (#50)

Author: Simek

package.json

@@ -2,7 +2,7 @@
   "name": "nightly-tests",
   "description": "Nightly integration tests for React Native",
   "version": "0.0.0",
-  "private": "true",
+  "private": true,
   "workspaces": [
     "website"
   ],

website/app/page.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 
 import Table from '~/components/Table';
-import AndroidIcon from '~/public/android-icon.svg';
-import IOSIcon from '~/public/ios-icon.svg';
+import AndroidIcon from '~/public/icons/android-icon.svg';
+import IOSIcon from '~/public/icons/ios-icon.svg';
 
 export default function Home() {
   return (

website/components/EntryNotes.tsx

@@ -1,4 +1,4 @@
-import InfoIcon from '~/public/info-icon.svg';
+import InfoIcon from '~/public/icons/info-icon.svg';
 
 import Tooltip from './Tooltip';
 

website/components/GitHubRepoLink.tsx

@@ -1,4 +1,4 @@
-import GitHubLogo from '~/public/github.svg';
+import GitHubLogo from '~/public/icons/github-icon.svg';
 
 import Tooltip from './Tooltip';
 

website/components/Header.tsx

@@ -5,11 +5,14 @@ import { useTheme } from 'next-themes';
 import { twMerge } from 'tailwind-merge';
 
 import { useSearch } from '~/context/SearchContext';
-import GitHubLogo from '~/public/github.svg';
+import GitHubLogo from '~/public/icons/github-icon.svg';
+import PlusIcon from '~/public/icons/plus-icon.svg';
+import SearchIcon from '~/public/icons/search-icon.svg';
+import ThemeDarkIcon from '~/public/icons/theme-dark-icon.svg';
+import ThemeLightIcon from '~/public/icons/theme-light-icon.svg';
 import Logo from '~/public/logo.svg';
-import SearchIcon from '~/public/search-icon.svg';
-import ThemeDarkIcon from '~/public/theme-dark.svg';
-import ThemeLightIcon from '~/public/theme-light.svg';
+
+import Tooltip from './Tooltip';
 
 export default function Header() {
   const { resolvedTheme, setTheme } = useTheme();
@@ -41,22 +44,37 @@ export default function Header() {
           />
         </div>
         <div className="flex flex-row gap-2 ml-auto">
-          <div
-            role="button"
-            tabIndex={0}
-            className="cursor-pointer p-1.5 rounded-full hover:bg-hover"
-            onClick={() => {
-              resolvedTheme === 'dark' ? setTheme('light') : setTheme('dark');
-            }}>
-            <ThemeLightIcon className="text-secondary size-6 hidden dark:block" />
-            <ThemeDarkIcon className="text-secondary size-6 dark:hidden" />
-          </div>
-          <Link
-            href="https://github.com/react-native-community/nightly-tests"
-            target="_blank"
-            className="p-1.5 rounded-full hover:bg-hover">
-            <GitHubLogo className="text-secondary size-6" />
-          </Link>
+          <Tooltip
+            content="Add package to the program"
+            side="bottom"
+            sideOffset={4}>
+            <Link
+              href="https://github.com/react-native-community/discussions-and-proposals/discussions/931#discussion-8827727"
+              target="_blank"
+              className="p-1.5 rounded-full hover:bg-hover">
+              <PlusIcon className="text-secondary size-6" />
+            </Link>
+          </Tooltip>
+          <Tooltip content="Toggle theme" side="bottom" sideOffset={4}>
+            <div
+              role="button"
+              tabIndex={0}
+              className="cursor-pointer p-1.5 rounded-full hover:bg-hover"
+              onClick={() => {
+                resolvedTheme === 'dark' ? setTheme('light') : setTheme('dark');
+              }}>
+              <ThemeLightIcon className="text-secondary size-6 hidden dark:block" />
+              <ThemeDarkIcon className="text-secondary size-6 dark:hidden" />
+            </div>
+          </Tooltip>
+          <Tooltip content="GitHub" side="bottom" sideOffset={4}>
+            <Link
+              href="https://github.com/react-native-community/nightly-tests"
+              target="_blank"
+              className="p-1.5 rounded-full hover:bg-hover">
+              <GitHubLogo className="text-secondary size-6" />
+            </Link>
+          </Tooltip>
         </div>
       </div>
     </header>

website/components/InlineLink.tsx

@@ -2,7 +2,7 @@ import Link, { type LinkProps } from 'next/link';
 import { AnchorHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
-import ExternalLinkIcon from '~/public/external-link-icon.svg';
+import ExternalLinkIcon from '~/public/icons/external-link-icon.svg';
 
 type Props = LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>;
 

website/package.json

@@ -15,14 +15,14 @@
   "dependencies": {
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-table": "^8.21.3",
-    "next": "^16.0.7",
+    "next": "^16.0.8",
     "next-themes": "^0.4.6",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "16.0.7",
+    "@next/eslint-plugin-next": "16.0.8",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^22.18.13",