Refine configuration design

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
           >

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}

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}

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