Merge pull request #752 from orellazri/timeline_reformatting

Restyle titles and spacing in timeline gallery

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;
 `

ui/src/components/timelineGallery/TimelineGroupAlbum.tsx

@@ -76,7 +76,9 @@ const TimelineGroupAlbum = ({
   return (
     <div className="mx-2">
       <Link to={`/album/${albumID}`} className="hover:underline">
+        <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}

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>
   )