From 12961cb2e27a6384e00d36f9d7c42aa564a430b1 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 20 Jun 2024 20:56:20 -0500
Subject: [PATCH] Refine note component

---
 src/components/Container.tsx     |  2 +-
 src/components/ErrorNote.tsx     |  2 +-
 src/components/Note.tsx          | 16 +++++++++++-----
 src/components/StatusIcon.tsx    |  2 +-
 src/components/WarningNote.tsx   |  2 +-
 src/site/SiteChecklistClient.tsx |  1 +
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 3bf5bc13..4dad11b4 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -45,7 +45,7 @@ export default function Container({
     switch (padding) {
     case 'loose': return 'p-4 md:p-24';
     case 'normal': return 'p-4 md:p-8';
-    case 'tight': return 'py-2 px-3';
+    case 'tight': return 'py-1.5 px-2.5';
     }
   };
 
diff --git a/src/components/ErrorNote.tsx b/src/components/ErrorNote.tsx
index 934fa4af..485d1866 100644
--- a/src/components/ErrorNote.tsx
+++ b/src/components/ErrorNote.tsx
@@ -14,7 +14,7 @@ export default function ErrorNote({
       color="red"
       padding="tight"
       className={className}
-      icon={<BiErrorAlt size={18} />}
+      icon={<BiErrorAlt size={18} className="translate-x-[0.5px]" />}
     >
       {children}
     </Note>
diff --git a/src/components/Note.tsx b/src/components/Note.tsx
index e141a701..5bfb3cf5 100644
--- a/src/components/Note.tsx
+++ b/src/components/Note.tsx
@@ -2,6 +2,7 @@ import { ComponentProps, ReactNode } from 'react';
 import Container from './Container';
 import AnimateItems from './AnimateItems';
 import { IoInformationCircleOutline } from 'react-icons/io5';
+import { clsx } from 'clsx/lite';
 
 export default function Note({
   children,
@@ -24,14 +25,19 @@ export default function Note({
           padding="tight"
           color={color}
         >
-          <div className="flex items-center gap-2.5">
-            <span className="shrink-0 opacity-90">
+          <div className="flex items-center gap-2.5 pb-[1px]">
+            <span className={clsx(
+              'w-5 flex justify-center shrink-0',
+              'opacity-90',
+            )}>
               {icon ?? <IoInformationCircleOutline
-                size={18}
-                className="translate-y-[1px]"
+                size={19}
+                className="translate-x-[0.5px] translate-y-[0.5px]"
               />}
             </span>
-            {children}
+            <span className="text-sm">
+              {children}
+            </span>
           </div>
         </Container>,
       ]}
diff --git a/src/components/StatusIcon.tsx b/src/components/StatusIcon.tsx
index 2021f2c0..d7031f48 100644
--- a/src/components/StatusIcon.tsx
+++ b/src/components/StatusIcon.tsx
@@ -27,7 +27,7 @@ export default function StatusIcon({
     case 'warning':
       return <BiSolidXSquare
         size={14}
-        className="text-amber-400 translate-x-[2px] translate-y-[1.5px]"
+        className="text-amber-500 translate-x-[2px] translate-y-[1.5px]"
       />;
     case 'optional':
       return <BiSolidCheckboxMinus
diff --git a/src/components/WarningNote.tsx b/src/components/WarningNote.tsx
index 488d1637..84ecc4b4 100644
--- a/src/components/WarningNote.tsx
+++ b/src/components/WarningNote.tsx
@@ -14,7 +14,7 @@ export default function WarningNote({
       color="yellow"
       padding="tight"
       className={className}
-      icon={<PiWarningBold size={18} />}
+      icon={<PiWarningBold size={17} className="translate-x-[0.5px]" />}
     >
       {children}
     </Note>
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index a460293a..f26a4759 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -327,6 +327,7 @@ export default function SiteChecklistClient({
           <ChecklistRow
             title="Configure domain"
             status={hasDomain}
+            showWarning
           >
             {!hasDomain &&
               renderWarning({message: