mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2025-12-24 00:00:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated button styling on config header (#673)

Browse Source 
* fix: updated button in config

* Update src/pages/Config/index.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Dan Ditomaso
2025-06-18 21:08:56 -04:00
committed by GitHub
parent bb91350ef5
commit 762aed50b7
2 changed files with 33 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/PageLayout.tsx
View File

@@ -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",
"hover:bg-slate-200 disabled:hover:bg-white",
"text-foreground transition-colors duration-200",
"disabled:opacity-50 disabled:cursor-not-allowed",
action.className,
)}

48
src/pages/Config/index.tsx
View File

@@ -144,19 +144,23 @@ const ConfigPage = () => {
[activeConfigSection, workingConfig, workingModuleConfig],
);
const buttonOpacity = useMemo(
() => (formMethods?.formState.isDirty &&
Object.keys(formMethods?.formState.dirtyFields ?? {}).length > 0 ||
workingConfig.length > 0 || workingModuleConfig.length > 0
? "opacity-100"
: "opacity-0"),
[
formMethods?.formState.isDirty,
formMethods?.formState.dirtyFields,
workingConfig,
workingModuleConfig,
],
);
const buttonOpacity = useMemo(() => {
const isFormDirty = formMethods?.formState.isDirty ?? false;
const hasDirtyFields =
(Object.keys(formMethods?.formState.dirtyFields ?? {}).length ?? 0) > 0;
const hasWorkingConfig = workingConfig.length > 0;
const hasWorkingModuleConfig = workingModuleConfig.length > 0;
const shouldShowButton = (isFormDirty && hasDirtyFields) ||
hasWorkingConfig || hasWorkingModuleConfig;
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"),
},