refactor theming (#1002)

ente-io · Apr 12, 2023 · 52fcf77 · 52fcf77
2 parents 688b28e + 5c3851e
commit 52fcf77
Show file tree

Hide file tree

Showing 121 changed files with 997 additions and 1,038 deletions.
diff --git a/src/components/AuthenticateUserModal.tsx b/src/components/AuthenticateUserModal.tsx
@@ -27,7 +27,7 @@ export default function AuthenticateUserModal({
     const somethingWentWrong = () =>
         setDialogMessage({
             title: t('ERROR'),
-            close: { variant: 'danger' },
+            close: { variant: 'critical' },
             content: t('UNKNOWN_ERROR'),
         });
 

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -1,11 +1,12 @@
-import { Paper, styled } from '@mui/material';
-import { CSSProperties } from '@mui/styled-engine';
+import { Box, styled } from '@mui/material';
+import { CSSProperties } from '@mui/material/styles/createTypography';
 
-export const Badge = styled(Paper)(({ theme }) => ({
+export const Badge = styled(Box)(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
     padding: '2px 4px',
-    backgroundColor: theme.palette.backdrop.main,
-    backdropFilter: `blur(${theme.palette.blur.muted})`,
-    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.colors.black.muted,
+    backdropFilter: `blur(${theme.colors.blur.muted})`,
+    color: theme.colors.white.base,
     textTransform: 'uppercase',
-    ...(theme.typography.mini as CSSProperties),
+    ...(theme.typography.tiny as CSSProperties),
 }));
diff --git a/src/components/ChangeEmail.tsx b/src/components/ChangeEmail.tsx
@@ -82,14 +82,14 @@ function ChangeEmailForm() {
                 <>
                     {showMessage && (
                         <Alert
-                            color="accent"
+                            color="success"
                             onClose={() => setShowMessage(false)}>
                             <Trans
                                 i18nKey="EMAIL_SENT"
                                 components={{
                                     a: (
                                         <Box
-                                            color="text.secondary"
+                                            color="text.muted"
                                             component={'span'}
                                         />
                                     ),

diff --git a/src/components/CheckboxInput.tsx b/src/components/CheckboxInput.tsx
@@ -3,15 +3,15 @@ import {
     Checkbox,
     FormGroup,
     Typography,
-    TypographyTypeMap,
+    TypographyProps,
 } from '@mui/material';
 
 interface Iprops {
     disabled?: boolean;
     checked: boolean;
     onChange: (value: boolean) => void;
     label: string;
-    labelProps?: TypographyTypeMap['props'];
+    labelProps?: TypographyProps;
 }
 export function CheckboxInput({
     disabled,

diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -1,9 +1,10 @@
 import { Box, styled } from '@mui/material';
+import { CSSProperties } from '@mui/material/styles/createTypography';
 
 export const Chip = styled(Box)(({ theme }) => ({
-    ...theme.typography.body2,
+    ...(theme.typography.small as CSSProperties),
     padding: '8px 12px',
     borderRadius: '4px',
-    backgroundColor: theme.palette.fill.dark,
+    backgroundColor: theme.colors.fill.faint,
     fontWeight: 'bold',
 }));
diff --git a/src/components/CodeBlock/styledComponents.tsx b/src/components/CodeBlock/styledComponents.tsx
@@ -2,7 +2,7 @@ import { CenteredFlex } from 'components/Container';
 import { Box, styled } from '@mui/material';
 export const Wrapper = styled(CenteredFlex)`
     position: relative;
-    background: ${({ theme }) => theme.palette.accent.dark};
+    background: ${({ theme }) => theme.colors.accent.A700};
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
     min-height: 80px;
 `;

diff --git a/src/components/Collections/AllCollections/CollectionSort/index.tsx b/src/components/Collections/AllCollections/CollectionSort/index.tsx
@@ -20,13 +20,13 @@ export default function CollectionSort(props: CollectionSortProps) {
                 sx: {
                     backgroundColor: (theme) =>
                         props.nestedInDialog &&
-                        theme.palette.background.overPaper,
+                        theme.colors.background.elevated2,
                 },
             }}
             triggerButtonProps={{
                 sx: {
                     background: (theme) =>
-                        !props.disableBG && theme.palette.fill.dark,
+                        !props.disableBG && theme.colors.fill.faint,
                 },
             }}>
             <CollectionSortOptions {...props} />

diff --git a/src/components/Collections/AllCollections/collectionCard.tsx b/src/components/Collections/AllCollections/collectionCard.tsx
@@ -21,7 +21,7 @@ export default function AllCollectionCard({
             onClick={() => onCollectionClick(collectionSummary.id)}>
             <AllCollectionTileText>
                 <Typography>{collectionSummary.name}</Typography>
-                <Typography variant="body2" color="text.secondary">
+                <Typography variant="small" color="text.muted">
                     {t('photos_count', { count: collectionSummary.fileCount })}
                 </Typography>
             </AllCollectionTileText>

diff --git a/src/components/Collections/AllCollections/header.tsx b/src/components/Collections/AllCollections/header.tsx
@@ -21,7 +21,7 @@ export default function AllCollectionsHeader({
                 <FluidContainer mr={1.5}>
                     <Box>
                         <Typography variant="h3">{t('ALL_ALBUMS')}</Typography>
-                        <Typography variant="body2" color={'text.secondary'}>
+                        <Typography variant="small" color={'text.muted'}>
                             {t('albums', { count: collectionCount })}
                         </Typography>
                     </Box>

diff --git a/src/components/Collections/CollectionInfo.tsx b/src/components/Collections/CollectionInfo.tsx
@@ -14,15 +14,15 @@ export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
             <Typography variant="h3">{name}</Typography>
 
             <FlexWrapper>
-                <Typography variant="body2" color="text.secondary">
+                <Typography variant="small" color="text.muted">
                     {t('photos_count', { count: fileCount })}
                 </Typography>
                 {endIcon && (
                     <Box
                         sx={{
                             svg: {
                                 fontSize: '17px',
-                                color: 'text.secondary',
+                                color: 'text.muted',
                             },
                         }}
                         ml={1.5}>

diff --git a/src/components/Collections/CollectionListBar/CollectionCard.tsx b/src/components/Collections/CollectionListBar/CollectionCard.tsx
@@ -54,7 +54,7 @@ function CollectionCardIcon({ collectionType }) {
             {collectionType === CollectionSummaryType.archived && (
                 <ArchiveIcon
                     sx={(theme) => ({
-                        color: theme.palette.fixed.strokeMutedWhite,
+                        color: theme.colors.white.muted,
                     })}
                 />
             )}

diff --git a/src/components/Collections/CollectionListBar/ScrollButton.tsx b/src/components/Collections/CollectionListBar/ScrollButton.tsx
@@ -14,8 +14,8 @@ const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
     margin: 0;
 
     border-radius: 50%;
-    background-color: ${({ theme }) => theme.palette.background.paper};
-    color: ${({ theme }) => theme.palette.primary.main};
+    background-color: ${({ theme }) => theme.colors.backdrop.muted};
+    color: ${({ theme }) => theme.colors.stroke.base};
 
     ${(props) =>
         props.direction === SCROLL_DIRECTION.LEFT

diff --git a/src/components/Collections/CollectionOptions/TrashCollectionOption.tsx b/src/components/Collections/CollectionOptions/TrashCollectionOption.tsx
@@ -15,7 +15,7 @@ interface Iprops {
 export function TrashCollectionOption({ handleCollectionAction }: Iprops) {
     return (
         <OverflowMenuOption
-            color="danger"
+            color="critical"
             startIcon={<DeleteOutlinedIcon />}
             onClick={handleCollectionAction(
                 CollectionActions.CONFIRM_EMPTY_TRASH,

diff --git a/src/components/Collections/CollectionOptions/index.tsx b/src/components/Collections/CollectionOptions/index.tsx
@@ -128,7 +128,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                 setDialogMessage({
                     title: t('ERROR'),
                     content: t('UNKNOWN_ERROR'),
-                    close: { variant: 'danger' },
+                    close: { variant: 'critical' },
                 });
             } finally {
                 syncWithRemote(false, true);
@@ -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" />,
                     }}
                 />
             ),
@@ -201,7 +201,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                 action: handleCollectionAction(
                     CollectionActions.DELETE_WITH_FILES
                 ),
-                variant: 'danger',
+                variant: 'critical',
             },
             secondary: {
                 text: t('KEEP_PHOTOS'),
@@ -239,7 +239,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
             proceed: {
                 action: handleCollectionAction(CollectionActions.EMPTY_TRASH),
                 text: t('EMPTY_TRASH'),
-                variant: 'danger',
+                variant: 'critical',
             },
             close: { text: t('CANCEL') },
         });
@@ -253,7 +253,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
                 action: handleCollectionAction(
                     CollectionActions.LEAVE_SHARED_ALBUM
                 ),
-                variant: 'danger',
+                variant: 'critical',
             },
             close: {
                 text: t('CANCEL'),

diff --git a/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx b/src/components/Collections/CollectionShare/publicShare/EnablePublicShareOptions.tsx
@@ -88,9 +88,9 @@ export default function EnablePublicShareOptions({
             {sharableLinkError && (
                 <Typography
                     textAlign={'center'}
-                    variant="body2"
+                    variant="small"
                     sx={{
-                        color: (theme) => theme.palette.danger.main,
+                        color: (theme) => theme.colors.caution.A500,
                         mt: 0.5,
                     }}>
                     {sharableLinkError}

diff --git a/src/components/Collections/CollectionShare/publicShare/manage/downloadAccess.tsx b/src/components/Collections/CollectionShare/publicShare/manage/downloadAccess.tsx
@@ -40,7 +40,7 @@ export function ManageDownloadAccess({
                         collectionID: collection.id,
                         enableDownload: false,
                     }),
-                variant: 'danger',
+                variant: 'critical',
             },
         });
     };

diff --git a/src/components/Collections/CollectionShare/publicShare/manage/index.tsx b/src/components/Collections/CollectionShare/publicShare/manage/index.tsx
@@ -139,7 +139,7 @@ export default function ManagePublicShareOptions({
                                 {t('COPY_LINK')}
                             </EnteMenuItem>
                             <EnteMenuItem
-                                color="danger"
+                                color="critical"
                                 startIcon={<RemoveCircleOutline />}
                                 onClick={disablePublicSharing}>
                                 {t('REMOVE_LINK')}
@@ -148,9 +148,9 @@ export default function ManagePublicShareOptions({
                         {sharableLinkError && (
                             <Typography
                                 textAlign={'center'}
-                                variant="body2"
+                                variant="small"
                                 sx={{
-                                    color: (theme) => theme.palette.danger.main,
+                                    color: (theme) => theme.colors.caution.A500,
                                     mt: 0.5,
                                 }}>
                                 {sharableLinkError}

diff --git a/src/components/Collections/CollectionShare/publicShare/manage/linkPassword/index.tsx b/src/components/Collections/CollectionShare/publicShare/manage/linkPassword/index.tsx
@@ -41,7 +41,7 @@ export function ManageLinkPassword({
                         collectionID: collection.id,
                         disablePassword: true,
                     }),
-                variant: 'danger',
+                variant: 'critical',
             },
         });
     };

diff --git a/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx b/src/components/Collections/CollectionShare/publicShare/managePublicShare.tsx
@@ -34,7 +34,7 @@ export default function ManagePublicShare({
     return (
         <>
             <Stack>
-                <Typography color="text.secondary" variant="body2" padding={1}>
+                <Typography color="text.muted" variant="small" padding={1}>
                     <PublicIcon style={{ fontSize: 17, marginRight: 8 }} />
                     {t('PUBLIC_LINK_ENABLED')}
                 </Typography>

diff --git a/src/components/Collections/CollectionShare/sharees/index.tsx b/src/components/Collections/CollectionShare/sharees/index.tsx
@@ -31,7 +31,7 @@ export function CollectionShareSharees({ collection }: Iprops) {
 
     return (
         <Box mb={3}>
-            <Typography variant="body2" color="text.secondary">
+            <Typography variant="small" color="text.muted">
                 {t('SHAREES')}
             </Typography>
             {collection.sharees?.map((sharee) => (

diff --git a/src/components/Collections/CollectionShare/sharees/row.tsx b/src/components/Collections/CollectionShare/sharees/row.tsx
@@ -21,13 +21,13 @@ const ShareeRow = ({ sharee, collectionUnshare }: IProps) => {
                 menuPaperProps={{
                     sx: {
                         backgroundColor: (theme) =>
-                            theme.palette.background.overPaper,
+                            theme.colors.background.elevated2,
                     },
                 }}
                 ariaControls={`email-share-${sharee.email}`}
                 triggerButtonIcon={<MoreHorizIcon />}>
                 <OverflowMenuOption
-                    color="danger"
+                    color="critical"
                     onClick={handleClick}
                     startIcon={<NotInterestedIcon />}>
                     {t('REMOVE')}

diff --git a/src/components/Container.ts b/src/components/Container.ts
@@ -67,7 +67,7 @@ export const Overlay = styled(Box)`
 `;
 
 export const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
-    backgroundColor: theme.palette.fill.dark,
+    backgroundColor: theme.colors.fill.faint,
 }));
 
 export const HorizontalFlex = styled(Box)({

diff --git a/src/components/DeleteAccountModal.tsx b/src/components/DeleteAccountModal.tsx
@@ -65,7 +65,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
     const somethingWentWrong = () =>
         setDialogBoxAttributesV2({
             title: t('ERROR'),
-            close: { variant: 'danger' },
+            close: { variant: 'critical' },
             content: t('UNKNOWN_ERROR'),
         });
 
@@ -113,7 +113,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
             proceed: {
                 text: t('DELETE'),
                 action: solveChallengeAndDeleteAccount,
-                variant: 'danger',
+                variant: 'critical',
             },
             close: { text: t('CANCEL') },
         });
@@ -136,7 +136,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
                 action: () => {
                     initiateEmail('account-deletion@ente.io');
                 },
-                variant: 'danger',
+                variant: 'critical',
             },
             close: { text: t('CANCEL') },
         });
@@ -202,7 +202,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
                                     )}
                                     selected={values.reason}
                                     setSelected={handleChange('reason')}
-                                    messageProps={{ color: 'danger.main' }}
+                                    messageProps={{ color: 'critical.main' }}
                                     message={errors.reason}
                                 />
                                 <MultilineInput
@@ -213,7 +213,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
                                     value={values.feedback}
                                     onChange={handleChange('feedback')}
                                     message={errors.feedback}
-                                    messageProps={{ color: 'danger.main' }}
+                                    messageProps={{ color: 'critical.main' }}
                                     rowCount={3}
                                 />
                                 <CheckboxInput
@@ -227,7 +227,7 @@ const DeleteAccountModal = ({ open, onClose }: Iprops) => {
                                     <EnteButton
                                         type="submit"
                                         size="large"
-                                        color="danger"
+                                        color="critical"
                                         disabled={!acceptDataDeletion}
                                         loading={loading}>
                                         {t('CONFIRM_DELETE_ACCOUNT')}

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

diff --git a/src/components/DialogBoxV2/index.tsx b/src/components/DialogBoxV2/index.tsx
@@ -64,13 +64,13 @@ export default function DialogBoxV2({
                         </Box>
                     )}
                     {attributes.title && (
-                        <Typography variant="h4" fontWeight={'bold'}>
+                        <Typography variant="large" fontWeight={'bold'}>
                             {attributes.title}
                         </Typography>
                     )}
                     {children ||
                         (attributes?.content && (
-                            <Typography color="text.secondary">
+                            <Typography color="text.muted">
                                 {attributes.content}
                             </Typography>
                         ))}