hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions 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
co-authored by Copilot
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
src/components/PageLayout.tsx
+1 -2
View File
@@ -80,8 +80,7 @@ export const PageLayout = ({
disabled={action.disabled || action.isLoading} disabled={action.disabled || action.isLoading}
className={cn( className={cn(
"flex items-center space-x-2 py-2 px-3 rounded-md", "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", "disabled:opacity-50 disabled:cursor-not-allowed",
action.className, action.className,
)} )}
src/pages/Config/index.tsx
+32 -16
View File
@@ -144,19 +144,23 @@ const ConfigPage = () => {
[activeConfigSection, workingConfig, workingModuleConfig], [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(() => { const isValid = useMemo(() => {
return Object.keys(formMethods?.formState.errors ?? {}).length === 0; return Object.keys(formMethods?.formState.errors ?? {}).length === 0;
@@ -168,7 +172,8 @@ const ConfigPage = () => {
label: t("common:formValidation.unsavedChanges"), label: t("common:formValidation.unsavedChanges"),
onClick: () => {}, onClick: () => {},
className: cn([ 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, buttonOpacity,
"transition-opacity", "transition-opacity",
]), ]),
@@ -178,7 +183,11 @@ const ConfigPage = () => {
icon: RefreshCwIcon, icon: RefreshCwIcon,
label: t("common:button.reset"), label: t("common:button.reset"),
onClick: handleReset, 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", key: "save",
@@ -187,7 +196,14 @@ const ConfigPage = () => {
disabled: isSaving || disabled: isSaving ||
!isValid || !isValid ||
(workingConfig.length === 0 && workingModuleConfig.length === 0), (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, onClick: handleSave,
label: t("common:button.save"), label: t("common:button.save"),
}, },