diff --git a/app/javascript/flavours/glitch/components/content_warning.tsx b/app/javascript/flavours/glitch/components/content_warning.tsx index e7e01ee14c..982365b039 100644 --- a/app/javascript/flavours/glitch/components/content_warning.tsx +++ b/app/javascript/flavours/glitch/components/content_warning.tsx @@ -1,6 +1,4 @@ -/* Significantly rewritten from upstream to keep the old design for now */ - -import { FormattedMessage } from 'react-intl'; +import { StatusBanner, BannerVariant } from './status_banner'; export const ContentWarning: React.FC<{ text: string; @@ -8,26 +6,12 @@ export const ContentWarning: React.FC<{ onClick?: () => void; icons?: React.ReactNode[]; }> = ({ text, expanded, onClick, icons }) => ( -

- {' '} - -

+ + {icons} +

+ ); diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index a15a4df25a..9ee2e683a5 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -378,7 +378,7 @@ class StatusContent extends PureComponent { )).reduce((aggregate, item) => [...aggregate, item, ' '], []); let spoilerIcons = []; - if (hidden && mediaIcons) { + if (mediaIcons) { const mediaComponents = { 'link': LinkIcon, 'picture-o': ImageIcon, diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 07d225e4eb..418a4311b4 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1399,9 +1399,9 @@ body > [data-popper-placement] { } .status__content__spoiler-link { - display: inline-flex; // glitch: media icon in spoiler button + display: inline-block; border-radius: 2px; - background: $action-button-color; // glitch: design used in more places + background: transparent; border: 0; color: $inverted-text-color; font-weight: 700; @@ -1411,23 +1411,6 @@ body > [data-popper-placement] { line-height: 20px; cursor: pointer; vertical-align: top; - align-items: center; // glitch: content indicator - - &:hover { - // glitch: design used in more places - background: lighten($action-button-color, 7%); - text-decoration: none; - } - - .status__content__spoiler-icon { - display: inline-block; - margin-inline-start: 5px; - border-inline-start: 1px solid currentColor; - padding: 0; - padding-inline-start: 4px; - width: 16px; - height: 16px; - } } .status__wrapper--filtered { @@ -11683,4 +11666,10 @@ noscript { color: $secondary-text-color; } } + + .status__content__spoiler-icon { + float: inline-end; + width: 20px; + height: 20px; + } }