From 393f0a0159f8c12316e903979f6a506e44ea2b50 Mon Sep 17 00:00:00 2001 From: Claire Date: Wed, 23 Oct 2024 11:47:23 +0200 Subject: [PATCH] Redesign Content Warning and filters (#32543) --- .../mastodon/components/content_warning.tsx | 2 +- .../mastodon/components/filter_warning.tsx | 9 ++-- .../mastodon/components/status_banner.tsx | 15 ++++--- app/javascript/mastodon/locales/en.json | 3 +- .../styles/mastodon/components.scss | 41 +++++++------------ 5 files changed, 33 insertions(+), 37 deletions(-) diff --git a/app/javascript/mastodon/components/content_warning.tsx b/app/javascript/mastodon/components/content_warning.tsx index df8afca74d..c1c879b55d 100644 --- a/app/javascript/mastodon/components/content_warning.tsx +++ b/app/javascript/mastodon/components/content_warning.tsx @@ -8,7 +8,7 @@ export const ContentWarning: React.FC<{

diff --git a/app/javascript/mastodon/components/filter_warning.tsx b/app/javascript/mastodon/components/filter_warning.tsx index 4305e43038..5eaaac4ba3 100644 --- a/app/javascript/mastodon/components/filter_warning.tsx +++ b/app/javascript/mastodon/components/filter_warning.tsx @@ -10,13 +10,16 @@ export const FilterWarning: React.FC<{

{chunks}, + }} />

diff --git a/app/javascript/mastodon/components/status_banner.tsx b/app/javascript/mastodon/components/status_banner.tsx index 8ff17a9b2e..d25c05d6db 100644 --- a/app/javascript/mastodon/components/status_banner.tsx +++ b/app/javascript/mastodon/components/status_banner.tsx @@ -1,8 +1,8 @@ import { FormattedMessage } from 'react-intl'; export enum BannerVariant { - Yellow = 'yellow', - Blue = 'blue', + Warning = 'warning', + Filter = 'filter', } export const StatusBanner: React.FC<{ @@ -11,9 +11,9 @@ export const StatusBanner: React.FC<{ expanded?: boolean; onClick?: () => void; }> = ({ children, variant, expanded, onClick }) => ( -
+ ) : variant === BannerVariant.Warning ? ( + ) : ( )} -
+ ); diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index 46b7d90dba..f2d37e67a6 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -197,6 +197,7 @@ "confirmations.unfollow.title": "Unfollow user?", "content_warning.hide": "Hide post", "content_warning.show": "Show anyway", + "content_warning.show_more": "Show more", "conversation.delete": "Delete conversation", "conversation.mark_as_read": "Mark as read", "conversation.open": "View conversation", @@ -305,7 +306,7 @@ "filter_modal.select_filter.subtitle": "Use an existing category or create a new one", "filter_modal.select_filter.title": "Filter this post", "filter_modal.title.status": "Filter a post", - "filter_warning.matches_filter": "Matches filter “{title}”", + "filter_warning.matches_filter": "Matches filter “{title}”", "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know", "filtered_notifications_banner.title": "Filtered notifications", "firehose.all": "All", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a20e84ce75..673e47f429 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -11109,19 +11109,21 @@ noscript { } .content-warning { + display: block; box-sizing: border-box; background: rgba($ui-highlight-color, 0.05); color: $secondary-text-color; - border-top: 1px solid; - border-bottom: 1px solid; - border-color: rgba($ui-highlight-color, 0.15); + border: 1px solid rgba($ui-highlight-color, 0.15); + border-radius: 8px; padding: 8px (5px + 8px); position: relative; font-size: 15px; line-height: 22px; + cursor: pointer; p { margin-bottom: 8px; + font-weight: 500; } .link-button { @@ -11130,31 +11132,16 @@ noscript { font-weight: 500; } - &::before, - &::after { - content: ''; - display: block; - position: absolute; - height: 100%; - background: url('../images/warning-stripes.svg') repeat-y; - width: 5px; - top: 0; - } + &--filter { + color: $darker-text-color; - &::before { - border-start-start-radius: 4px; - border-end-start-radius: 4px; - inset-inline-start: 0; - } + p { + font-weight: normal; + } - &::after { - border-start-end-radius: 4px; - border-end-end-radius: 4px; - inset-inline-end: 0; - } - - &--filter::before, - &--filter::after { - background-image: url('../images/filter-stripes.svg'); + .filter-name { + font-weight: 500; + color: $secondary-text-color; + } } }