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;
+ }
}