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

fix styling errors

Browse source
This commit is contained in:
Abhinav 2022-07-05 16:59:34 +05:30
parent 9fb9090520
commit b20c5aa98b
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/pages/gallery/PlanSelector/card.tsx
View file

@ -15,7 +15,6 @@ import {
hasPaidSubscription, hasPaidSubscription,
convertBytesToGBs, convertBytesToGBs,
getTotalFamilyUsage, getTotalFamilyUsage,
makeHumanReadableStorage,
} from 'utils/billing'; } from 'utils/billing';
import { reverseString } from 'utils/common'; import { reverseString } from 'utils/common';
import { GalleryContext } from 'pages/gallery'; import { GalleryContext } from 'pages/gallery';
@ -158,7 +157,7 @@ function PlanSelectorCard(props: Props) {
return ( return (
<> <>
<Stack spacing={3} p={1.5}> <Stack spacing={3} p={1.5}>
<Box py={0.5} px={1.5}> <Box px={hasPaidSubscription(subscription) && 1.5}>
{hasPaidSubscription(subscription) ? ( {hasPaidSubscription(subscription) ? (
<SpaceBetweenFlex> <SpaceBetweenFlex>
<Box> <Box>
@ -188,7 +187,9 @@ function PlanSelectorCard(props: Props) {
color={'text.secondary'} color={'text.secondary'}
fontWeight={'bold'}> fontWeight={'bold'}>
{constants.CURRENT_USAGE( {constants.CURRENT_USAGE(
makeHumanReadableStorage(totalFamilyUsage) `${convertBytesToGBs(totalFamilyUsage, 2)} ${
constants.GB
}`
)} )}
</Typography> </Typography>
</Box> </Box>
@ -200,7 +201,7 @@ function PlanSelectorCard(props: Props) {
hasPaidSubscription(subscription) && hasPaidSubscription(subscription) &&
`1px solid ${theme.palette.divider}` `1px solid ${theme.palette.divider}`
} }
p={1.5} p={hasPaidSubscription(subscription) && 1.5}
borderRadius={(theme) => borderRadius={(theme) =>
`${theme.shape.borderRadius}px` `${theme.shape.borderRadius}px`
}> }>
@ -209,7 +210,10 @@ function PlanSelectorCard(props: Props) {
planPeriod={planPeriod} planPeriod={planPeriod}
togglePeriod={togglePeriod} togglePeriod={togglePeriod}
/> />
<Typography mt={0.5} color="text.secondary"> <Typography
variant="body2"
mt={0.5}
color="text.secondary">
{constants.TWO_MONTHS_FREE} {constants.TWO_MONTHS_FREE}
</Typography> </Typography>
</Box> </Box>