Replace new-style upstream CWs with old-style CWs for now

This commit is contained in:
Claire 2024-09-22 20:21:46 +02:00
parent 0d26c9fb0b
commit 4d754935a9
2 changed files with 27 additions and 10 deletions

View File

@ -1,15 +1,25 @@
import { StatusBanner, BannerVariant } from './status_banner'; /* Significantly rewritten from upstream to keep the old design for now */
import { FormattedMessage } from 'react-intl';
export const ContentWarning: React.FC<{ export const ContentWarning: React.FC<{
text: string; text: string;
expanded?: boolean; expanded?: boolean;
onClick?: () => void; onClick?: () => void;
}> = ({ text, expanded, onClick }) => ( }> = ({ text, expanded, onClick }) => (
<StatusBanner <p>
expanded={expanded} <span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
onClick={onClick} <button
variant={BannerVariant.Yellow} type='button'
> className='status__content__spoiler-link'
<p dangerouslySetInnerHTML={{ __html: text }} /> onClick={onClick}
</StatusBanner> aria-expanded={expanded}
>
{expanded ? (
<FormattedMessage id='status.show_less' defaultMessage='Show less' />
) : (
<FormattedMessage id='status.show_more' defaultMessage='Show more' />
)}
</button>
</p>
); );

View File

@ -1365,7 +1365,7 @@ body > [data-popper-placement] {
.status__content__spoiler-link { .status__content__spoiler-link {
display: inline-flex; // glitch: media icon in spoiler button display: inline-flex; // glitch: media icon in spoiler button
border-radius: 2px; border-radius: 2px;
background: transparent; background: $action-button-color; // glitch: design used in more places
border: 0; border: 0;
color: $inverted-text-color; color: $inverted-text-color;
font-weight: 700; font-weight: 700;
@ -1378,7 +1378,8 @@ body > [data-popper-placement] {
align-items: center; // glitch: content indicator align-items: center; // glitch: content indicator
&:hover { &:hover {
background: lighten($ui-base-color, 33%); // glitch: design used in more places
background: lighten($action-button-color, 7%);
text-decoration: none; text-decoration: none;
} }
@ -11219,6 +11220,12 @@ noscript {
} }
} }
/* glitch: used for CWs */
p {
font-size: 15px;
color: $darker-text-color;
}
&__content { &__content {
display: -webkit-box; display: -webkit-box;
font-size: 15px; font-size: 15px;