From 675e80dbe86e0403e21061d40f950b62f398853c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 09:05:58 -0500
Subject: [PATCH 1/6] Put film simulation inside tag

---
 src/photo/PhotoLarge.tsx                         | 16 +++++++++-------
 src/vendors/fujifilm/PhotoFujifilmSimulation.tsx |  6 +++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 146bc435..3f3ae33d 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -75,21 +75,23 @@ export default function PhotoLarge({
                 <PhotoTags tags={tagsToShow} />}
             </div>
             {showCamera && photoHasCameraData(photo) &&
+            <div>
               <PhotoCamera
                 camera={camera}
                 showIcon={false}
                 hideApple={false}
-              />}
+              />
+              {photo.filmSimulation &&
+                <div className="-translate-x-0.5"> 
+                  <PhotoFujifilmSimulation
+                    simulation={photo.filmSimulation}
+                  />
+                </div>}
+            </div>}
           </>)}
           {renderMiniGrid(<>
             {photoHasExifData(photo) &&
               <ul className="text-medium">
-                {photo.filmSimulation &&
-                  <li>
-                    <PhotoFujifilmSimulation
-                      simulation={photo.filmSimulation}
-                    />
-                  </li>}
                 <li>
                   {photo.focalLengthFormatted}
                   {photo.focalLengthIn35MmFormatFormatted &&
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 8f12a517..fcae77c3 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import { cc } from '@/utility/css';
 import {
   FujifilmSimulation,
@@ -18,7 +17,7 @@ export default function PhotoFujifilmSimulation({
     <span
       title={`Film Simulation: ${large}`}
       className={cc(
-        'inline-flex items-center gap-1.5',
+        'inline-flex items-center gap-1',
         'text-medium uppercase',
       )}
     >
@@ -30,7 +29,8 @@ export default function PhotoFujifilmSimulation({
       </span>
       <span className={cc(
         'hidden xs:inline-block',
-        medium.endsWith('.') && '-mr-1',
+        'bg-gray-100 px-1 py-1 leading-none rounded-md',
+        'text-gray-500 text-[0.7rem] tracking-wide',
       )}>
         {medium}
       </span>

From 45ae2bdb372c54e8e13bdb380f9098dd8e549d9c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 09:06:29 -0500
Subject: [PATCH 2/6] Add medium/500 weight of IBM Plex Mono

---
 src/app/layout.tsx                               | 2 +-
 src/vendors/fujifilm/PhotoFujifilmSimulation.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fdbbcd7c..026a40e6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,7 +13,7 @@ import '../site/globals.css';
 
 const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
-  weight: ['400', '700'],
+  weight: ['400', '500', '700'],
   variable: '--font-ibm-plex-mono',
 });
 
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index fcae77c3..10459e75 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -30,7 +30,7 @@ export default function PhotoFujifilmSimulation({
       <span className={cc(
         'hidden xs:inline-block',
         'bg-gray-100 px-1 py-1 leading-none rounded-md',
-        'text-gray-500 text-[0.7rem] tracking-wide',
+        'text-gray-500 font-medium text-[0.7rem] tracking-wide',
       )}>
         {medium}
       </span>

From 2bf96af87e54ff069a45df357d3cd132aeeb457d Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 09:13:10 -0500
Subject: [PATCH 3/6] Create <Badge /> component

---
 src/components/Badge.tsx                      | 21 +++++++++++++++
 .../fujifilm/PhotoFujifilmSimulation.tsx      | 27 +++++++------------
 2 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Badge.tsx

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 00000000..418d40d7
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,21 @@
+import { cc } from '@/utility/css';
+
+export default function Badge({
+  children,
+  uppercase,
+}: {
+  children: React.ReactNode
+  uppercase?: boolean
+}) {
+  return (
+    <span className={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',
+      uppercase && 'uppercase',
+    )}>
+      {children}
+    </span>
+  );
+}
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 10459e75..6bf792c8 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -4,6 +4,7 @@ import {
   getLabelForFilmSimulation,
 } from '@/vendors/fujifilm';
 import PhotoFujifilmSimulationIcon from './PhotoFujifilmSimulationIcon';
+import Badge from '@/components/Badge';
 
 export default function PhotoFujifilmSimulation({
   simulation,
@@ -16,24 +17,16 @@ export default function PhotoFujifilmSimulation({
   return (
     <span
       title={`Film Simulation: ${large}`}
-      className={cc(
-        'inline-flex items-center gap-1',
-        'text-medium uppercase',
-      )}
+      className="inline-flex items-center gap-1"
     >
-      <span className={cc(
-        'xs:hidden',
-        small.endsWith('.') && '-mr-1',
-      )}>
-        {small}
-      </span>
-      <span className={cc(
-        'hidden xs:inline-block',
-        'bg-gray-100 px-1 py-1 leading-none rounded-md',
-        'text-gray-500 font-medium text-[0.7rem] tracking-wide',
-      )}>
-        {medium}
-      </span>
+      <Badge uppercase>
+        <span className="xs:hidden">
+          {small}
+        </span>
+        <span className="hidden xs:inline-block">
+          {medium}
+        </span>
+      </Badge>
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',
         showIconFirst && 'order-first',

From 7591003989b1dfe274912197ec246ddee7355b1c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 13:38:09 -0500
Subject: [PATCH 4/6] Increase size of film animation

---
 src/app/(static)/film/animate/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx
index ef241f3f..1c74e54d 100644
--- a/src/app/(static)/film/animate/page.tsx
+++ b/src/app/(static)/film/animate/page.tsx
@@ -22,7 +22,7 @@ export default function FilmPage() {
       contentMain={<div className={cc(
         'flex items-center justify-center min-h-[30rem]',
       )}>
-        <div className="w-[250px] scale-150">
+        <div className="w-[250px] scale-[2.5]">
           <div className="dark:text-gray-500/50 uppercase">
             Film Simulation:
           </div>

From 9ebc097a4b3de15d262a30942202f51655e88153 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 14:18:31 -0500
Subject: [PATCH 5/6] Animate film simulations without badges

---
 src/app/(static)/film/animate/page.tsx        |  1 +
 src/components/Badge.tsx                      | 13 +++++++++--
 .../fujifilm/PhotoFujifilmSimulation.tsx      | 23 ++++++++++++-------
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/app/(static)/film/animate/page.tsx b/src/app/(static)/film/animate/page.tsx
index 1c74e54d..c98d4beb 100644
--- a/src/app/(static)/film/animate/page.tsx
+++ b/src/app/(static)/film/animate/page.tsx
@@ -29,6 +29,7 @@ export default function FilmPage() {
           <PhotoFujifilmSimulation
             simulation={FILM_SIMULATION_FORM_INPUT_OPTIONS[index].value}
             showIconFirst
+            badged={false}
           />
           <div className="mt-4 text-dim relative">
             <div>
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 418d40d7..482f6694 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -2,17 +2,26 @@ import { cc } from '@/utility/css';
 
 export default function Badge({
   children,
+  type = 'primary',
   uppercase,
 }: {
   children: React.ReactNode
+  type?: 'primary' | 'text-only'
   uppercase?: boolean
 }) {
-  return (
-    <span className={cc(
+  const coreStyles = () => {
+    switch (type) {
+    case 'primary': 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',
+    );
+    }
+  };
+  return (
+    <span className={cc(
+      coreStyles(),
       uppercase && 'uppercase',
     )}>
       {children}
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 6bf792c8..5ce917c1 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
@@ -9,24 +9,31 @@ import Badge from '@/components/Badge';
 export default function PhotoFujifilmSimulation({
   simulation,
   showIconFirst,
+  badged = true,
 }: {
   simulation: FujifilmSimulation
   showIconFirst?: boolean
+  badged?: boolean
 }) {
   const { small, medium, large } = getLabelForFilmSimulation(simulation);
+
+  const renderContent = () => <>
+    <span className="xs:hidden">
+      {small}
+    </span>
+    <span className="hidden xs:inline-block">
+      {medium}
+    </span>
+  </>;
+
   return (
     <span
       title={`Film Simulation: ${large}`}
       className="inline-flex items-center gap-1"
     >
-      <Badge uppercase>
-        <span className="xs:hidden">
-          {small}
-        </span>
-        <span className="hidden xs:inline-block">
-          {medium}
-        </span>
-      </Badge>
+      {badged
+        ? <Badge uppercase>{renderContent()}</Badge>
+        : <span className="uppercase text-medium">{renderContent()}</span>}
       <span className={cc(
         'translate-y-[-1.25px] text-extra-dim',
         showIconFirst && 'order-first',

From 7b113f383629d2adef6bdb77322922d51a87bf77 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 2 Nov 2023 17:12:22 -0500
Subject: [PATCH 6/6] Use <Badge /> in admin breadcrumbs

---
 src/components/AdminChildPage.tsx                |  8 +++-----
 src/components/Badge.tsx                         | 16 ++++++++++------
 src/photo/PhotoEditPageClient.tsx                |  4 +++-
 src/photo/PhotoLarge.tsx                         |  2 +-
 src/vendors/fujifilm/PhotoFujifilmSimulation.tsx |  2 +-
 5 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/components/AdminChildPage.tsx b/src/components/AdminChildPage.tsx
index 57ee3a85..2b01af33 100644
--- a/src/components/AdminChildPage.tsx
+++ b/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 &&
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 482f6694..ead474f3 100644
--- a/src/components/Badge.tsx
+++ b/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>
diff --git a/src/photo/PhotoEditPageClient.tsx b/src/photo/PhotoEditPageClient.tsx
index 225c4da8..636f620b 100644
--- a/src/photo/PhotoEditPageClient.tsx
+++ b/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>
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 3f3ae33d..93676ca9 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/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}
diff --git a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx b/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
index 5ce917c1..6d713cf0 100644
--- a/src/vendors/fujifilm/PhotoFujifilmSimulation.tsx
+++ b/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',