From c958f75c7316831ab56e7152144c0006da6d22ac Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 6 Feb 2025 17:33:59 -0600
Subject: [PATCH] Refine camera tag, standardize apple logo usage

---
 src/app/admin/baseline/page.tsx            | 13 ++++++++++
 src/camera/CameraHeader.tsx                |  2 +-
 src/camera/PhotoCamera.tsx                 | 12 +++++-----
 src/camera/index.ts                        |  8 ++++++-
 src/image-response/CameraImageResponse.tsx | 28 ++++++++++++++++------
 src/photo/PhotoGridSidebar.tsx             |  5 +++-
 src/tag/PhotoTag.tsx                       |  2 +-
 7 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/app/admin/baseline/page.tsx b/src/app/admin/baseline/page.tsx
index 8a37baf9..25ae1f2f 100644
--- a/src/app/admin/baseline/page.tsx
+++ b/src/app/admin/baseline/page.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import PhotoCamera from '@/camera/PhotoCamera';
 import Badge from '@/components/Badge';
 import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
@@ -237,6 +238,18 @@ export default function ComponentsPage() {
               </div>,
             )}
           </div>
+          <div className={clsx(
+            debugComponents && '[&>*]:bg-gray-300 [&>*]:dark:bg-gray-700',
+            '[&>*]:flex',
+          )}>
+            {DEBUG_LINES.map((_, i) =>
+              <PhotoCamera
+                key={i}
+                camera={{ make: 'Canon', model: 'Canon EOS 800D' }}
+                contrast="high"
+              />,
+            )}
+          </div>
         </DivDebugBaselineGrid>
       </>}
     />
diff --git a/src/camera/CameraHeader.tsx b/src/camera/CameraHeader.tsx
index f177969a..f2d4e449 100644
--- a/src/camera/CameraHeader.tsx
+++ b/src/camera/CameraHeader.tsx
@@ -23,7 +23,7 @@ export default function CameraHeader({
   return (
     <PhotoHeader
       camera={camera}
-      entity={<PhotoCamera {...{ camera }} contrast="high" hideAppleIcon />}
+      entity={<PhotoCamera {...{ camera }} contrast="high" />}
       entityDescription={
         descriptionForCameraPhotos(photos, undefined, count, dateRange)}
       photos={photos}
diff --git a/src/camera/PhotoCamera.tsx b/src/camera/PhotoCamera.tsx
index aa8413b9..c097b099 100644
--- a/src/camera/PhotoCamera.tsx
+++ b/src/camera/PhotoCamera.tsx
@@ -1,7 +1,7 @@
 import { AiFillApple } from 'react-icons/ai';
 import { pathForCamera } from '@/site/paths';
 import { IoMdCamera } from 'react-icons/io';
-import { Camera, formatCameraText } from '.';
+import { Camera, formatCameraText, isCameraApple } from '.';
 import EntityLink, {
   EntityLinkExternalProps,
 } from '@/components/primitives/EntityLink';
@@ -19,8 +19,8 @@ export default function PhotoCamera({
   hideAppleIcon?: boolean
   countOnHover?: number
 } & EntityLinkExternalProps) {
-  const isCameraApple = camera.make?.toLowerCase() === 'apple';
-  const showAppleIcon = !hideAppleIcon && isCameraApple;
+  const isApple = isCameraApple(camera);
+  const showAppleIcon = !hideAppleIcon && isApple;
 
   return (
     <EntityLink
@@ -29,12 +29,12 @@ export default function PhotoCamera({
       icon={showAppleIcon
         ? <AiFillApple
           title="Apple"
-          className="translate-x-[-0.5px]"
+          className="translate-x-[-1px] translate-y-[-0.5px]"
           size={15}
         />
         : <IoMdCamera
-          size={12}
-          className="translate-x-[-1px]"
+          size={13}
+          className="translate-x-[-0.5px]"
         />}
       type={type}
       badged={badged}
diff --git a/src/camera/index.ts b/src/camera/index.ts
index d909e972..08ec14ab 100644
--- a/src/camera/index.ts
+++ b/src/camera/index.ts
@@ -55,6 +55,12 @@ export const cameraFromPhoto = (
     ? { make: photo.make, model: photo.model }
     : fallback ?? CAMERA_PLACEHOLDER;
 
+const isCameraMakeApple = (make?: string) =>
+  make?.toLocaleLowerCase() === 'apple';
+
+export const isCameraApple = ({ make }: Camera) =>
+  isCameraMakeApple(make);
+
 export const formatCameraText = (
   { make, model: modelRaw }: Camera,
   length:
@@ -74,7 +80,7 @@ export const formatCameraText = (
   case 'long':
     return `${make} ${model}`;
   case 'medium':
-    return doesModelStartWithMake || make === 'Apple'
+    return doesModelStartWithMake || isCameraMakeApple(make)
       ? model
       : `${make} ${model}`;
   case 'short':
diff --git a/src/image-response/CameraImageResponse.tsx b/src/image-response/CameraImageResponse.tsx
index 0ec26f6f..f94278f8 100644
--- a/src/image-response/CameraImageResponse.tsx
+++ b/src/image-response/CameraImageResponse.tsx
@@ -2,9 +2,15 @@ import { Photo } from '../photo';
 import ImageCaption from './components/ImageCaption';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
 import ImageContainer from './components/ImageContainer';
-import { Camera, cameraFromPhoto, formatCameraText } from '@/camera';
+import {
+  Camera,
+  cameraFromPhoto,
+  formatCameraText,
+  isCameraApple,
+} from '@/camera';
 import { IoMdCamera } from 'react-icons/io';
 import { NextImageSize } from '@/services/next-image';
+import { AiFillApple } from 'react-icons/ai';
 
 export default function CameraImageResponse({
   camera: cameraProp,
@@ -37,12 +43,20 @@ export default function CameraImageResponse({
         width,
         height,
         fontFamily,
-        icon: <IoMdCamera
-          size={height * .079}
-          style={{
-            marginRight: height * .015,
-          }}
-        />,
+        icon: isCameraApple(camera)
+          ? <AiFillApple
+            size={height * .09}
+            style={{
+              marginRight: height * .005,
+              transform: `translateY(${-height * .002}px)`,
+            }}
+          />
+          : <IoMdCamera
+            size={height * .079}
+            style={{
+              marginRight: height * .015,
+            }}
+          />,
       }}>
         {formatCameraText(camera).toLocaleUpperCase()}
       </ImageCaption>
diff --git a/src/photo/PhotoGridSidebar.tsx b/src/photo/PhotoGridSidebar.tsx
index ba93d5ff..a7b1c412 100644
--- a/src/photo/PhotoGridSidebar.tsx
+++ b/src/photo/PhotoGridSidebar.tsx
@@ -59,7 +59,10 @@ export default function PhotoGridSidebar({
       />}
       {tags.length > 0 && <HeaderList
         title='Tags'
-        icon={<FaTag size={12} className="text-icon" />}
+        icon={<FaTag
+          size={12}
+          className="text-icon translate-y-[1px]"
+        />}
         items={tagsIncludingHidden.map(({ tag, count }) => {
           switch (tag) {
           case TAG_FAVS:
diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx
index 06c8f0a7..fb4acbf5 100644
--- a/src/tag/PhotoTag.tsx
+++ b/src/tag/PhotoTag.tsx
@@ -22,7 +22,7 @@ export default function PhotoTag({
       href={pathForTag(tag)}
       icon={<FaTag
         size={11}
-        className="translate-y-[1px]"
+        className="translate-y-[0.5px]"
       />}
       type={type}
       badged={badged}