Make the colour a prop of new svg padlock components

This feels more intuitive than controlling via css with fill: currentColour (which wasn't working correctly with the additional div).
guardian · Nov 5, 2024 · 4a85327 · 4a85327
1 parent 712ed25
commit 4a85327
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 12 deletions.
diff --git a/support-frontend/assets/components/secureTransactionIndicator/secureTransactionIndicator.tsx b/support-frontend/assets/components/secureTransactionIndicator/secureTransactionIndicator.tsx
@@ -10,9 +10,13 @@ export interface SecureTransactionIndicatorProps extends CSSOverridable {
 	hideText?: boolean;
 }
 
+const darkColour = neutral[46];
+const lightColour = neutral[100];
+const darkColourOpacity = 1;
+const lightColourOpacity = 0.9;
 const theming = (theme: 'dark' | 'light') => css`
-	color: ${theme === 'dark' ? neutral[46] : neutral[100]};
-	opacity: ${theme === 'dark' ? 1 : 0.9};
+	color: ${theme === 'dark' ? darkColour : lightColour};
+	opacity: ${theme === 'dark' ? darkColourOpacity : lightColourOpacity};
 `;
 
 const secureTransactionWithText = (align: 'left' | 'right' | 'center') => css`
@@ -31,10 +35,6 @@ const padlock = css`
 	svg {
 		display: block;
 		opacity: inherit;
-
-		path {
-			fill: currentColor;
-		}
 	}
 `;
 
@@ -56,7 +56,17 @@ export function SecureTransactionIndicator({
 	return (
 		<div css={[mainCss, theming(theme), cssOverrides]}>
 			<div css={padlock}>
-				{hideText ? <SecurePadlockCircle /> : <SecurePadlock />}
+				{hideText ? (
+					<SecurePadlockCircle
+						colour={theme === 'dark' ? darkColour : lightColour}
+						opacity={theme === 'dark' ? darkColourOpacity : lightColourOpacity}
+					/>
+				) : (
+					<SecurePadlock
+						colour={theme === 'dark' ? darkColour : lightColour}
+						opacity={theme === 'dark' ? darkColourOpacity : lightColourOpacity}
+					/>
+				)}
 			</div>
 			{!hideText && <div css={text}>Secure transaction</div>}
 		</div>

diff --git a/support-frontend/assets/components/svgs/securePadlock.tsx b/support-frontend/assets/components/svgs/securePadlock.tsx
@@ -1,4 +1,12 @@
-export default function SecurePadlock(): JSX.Element {
+type Props = {
+	colour: string;
+	opacity?: number;
+};
+
+export default function SecurePadlock({
+	colour,
+	opacity = 1,
+}: Props): JSX.Element {
 	return (
 		<svg
 			width="10"
@@ -15,7 +23,8 @@ export default function SecurePadlock(): JSX.Element {
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M1.99992 4.99999C1.99992 3.34313 3.34307 1.99999 4.99992 1.99999C6.65678 1.99999 7.99993 3.34313 7.99993 4.99999H9.19992C9.19992 2.68039 7.31952 0.799988 4.99992 0.799988C2.68033 0.799988 0.799922 2.68039 0.799922 4.99999H1.99992ZM0.799922 4.99999V6.50002L0.199951 7.09999V14.3L0.799949 14.9H9.19993L9.79992 14.3V7.09999L9.19993 6.49999L9.19992 4.99999H7.99993V6.49999H1.99992V4.99999H0.799922ZM5.89991 9.79999C5.89991 10.1919 5.64947 10.5252 5.29992 10.6488V11.9H4.69991V10.6488C4.35036 10.5252 4.09991 10.1919 4.09991 9.79999C4.09991 9.30293 4.50286 8.89999 4.99991 8.89999C5.49697 8.89999 5.89991 9.30293 5.89991 9.79999Z"
-				fill="#767676"
+				fill={colour}
+				fill-opacity={opacity}
 			/>
 		</svg>
 	);

diff --git a/support-frontend/assets/components/svgs/securePadlockCircle.tsx b/support-frontend/assets/components/svgs/securePadlockCircle.tsx
@@ -1,4 +1,14 @@
-export default function SecurePadlockCircle(): JSX.Element {
+type Props = {
+	colour: string;
+	borderColour?: string;
+	opacity?: number;
+};
+
+export default function SecurePadlockCircle({
+	colour,
+	borderColour = '#DCDCDC',
+	opacity = 1,
+}: Props): JSX.Element {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -11,9 +21,10 @@ export default function SecurePadlockCircle(): JSX.Element {
 				fill-rule="evenodd"
 				clip-rule="evenodd"
 				d="M11.1709 10.9221C11.1709 9.35369 12.441 8.08224 14.0078 8.08224C15.5746 8.08224 16.8447 9.35369 16.8447 10.9221H17.9794C17.9794 8.72632 16.2013 6.94629 14.0078 6.94629C11.8143 6.94629 10.0361 8.72632 10.0361 10.9221H11.1709ZM10.0361 10.9221L10.0361 12.342L9.46875 12.91V19.7257L10.0361 20.2937H17.9794L18.5468 19.7257V12.91L17.9794 12.3421V10.9221H16.8447V12.342H11.1709V10.9221H10.0361ZM14.8588 15.4659C14.8588 15.8368 14.622 16.1524 14.2914 16.2694V17.4538H13.7241V16.2694C13.3935 16.1524 13.1567 15.8369 13.1567 15.4659C13.1567 14.9954 13.5377 14.6139 14.0077 14.6139C14.4778 14.6139 14.8588 14.9954 14.8588 15.4659Z"
-				fill="#707070"
+				fill={colour}
+				fill-opacity={opacity}
 			/>
-			<circle cx="14.0048" cy="14.2865" r="12.8876" stroke="#DCDCDC" />
+			<circle cx="14.0048" cy="14.2865" r="12.8876" stroke={borderColour} />
 		</svg>
 	);
 }