From a20b19d0cf0f069fa6cced0594af62ab00c4fcaf Mon Sep 17 00:00:00 2001
From: Samuel Therrien <samuel.therrien@beslogic.com>
Date: Tue, 19 Nov 2024 17:21:29 -0500
Subject: [PATCH] update batch tables to match design + make titles selectable

---
 .../src/assets/styles/GlobalStyles.scss       |  5 ++--
 .../src/components/social/PostComment.tsx     |  2 +-
 canopeum_frontend/src/pages/Analytics.tsx     | 30 +++++++++++--------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/canopeum_frontend/src/assets/styles/GlobalStyles.scss b/canopeum_frontend/src/assets/styles/GlobalStyles.scss
index 7996c44cb..aa124bfcf 100644
--- a/canopeum_frontend/src/assets/styles/GlobalStyles.scss
+++ b/canopeum_frontend/src/assets/styles/GlobalStyles.scss
@@ -27,8 +27,9 @@ body {
   background-image: url('@assets/images/TreeBackground.png');
 }
 
-.text-small {
-  font-size: 90%;
+// Named after https://getbootstrap.com/docs/5.2/utilities/text/#font-size
+.fs-small {
+  font-size: 0.875rem;
 }
 
 .text-ellipsis {
diff --git a/canopeum_frontend/src/components/social/PostComment.tsx b/canopeum_frontend/src/components/social/PostComment.tsx
index 6112b9bb6..9e75a6ec5 100644
--- a/canopeum_frontend/src/components/social/PostComment.tsx
+++ b/canopeum_frontend/src/components/social/PostComment.tsx
@@ -29,7 +29,7 @@ const PostComment = ({ comment, onDelete, siteId }: Props) => {
 
           <div className='d-flex flex-column'>
             <span className='fw-bold'>{comment.authorUsername}</span>
-            <span className='text-muted text-small'>
+            <span className='text-muted s fs-small'>
               {formatDate(comment.createdAt, { dateStyle: 'short' })}
             </span>
           </div>
diff --git a/canopeum_frontend/src/pages/Analytics.tsx b/canopeum_frontend/src/pages/Analytics.tsx
index 562a0254f..a618b09c6 100644
--- a/canopeum_frontend/src/pages/Analytics.tsx
+++ b/canopeum_frontend/src/pages/Analytics.tsx
@@ -142,29 +142,31 @@ const Analytics = () => {
 
       return (
         <div className='accordion-item mb-3 rounded' key={site.id}>
-          <h2 className='accordion-header rounded' id={`heading-${site.id}`}>
-            <button
+          <h3 className='accordion-header rounded' id={`heading-${site.id}`}>
+            {/* We use a div so the text stays selectable, but this is really used like a button */}
+            {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- see above */}
+            <div
               aria-controls={`collapse-${site.id}`}
               aria-expanded='true'
               className='accordion-button collapsed rounded'
               data-bs-target={`#collapse-${site.id}`}
               data-bs-toggle='collapse'
-              type='button'
+              role='button'
             >
-              <div className='d-flex justify-content-between w-100 pe-3 fs-5'>
+              <div className='d-flex justify-content-between align-items-center w-100 pe-3 fs-5'>
                 <span>{site.name}</span>
-                <span style={{ opacity: .5 }}>
+                <small className='fw-bold text-muted fs-small'>
                   {translate('analytics.last-update')}: {lastModifiedBatchDate
                     ? formatDate(lastModifiedBatchDate)
                     : 'N/A'}
-                </span>
+                </small>
                 <span className='text-capitalize'>
                   {site.batches.length}{' '}
                   {translate('analytics.batch', { count: site.batches.length })}
                 </span>
               </div>
-            </button>
-          </h2>
+            </div>
+          </h3>
 
           <div
             aria-labelledby={`heading-${site.id}`}
@@ -221,14 +223,18 @@ const Analytics = () => {
         </div>
 
         <div className='mt-4'>
-          <div className='card p-3 px-4'>
-            <div className='d-flex justify-content-between'>
-              <div className='fs-5'>{translate('analytics.batch-tracking')}</div>
+          {
+            // TODO: Implement batch search/filtering, in the mean time we show a simple title
+            /* <div className='card p-3'>
+            <div className='d-flex justify-content-between align-items-center'>
+              <h2 className='fs-5'>{translate('analytics.batch-tracking')}</h2>
               <div>
                 <span>TODO: Filters Go Here</span>
               </div>
             </div>
-          </div>
+          </div> */
+          }
+          <h2 className='text-light'>{translate('analytics.batch-tracking')}</h2>
 
           <div className='accordion mt-4' id='accordion-batches'>
             {renderBatches()}