Refine note component

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';
     }
   };
 

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>

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>,
       ]}

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

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>

src/site/SiteChecklistClient.tsx

@@ -327,6 +327,7 @@ export default function SiteChecklistClient({
           <ChecklistRow
             title="Configure domain"
             status={hasDomain}
+            showWarning
           >
             {!hasDomain &&
               renderWarning({message: