From 887a1b480d5ee97ed41863a7ce9ab871f36ade33 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 23 Oct 2025 11:19:25 -0600
Subject: [PATCH] Adjust plus icon

---
 .../wizard/Step1NameAndDefine.tsx              | 13 ++++++++-----
 .../classification/wizard/Step2StateArea.tsx   | 18 +++++++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/web/src/components/classification/wizard/Step1NameAndDefine.tsx b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
index ce2386110..0962674d4 100644
--- a/web/src/components/classification/wizard/Step1NameAndDefine.tsx
+++ b/web/src/components/classification/wizard/Step1NameAndDefine.tsx
@@ -22,8 +22,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { useTranslation } from "react-i18next";
 import { useMemo } from "react";
-import { LuX } from "react-icons/lu";
-import { MdAddBox } from "react-icons/md";
+import { LuX, LuPlus } from "react-icons/lu";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { getTranslatedLabel } from "@/utils/i18n";
@@ -346,10 +345,14 @@ export default function Step1NameAndDefine({
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <FormLabel>{t("wizard.step1.classes")}</FormLabel>
-              <MdAddBox
-                className="size-7 cursor-pointer text-primary hover:text-primary/80"
+              <Button
+                type="button"
+                variant="secondary"
+                className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
                 onClick={handleAddClass}
-              />
+              >
+                <LuPlus />
+              </Button>
             </div>
             <div className="space-y-2">
               {watchedClasses.map((_, index) => (
diff --git a/web/src/components/classification/wizard/Step2StateArea.tsx b/web/src/components/classification/wizard/Step2StateArea.tsx
index 8f50aa85e..48ee6420a 100644
--- a/web/src/components/classification/wizard/Step2StateArea.tsx
+++ b/web/src/components/classification/wizard/Step2StateArea.tsx
@@ -8,8 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { MdAddBox } from "react-icons/md";
-import { LuX } from "react-icons/lu";
+import { LuX, LuPlus } from "react-icons/lu";
 import { Stage, Layer, Rect, Transformer } from "react-konva";
 import Konva from "konva";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -247,12 +246,11 @@ export default function Step2StateArea({
                 <PopoverTrigger asChild>
                   <Button
                     type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="size-6 p-0"
+                    variant="secondary"
+                    className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
                     aria-label="Add camera"
                   >
-                    <MdAddBox className="size-6 text-primary" />
+                    <LuPlus />
                   </Button>
                 </PopoverTrigger>
                 <PopoverContent
@@ -285,7 +283,13 @@ export default function Step2StateArea({
                 </PopoverContent>
               </Popover>
             ) : (
-              <MdAddBox className="size-6 cursor-not-allowed text-muted" />
+              <Button
+                variant="secondary"
+                className="size-6 cursor-not-allowed rounded-md bg-muted p-1 text-muted-foreground"
+                disabled
+              >
+                <LuPlus />
+              </Button>
             )}
           </div>