visual restyle of metadata components

src/components/GalleryImage/GalleryImage.js

@@ -19,7 +19,7 @@ const logKeyShortcut = (keyCode) => {
     // eslint-disable-next-line
     window.plausible("KeyShortcut", { props: { keyCode } });
     // eslint-disable-next-line
-    _paq.push(['trackEvent', 'GalleryImage', 'KeyShortcut', keyCode]);
+    _paq.push(["trackEvent", "GalleryImage", "KeyShortcut", keyCode]);
   } catch (e) {
     /* do nothing */
   }
@@ -144,7 +144,7 @@ const GalleryImage = ({ data, pageContext }) => {
           </div>
           <div
             className={classnames(
-              "flex-shrink-0 mx-2 flex flex-row portrait:items-end",
+              "mx-2 flex flex-row portrait:items-end",
               ar <= 1
                 ? "pt-5 flex-col flex-auto text-right"
                 : "portrait:pt-5 portrait:flex-col portrait:text-right"
@@ -165,53 +165,56 @@ const GalleryImage = ({ data, pageContext }) => {
                 style={{ width: 30 }}
               ></div>
             }
+            <div className='flex flex-col'>
               <MetadataItem
-              aspectRatio={ar}
                 data={dateTaken.toLocaleDateString()}
-              icon="calendar-sharp"
+                icon="calendar-outline"
                 title="date taken"
               />
               <MetadataItem
-              aspectRatio={ar}
                 data={locationString}
                 icon="location"
                 title="location"
               />
-            {(meta.exif.Make || meta.exif.Model) && <MetadataItem
-              aspectRatio={ar}
-              data={[meta.exif.Make, meta.exif.Model].join(' ')}
-              icon="camera"
+              {(meta.exif.Make || meta.exif.Model) && (
+                <MetadataItem
+                  data={[meta.exif.Make, meta.exif.Model].join(" ")}
+                  icon="camera-outline"
                   title="camera"
-            />}
-            {(meta.exif.LensModel || meta.exif.FocalLength) && <MetadataItem
-              aspectRatio={ar}
+                />
+              )}
+              {(meta.exif.LensModel || meta.exif.FocalLength) && (
+                <MetadataItem
                   data={[
-                meta.exif.LensModel === '----' ? null : meta.exif.LensModel,
-                meta.exif.FocalLength && `${meta.exif.FocalLength}mm`
-              ].filter(Boolean).join(' @')}
+                    meta.exif.LensModel === "----" ? null : meta.exif.LensModel,
+                    meta.exif.FocalLength && `${meta.exif.FocalLength}mm`,
+                  ]
+                    .filter(Boolean)
+                    .join(" @")}
                   icon="ellipse"
                   title="lens"
-            />}
+                />
+              )}
               <MetadataItem
-              aspectRatio={ar}
                 data={shutterSpeed}
-              icon="stopwatch"
+                icon="stopwatch-outline"
                 title="shutter speed"
               />
-            {meta.exif.FNumber && <MetadataItem
-              aspectRatio={ar}
-              data={`f/${meta.exif.FNumber}`}
-              icon="aperture-sharp"
-              title="aperture"
-            />}
+              {meta.exif.FNumber && (
+                <MetadataItem
+                  data={`f/${meta.exif.FNumber}`}
+                  icon="aperture-outline"
+                  title="aperture"
+                />
+              )}
               <MetadataItem
-              aspectRatio={ar}
                 data={meta.exif.ISO}
                 icon="film-outline"
                 title="ISO"
               />
             </div>
           </div>
+        </div>
         <div></div>
       </div>
     </>

src/components/GalleryImage/MetadataItem.js

@@ -1,19 +1,15 @@
-import classNames from "classnames";
 import React from "react";
 
-const MetadataItem = ({ aspectRatio, icon, data, title }) =>
+const MetadataItem = ({ icon, data, title }) =>
   data ? (
-    <div
-      className={classNames(
-        "flex items-baseline ml-2 text-lg",
-        aspectRatio <= 1 ? "flex-row-reverse" : "portrait:flex-row-reverse"
-      )}
-      title={title}
-    >
-      <span className="icon-offset mr-1">
+    <div className="flex justify-end items-end mr-2">
+      <div className="flex flex-col items-end">
+        <span className="font-mono text-sm m-0 mt-2 ">{title}</span>
+        <span className="text-lg whitespace-nowrap">{data}</span>
+      </div>
+      <span className="icon-offset ml-2 mt-1 text-2xl">
         <ion-icon name={icon} title={title}></ion-icon>
       </span>
-      <span className="mr-1">{data}</span>
     </div>
   ) : null;