Finalize frost colors

app/admin/recipe/page.tsx

@@ -7,7 +7,17 @@ export default async function AdminRecipePage() {
   const { filmSimulation } = photosHidden[0];
   const { fujifilmRecipe } = photosHidden[0];
   return (
-    <div className="grid grid-cols-3 gap-1 w-full">
+    <div className="grid grid-cols-2 xl:grid-cols-3 w-full">
+      {photos.map(photo =>
+        <PhotoRecipeOverlay
+          key={photo.id}
+          backgroundImageUrl={photo.url}
+          recipe={fujifilmRecipe!}
+          simulation={filmSimulation!}
+          exposure={photo.exposureCompensationFormatted ?? '+0ev'}
+          iso={photo.isoFormatted ?? 'ISO 0'}
+        />,
+      )}
       <PhotoRecipeOverlay
         key="black"
         className="bg-black"
@@ -24,15 +34,5 @@ export default async function AdminRecipePage() {
         exposure="+0ev"
         iso="ISO 0"
       />
-      {photos.map(photo =>
-        <PhotoRecipeOverlay
-          key={photo.id}
-          backgroundImageUrl={photo.url}
-          recipe={fujifilmRecipe!}
-          simulation={filmSimulation!}
-          exposure={photo.exposureCompensationFormatted ?? '+0ev'}
-          iso={photo.isoFormatted ?? 'ISO 0'}
-        />,
-      )}
     </div>);
 }

src/components/Badge.tsx

@@ -33,7 +33,7 @@ export default function Badge({
         contrast === 'high'
           ? 'text-invert bg-invert'
           : contrast === 'frosted'
-            ? 'text-black bg-white/30 border border-white/20'
+            ? 'text-black bg-neutral-100/30 border border-neutral-200/40'
             : 'text-medium bg-gray-300/30 dark:bg-gray-700/50',
         interactive && (contrast === 'high'
           ? 'hover:opacity-70'

src/photo/PhotoRecipe.tsx

@@ -61,8 +61,9 @@ export default function PhotoRecipe({
     className?: string,
   ) => (
     <div className={clsx(
-      'flex flex-col items-center justify-center gap-0.5',
+      'flex flex-col items-center justify-center gap-0.5 rounded-md',
-      'bg-white/25 border border-white/20 rounded-md',
+      'rounded-md border',
+      'bg-neutral-100/30 border-neutral-200/40',
       label && 'p-1',
       className,
     )}>
@@ -80,7 +81,7 @@ export default function PhotoRecipe({
       'w-[18rem] self-start',
       'p-3',
       'rounded-lg shadow-2xl',
-      'bg-white/60 backdrop-blur-xl border border-white/30',
+      'bg-white/60 backdrop-blur-xl border border-neutral-200/30',
       'space-y-3',
       'text-[13px] text-black',
       'saturate-200',
@@ -135,7 +136,7 @@ export default function PhotoRecipe({
                 : grainEffect?.roughness === 'weak'
                   ? 'Wk'
                   : 'OFF'}
-              {' / '}
+              {'/'}
               {grainEffect?.size === 'large'
                 ? 'LG'
                 : grainEffect?.size === 'small'
@@ -143,7 +144,7 @@ export default function PhotoRecipe({
             </>,
             'Grain',
           )}
-          {renderDataSquare(bwAdjustment, 'BW')}
+          {renderDataSquare(bwAdjustment, 'BW ADJ')}
           {renderDataSquare(bwMagentaGreen, 'BW M/G')}
         </>)}
       </div>