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;