All files / src/componentsV2/AccountProfile/AccountProfileModal ProfileModalActions.tsx

100% Statements 7/7
100% Branches 2/2
100% Functions 2/2
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54                      1x 11x   11x   1x                                         1x                                
import useNiceModal from "@common/Modal/ModalFactory/hooks/useNiceModal";
import { Box } from "@mui/material";
import GiveButton from "@shared/Button/GiveButton";
import { styled } from "@theme/v2/Provider";
 
type Props = {
  form?: string;
  isDirty?: boolean;
  isDisabled?: boolean;
};
 
const ProfileModalActions = ({ isDirty, isDisabled, form }: Props) => {
  const { onClose } = useNiceModal();
 
  if (!isDirty) return null;
 
  return (
    <ActionsContainer>
      <GiveButton
        size="large"
        variant="ghost"
        label="Cancel"
        onClick={onClose}
        disabled={isDisabled}
      />
      <GiveButton
        size="large"
        variant="filled"
        label="Update"
        form={form}
        type="submit"
        disabled={isDisabled}
      />
    </ActionsContainer>
  );
};
 
const ActionsContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  justifyContent: "flex-end",
  gap: "12px",
  padding: "16px 20px",
  borderTop: `1px solid ${theme.palette?.border?.tertiary}`,
  background: theme.palette.surface?.["primary-transparent"],
  backdropFilter: "blur(15px)",
  [theme.breakpoints.down("v2_sm")]: {
    position: "sticky",
    width: "100%",
    bottom: 0,
  },
}));
 
export default ProfileModalActions;