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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 16x 16x 16x 16x 93x 93x 93x 16x 16x 13x 13x 13x 22x 96x | import { ConversationMenu } from "@features/GiveConversation/components/ConversationMenu";
import { ConversationMenuProps } from "@features/GiveConversation/types";
import { Box } from "@mui/material";
import { Stack } from "@mui/material";
import {
CheckCircleIcon,
InfoIcon,
WarningDiamondIcon,
} from "@phosphor-icons/react";
import GiveChip from "@shared/Chip/GiveChip";
import { HFCheckbox } from "@shared/HFInputs/HFGiveCheckbox/HFGiveCheckbox";
import GiveText from "@shared/Text/GiveText";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useAppTheme } from "@theme/v2/Provider";
export function ModalTitle({
title,
points,
description,
}: {
title: string;
points: number;
description: string;
}) {
const { isMobileView } = useCustomThemeV2();
return (
<Stack
direction={isMobileView ? "column" : "row"}
alignItems={isMobileView ? "flex-start" : "center"}
gap="4px"
>
{isMobileView && (
<Stack direction="row" alignItems="center" gap="4px">
<GiveText variant="bodyS" color="secondary">
{getPointsText(points)}
</GiveText>
<InfoTooltip title={description} />
</Stack>
)}
<GiveText variant="bodyM">{title}</GiveText>
{!isMobileView && <InfoTooltip title={description} />}
</Stack>
);
}
function InfoTooltip({ title }: { title: string }) {
const { palette } = useAppTheme();
return (
<GiveTooltip title={title} fluidWidth>
<InfoIcon size="20px" color={palette.icon?.["icon-secondary"]} />
</GiveTooltip>
);
}
export function TitleIcon({ isIgnored }: { isIgnored: boolean }) {
const { palette } = useAppTheme();
Iif (isIgnored)
return (
<CheckCircleIcon
weight="fill"
size="24px"
color={palette.primitive?.success[50]}
/>
);
return (
<WarningDiamondIcon size="24px" color={palette.primitive?.warning[50]} />
);
}
export function HeaderRight({
points,
conversationMenuProps,
}: {
points: number;
conversationMenuProps: ConversationMenuProps;
}) {
const { palette } = useAppTheme();
return (
<Stack direction="row" alignItems="center" gap="12px">
<GiveChip label={getPointsText(points)} size="small" />
<ConversationMenu
{...conversationMenuProps}
isRiskTrigger
containerWidth="fluid"
/>
</Stack>
);
}
export function FooterLeftContent({ isIgnored }: { isIgnored: boolean }) {
const label = isIgnored ? "Reinstate Trigger" : "Mark Trigger as OK";
const name = isIgnored ? "isReinstated" : "isIgnored";
return <HFCheckbox name={name} label={label} />;
}
export const getPointsText = (points: number) => {
return ` + ${points} ${points > 1 ? "Points" : "Point"}`;
};
|