From 4698c5fe647fc54a32a619d231e597c2065fcc9b Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 25 Jun 2025 17:41:46 -0500
Subject: [PATCH] Refine configuration design

---
 src/admin/AdminAppConfigurationClient.tsx | 6 +++---
 src/components/ChecklistGroup.tsx         | 6 +++---
 src/components/ChecklistRow.tsx           | 2 +-
 src/components/ExperimentalBadge.tsx      | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx
index 009b4539..c6992119 100644
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@@ -33,7 +33,7 @@ import { AI_AUTO_GENERATED_FIELDS_ALL } from '@/photo/ai';
 import clsx from 'clsx/lite';
 import Link from 'next/link';
 import { PATH_FEED_JSON, PATH_RSS_XML } from '@/app/paths';
-import { FaListUl } from 'react-icons/fa6';
+import { FaRegFolderClosed } from 'react-icons/fa6';
 
 export default function AdminAppConfigurationClient({
   // Storage
@@ -533,7 +533,7 @@ export default function AdminAppConfigurationClient({
         </ChecklistGroup>
         <ChecklistGroup
           title="Categories"
-          icon={<FaListUl size={14} />}
+          icon={<FaRegFolderClosed size={15} />}
           optional
         >
           <ChecklistRow
@@ -572,7 +572,7 @@ export default function AdminAppConfigurationClient({
             {renderEnvVars(['NEXT_PUBLIC_CATEGORY_VISIBILITY'])}
           </ChecklistRow>
           <ChecklistRow
-            title="Collapsable sidebar"
+            title="Collapsible sidebar"
             status={collapseSidebarCategories}
             optional
           >
diff --git a/src/components/ChecklistGroup.tsx b/src/components/ChecklistGroup.tsx
index ccb26d05..cbe08f1b 100644
--- a/src/components/ChecklistGroup.tsx
+++ b/src/components/ChecklistGroup.tsx
@@ -34,16 +34,16 @@ export default function ChecklistGroup({
       )}
     >
       <span className="w-8 sm:w-9 shrink-0">{icon}</span>
-      <span className="inline-flex flex-wrap items-center gap-y-1 gap-x-1.5">
+      <span className="inline-flex flex-wrap items-center gap-y-1 gap-x-2.5">
         <ResponsiveText shortText={titleShort}>
           {title}
         </ResponsiveText>
         {optional &&
-          <Badge type="small" className="translate-y-[0.5px]">
+          <Badge type="small">
             Optional
           </Badge>}
         {experimental &&
-          <ExperimentalBadge className="translate-y-[0.5px]" />}
+          <ExperimentalBadge />}
       </span>
     </a>}>
       {children}
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index fe0ca90f..aaaac752 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -38,7 +38,7 @@ export default function ChecklistRow({
         )}>
           {title}
           {experimental &&
-            <ExperimentalBadge className="translate-y-[-0.5px]" />}
+            <ExperimentalBadge className="translate-y-[0.5px]" />}
         </div>
         <div className="leading-relaxed text-medium">
           {children}
diff --git a/src/components/ExperimentalBadge.tsx b/src/components/ExperimentalBadge.tsx
index d3d51a0d..218c3eaa 100644
--- a/src/components/ExperimentalBadge.tsx
+++ b/src/components/ExperimentalBadge.tsx
@@ -12,7 +12,7 @@ export default function ExperimentalBadge({
       className={clsx(
         'text-pink-500 dark:text-white',
         'bg-pink-100 dark:bg-pink-600',
-        'pt-0.5',
+        'uppercase',
         className,
       )}>
       Experimental