Updated button styling on config header (#673)

* fix: updated button in config

* Update src/pages/Config/index.tsx

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

src/components/PageLayout.tsx

@@ -80,8 +80,7 @@ export const PageLayout = ({
                       disabled={action.disabled || action.isLoading}
                       className={cn(
                         "flex items-center space-x-2 py-2 px-3 rounded-md",
-                        "text-foreground transition-colors hover:text-accent",
+                        "text-foreground transition-colors duration-200",
-                        "hover:bg-slate-200 disabled:hover:bg-white",
                         "disabled:opacity-50 disabled:cursor-not-allowed",
                         action.className,
                       )}

src/pages/Config/index.tsx

@@ -144,19 +144,23 @@ const ConfigPage = () => {
     [activeConfigSection, workingConfig, workingModuleConfig],
   );
 
-  const buttonOpacity = useMemo(
+  const buttonOpacity = useMemo(() => {
-    () => (formMethods?.formState.isDirty &&
+    const isFormDirty = formMethods?.formState.isDirty ?? false;
-          Object.keys(formMethods?.formState.dirtyFields ?? {}).length > 0 ||
+    const hasDirtyFields =
-        workingConfig.length > 0 || workingModuleConfig.length > 0
+      (Object.keys(formMethods?.formState.dirtyFields ?? {}).length ?? 0) > 0;
-      ? "opacity-100"
+    const hasWorkingConfig = workingConfig.length > 0;
-      : "opacity-0"),
+    const hasWorkingModuleConfig = workingModuleConfig.length > 0;
-    [
+
-      formMethods?.formState.isDirty,
+    const shouldShowButton = (isFormDirty && hasDirtyFields) ||
-      formMethods?.formState.dirtyFields,
+      hasWorkingConfig || hasWorkingModuleConfig;
-      workingConfig,
+
-      workingModuleConfig,
+    return shouldShowButton ? "opacity-100" : "opacity-0";
-    ],
+  }, [
-  );
+    formMethods?.formState.isDirty,
+    formMethods?.formState.dirtyFields,
+    workingConfig,
+    workingModuleConfig,
+  ]);
 
   const isValid = useMemo(() => {
     return Object.keys(formMethods?.formState.errors ?? {}).length === 0;
@@ -168,7 +172,8 @@ const ConfigPage = () => {
       label: t("common:formValidation.unsavedChanges"),
       onClick: () => {},
       className: cn([
-        "bg-blue-500 hover:bg-blue-500 text-white hover:text-white",
+        "bg-blue-500 text-slate-900 hover:bg-initial",
+        "transition-colors duration-200",
         buttonOpacity,
         "transition-opacity",
       ]),
@@ -178,7 +183,11 @@ const ConfigPage = () => {
       icon: RefreshCwIcon,
       label: t("common:button.reset"),
       onClick: handleReset,
-      className: cn([buttonOpacity, "transition-opacity"]),
+      className: cn([
+        buttonOpacity,
+        "transition-opacity hover:bg-slate-200 disabled:hover:bg-white",
+        "hover:dark:bg-slate-300  hover:dark:text-black cursor-pointer",
+      ]),
     },
     {
       key: "save",
@@ -187,7 +196,14 @@ const ConfigPage = () => {
       disabled: isSaving ||
         !isValid ||
         (workingConfig.length === 0 && workingModuleConfig.length === 0),
-      iconClasses: !isValid ? "text-red-400 cursor-not-allowed" : "",
+      iconClasses: !isValid
+        ? "text-red-400 cursor-not-allowed"
+        : "cursor-pointer",
+      className: cn([
+        "transition-opacity hover:bg-slate-200 disabled:hover:bg-white",
+        "hover:dark:bg-slate-300 hover:dark:text-black",
+        disabled ? "cursor-not-allowed" : "cursor-pointer",
+      ]),
       onClick: handleSave,
       label: t("common:button.save"),
     },