From f54e6c7cb5aa78c7645341c15e3912c938778dca Mon Sep 17 00:00:00 2001
From: Orel <ryiseld@gmail.com>
Date: Fri, 7 Oct 2022 01:32:28 +0300
Subject: [PATCH] Restyle titles and spacing in timeline gallery

Restyle the title and album names so that the title will pop out more,
and decrease the horizontal spacing between photos in the same album.
---
 ui/src/components/photoGallery/MediaThumbnail.tsx        | 4 ++--
 ui/src/components/timelineGallery/TimelineGroupAlbum.tsx | 4 +++-
 ui/src/components/timelineGallery/TimelineGroupDate.tsx  | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/photoGallery/MediaThumbnail.tsx b/ui/src/components/photoGallery/MediaThumbnail.tsx
index 60b8fa2c..70349655 100644
--- a/ui/src/components/photoGallery/MediaThumbnail.tsx
+++ b/ui/src/components/photoGallery/MediaThumbnail.tsx
@@ -9,7 +9,7 @@ const MediaContainer = styled.div`
   flex-grow: 1;
   flex-basis: 0;
   height: 200px;
-  margin: 4px;
+  margin: 4px 2px;
   background-color: #eee;
   position: relative;
   overflow: hidden;
@@ -214,7 +214,7 @@ export const MediaPlaceholder = styled.div`
   flex-grow: 1;
   height: 200px;
   width: 300px;
-  margin: 4px;
+  margin: 4px 2px;
   background-color: #eee;
   position: relative;
 `
diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
index 281b9908..bb8879d2 100644
--- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
@@ -76,7 +76,9 @@ const TimelineGroupAlbum = ({
   return (
     <div className="mx-2">
       <Link to={`/album/${albumID}`} className="hover:underline">
-        {albumTitle}
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          {albumTitle}
+        </span>
       </Link>
       <div className="flex flex-wrap items-center relative -mx-1 overflow-hidden">
         {mediaElms}
diff --git a/ui/src/components/timelineGallery/TimelineGroupDate.tsx b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
index 1a4538f3..658ec837 100644
--- a/ui/src/components/timelineGallery/TimelineGroupDate.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
@@ -46,7 +46,7 @@ const TimelineGroupDate = ({
 
   return (
     <div className="mx-3 mb-2">
-      <div className="text-xl m-0 -mb-2">{formattedDate}</div>
+      <div className="text-lg font-bold m-0 -mb-2">{formattedDate}</div>
       <div className="flex flex-wrap -mx-2 my-0">{albumGroupElms}</div>
     </div>
   )