0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Inline

Browse source
This commit is contained in:
Manav Rathi 2024-05-07 12:25:23 +05:30
parent 07d75a5dea
commit 54e8cd498f
No known key found for this signature in database
2 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/apps/photos/src/components/pages/gallery/PlanSelector/plans/FreePlanRow.tsx
View file

@ -1,28 +0,0 @@
import { SpaceBetweenFlex } from "@ente/shared/components/Container";
import ArrowForward from "@mui/icons-material/ArrowForward";
import { Box, IconButton, styled, Typography } from "@mui/material";
import { t } from "i18next";
const RowContainer = styled(SpaceBetweenFlex)(({ theme }) => ({
gap: theme.spacing(1.5),
padding: theme.spacing(1.5, 1),
cursor: "pointer",
"&:hover .endIcon": {
backgroundColor: "rgba(255,255,255,0.08)",
},
}));
export function FreePlanRow({ closeModal }) {
return (
<RowContainer onClick={closeModal}>
<Box>
<Typography> {t("FREE_PLAN_OPTION_LABEL")}</Typography>
<Typography variant="small" color="text.muted">
{t("FREE_PLAN_DESCRIPTION")}
</Typography>
</Box>
<IconButton className={"endIcon"}>
<ArrowForward />
</IconButton>
</RowContainer>
);
}

35
web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx
View file

@ -1,5 +1,8 @@
import { Stack } from "@mui/material";
import { SpaceBetweenFlex } from "@ente/shared/components/Container";
import ArrowForward from "@mui/icons-material/ArrowForward";
import { Box, IconButton, Stack, Typography, styled } from "@mui/material";
import { PLAN_PERIOD } from "constants/gallery";
import { t } from "i18next";
import { Plan, Subscription } from "types/billing";
import { BonusData } from "types/user";
import {
@ -8,7 +11,6 @@ import {
isPopularPlan,
isUserSubscribedPlan,
} from "utils/billing";
import { FreePlanRow } from "./FreePlanRow";
import { PlanRow } from "./planRow";
interface Iprops {
@ -48,3 +50,32 @@ const Plans = ({
);
export default Plans;
interface FreePlanRowProps {
closeModal: () => void;
}
const FreePlanRow: React.FC<FreePlanRowProps> = ({ closeModal }) => {
return (
<FreePlanRow_ onClick={closeModal}>
<Box>
<Typography> {t("FREE_PLAN_OPTION_LABEL")}</Typography>
<Typography variant="small" color="text.muted">
{t("FREE_PLAN_DESCRIPTION")}
</Typography>
</Box>
<IconButton className={"endIcon"}>
<ArrowForward />
</IconButton>
</FreePlanRow_>
);
};
const FreePlanRow_ = styled(SpaceBetweenFlex)(({ theme }) => ({
gap: theme.spacing(1.5),
padding: theme.spacing(1.5, 1),
cursor: "pointer",
"&:hover .endIcon": {
backgroundColor: "rgba(255,255,255,0.08)",
},
}));