fix: Styling of disabled accent buttons
This commit is contained in:
@@ -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};
|
||||
|
||||
@@ -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 && (
|
||||
<>
|
||||
|
||||
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