Discussion pre-moderation warning dark mode (#10809)

guardian · Mar 4, 2024 · c6cf9f1 · c6cf9f1
1 parent b706b98
commit c6cf9f1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 13 deletions.
diff --git a/dotcom-rendering/src/components/Discussion/CommentForm.tsx b/dotcom-rendering/src/components/Discussion/CommentForm.tsx
@@ -1,5 +1,7 @@
 import { css } from '@emotion/react';
 import { space, text, textSans } from '@guardian/source-foundations';
+import { Link } from '@guardian/source-react-components';
+import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
 import { useEffect, useRef, useState } from 'react';
 import type {
 	CommentType,
@@ -75,7 +77,7 @@ const blackPlaceholder = css`
 `;
 
 const headerTextStyles = css`
-	margin: 0;
+	margin: 0 0 10px 0;
 	${textSans.xxsmall()};
 `;
 
@@ -123,6 +125,25 @@ const commentAddOns = css`
 	list-style-type: none;
 `;
 
+const preModMessage = css`
+	& div {
+		color: inherit;
+		${textSans.xxsmall({
+			fontWeight: 'bold',
+		})};
+		svg {
+			fill: ${schemedPalette('--discussion-pre-mod')};
+		}
+	}
+`;
+
+const preModLink = css`
+	color: ${schemedPalette('--discussion-pre-mod')};
+	${textSans.xxsmall({
+		fontWeight: 'bold',
+	})};
+`;
+
 const bottomContainer = css`
 	width: 100%;
 	display: flex;
@@ -449,18 +470,22 @@ export const CommentForm = ({
 						</p>
 
 						{user.profile.privateFields?.isPremoderated && (
-							<p css={[errorTextStyles, linkStyles]}>
-								Your comments are currently being pre-moderated
-								(
-								<a
-									href="/community-faqs#311"
-									target="_blank"
-									rel="nofollow"
-								>
-									why?
-								</a>
-								)
-							</p>
+							<InfoSummary
+								message={
+									'Your comments are currently being pre-moderated'
+								}
+								context={
+									<Link
+										href="/community-faqs#311"
+										target="_blank"
+										rel="nofollow"
+										cssOverrides={preModLink}
+									>
+										(why?)
+									</Link>
+								}
+								cssOverrides={preModMessage}
+							/>
 						)}
 					</div>
 				)}

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -5040,6 +5040,9 @@ const interactiveAtomBackgroundLight: PaletteFunction = () => 'transparent';
 const interactiveAtomBackgroundDark: PaletteFunction = () =>
 	sourcePalette.neutral[100];
 
+const discussionPreModLight: PaletteFunction = () => sourcePalette.brand[500];
+const discussionPreModDark: PaletteFunction = () => sourcePalette.brand[800];
+
 // ----- Palette ----- //
 
 /**
@@ -5973,6 +5976,10 @@ const paletteColours = {
 		light: shareButtonBorderXSmallLight,
 		dark: shareButtonBorderXSmallLight,
 	},
+	'--discussion-pre-mod': {
+		light: discussionPreModLight,
+		dark: discussionPreModDark,
+	},
 } satisfies PaletteColours;
 
 /**