Refine camera tag, standardize apple logo usage

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>
       </>}
     />

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}

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}

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':

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>

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:

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}