fix: Styling of disabled accent buttons

This commit is contained in:
Tom Moor
2024-06-16 20:49:46 -04:00
parent 9b542c451b
commit 92301791f6
3 changed files with 29 additions and 5 deletions

View File

@@ -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};

View File

@@ -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 && (
<>

View File

@@ -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)};
}
`;