[Glitch] Change how content warnings and filters are displayed in web UI

Partially apply 500f4925a5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/content_warning.tsx

@@ -0,0 +1,15 @@
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const ContentWarning: React.FC<{
+  text: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ text, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Yellow}
+  >
+    <p dangerouslySetInnerHTML={{ __html: text }} />
+  </StatusBanner>
+);

app/javascript/flavours/glitch/components/filter_warning.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+
+import { StatusBanner, BannerVariant } from './status_banner';
+
+export const FilterWarning: React.FC<{
+  title: string;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ title, expanded, onClick }) => (
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Blue}
+  >
+    <p>
+      <FormattedMessage
+        id='filter_warning.matches_filter'
+        defaultMessage='Matches filter “{title}”'
+        values={{ title }}
+      />
+    </p>
+  </StatusBanner>
+);

app/javascript/flavours/glitch/components/status_banner.tsx

@@ -0,0 +1,37 @@
+import { FormattedMessage } from 'react-intl';
+
+export enum BannerVariant {
+  Yellow = 'yellow',
+  Blue = 'blue',
+}
+
+export const StatusBanner: React.FC<{
+  children: React.ReactNode;
+  variant: BannerVariant;
+  expanded?: boolean;
+  onClick?: () => void;
+}> = ({ children, variant, expanded, onClick }) => (
+  <div
+    className={
+      variant === BannerVariant.Yellow
+        ? 'content-warning'
+        : 'content-warning content-warning--filter'
+    }
+  >
+    {children}
+
+    <button className='link-button' onClick={onClick}>
+      {expanded ? (
+        <FormattedMessage
+          id='content_warning.hide'
+          defaultMessage='Hide post'
+        />
+      ) : (
+        <FormattedMessage
+          id='content_warning.show'
+          defaultMessage='Show anyway'
+        />
+      )}
+    </button>
+  </div>
+);