fix: made the unsupported-browser warning-text easier to read

Eyevinn · May 2, 2024 · c3e3a20 · c3e3a20
1 parent f22d017
commit c3e3a20
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git 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
@@ -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 (