fix: Styling of disabled accent buttons
This commit is contained in:
@@ -49,8 +49,8 @@ const RealButton = styled(ActionButton)<RealProps>`
|
|||||||
&:disabled {
|
&:disabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: ${(props) => transparentize(0.5, props.theme.accentText)};
|
color: ${(props) => transparentize(0.3, props.theme.accentText)};
|
||||||
background: ${(props) => lighten(0.2, props.theme.accent)};
|
background: ${(props) => transparentize(0.1, props.theme.accent)};
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: ${(props) => props.theme.white50};
|
fill: ${(props) => props.theme.white50};
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ import usePolicy from "~/hooks/usePolicy";
|
|||||||
import useStores from "~/hooks/useStores";
|
import useStores from "~/hooks/useStores";
|
||||||
import isCloudHosted from "~/utils/isCloudHosted";
|
import isCloudHosted from "~/utils/isCloudHosted";
|
||||||
import TeamDelete from "../TeamDelete";
|
import TeamDelete from "../TeamDelete";
|
||||||
|
import { ActionRow } from "./components/ActionRow";
|
||||||
import ImageInput from "./components/ImageInput";
|
import ImageInput from "./components/ImageInput";
|
||||||
import SettingRow from "./components/SettingRow";
|
import SettingRow from "./components/SettingRow";
|
||||||
|
|
||||||
@@ -303,9 +304,11 @@ function Details() {
|
|||||||
/>
|
/>
|
||||||
</SettingRow>
|
</SettingRow>
|
||||||
|
|
||||||
<Button type="submit" disabled={team.isSaving || !isValid}>
|
<ActionRow>
|
||||||
{team.isSaving ? `${t("Saving")}…` : t("Save")}
|
<Button type="submit" disabled={team.isSaving || !isValid}>
|
||||||
</Button>
|
{team.isSaving ? `${t("Saving")}…` : t("Save")}
|
||||||
|
</Button>
|
||||||
|
</ActionRow>
|
||||||
|
|
||||||
{can.delete && (
|
{can.delete && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
21
app/scenes/Settings/components/ActionRow.tsx
Normal file
21
app/scenes/Settings/components/ActionRow.tsx
Normal 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)};
|
||||||
|
}
|
||||||
|
`;
|
||||||
Reference in New Issue
Block a user