From 53b9563619bfe0c88d5ab9bf9eab3e578e5fb232 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 3 Apr 2025 12:21:52 -0500
Subject: [PATCH] text tweaks

---
 web/public/locales/en/views/faceLibrary.json       |  4 ++--
 .../overlay/detail/FaceCreateWizardDialog.tsx      | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/public/locales/en/views/faceLibrary.json b/web/public/locales/en/views/faceLibrary.json
index e2a87433e..ee3dc2c29 100644
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -19,7 +19,7 @@
     "title": "Create Collection",
     "desc": "Create a new collection",
     "new": "Create New Face",
-    "nextSteps": "It is recommended to use the Train tab to select and train images for each person as they are detected. When building a strong foundation it is strongly recommended to only train on images that are straight-on. Ignore images from cameras that recognize faces from an angle."
+    "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
   },
   "train": {
     "title": "Train",
@@ -45,7 +45,7 @@
     "dropInstructions": "Drag and drop an image here, or click to select",
     "maxSize": "Max size: {{size}}MB"
   },
-  "readTheDocs": "Read the documentation to view more details on refining images for the Face Library",
+  "readTheDocs": "Read the documentation",
   "trainFaceAs": "Train Face as:",
   "trainFace": "Train Face",
   "toast": {
diff --git a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
index db322b236..00e4b5c5f 100644
--- a/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
+++ b/web/src/components/overlay/detail/FaceCreateWizardDialog.tsx
@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 import axios from "axios";
 import { useCallback, useState } from "react";
 import { isDesktop } from "react-device-detect";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { LuExternalLink } from "react-icons/lu";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@@ -133,12 +133,16 @@ export default function CreateFaceWizardDialog({
           </ImageEntry>
         )}
         {step == 2 && (
-          <div>
+          <div className="mt-2">
             {t("toast.success.addFaceLibrary", { name })}
-            <p className="py-4 text-sm text-secondary-foreground">
-              {t("createFaceLibrary.nextSteps")}
+            <p className="py-4 text-sm text-primary-variant">
+              <ul className="list-inside list-disc">
+                <Trans ns="views/faceLibrary">
+                  createFaceLibrary.nextSteps
+                </Trans>
+              </ul>
             </p>
-            <div className="text-s my-4 flex items-center text-primary">
+            <div className="my-2 flex items-center text-sm text-primary">
               <Link
                 to="https://docs.frigate.video/configuration/face_recognition"
                 target="_blank"