nuonco · nnnnat · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024
diff --git a/app/[installer-slug]/page.tsx b/app/[installer-slug]/page.tsx
@@ -1,10 +1,10 @@
-import Link from "next/link";
 import { createInstall } from "@/app/[installer-slug]/actions";
 import { NUON_API_URL } from "@/common";
 import {
   AWSInstallerFormFields,
   AppInputFields,
   AzureInstallerFormFields,
+  Link,
   ScrollToButton,
   StepOneAWS,
   StepOneAzure,
@@ -36,10 +36,7 @@ export default async function Installer({ params, searchParams }) {
   return (
     <>
       <header className="flex flex-auto flex-col gap-12 md:gap-24">
-        <Link
-          className="text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900"
-          href="/"
-        >
+        <Link className="w-fit" href="/">
           View all installation options
         </Link>
         <div className="flex flex-col gap-4">
@@ -62,12 +59,14 @@ export default async function Installer({ params, searchParams }) {
               className="inline-flex align-middle"
               src="/azure-logo.svg"
               width="40px"
+              alt="azure"
             />
           ) : (
             <img
               className="inline-flex align-middle"
               src="/aws-logo.svg"
               width="80px"
+              alt="aws"
             />
           )}{" "}
           account.
@@ -80,7 +79,7 @@ export default async function Installer({ params, searchParams }) {
           </ScrollToButton>
 
           <Link
-            className="border border-current text-sm px-4 py-1.5 rounded hover:text-fuchsia-600 focus:text-fuchsia-600"
+            className="border border-current text-gray-950 dark:text-gray-50 text-sm px-4 py-1.5 rounded"
             href={installer?.metadata?.documentation_url}
             target="_blank"
             rel="noreferrer"
@@ -148,7 +147,7 @@ export default async function Installer({ params, searchParams }) {
               />
             )}
 
-            <button className="rounded text-sm text-gray-50 bg-fuchsia-600 hover:bg-fuchsia-900 focus:bg-fuchsia-900 active:bg-fuchsia-800 px-4 py-1.5 w-fit">
+            <button className="rounded text-sm text-gray-50 bg-fuchsia-600 hover:bg-fuchsia-700 focus:bg-fuchsia-700 active:bg-fuchsia-800 px-4 py-1.5 w-fit">
               Submit
             </button>
           </form>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Link } from "@/components";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -16,10 +17,55 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html className="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50" lang="en">
+    <html
+      className="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50"
+      lang="en"
+    >
       <body className={`${inter.className} w-full h-dvh`}>
         <div className="flex flex-col w-full max-w-5xl mx-auto p-6 py-12 md:py-24 gap-12 md:gap-24">
           {children}
+          <footer className="flex items-center justify-between">
+            <div className="flex gap-2 items-center">
+              <span className="text-xs">&copy; {new Date().getFullYear()}</span>
+              <Link
+                href="https://nuon.co"
+                className="text-xs"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Nuon
+              </Link>
+            </div>
+            <div className="flex gap-6 items-center">
+              <Link
+                href="https://docs.nuon.co/guides/creating-an-installer"
+                className="text-xs"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Installer docs
+              </Link>
+              <Link
+                href="https://github.com/nuonco"
+                className="text-xs"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Github
+              </Link>
+              <Link
+                href="https://join.slack.com/t/nuoncommunity/shared_invite/zt-1q323vw9z-C8ztRP~HfWjZx6AXi50VRA"
+                className="text-xs"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Slack
+              </Link>
+              <Link href="mailto:support@nuon.co" className="text-xs">
+                support@nuon.co
+              </Link>
+            </div>
+          </footer>
         </div>
       </body>
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import { NUON_API_URL } from "@/common";
+import { Link } from "@/components";
 
 async function getInstallers(): Promise<Array<Record<string, any>>> {
   const res = await fetch(`${NUON_API_URL}/v1/installers`, {
@@ -11,7 +11,7 @@ async function getInstallers(): Promise<Array<Record<string, any>>> {
   });
 
   if (!res.ok) {
-     console.debug(await res.json());
+    console.debug(await res.json());
     throw new Error("Can't fetch installers");
   }
 
@@ -24,29 +24,40 @@ export default async function Home() {
   return (
     <>
       <header>
-        <h1 className="text-4xl font-bold">Nuon installers</h1>
+        <h1>
+          <Link href="/">
+            <span className="sr-only">Nuon</span>
+            <img
+              className="w-auto h-7 relative block dark:hidden"
+              src="https://mintlify.s3-us-west-1.amazonaws.com/nuoninc/logo/light.svg"
+              alt="light logo"
+            />
+            <img
+              className="w-auto h-7 relative hidden dark:block"
+              src="https://mintlify.s3-us-west-1.amazonaws.com/nuoninc/logo/dark.svg"
+              alt="dark logo"
+            />
+          </Link>
+        </h1>
       </header>
-      <main>
+      <main className="flex flex-col gap-6">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6">
           {installers.length &&
             installers.map((installer) => (
               <div
-                className="p-6 border flex flex-col gap-4 rounded justify-between items-start"
+                className="p-6 bg-gray-100 dark:bg-gray-900 flex flex-col gap-4 rounded justify-between items-start"
                 key={installer?.id}
               >
                 <span>
-                  <h2 className="text-xl font-semibold mb-2">
+                  <h2 className="text-lg font-semibold mb-2">
                     {installer?.app_installer_metadata?.name}
                   </h2>
                   <p className="text-xs leading-relaxed">
                     {installer?.app_installer_metadata?.description}
                   </p>
                 </span>
 
-                <Link
-                  className="text-fuchsia-500 hover:text-fuchsia-700 focus:text-fuchsia-700"
-                  href={`/${installer?.slug}`}
-                >
+                <Link className="text-sm" href={`/${installer?.slug}`}>
                   Install now
                 </Link>
               </div>

diff --git a/components/Link.tsx b/components/Link.tsx
@@ -0,0 +1,17 @@
+import React, { type FC } from "react";
+import NextLink from "next/link";
+
+export const Link: FC<React.ComponentProps<typeof NextLink>> = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  return (
+    <NextLink
+      className={`text-fuchsia-600 dark:text-fuchsia-500 hover:text-fuchsia-700 focus:text-fuchsia-700 ${className}`}
+      {...props}
+    >
+      {children}
+    </NextLink>
+  );
+};
diff --git a/components/ScrollToButton.tsx b/components/ScrollToButton.tsx
@@ -17,7 +17,7 @@ export const ScrollToButton: FC<IScrollToButton> = ({
 
   return (
     <button
-      className={`rounded text-sm text-gray-50 bg-fuchsia-600 hover:bg-fuchsia-900 focus:bg-fuchsia-900 active:bg-fuchsia-800 px-4 py-1.5 ${className}`}
+      className={`rounded text-sm text-gray-50 bg-fuchsia-600 hover:bg-fuchsia-700 focus:bg-fuchsia-700 active:bg-fuchsia-800 px-4 py-1.5 ${className}`}
       onClick={() => {
         "use client";
         document?.getElementById(elementId)?.scrollIntoView({

diff --git a/components/StepOneAWS.tsx b/components/StepOneAWS.tsx
@@ -1,5 +1,5 @@
-import Link from "next/link";
 import React, { type FC } from "react";
+import { Link } from "@/components";
 
 export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
   installer,
@@ -16,7 +16,6 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
           This IAM role is only used when first provisioning your install, or
           when deprovisioning and can be removed after setup. Read more about{" "}
           <Link
-            className="text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900"
             href="https://docs.nuon.co/guides/install-access-permissions"
             target="_blank"
             rel="noreferrer"
@@ -28,7 +27,7 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
       </div>
 
       <div className="flex flex-col gap-12">
-        <div className="flex flex-col gap-2 rounded border p-6">
+        <div className="flex flex-col gap-2 rounded bg-gray-100 dark:bg-gray-900 p-6 items-start">
           <h3 className="text-md font-semibold">
             Create IAM policies with CloudFormation
           </h3>
@@ -38,14 +37,14 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
             link. This will create an IAM role granting access for{" "}
             {installer?.metadata?.name} to install Sourcegraph. Please use the
             stack output called{" "}
-            <code className="bg-gray-600 text-yellow-400 font-monospaced px-2 py-1 text-xs rounded-sm h-[22px] inline-flex">
+            <code className="bg-gray-800 text-orange-400 font-monospaced px-2 py-1 rounded-sm h-[22px] inline-flex text-[11px] tracking-wide">
               RoleARN
             </code>{" "}
             as an input in step 2.
           </p>
 
           <Link
-            className="text-sm text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900 mt-4"
+            className="text-sm mt-4"
             href={`https://us-west-2.console.aws.amazon.com/cloudformation/home#/stacks/quickcreate?templateUrl=${installer?.app_sandbox?.artifacts?.cloudformation_stack_template}&stackName=nuon-${installer?.app_sandbox?.public_git_vcs_config?.directory}-permissions`}
             target="_blank"
             rel="noreferrer"
@@ -54,7 +53,7 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
           </Link>
         </div>
 
-        <div className="flex flex-col gap-2 rounded border p-6">
+        <div className="flex flex-col gap-2 rounded bg-gray-100 dark:bg-gray-900 p-6 items-start">
           <h3 className="text-md font-semibold">
             Create IAM policies with Terraform
           </h3>
@@ -65,7 +64,7 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
           </p>
 
           <Link
-            className="text-sm text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900 mt-4"
+            className="text-sm mt-4"
             href="https://github.com/nuonco/sandboxes/tree/main/iam-role"
             target="_blank"
             rel="noreferrer"
@@ -74,7 +73,7 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
           </Link>
         </div>
 
-        <div className="flex flex-col gap-2 rounded border p-6">
+        <div className="flex flex-col gap-2 rounded bg-gray-100 dark:bg-gray-900 p-6">
           <h3 className="text-md font-semibold">
             Create IAM policies manually
           </h3>
@@ -85,25 +84,25 @@ export const StepOneAWS: FC<{ installer: Record<string, any> }> = ({
             install, and can be added later if desired.
           </p>
 
-          <div className="flex gap-2 mt-4">
+          <div className="flex gap-2 mt-4 items-center">
             <Link
-              className="text-sm text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900"
+              className="text-sm"
               href={installer?.app_sandbox?.artifacts?.trust_policy}
               target="_blank"
               rel="noreferrer"
             >
               Trust policy
             </Link>
             <Link
-              className="text-sm text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900"
+              className="text-sm"
               href={installer?.app_sandbox?.artifacts?.provision_policy}
               target="_blank"
               rel="noreferrer"
             >
               Provision policy
             </Link>
             <Link
-              className="text-sm text-fuchsia-600 hover:text-fuchsia-900 focus:text-fuchsia-900"
+              className="text-sm"
               href={installer?.app_sandbox?.artifacts?.deprovision_policy}
               target="_blank"
               rel="noreferrer"

diff --git a/components/index.ts b/components/index.ts
@@ -2,6 +2,7 @@ export * from "./AWSInstallerFormFields";
 export * from "./AppInputFields";
 export * from "./AzureInstallerFormFields";
 export * from "./Install";
+export * from "./Link";
 export * from "./ScrollToButton";
 export * from "./StepOneAWS";
 export * from "./StepOneAzure";