From c3e3a20f5854c5638db1ec6eb512efee6d845a14 Mon Sep 17 00:00:00 2001
From: malmen237 <linda.malm@eyevinn.se>
Date: Thu, 2 May 2024 08:03:07 +0200
Subject: [PATCH] fix: made the unsupported-browser warning-text easier to read

---
 src/App.tsx                    | 14 ++++++++++++--
 src/components/display-box.tsx |  6 +++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c6fac348..22512a48 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,8 +64,18 @@ const App = () => {
       {!isValidBrowser && !unsupportedContinue && (
         <DisplayBoxPositioningContainer>
           <DisplayWarning
-            text="To use this application it is recommended to use one of the following browsers: Chrome, Edge, Firefox or Safari.
-            If you are using one of the recommended browsers, then it is an older version and  should be updated before continuing."
+            text={
+              <>
+                <p>
+                  To use this application it is recommended to use one of the
+                  following browsers: Chrome, Edge, Firefox or Safari.
+                </p>
+                <p>
+                  If you are using one of the recommended browsers, then it is
+                  an older version and should be updated before continuing.
+                </p>
+              </>
+            }
             title="Browser not supported"
             btn={() => setUnsupportedContinue(true)}
           />
diff --git a/src/components/display-box.tsx b/src/components/display-box.tsx
index 0149f2dc..45ab92f3 100644
--- a/src/components/display-box.tsx
+++ b/src/components/display-box.tsx
@@ -28,7 +28,11 @@ const DisplayBoxButton = styled(PrimaryButton)`
   margin: 1rem;
 `;
 
-type TDisplayWarning = { text: string; title?: string; btn?: () => void };
+type TDisplayWarning = {
+  text: string | JSX.Element;
+  title?: string;
+  btn?: () => void;
+};
 
 export const DisplayWarning = ({ text, title, btn }: TDisplayWarning) => {
   return (