From 32e5e1d3f166062e4939b3fbf25dff5657417893 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 12 Nov 2024 13:35:35 +0100
Subject: [PATCH] Fix a few visual issues with annual reports in web UI
 (#32807)

---
 .../features/annual_report/most_used_hashtag.tsx  | 15 ++++++++-------
 .../features/annual_report/percentile.tsx         |  4 ++--
 app/javascript/mastodon/locales/en.json           |  1 +
 app/javascript/styles/mastodon-light/diff.scss    |  7 +++++++
 .../styles/mastodon/annual_reports.scss           |  9 +++++++--
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
index 0e4c78f639..4b59b89737 100644
--- a/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
+++ b/app/javascript/mastodon/features/annual_report/most_used_hashtag.tsx
@@ -7,16 +7,17 @@ export const MostUsedHashtag: React.FC<{
 }> = ({ data }) => {
   const hashtag = data[0];
 
-  if (!hashtag) {
-    return (
-      <div className='annual-report__bento__box annual-report__summary__most-used-hashtag' />
-    );
-  }
-
   return (
     <div className='annual-report__bento__box annual-report__summary__most-used-hashtag'>
       <div className='annual-report__summary__most-used-hashtag__hashtag'>
-        #{hashtag.name}
+        {hashtag ? (
+          <>#{hashtag.name}</>
+        ) : (
+          <FormattedMessage
+            id='annual_report.summary.most_used_hashtag.none'
+            defaultMessage='None'
+          />
+        )}
       </div>
       <div className='annual-report__summary__most-used-hashtag__label'>
         <FormattedMessage
diff --git a/app/javascript/mastodon/features/annual_report/percentile.tsx b/app/javascript/mastodon/features/annual_report/percentile.tsx
index a758db72c1..22962019a1 100644
--- a/app/javascript/mastodon/features/annual_report/percentile.tsx
+++ b/app/javascript/mastodon/features/annual_report/percentile.tsx
@@ -22,9 +22,9 @@ export const Percentile: React.FC<{
           percentage: () => (
             <div className='annual-report__summary__percentile__number'>
               <FormattedNumber
-                value={percentile / 100}
+                value={Math.min(percentile, 99) / 100}
                 style='percent'
-                maximumFractionDigits={1}
+                maximumFractionDigits={percentile < 1 ? 1 : 0}
               />
             </div>
           ),
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 5bc8c4ad71..9728528f8e 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -101,6 +101,7 @@
   "annual_report.summary.highlighted_post.possessive": "{name}'s",
   "annual_report.summary.most_used_app.most_used_app": "most used app",
   "annual_report.summary.most_used_hashtag.most_used_hashtag": "most used hashtag",
+  "annual_report.summary.most_used_hashtag.none": "None",
   "annual_report.summary.new_posts.new_posts": "new posts",
   "annual_report.summary.percentile.text": "<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of Mastodon users.</bottomLabel>",
   "annual_report.summary.percentile.we_wont_tell_bernie": "We won't tell Bernie.",
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 45da56994c..3d4539bb9d 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -535,3 +535,10 @@ a.sparkline {
 ::-webkit-scrollbar-thumb {
   opacity: 0.25;
 }
+
+.notification-group--annual-report {
+  .notification-group__icon,
+  .notification-group__main .link-button {
+    color: var(--indigo-3);
+  }
+}
diff --git a/app/javascript/styles/mastodon/annual_reports.scss b/app/javascript/styles/mastodon/annual_reports.scss
index 39784e3b5e..dff1c76eca 100644
--- a/app/javascript/styles/mastodon/annual_reports.scss
+++ b/app/javascript/styles/mastodon/annual_reports.scss
@@ -103,6 +103,11 @@
           background-color: var(--goldenrod-2);
         }
       }
+
+      .status-card,
+      .hashtag-bar {
+        display: none;
+      }
     }
 
     &__followers {
@@ -237,7 +242,7 @@
       }
 
       &__number {
-        font-size: 61px;
+        font-size: 54px;
         font-weight: 600;
         line-height: 73px;
         color: var(--goldenrod-2);
@@ -306,7 +311,7 @@
 }
 
 .annual-report-modal {
-  max-width: 480px;
+  max-width: 600px;
   background: var(--indigo-1);
   border-radius: 16px;
   display: flex;