refactor: update domain warning screen

frontend/src/components/domain-warning/domain-warning.tsx

@@ -1,12 +1,12 @@
 import {
   Card,
-  CardDescription,
+  CardContent,
   CardFooter,
   CardHeader,
   CardTitle,
 } from "../ui/card";
 import { Button } from "../ui/button";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
 
 interface Props {
@@ -25,22 +25,25 @@ export const DomainWarning = (props: Props) => {
 
   return (
     <Card role="alert" aria-live="assertive">
-      <CardHeader className="gap-1.5">
+      <CardHeader>
         <CardTitle className="text-xl">{t("domainWarningTitle")}</CardTitle>
-        <CardDescription>
-          <Trans
-            t={t}
-            i18nKey="domainWarningSubtitle"
-            values={{ appUrl, currentUrl }}
-            components={{ code: <code /> }}
-            shouldUnescape={true}
-          />
-        </CardDescription>
       </CardHeader>
+      <CardContent className="flex flex-col gap-3 text-sm mb-1.25">
+        <p className="text-muted-foreground">{t("domainWarningSubtitle")}</p>
+        <pre>
+          <span className="text-muted-foreground">
+            {t("domainWarningExpected")}&nbsp;
+            <span className="text-primary">{appUrl}</span>
+          </span>
+        </pre>
+        <pre>
+          <span className="text-muted-foreground">
+            {t("domainWarningCurrent")}&nbsp;
+            <span className="text-primary">{currentUrl}</span>
+          </span>
+        </pre>
+      </CardContent>
       <CardFooter className="flex flex-col items-stretch gap-3">
-        <Button onClick={onClick} variant="warning">
-          {t("ignoreTitle")}
-        </Button>
         <Button
           onClick={() =>
             window.location.assign(
@@ -51,6 +54,9 @@ export const DomainWarning = (props: Props) => {
         >
           {t("goToCorrectDomainTitle")}
         </Button>
+        <Button onClick={onClick} variant="warning">
+          {t("ignoreTitle")}
+        </Button>
       </CardFooter>
     </Card>
   );

frontend/src/index.css

@@ -160,7 +160,7 @@ code {
 }
 
 pre {
-  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces;
+  @apply bg-accent border border-border rounded-md p-2 whitespace-break-spaces break-all;
 }
 
 .lead {

frontend/src/lib/i18n/locales/en-US.json

@@ -57,7 +57,9 @@
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
     "ignoreTitle": "Ignore",
     "goToCorrectDomainTitle": "Go to correct domain",
     "authorizeTitle": "Authorize",

frontend/src/lib/i18n/locales/en.json

@@ -57,7 +57,9 @@
     "fieldRequired": "This field is required",
     "invalidInput": "Invalid input",
     "domainWarningTitle": "Invalid Domain",
-    "domainWarningSubtitle": "This instance is configured to be accessed from <code>{{appUrl}}</code>, but <code>{{currentUrl}}</code> is being used. If you proceed, you may encounter issues with authentication.",
+    "domainWarningSubtitle": "You are accessing this instance from an incorrect domain. If you proceed, you may encounter issues with authentication.",
+    "domainWarningCurrent": "Current:",
+    "domainWarningExpected": "Expected:",
     "ignoreTitle": "Ignore",
     "goToCorrectDomainTitle": "Go to correct domain",
     "authorizeTitle": "Authorize",