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<{ <StatusBanner expanded={expanded} onClick={onClick} - variant={BannerVariant.Yellow} + variant={BannerVariant.Warning} > <p dangerouslySetInnerHTML={{ __html: text }} /> </StatusBanner> 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<{ <StatusBanner expanded={expanded} onClick={onClick} - variant={BannerVariant.Blue} + variant={BannerVariant.Filter} > <p> <FormattedMessage id='filter_warning.matches_filter' - defaultMessage='Matches filter “{title}”' - values={{ title }} + defaultMessage='Matches filter “<span>{title}</span>”' + values={{ + title, + span: (chunks) => <span className='filter-name'>{chunks}</span>, + }} /> </p> </StatusBanner> 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 }) => ( - <div + <label className={ - variant === BannerVariant.Yellow + variant === BannerVariant.Warning ? 'content-warning' : 'content-warning content-warning--filter' } @@ -26,6 +26,11 @@ export const StatusBanner: React.FC<{ id='content_warning.hide' defaultMessage='Hide post' /> + ) : variant === BannerVariant.Warning ? ( + <FormattedMessage + id='content_warning.show_more' + defaultMessage='Show more' + /> ) : ( <FormattedMessage id='content_warning.show' @@ -33,5 +38,5 @@ export const StatusBanner: React.FC<{ /> )} </button> - </div> + </label> ); diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index eb29c03712..ec3851be40 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 “<span>{title}</span>”", "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 8272342d20..f688b9b4ba 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -11112,19 +11112,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 { @@ -11133,31 +11135,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; + } } }