Use <Badge /> in admin breadcrumbs

src/components/AdminChildPage.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { FiArrowLeft } from 'react-icons/fi';
 import SiteGrid from './SiteGrid';
 import { cc } from '@/utility/css';
+import Badge from './Badge';
 
 function AdminChildPage({
   backPath,
@@ -41,12 +42,9 @@ function AdminChildPage({
                 {breadcrumb &&
                   <>
                     <span>/</span>
-                    <span className={cc(
-                      'py-0.5 px-2 rounded-md bg-gray-100 dark:bg-gray-900',
-                      'border border-gray-200 dark:border-gray-800'
-                    )}>
+                    <Badge>
                       {breadcrumb}
-                    </span>
+                    </Badge>
                   </>}
               </div>
               {accessory &&

src/components/Badge.tsx

@@ -6,23 +6,27 @@ export default function Badge({
   uppercase,
 }: {
   children: React.ReactNode
-  type?: 'primary' | 'text-only'
+  type?: 'primary' | 'secondary' | 'text-only'
   uppercase?: boolean
 }) {
-  const coreStyles = () => {
+  const baseStyles = () => {
     switch (type) {
     case 'primary': return cc(
+      'px-2 py-0.5 rounded-md bg-gray-100 dark:bg-gray-900',
+      'border border-gray-200 dark:border-gray-800'
+    );
+    case 'secondary': return cc(
       'px-1 py-1 leading-none rounded-md',
       'bg-gray-100 dark:bg-gray-800/75',
-      'text-gray-500 dark:text-gray-400',
-      'font-medium text-[0.7rem] tracking-wide',
+      'text-medium',
+      'font-medium text-[0.7rem]',
     );
     }
   };
   return (
     <span className={cc(
-      coreStyles(),
-      uppercase && 'uppercase',
+      baseStyles(),
+      uppercase && 'uppercase tracking-wider',
     )}>
       {children}
     </span>

src/photo/PhotoEditPageClient.tsx

@@ -39,7 +39,9 @@ export default function PhotoEditPageClient({
         <form action={action}>
           <input name="photoUrl" value={photo.url} hidden readOnly />
           <SubmitButtonWithStatus
-            icon={<IconGrSync className="translate-y-[0.5px] mr-[4px]"/>}
+            icon={<IconGrSync
+              className="translate-y-[-1px] sm:mr-[4px]"
+            />}
           >
             EXIF
           </SubmitButtonWithStatus>

src/photo/PhotoLarge.tsx

@@ -75,7 +75,7 @@ export default function PhotoLarge({
                 <PhotoTags tags={tagsToShow} />}
             </div>
             {showCamera && photoHasCameraData(photo) &&
-            <div>
+            <div className="space-y-0.5">
               <PhotoCamera
                 camera={camera}
                 showIcon={false}

src/vendors/fujifilm/PhotoFujifilmSimulation.tsx

@@ -32,7 +32,7 @@ export default function PhotoFujifilmSimulation({
       className="inline-flex items-center gap-1"
     >
       {badged
-        ? <Badge uppercase>{renderContent()}</Badge>
+        ? <Badge type="secondary" uppercase>{renderContent()}</Badge>
         : <span className="uppercase text-medium">{renderContent()}</span>}
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',