Finalize <EntityLink /> refactor

src/camera/CameraHeader.tsx

@@ -21,7 +21,7 @@ export default function CameraHeader({
   const camera = cameraFromPhoto(photos[0], cameraProp);
   return (
     <PhotoSetHeader
-      entity={<PhotoCamera {...{ camera }} />}
+      entity={<PhotoCamera {...{ camera }} hideAppleIcon />}
       entityVerb="Photo"
       entityDescription={
         descriptionForCameraPhotos(photos, undefined, count, dateRange)}

src/camera/PhotoCamera.tsx

@@ -32,13 +32,16 @@ export default function PhotoCamera({
           title="Apple"
           className={cc(
             'text-icon',
-            'translate-x-[-2.5px] translate-y-[-1.5px]',
+            'translate-x-[-2.5px] translate-y-[2px]',
           )}
-          size={14}
+          size={15}
         />
         : <IoMdCamera
           size={13}
-          className="text-icon translate-x-[-1px] translate-y-[-0.5px]"
+          className={cc(
+            'text-icon',
+            'translate-x-[-1px] translate-y-[3.5px]',
+          )}
         />}
       type={showAppleIcon && isCameraApple ? 'icon-first' : type}
       badged={badged}

src/components/Badge.tsx

@@ -11,16 +11,16 @@ export default function Badge({
   uppercase?: boolean
   interactive?: boolean
 }) {
-  const coreStyles = () => {
+  const stylesForType = () => {
     switch (type) {
     case 'primary': return cc(
-      'px-1.5 py-[0.3rem] leading-none rounded-md',
+      'px-1.5 py-[0.3rem] rounded-md',
       'bg-gray-100/80 dark:bg-gray-900/80',
       'border border-gray-200/60 dark:border-gray-800/75'
     );
     case 'secondary': return cc(
-      'px-[0.3rem] py-1 leading-none rounded-[0.25rem]',
-      'bg-gray-100 dark:bg-gray-800/60',
+      'px-[0.3rem] py-1 rounded-[0.25rem]',
+      'bg-gray-300/30 dark:bg-gray-700/50',
       'text-medium',
       'font-medium text-[0.7rem]',
       interactive && 'hover:text-gray-900 dark:hover:text-gray-100',
@@ -30,7 +30,8 @@ export default function Badge({
   };
   return (
     <span className={cc(
-      coreStyles(),
+      'leading-none',
+      stylesForType(),
       uppercase && 'uppercase tracking-wider',
     )}>
       {children}

src/components/EntityLink.tsx

@@ -60,9 +60,10 @@ export default function EntityLink({
         </>}
         {icon && type !== 'text-only' &&
           <span className={cc(
-            'text-dim inline-flex min-w-[0.8rem]',
-            'translate-y-[4px]',
+            'flex-shrink-0',
+            'text-dim inline-flex min-w-[0.9rem]',
             type === 'icon-first' && 'order-first',
+            badged && 'translate-y-[4px]',
           )}>
             {icon}
           </span>}

src/components/HeaderList.tsx

@@ -20,20 +20,21 @@ export default function HeaderList({
       duration={0.5}
       staggerDelay={0.05}
       items={(title || icon
-        ? [
-          <div key="header" className={cc(
+        ? [<div
+          key="header"
+          className={cc(
             'text-gray-900',
             'dark:text-gray-100',
             'flex items-center mb-0.5 gap-1',
             'uppercase',
-          )}>
-            {icon &&
-              <span className="w-[1rem]">
-                {icon}
-              </span>}
-            {title}
-          </div>,
-        ]
+          )}
+        >
+          {icon &&
+            <span className="w-[1rem]">
+              {icon}
+            </span>}
+          {title}
+        </div>]
         :[] as ReactNode[]
       ).concat(items)}
       classNameItem="text-dim uppercase"

src/photo/PhotoLarge.tsx

@@ -69,7 +69,7 @@ export default function PhotoLarge({
           'mb-4',
         )}>
           {renderMiniGrid(<>
-            <div className="leading-tight">
+            <div>
               <Link
                 href={pathForPhoto(photo)}
                 className="font-bold uppercase"

src/photo/PhotoSetHeader.tsx

@@ -38,14 +38,15 @@ export default function PhotoSetHeader({
       items={[<div
         key="PhotosHeader"
         className={cc(
-          'grid gap-0.5 sm:gap-1',
+          'grid gap-0.5 sm:gap-1 items-start',
           HIGH_DENSITY_GRID
             ? 'xs:grid-cols-2 sm:grid-cols-4 lg:grid-cols-5'
             : 'xs:grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
         )}>
-        <span className={HIGH_DENSITY_GRID
-          ? 'sm:col-span-2'
-          : undefined}>
+        <span className={cc(
+          'inline-flex',
+          HIGH_DENSITY_GRID && 'sm:col-span-2',
+        )}>
           {entity}
         </span>
         <span className={cc(

src/tag/PhotoTag.tsx

@@ -1,6 +1,5 @@
 import { pathForTag } from '@/site/paths';
 import { FaTag } from 'react-icons/fa';
-import { cc } from '@/utility/css';
 import { formatTag } from '.';
 import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
 
@@ -20,10 +19,7 @@ export default function PhotoTag({
       href={pathForTag(tag)}
       icon={<FaTag
         size={11}
-        className={cc(
-          'flex-shrink-0',
-          'text-icon translate-y-[1px]',
-        )}
+        className="text-icon translate-y-[5px]"
       />}
       type={type}
       badged={badged}