SWED-2339 style UI dialog

src/App/ComponentsDocumentation/components/Dialog/constants.js

@@ -1,12 +1,7 @@
 import React from "react";
 import DialogComponent from "@components/Dialog";
 
-const DialogExample = ({
-	size,
-	hasDividers,
-	hasGrayBgColor,
-	slidesFromBottom,
-}) => (
+const DialogExample = ({ size, hasDividers, hasGrayBg, slidesFromBottom }) => (
 	<>
 		<button
 			className="btn btn-primary"
@@ -21,7 +16,7 @@ const DialogExample = ({
 			size={size}
 			hasDividers={hasDividers}
 			slidesFromBottom={slidesFromBottom}
-			hasGrayBgColor={hasGrayBgColor}
+			hasGrayBg={hasGrayBg}
 		>
 			<p className="mb-0">
 				You’re about to permanently delete <i>German Swashbuckle (456)?</i>

src/App/components/Dialog/__snapshots__/index.test.js.snap

@@ -13,7 +13,9 @@ exports[`Component: Dialog - renders 1`] = `
   <header>
     
 
-    <h4 />
+    <div
+      role="heading"
+    />
     
 
     <button
@@ -71,7 +73,9 @@ exports[`Component: Dialog - renders with the passed ID 1`] = `
   <header>
     
 
-    <h4 />
+    <div
+      role="heading"
+    />
     
 
     <button
@@ -129,7 +133,9 @@ exports[`Component: Dialog - renders with the passed children 1`] = `
   <header>
     
 
-    <h4 />
+    <div
+      role="heading"
+    />
     
 
     <button
@@ -191,9 +197,11 @@ exports[`Component: Dialog - renders with the passed header 1`] = `
   <header>
     
 
-    <h4>
+    <div
+      role="heading"
+    >
       My heading
-    </h4>
+    </div>
     
 
     <button

src/App/components/Dialog/index.js

@@ -23,7 +23,7 @@ const Dialog = ({
 			{"\n"}
 			<header>
 				{"\n"}
-				<h4>{diaHeader}</h4>
+				<div role="heading">{diaHeader}</div>
 				{"\n"}
 				<button
 					type="button"

src/less/components/dialog.less

@@ -159,6 +159,7 @@ dialog {
 	@media screen and (max-width: 768px) {
 		width: 100%;
 		max-width: 100vw;
+		max-height: 88vh;
 		margin-inline: 0;
 		margin-block-end: 0;
 		border-radius: var(--dialog-radius) var(--dialog-radius) 0 0;
@@ -187,17 +188,22 @@ dialog {
 		align-items: center;
 		border-block-end: var(--dialog-divider);
 		border-radius: 20px 20px 0 0;
+		font-size: 1.5rem;
+		line-height: 1.875rem;
 
-		:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
-			margin-block: 0;
-			flex-grow: 1;
+		@media screen and (min-width: 768px) {
+			font-size: 2rem;
+		}
 
-			&:is(h4) {
-				font-size: 1.5rem;
+		& > *:first-child {
+			flex-grow: 1;
+			font-family: var(--brand-headline);
+			font-weight: var(--font-weight-header, 400);
+			text-wrap: balance;
+			color: var(--brand-secondary);
 
-				@media screen and (min-width: 768px) {
-					font-size: 2rem;
-				}
+			&:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p) {
+				margin-block: 0;
 			}
 		}
 
@@ -273,7 +279,7 @@ dialog {
 		margin: 0;
 		display: flex;
 		justify-content: flex-end;
-		gap: 0.5rem;
+		gap: 1rem;
 
 		> * {
 			margin: 0;