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

migrated code using mui TextType colors

Browse source
This commit is contained in:
Abhinav 2023-03-31 20:08:56 +05:30
parent e1a32dedbf
commit c6fe74c0dd
52 changed files with 74 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ChangeEmail.tsx
View file

@ -89,7 +89,7 @@ function ChangeEmailForm() {
components={{
a: (
<Box
color="text.secondary"
color="text.muted"
component={'span'}
/>
),

2
src/components/Collections/AllCollections/collectionCard.tsx
View file

@ -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>

2
src/components/Collections/AllCollections/header.tsx
View file

@ -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>

4
src/components/Collections/CollectionInfo.tsx
View file

@ -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}>

2
src/components/Collections/CollectionOptions/index.tsx
View file

@ -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" />,
}}
/>
),

2
src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx
View file

@ -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>

2
src/components/Collections/CollectionShare/sharees/index.tsx
View file

@ -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) => (

2
src/components/DeleteAccountModal.tsx
View file

@ -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={{

2
src/components/DialogBox/index.tsx
View file

@ -63,7 +63,7 @@ export default function DialogBox({
{(children || attributes?.content) && (
<DialogContent>
{children || (
<Typography color="text.secondary">
<Typography color="text.muted">
{attributes.content}
</Typography>
)}

2
src/components/DialogBoxV2/index.tsx
View file

@ -68,7 +68,7 @@ export default function DialogBoxV2({
)}
{children ||
(attributes?.content && (
<Typography color="text.secondary">
<Typography color="text.muted">
{attributes.content}
</Typography>
))}

6
src/components/DropdownInput.tsx
View file

@ -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>
)}

4
src/components/EmptyScreen.tsx
View file

@ -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>

4
src/components/ExportFinished.tsx
View file

@ -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>

10
src/components/ExportModal.tsx
View file

@ -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"

4
src/components/MachineLearning/MLSearchSettings/enableFaceSearch.tsx
View file

@ -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,
}}

2
src/components/MachineLearning/MLSearchSettings/enableMLSearch.tsx
View file

@ -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>

6
src/components/MemberSubscriptionManage.tsx
View file

@ -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>

4
src/components/Menu/MenuSectionTitle.tsx
View file

@ -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>

2
src/components/Menu/menuItem.tsx
View file

@ -60,7 +60,7 @@ export function EnteMenuItem({
{subText && (
<FluidContainer
sx={{
color: 'text.secondary',
color: 'text.muted',
fontSize: '14px',
}}>
<DotSeparator style={{ fontSize: 8 }} />

4
src/components/PhotoViewer/FileInfo/ExifData.tsx
View file

@ -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

2
src/components/PhotoViewer/FileInfo/InfoItem.tsx
View file

@ -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>
</>

2
src/components/PhotoViewer/FileInfo/index.tsx
View file

@ -237,7 +237,7 @@ export function FileInfo({
onClick={openExif}
sx={{
textDecoration: 'none',
color: 'text.secondary',
color: 'text.muted',
fontWeight: 'bold',
}}>
{t('VIEW_EXIF')}

2
src/components/Search/SearchBar/searchInput/optionWithInfo.tsx
View file

@ -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>

4
src/components/Search/SearchResultInfo.tsx
View file

@ -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>
);

4
src/components/SetPasswordForm.tsx
View file

@ -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>

4
src/components/Sidebar/DebugSection.tsx
View file

@ -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>
)}

2
src/components/Sidebar/Preferences/LanguageSelector.tsx
View file

@ -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}
/>

2
src/components/Sidebar/ShortcutButton.tsx
View file

@ -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>

4
src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/index.tsx
View file

@ -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 })}

2
src/components/Sidebar/SubscriptionCard/contentOverlay/family/usageSection/progressBar.tsx
View file

@ -24,7 +24,7 @@ export function FamilyUsageProgressBar({
top: 0,
zIndex: 1,
'.MuiLinearProgress-bar ': {
backgroundColor: 'text.secondary',
backgroundColor: 'text.muted',
},
width: '100%',
}}

2
src/components/Sidebar/SubscriptionCard/contentOverlay/storageSection.tsx
View file

@ -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>

2
src/components/Sidebar/SubscriptionStatus/index.tsx
View file

@ -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) ? (

2
src/components/Sidebar/userDetailsSection.tsx
View file

@ -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
) : (

4
src/components/SignUp.tsx
View file

@ -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>

2
src/components/Titlebar.tsx
View file

@ -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>

5
src/components/TwoFactor/VerifyForm.tsx
View file

@ -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}>

2
src/components/Upload/UploadProgress/section.tsx
View file

@ -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 }}

2
src/components/Upload/UploadProgress/title.tsx
View file

@ -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

2
src/components/Upload/UploadStrategyChoiceModal.tsx
View file

@ -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>

2
src/components/Upload/UploadTypeSelector/index.tsx
View file

@ -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>

2
src/components/UserNameInputDialog.tsx
View file

@ -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

2
src/components/WatchFolder/mappingEntry/index.tsx
View file

@ -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>

6
src/components/WatchFolder/mappingList/noMappingsContent/noMappingsContent.tsx
View file

@ -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')}

2
src/components/pages/gallery/LinkButton.tsx
View file

@ -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': {

5
src/components/pages/gallery/PlanSelector/card/free.tsx
View file

@ -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>

11
src/components/pages/gallery/PlanSelector/card/paid.tsx
View file

@ -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,

2
src/components/pages/gallery/PlanSelector/plans/FreePlanRow.tsx
View file

@ -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>

4
src/components/pages/gallery/PlanSelector/plans/planRow.tsx
View file

@ -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')

2
src/pages/gallery/index.tsx
View file

@ -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>

2
src/pages/index.tsx
View file

@ -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) => (

5
src/pages/shared-albums/index.tsx
View file

@ -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

9
src/pages/verify/index.tsx
View file

@ -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