migrated code using mui TextType colors
This commit is contained in:
parent
e1a32dedbf
commit
c6fe74c0dd
|
@ -89,7 +89,7 @@ function ChangeEmailForm() {
|
|||
components={{
|
||||
a: (
|
||||
<Box
|
||||
color="text.secondary"
|
||||
color="text.muted"
|
||||
component={'span'}
|
||||
/>
|
||||
),
|
||||
|
|
|
@ -21,7 +21,7 @@ export default function AllCollectionCard({
|
|||
onClick={() => onCollectionClick(collectionSummary.id)}>
|
||||
<AllCollectionTileText>
|
||||
<Typography>{collectionSummary.name}</Typography>
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{t('photos_count', { count: collectionSummary.fileCount })}
|
||||
</Typography>
|
||||
</AllCollectionTileText>
|
||||
|
|
|
@ -21,7 +21,7 @@ export default function AllCollectionsHeader({
|
|||
<FluidContainer mr={1.5}>
|
||||
<Box>
|
||||
<Typography variant="h3">{t('ALL_ALBUMS')}</Typography>
|
||||
<Typography variant="small" color={'text.secondary'}>
|
||||
<Typography variant="small" color={'text.muted'}>
|
||||
{t('albums', { count: collectionCount })}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -14,7 +14,7 @@ export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
|
|||
<Typography variant="h3">{name}</Typography>
|
||||
|
||||
<FlexWrapper>
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{t('photos_count', { count: fileCount })}
|
||||
</Typography>
|
||||
{endIcon && (
|
||||
|
@ -22,7 +22,7 @@ export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
|
|||
sx={{
|
||||
svg: {
|
||||
fontSize: '17px',
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
},
|
||||
}}
|
||||
ml={1.5}>
|
||||
|
|
|
@ -192,7 +192,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
|
|||
<Trans
|
||||
i18nKey={'DELETE_COLLECTION_MESSAGE'}
|
||||
components={{
|
||||
a: <Box component={'span'} color="text.primary" />,
|
||||
a: <Box component={'span'} color="text.base" />,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
|
|
|
@ -34,7 +34,7 @@ export default function ManagePublicShare({
|
|||
return (
|
||||
<>
|
||||
<Stack>
|
||||
<Typography color="text.secondary" variant="small" padding={1}>
|
||||
<Typography color="text.muted" variant="small" padding={1}>
|
||||
<PublicIcon style={{ fontSize: 17, marginRight: 8 }} />
|
||||
{t('PUBLIC_LINK_ENABLED')}
|
||||
</Typography>
|
||||
|
|
|
@ -31,7 +31,7 @@ export function CollectionShareSharees({ collection }: Iprops) {
|
|||
|
||||
return (
|
||||
<Box mb={3}>
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{t('SHAREES')}
|
||||
</Typography>
|
||||
{collection.sharees?.map((sharee) => (
|
||||
|
|
|
@ -141,7 +141,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
|
|||
/>
|
||||
</VerticallyCentered>
|
||||
|
||||
<Typography color="text.secondary" px={1.5}>
|
||||
<Typography color="text.muted" px={1.5}>
|
||||
<Trans
|
||||
i18nKey="ASK_FOR_FEEDBACK"
|
||||
components={{
|
||||
|
|
|
@ -63,7 +63,7 @@ export default function DialogBox({
|
|||
{(children || attributes?.content) && (
|
||||
<DialogContent>
|
||||
{children || (
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{attributes.content}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
|
@ -68,7 +68,7 @@ export default function DialogBoxV2({
|
|||
)}
|
||||
{children ||
|
||||
(attributes?.content && (
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{attributes.content}
|
||||
</Typography>
|
||||
))}
|
||||
|
|
|
@ -47,7 +47,7 @@ export default function DropdownInput<T extends string>({
|
|||
'.MuiMenuItem-root ': {
|
||||
color: theme.colors.text.faint,
|
||||
},
|
||||
'&& > .Mui-selected': {
|
||||
'&&& > .Mui-selected': {
|
||||
background: theme.palette.background.elevated2,
|
||||
color: theme.colors.text.base,
|
||||
},
|
||||
|
@ -72,7 +72,7 @@ export default function DropdownInput<T extends string>({
|
|||
})}
|
||||
renderValue={(selected) => {
|
||||
return !selected?.length ? (
|
||||
<Box color={'text.secondary'}>{placeholder ?? ''}</Box>
|
||||
<Box color={'text.muted'}>{placeholder ?? ''}</Box>
|
||||
) : (
|
||||
options.find((o) => o.value === selected).label
|
||||
);
|
||||
|
@ -96,7 +96,7 @@ export default function DropdownInput<T extends string>({
|
|||
))}
|
||||
</Select>
|
||||
{message && (
|
||||
<Typography px={'8px'} color={'text.secondary'}>
|
||||
<Typography px={'8px'} color={'text.muted'}>
|
||||
{message}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
|
@ -42,7 +42,7 @@ export default function EmptyScreen({ openUploader }) {
|
|||
pb: 1.5,
|
||||
}}>
|
||||
<VerticallyCentered sx={{ flex: 'none' }}>
|
||||
<Typography variant="h3" color="text.secondary" mb={1}>
|
||||
<Typography variant="h3" color="text.muted" mb={1}>
|
||||
<Trans
|
||||
i18nKey="WELCOME_TO_ENTE_HEADING"
|
||||
components={{ a: <EnteLogo /> }}
|
||||
|
@ -52,7 +52,7 @@ export default function EmptyScreen({ openUploader }) {
|
|||
{t('WELCOME_TO_ENTE_SUBHEADING')}
|
||||
</Typography>
|
||||
</VerticallyCentered>
|
||||
<Typography mt={3.5} color="text.secondary">
|
||||
<Typography mt={3.5} color="text.muted">
|
||||
{t('WHERE_YOUR_BEST_PHOTOS_LIVE')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
|
|
@ -23,13 +23,13 @@ export default function ExportFinished(props: Props) {
|
|||
<DialogContent>
|
||||
<Stack pr={2}>
|
||||
<SpaceBetweenFlex minHeight={'48px'}>
|
||||
<Typography color={'text.secondary'}>
|
||||
<Typography color={'text.muted'}>
|
||||
{t('PENDING_ITEMS')}
|
||||
</Typography>
|
||||
<Typography>{props.pendingFileCount}</Typography>
|
||||
</SpaceBetweenFlex>
|
||||
<SpaceBetweenFlex minHeight={'48px'}>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{t('LAST_EXPORT_TIME')}
|
||||
</Typography>
|
||||
<Typography>
|
||||
|
|
|
@ -248,10 +248,10 @@ export default function ExportModal(props: Props) {
|
|||
toggleContinuousExport={toggleContinuousExport}
|
||||
/>
|
||||
<SpaceBetweenFlex minHeight={'48px'} pr={'16px'}>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{t('TOTAL_ITEMS')}
|
||||
</Typography>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{fileExportStats.totalCount}
|
||||
</Typography>
|
||||
</SpaceBetweenFlex>
|
||||
|
@ -278,7 +278,7 @@ function ExportDirectory({
|
|||
}) {
|
||||
return (
|
||||
<SpaceBetweenFlex minHeight={'48px'}>
|
||||
<Typography color="text.secondary" mr={'16px'}>
|
||||
<Typography color="text.muted" mr={'16px'}>
|
||||
{t('DESTINATION')}
|
||||
</Typography>
|
||||
<>
|
||||
|
@ -332,9 +332,7 @@ function ExportDirectoryOption({ changeExportDirectory }) {
|
|||
function ContinuousExport({ continuousExport, toggleContinuousExport }) {
|
||||
return (
|
||||
<SpaceBetweenFlex minHeight={'48px'}>
|
||||
<Typography color="text.secondary">
|
||||
{t('CONTINUOUS_EXPORT')}
|
||||
</Typography>
|
||||
<Typography color="text.muted">{t('CONTINUOUS_EXPORT')}</Typography>
|
||||
<Box>
|
||||
<Switch
|
||||
color="accent"
|
||||
|
|
|
@ -53,7 +53,7 @@ export default function EnableFaceSearch({
|
|||
onRootClose={handleRootClose}
|
||||
/>
|
||||
<Stack py={'20px'} px={'8px'} spacing={'32px'}>
|
||||
<Typography color="text.secondary" px={'8px'}>
|
||||
<Typography color="text.muted" px={'8px'}>
|
||||
<Trans
|
||||
i18nKey={'ENABLE_FACE_SEARCH_DESCRIPTION'}
|
||||
components={{
|
||||
|
@ -74,7 +74,7 @@ export default function EnableFaceSearch({
|
|||
<FormGroup sx={{ width: '100%' }}>
|
||||
<FormControlLabel
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
ml: 0,
|
||||
mt: 2,
|
||||
}}
|
||||
|
|
|
@ -20,7 +20,7 @@ export default function EnableMLSearch({
|
|||
<Stack py={'20px'} px={'8px'} spacing={'32px'}>
|
||||
<Box px={'8px'}>
|
||||
{' '}
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
<Trans i18nKey={'ENABLE_ML_SEARCH_DESCRIPTION'} />
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -55,14 +55,12 @@ export function MemberSubscriptionManage({ open, userDetails, onClose }) {
|
|||
<Typography variant="h3" fontWeight={'bold'}>
|
||||
{t('SUBSCRIPTION')}
|
||||
</Typography>
|
||||
<Typography color={'text.secondary'}>
|
||||
{t('FAMILY_PLAN')}
|
||||
</Typography>
|
||||
<Typography color={'text.muted'}>{t('FAMILY_PLAN')}</Typography>
|
||||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<VerticallyCentered>
|
||||
<Box mb={4}>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{t('FAMILY_SUBSCRIPTION_INFO')}
|
||||
</Typography>
|
||||
<Typography>
|
||||
|
|
|
@ -13,13 +13,13 @@ export default function MenuSectionTitle({ title, icon }: Iprops) {
|
|||
sx={{
|
||||
'& > svg': {
|
||||
fontSize: '17px',
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
},
|
||||
}}>
|
||||
{icon}
|
||||
</Box>
|
||||
)}
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
|
|
@ -60,7 +60,7 @@ export function EnteMenuItem({
|
|||
{subText && (
|
||||
<FluidContainer
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
fontSize: '14px',
|
||||
}}>
|
||||
<DotSeparator style={{ fontSize: 8 }} />
|
||||
|
|
|
@ -67,9 +67,7 @@ export function ExifData(props: {
|
|||
{[...Object.entries(exif)].map(([key, value]) =>
|
||||
value ? (
|
||||
<ExifItem key={key}>
|
||||
<Typography
|
||||
variant="small"
|
||||
color={'text.secondary'}>
|
||||
<Typography variant="small" color={'text.muted'}>
|
||||
{key}
|
||||
</Typography>
|
||||
<Typography
|
||||
|
|
|
@ -42,7 +42,7 @@ export default function InfoItem({
|
|||
<Typography sx={{ wordBreak: 'break-all' }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{caption}
|
||||
</Typography>
|
||||
</>
|
||||
|
|
|
@ -237,7 +237,7 @@ export function FileInfo({
|
|||
onClick={openExif}
|
||||
sx={{
|
||||
textDecoration: 'none',
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
fontWeight: 'bold',
|
||||
}}>
|
||||
{t('VIEW_EXIF')}
|
||||
|
|
|
@ -31,7 +31,7 @@ const LabelWithInfo = ({ data }: { data: SearchOption }) => {
|
|||
{data.label}
|
||||
</Typography>
|
||||
</FreeFlowText>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{t('photos_count', { count: data.fileCount })}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -17,9 +17,7 @@ export default function SearchResultInfo({ searchResultSummary }: Iprops) {
|
|||
|
||||
return (
|
||||
<CollectionInfoBarWrapper>
|
||||
<Typography color="text.secondary">
|
||||
{t('SEARCH_RESULTS')}
|
||||
</Typography>
|
||||
<Typography color="text.muted">{t('SEARCH_RESULTS')}</Typography>
|
||||
<CollectionInfo name={optionName} fileCount={fileCount} />
|
||||
</CollectionInfoBarWrapper>
|
||||
);
|
||||
|
|
|
@ -65,7 +65,7 @@ function SetPasswordForm(props: SetPasswordFormProps) {
|
|||
onSubmit={onSubmit}>
|
||||
{({ values, errors, handleChange, handleSubmit }) => (
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<Typography mb={2} color="text.secondary" variant="small">
|
||||
<Typography mb={2} color="text.muted" variant="small">
|
||||
{t('ENTER_ENC_PASSPHRASE')}
|
||||
</Typography>
|
||||
|
||||
|
@ -121,7 +121,7 @@ function SetPasswordForm(props: SetPasswordFormProps) {
|
|||
<Typography
|
||||
textAlign="center"
|
||||
mt={1}
|
||||
color="text.secondary"
|
||||
color="text.muted"
|
||||
variant="small">
|
||||
{t('KEY_GENERATION_IN_PROGRESS_MESSAGE')}
|
||||
</Typography>
|
||||
|
|
|
@ -60,11 +60,11 @@ export default function DebugSection() {
|
|||
<SidebarButton
|
||||
onClick={confirmLogDownload}
|
||||
typographyVariant="caption"
|
||||
sx={{ fontWeight: 'normal', color: 'text.secondary' }}>
|
||||
sx={{ fontWeight: 'normal', color: 'text.muted' }}>
|
||||
{t('DOWNLOAD_UPLOAD_LOGS')}
|
||||
</SidebarButton>
|
||||
{appVersion && (
|
||||
<Typography p={1.5} color="text.secondary" variant="mini">
|
||||
<Typography p={1.5} color="text.muted" variant="mini">
|
||||
{appVersion}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
|
@ -39,7 +39,7 @@ export const LanguageSelector = () => {
|
|||
<DropdownInput
|
||||
options={getLanguageOptions()}
|
||||
label={t('LANGUAGE')}
|
||||
labelProps={{ color: 'text.secondary' }}
|
||||
labelProps={{ color: 'text.muted' }}
|
||||
selectedValue={userLocale}
|
||||
setSelectedValue={updateCurrentLocale}
|
||||
/>
|
||||
|
|
|
@ -21,7 +21,7 @@ const ShortcutButton: FC<ButtonProps<'button', Iprops>> = ({
|
|||
{...props}>
|
||||
{label}
|
||||
|
||||
<Box sx={{ color: 'text.secondary' }}>
|
||||
<Box sx={{ color: 'text.muted' }}>
|
||||
<DotSeparator />
|
||||
{count}
|
||||
</Box>
|
||||
|
|
|
@ -30,8 +30,8 @@ export function FamilyUsageSection({
|
|||
marginTop: 1.5,
|
||||
}}>
|
||||
<Stack direction={'row'} spacing={1.5}>
|
||||
<Legend label={t('YOU')} color="text.primary" />
|
||||
<Legend label={t('FAMILY')} color="text.secondary" />
|
||||
<Legend label={t('YOU')} color="text.base" />
|
||||
<Legend label={t('FAMILY')} color="text.muted" />
|
||||
</Stack>
|
||||
<Typography variant="mini" fontWeight={'bold'}>
|
||||
{t('photos_count', { count: fileCount ?? 0 })}
|
||||
|
|
|
@ -24,7 +24,7 @@ export function FamilyUsageProgressBar({
|
|||
top: 0,
|
||||
zIndex: 1,
|
||||
'.MuiLinearProgress-bar ': {
|
||||
backgroundColor: 'text.secondary',
|
||||
backgroundColor: 'text.muted',
|
||||
},
|
||||
width: '100%',
|
||||
}}
|
||||
|
|
|
@ -23,7 +23,7 @@ interface Iprops {
|
|||
export default function StorageSection({ usage, storage }: Iprops) {
|
||||
return (
|
||||
<Box width="100%">
|
||||
<Typography variant="small" color={'text.secondary'}>
|
||||
<Typography variant="small" color={'text.muted'}>
|
||||
{t('STORAGE')}
|
||||
</Typography>
|
||||
<DefaultBox>
|
||||
|
|
|
@ -72,7 +72,7 @@ export default function SubscriptionStatus({
|
|||
<Box px={1} pt={0.5}>
|
||||
<Typography
|
||||
variant="small"
|
||||
color={'text.secondary'}
|
||||
color={'text.muted'}
|
||||
onClick={handleClick && handleClick}
|
||||
sx={{ cursor: handleClick && 'pointer' }}>
|
||||
{isSubscriptionActive(userDetails.subscription) ? (
|
||||
|
|
|
@ -57,7 +57,7 @@ export default function UserDetailsSection({ sidebarView }) {
|
|||
return (
|
||||
<>
|
||||
<Box px={0.5} mt={2} pb={1.5} mb={1}>
|
||||
<Typography px={1} pb={1} color="text.secondary">
|
||||
<Typography px={1} pb={1} color="text.muted">
|
||||
{userDetails ? (
|
||||
userDetails.email
|
||||
) : (
|
||||
|
|
|
@ -165,7 +165,7 @@ export default function SignUp(props: SignUpProps) {
|
|||
<FormGroup sx={{ width: '100%' }}>
|
||||
<FormControlLabel
|
||||
sx={{
|
||||
color: 'text.secondary',
|
||||
color: 'text.muted',
|
||||
ml: 0,
|
||||
mt: 2,
|
||||
}}
|
||||
|
@ -218,7 +218,7 @@ export default function SignUp(props: SignUpProps) {
|
|||
<Typography
|
||||
mt={1}
|
||||
textAlign={'center'}
|
||||
color="text.secondary"
|
||||
color="text.muted"
|
||||
variant="small">
|
||||
{t('KEY_GENERATION_IN_PROGRESS_MESSAGE')}
|
||||
</Typography>
|
||||
|
|
|
@ -47,7 +47,7 @@ export default function Titlebar({
|
|||
</Typography>
|
||||
<Typography
|
||||
variant="small"
|
||||
color="text.secondary"
|
||||
color="text.muted"
|
||||
sx={{ wordBreak: 'break-all', minHeight: '17px' }}>
|
||||
{caption}
|
||||
</Typography>
|
||||
|
|
|
@ -67,10 +67,7 @@ export default function VerifyTwoFactor(props: Props) {
|
|||
{({ values, errors, handleChange, handleSubmit, submitForm }) => (
|
||||
<VerticallyCentered>
|
||||
<form noValidate onSubmit={handleSubmit}>
|
||||
<Typography
|
||||
mb={2}
|
||||
variant="small"
|
||||
color="text.secondary">
|
||||
<Typography mb={2} variant="small" color="text.muted">
|
||||
{t('ENTER_TWO_FACTOR_OTP')}
|
||||
</Typography>
|
||||
<Box my={2}>
|
||||
|
|
|
@ -28,7 +28,7 @@ export const UploadProgressSectionContent = styled(MuiAccordionDetails)(
|
|||
|
||||
export const SectionInfo = (props: TypographyProps) => (
|
||||
<Typography
|
||||
color={'text.secondary'}
|
||||
color={'text.muted'}
|
||||
variant="small"
|
||||
{...props}
|
||||
sx={{ mb: 1 }}
|
||||
|
|
|
@ -21,7 +21,7 @@ function UploadProgressSubtitleText() {
|
|||
const { uploadStage, uploadCounter } = useContext(UploadProgressContext);
|
||||
|
||||
return (
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{uploadStage === UPLOAD_STAGES.UPLOADING
|
||||
? t(`UPLOAD_STAGE_MESSAGE.${uploadStage}`, { uploadCounter })
|
||||
: uploadStage === UPLOAD_STAGES.EXTRACTING_METADATA
|
||||
|
|
|
@ -28,7 +28,7 @@ function UploadStrategyChoiceModal({
|
|||
</DialogTitleWithCloseButton>
|
||||
<DialogContent>
|
||||
<CenteredFlex mb={1}>
|
||||
<Typography color="text.secondary">
|
||||
<Typography color="text.muted">
|
||||
{t('UPLOAD_STRATEGY_CHOICE')}
|
||||
</Typography>
|
||||
</CenteredFlex>
|
||||
|
|
|
@ -88,7 +88,7 @@ export default function UploadTypeSelector({
|
|||
</UploadTypeOption>
|
||||
)}
|
||||
</Stack>
|
||||
<Typography p={1.5} pt={4} color="text.secondary">
|
||||
<Typography p={1.5} pt={4} color="text.muted">
|
||||
{t('DRAG_AND_DROP_HINT')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -25,7 +25,7 @@ export default function UserNameInputDialog({
|
|||
title: t('ENTER_NAME'),
|
||||
icon: <AutoAwesomeOutlinedIcon />,
|
||||
}}>
|
||||
<Typography color={'text.secondary'} pb={1}>
|
||||
<Typography color={'text.muted'} pb={1}>
|
||||
{t('PUBLIC_UPLOADER_NAME_MESSAGE')}
|
||||
</Typography>
|
||||
<SingleInputForm
|
||||
|
|
|
@ -55,7 +55,7 @@ export function MappingEntry({ mapping, handleRemoveMapping }: Iprops) {
|
|||
)}
|
||||
<EntryContainer>
|
||||
<EntryHeading mapping={mapping} />
|
||||
<Typography color="text.secondary" variant="small">
|
||||
<Typography color="text.muted" variant="small">
|
||||
{mapping.folderPath}
|
||||
</Typography>
|
||||
</EntryContainer>
|
||||
|
|
|
@ -13,16 +13,16 @@ export function NoMappingsContent() {
|
|||
<Typography variant="large" fontWeight={'bold'}>
|
||||
{t('NO_FOLDERS_ADDED')}
|
||||
</Typography>
|
||||
<Typography py={0.5} variant={'small'} color="text.secondary">
|
||||
<Typography py={0.5} variant={'small'} color="text.muted">
|
||||
{t('FOLDERS_AUTOMATICALLY_MONITORED')}
|
||||
</Typography>
|
||||
<Typography variant={'small'} color="text.secondary">
|
||||
<Typography variant={'small'} color="text.muted">
|
||||
<FlexWrapper gap={1}>
|
||||
<CheckmarkIcon />
|
||||
{t('UPLOAD_NEW_FILES_TO_ENTE')}
|
||||
</FlexWrapper>
|
||||
</Typography>
|
||||
<Typography variant={'small'} color="text.secondary">
|
||||
<Typography variant={'small'} color="text.muted">
|
||||
<FlexWrapper gap={1}>
|
||||
<CheckmarkIcon />
|
||||
{t('REMOVE_DELETED_FILES_FROM_ENTE')}
|
||||
|
|
|
@ -17,7 +17,7 @@ const LinkButton: FC<LinkProps<'button', { color?: ButtonProps['color'] }>> = ({
|
|||
<Link
|
||||
component="button"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
color: 'text.base',
|
||||
textDecoration: 'underline rgba(255, 255, 255, 0.4)',
|
||||
paddingBottom: 0.5,
|
||||
'&:hover': {
|
||||
|
|
|
@ -27,10 +27,7 @@ export default function FreeSubscriptionPlanSelectorCard({
|
|||
planPeriod={planPeriod}
|
||||
togglePeriod={togglePeriod}
|
||||
/>
|
||||
<Typography
|
||||
variant="small"
|
||||
mt={0.5}
|
||||
color="text.secondary">
|
||||
<Typography variant="small" mt={0.5} color="text.muted">
|
||||
{t('TWO_MONTHS_FREE')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -29,7 +29,7 @@ export default function PaidSubscriptionPlanSelectorCard({
|
|||
<Typography variant="h3" fontWeight={'bold'}>
|
||||
{t('SUBSCRIPTION')}
|
||||
</Typography>
|
||||
<Typography variant="small" color={'text.secondary'}>
|
||||
<Typography variant="small" color={'text.muted'}>
|
||||
{convertBytesToGBs(subscription.storage, 2)}{' '}
|
||||
{t('GB')}
|
||||
</Typography>
|
||||
|
@ -41,7 +41,7 @@ export default function PaidSubscriptionPlanSelectorCard({
|
|||
</Box>
|
||||
|
||||
<Box px={1.5}>
|
||||
<Typography color={'text.secondary'} fontWeight={'bold'}>
|
||||
<Typography color={'text.muted'} fontWeight={'bold'}>
|
||||
<Trans
|
||||
i18nKey="CURRENT_USAGE"
|
||||
values={{
|
||||
|
@ -62,10 +62,7 @@ export default function PaidSubscriptionPlanSelectorCard({
|
|||
planPeriod={planPeriod}
|
||||
togglePeriod={togglePeriod}
|
||||
/>
|
||||
<Typography
|
||||
variant="small"
|
||||
mt={0.5}
|
||||
color="text.secondary">
|
||||
<Typography variant="small" mt={0.5} color="text.muted">
|
||||
{t('TWO_MONTHS_FREE')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
@ -79,7 +76,7 @@ export default function PaidSubscriptionPlanSelectorCard({
|
|||
</Stack>
|
||||
|
||||
<Box py={1} px={1.5}>
|
||||
<Typography color={'text.secondary'}>
|
||||
<Typography color={'text.muted'}>
|
||||
{!isSubscriptionCancelled(subscription)
|
||||
? t('RENEWAL_ACTIVE_SUBSCRIPTION_STATUS', {
|
||||
date: subscription.expiryTime,
|
||||
|
|
|
@ -19,7 +19,7 @@ export function FreePlanRow({ closeModal }) {
|
|||
<RowContainer onClick={closeModal}>
|
||||
<Box>
|
||||
<Typography> {t('FREE_PLAN_OPTION_LABEL')}</Typography>
|
||||
<Typography variant="small" color="text.secondary">
|
||||
<Typography variant="small" color="text.muted">
|
||||
{t('FREE_PLAN_DESCRIPTION')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
|
|
@ -77,7 +77,7 @@ export function PlanRow({
|
|||
{convertBytesToGBs(plan.storage)}
|
||||
</Typography>
|
||||
<FlexWrapper flexWrap={'wrap'} gap={1}>
|
||||
<Typography variant="h3" color="text.secondary">
|
||||
<Typography variant="h3" color="text.muted">
|
||||
{t('GB')}
|
||||
</Typography>
|
||||
{popular && !hasPaidSubscription(subscription) && (
|
||||
|
@ -98,7 +98,7 @@ export function PlanRow({
|
|||
<Typography fontWeight={'bold'} variant="large">
|
||||
{plan.price}{' '}
|
||||
</Typography>{' '}
|
||||
<Typography color="text.secondary" variant="small">
|
||||
<Typography color="text.muted" variant="small">
|
||||
{`/ ${
|
||||
plan.period === PLAN_PERIOD.MONTH
|
||||
? t('MONTH_SHORT')
|
||||
|
|
|
@ -611,7 +611,7 @@ export default function Gallery() {
|
|||
)}
|
||||
{isFirstLoad && (
|
||||
<CenteredFlex>
|
||||
<Typography color="text.secondary" variant="small">
|
||||
<Typography color="text.muted" variant="small">
|
||||
{t('INITIAL_LOAD_DELAY_WARNING')}
|
||||
</Typography>
|
||||
</CenteredFlex>
|
||||
|
|
|
@ -79,7 +79,7 @@ const SideBox = styled('div')`
|
|||
`;
|
||||
|
||||
const TextContainer = (props: TypographyProps) => (
|
||||
<Typography color={'text.secondary'} mt={2} mb={3} {...props} />
|
||||
<Typography color={'text.muted'} mt={2} mb={3} {...props} />
|
||||
);
|
||||
|
||||
const FeatureText = (props: TypographyProps) => (
|
||||
|
|
|
@ -355,10 +355,7 @@ export default function PublicCollectionGallery() {
|
|||
<FormContainer>
|
||||
<FormPaper>
|
||||
<FormPaperTitle>{t('PASSWORD')}</FormPaperTitle>
|
||||
<Typography
|
||||
color={'text.secondary'}
|
||||
mb={2}
|
||||
variant="small">
|
||||
<Typography color={'text.muted'} mb={2} variant="small">
|
||||
{t('LINK_PASSWORD')}
|
||||
</Typography>
|
||||
<SingleInputForm
|
||||
|
|
|
@ -138,17 +138,12 @@ export default function Verify() {
|
|||
<Trans
|
||||
i18nKey="EMAIL_SENT"
|
||||
components={{
|
||||
a: (
|
||||
<Box
|
||||
color="text.secondary"
|
||||
component={'span'}
|
||||
/>
|
||||
),
|
||||
a: <Box color="text.muted" component={'span'} />,
|
||||
}}
|
||||
values={{ email }}
|
||||
/>
|
||||
</FormPaperTitle>
|
||||
<Typography color={'text.secondary'} mb={2} variant="small">
|
||||
<Typography color={'text.muted'} mb={2} variant="small">
|
||||
{t('CHECK_INBOX')}
|
||||
</Typography>
|
||||
<SingleInputForm
|
||||
|
|
Loading…
Reference in a new issue