Fixed markup of global consent buttons

Also, we're mutualizing styles of all button lists.
We're not removing the now unused `orejime-Banner-actionItem` classes,
as to not break any user styles.

Fixes #149

Author: felixgirault

src/ui/themes/standard/Banner.tsx

@@ -74,7 +74,7 @@ const Banner: BannerComponent = ({
 				)}
 
 				<ul className="orejime-Banner-actions orejime-ButtonList">
-					<li className="orejime-Banner-actionItem orejime-Banner-actionItem--save">
+					<li className="orejime-ButtonList-item orejime-Banner-actionItem orejime-Banner-actionItem--save">
 						<button
 							className="orejime-Button orejime-Button--save orejime-Banner-button orejime-Banner-saveButton"
 							type="button"
@@ -85,7 +85,7 @@ const Banner: BannerComponent = ({
 							{t.banner.accept}
 						</button>
 					</li>
-					<li className="orejime-Banner-actionItem orejime-Banner-actionItem--decline">
+					<li className="orejime-ButtonList-item orejime-Banner-actionItem orejime-Banner-actionItem--decline">
 						<button
 							className="orejime-Button orejime-Button--decline orejime-Banner-button orejime-Banner-declineButton"
 							type="button"
@@ -96,7 +96,7 @@ const Banner: BannerComponent = ({
 							{t.banner.decline}
 						</button>
 					</li>
-					<li className="orejime-Banner-actionItem orejime-Banner-actionItem--info">
+					<li className="orejime-ButtonList-item orejime-Banner-actionItem orejime-Banner-actionItem--info">
 						<button
 							type="button"
 							className="orejime-Button orejime-Button--info orejime-Banner-learnMoreButton"

src/ui/themes/standard/GlobalConsent.tsx

@@ -10,27 +10,31 @@ const GlobalConsent: GlobalConsentComponent = ({
 	const t = useTranslations();
 
 	return (
-		<div className="orejime-PurposeToggles orejime-ButtonList">
-			<button
-				type="button"
-				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-enableAll"
-				aria-disabled={isEnabled}
-				onClick={acceptAll}
-				data-testid="orejime-modal-enable-all"
-			>
-				{t.modal.acceptAll}
-			</button>
+		<ul className="orejime-PurposeToggles orejime-ButtonList">
+			<li className="orejime-ButtonList-item">
+				<button
+					type="button"
+					className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-enableAll"
+					aria-disabled={isEnabled}
+					onClick={acceptAll}
+					data-testid="orejime-modal-enable-all"
+				>
+					{t.modal.acceptAll}
+				</button>
+			</li>
 
-			<button
-				type="button"
-				className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-disableAll"
-				aria-disabled={isDisabled}
-				onClick={declineAll}
-				data-testid="orejime-modal-disable-all"
-			>
-				{t.modal.declineAll}
-			</button>
-		</div>
+			<li className="orejime-ButtonList-item">
+				<button
+					type="button"
+					className="orejime-Button orejime-Button--info orejime-PurposeToggles-button orejime-PurposeToggles-disableAll"
+					aria-disabled={isDisabled}
+					onClick={declineAll}
+					data-testid="orejime-modal-disable-all"
+				>
+					{t.modal.declineAll}
+				</button>
+			</li>
+		</ul>
 	);
 };
 

src/ui/themes/standard/index.css

@@ -86,6 +86,10 @@
 	gap: 0.5ch;
 }
 
+.orejime-ButtonList-item {
+	display: inline-block;
+}
+
 .orejime-Banner {
 	position: fixed;
 	z-index: 1000;
@@ -132,10 +136,6 @@
 	margin-top: var(--orejime-space-s);
 }
 
-.orejime-Banner-actionItem {
-	display: inline;
-}
-
 .orejime-Banner-learnMoreButton {
 	display: inline-block;
 }