From 92301791f630384c8f16c9aa9683351450fe8749 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 16 Jun 2024 20:49:46 -0400
Subject: [PATCH] fix: Styling of disabled accent buttons

---
 app/components/Button.tsx                    |  4 ++--
 app/scenes/Settings/Details.tsx              |  9 ++++++---
 app/scenes/Settings/components/ActionRow.tsx | 21 ++++++++++++++++++++
 3 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 app/scenes/Settings/components/ActionRow.tsx

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 4c4d9b96c..f1dd6a835 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -49,8 +49,8 @@ const RealButton = styled(ActionButton)<RealProps>`
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    background: ${(props) => lighten(0.2, props.theme.accent)};
+    color: ${(props) => transparentize(0.3, props.theme.accentText)};
+    background: ${(props) => transparentize(0.1, props.theme.accent)};
 
     svg {
       fill: ${(props) => props.theme.white50};
diff --git a/app/scenes/Settings/Details.tsx b/app/scenes/Settings/Details.tsx
index 983a364d4..eab2ade3b 100644
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -25,6 +25,7 @@ import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
 import TeamDelete from "../TeamDelete";
+import { ActionRow } from "./components/ActionRow";
 import ImageInput from "./components/ImageInput";
 import SettingRow from "./components/SettingRow";
 
@@ -303,9 +304,11 @@ function Details() {
             />
           </SettingRow>
 
-          <Button type="submit" disabled={team.isSaving || !isValid}>
-            {team.isSaving ? `${t("Saving")}…` : t("Save")}
-          </Button>
+          <ActionRow>
+            <Button type="submit" disabled={team.isSaving || !isValid}>
+              {team.isSaving ? `${t("Saving")}…` : t("Save")}
+            </Button>
+          </ActionRow>
 
           {can.delete && (
             <>
diff --git a/app/scenes/Settings/components/ActionRow.tsx b/app/scenes/Settings/components/ActionRow.tsx
new file mode 100644
index 000000000..8db2f624b
--- /dev/null
+++ b/app/scenes/Settings/components/ActionRow.tsx
@@ -0,0 +1,21 @@
+import { transparentize } from "polished";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+/**
+ * A sticky container for action buttons such as "Save" on settings screens.
+ */
+export const ActionRow = styled.div`
+  position: sticky;
+  bottom: 0;
+  padding: 16px 50vw;
+  margin: 0 -50vw;
+
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
+
+  @supports (backdrop-filter: blur(20px)) {
+    backdrop-filter: blur(20px);
+    background: ${(props) => transparentize(0.2, props.theme.background)};
+  }
+`;