From 670a75048ebf4245c903678832a755d034e91c62 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 6 Jan 2025 12:12:57 +0530
Subject: [PATCH] codemods + manual

---
 .../albums/components/UploaderNameInput.tsx   |  9 ++-
 .../components/CollectionMappingChoice.tsx    |  4 +-
 .../new/photos/components/DevSettings.tsx     | 36 +++++-----
 .../new/photos/components/PeopleList.tsx      | 14 ++--
 .../new/photos/components/PlanSelector.tsx    | 55 +++++++++-------
 .../new/photos/components/SearchBar.tsx       | 23 ++++---
 .../new/photos/components/WhatsNew.tsx        |  4 +-
 .../new/photos/components/gallery/BarImpl.tsx | 30 +++++----
 .../photos/components/gallery/ListHeader.tsx  |  4 +-
 .../components/gallery/PeopleHeader.tsx       | 10 +--
 .../new/photos/components/gallery/index.tsx   |  4 +-
 .../photos/components/sidebar/MLSettings.tsx  | 66 +++++++++----------
 .../components/sidebar/TwoFactorSettings.tsx  | 13 ++--
 web/packages/new/photos/pages/duplicates.tsx  | 21 ++++--
 14 files changed, 166 insertions(+), 127 deletions(-)

diff --git a/web/packages/new/albums/components/UploaderNameInput.tsx b/web/packages/new/albums/components/UploaderNameInput.tsx
index 2b4c04e828..3bfca83ff0 100644
--- a/web/packages/new/albums/components/UploaderNameInput.tsx
+++ b/web/packages/new/albums/components/UploaderNameInput.tsx
@@ -54,21 +54,20 @@ export const UploaderNameInput: React.FC<UploaderNameInput> = ({
             fullWidth
         >
             <Box
-                sx={{
+                sx={(theme) => ({
                     padding: "24px 16px 0px 16px",
                     svg: {
                         width: "44px",
                         height: "44px",
                     },
-                    color: (theme) => theme.colors.stroke.muted,
-                }}
+                    color: theme.colors.stroke.muted,
+                })}
             >
                 {<AutoAwesomeOutlinedIcon />}
             </Box>
             <DialogTitle>{t("enter_name")}</DialogTitle>
-
             <DialogContent>
-                <Typography color={"text.muted"} sx={{ pb: 1 }}>
+                <Typography sx={{ color: "text.muted", pb: 1 }}>
                     {t("uploader_name_hint")}
                 </Typography>
                 <SingleInputForm
diff --git a/web/packages/new/photos/components/CollectionMappingChoice.tsx b/web/packages/new/photos/components/CollectionMappingChoice.tsx
index ce0019f853..0decb5c0c8 100644
--- a/web/packages/new/photos/components/CollectionMappingChoice.tsx
+++ b/web/packages/new/photos/components/CollectionMappingChoice.tsx
@@ -49,7 +49,9 @@ export const CollectionMappingChoice: React.FC<
                 gap: "20px",
             }}
         >
-            <Typography color="text.muted">{t("upload_to_choice")}</Typography>
+            <Typography sx={{ color: "text.muted" }}>
+                {t("upload_to_choice")}
+            </Typography>
             <Stack sx={{ gap: "12px" }}>
                 <FocusVisibleButton
                     size="medium"
diff --git a/web/packages/new/photos/components/DevSettings.tsx b/web/packages/new/photos/components/DevSettings.tsx
index 48b5d415e4..8a77b8414c 100644
--- a/web/packages/new/photos/components/DevSettings.tsx
+++ b/web/packages/new/photos/components/DevSettings.tsx
@@ -149,24 +149,26 @@ const Form: React.FC<FormProps> = ({ initialAPIOrigin, onClose }) => {
                             ? form.errors.apiOrigin
                             : " " /* always show an empty string to prevent a layout shift */
                     }
-                    InputProps={{
-                        endAdornment: (
-                            <InputAdornment position="end">
-                                <Link
-                                    href="https://help.ente.io/self-hosting/guides/custom-server/"
-                                    target="_blank"
-                                    rel="noopener"
-                                >
-                                    <IconButton
-                                        aria-label={t("more_information")}
-                                        color="secondary"
-                                        edge="end"
+                    slotProps={{
+                        input: {
+                            endAdornment: (
+                                <InputAdornment position="end">
+                                    <Link
+                                        href="https://help.ente.io/self-hosting/guides/custom-server/"
+                                        target="_blank"
+                                        rel="noopener"
                                     >
-                                        <InfoOutlinedIcon />
-                                    </IconButton>
-                                </Link>
-                            </InputAdornment>
-                        ),
+                                        <IconButton
+                                            aria-label={t("more_information")}
+                                            color="secondary"
+                                            edge="end"
+                                        >
+                                            <InfoOutlinedIcon />
+                                        </IconButton>
+                                    </Link>
+                                </InputAdornment>
+                            ),
+                        },
                     }}
                 />
             </DialogContent>
diff --git a/web/packages/new/photos/components/PeopleList.tsx b/web/packages/new/photos/components/PeopleList.tsx
index 28455f4e66..82abf0fcdf 100644
--- a/web/packages/new/photos/components/PeopleList.tsx
+++ b/web/packages/new/photos/components/PeopleList.tsx
@@ -21,7 +21,11 @@ export const SearchPeopleList: React.FC<SearchPeopleListProps> = ({
     const isSmallWidth = useIsSmallWidth();
     return (
         <SearchPeopleContainer
-            sx={{ justifyContent: people.length > 3 ? "center" : "start" }}
+            sx={[
+                people.length > 3
+                    ? { justifyContent: "center" }
+                    : { justifyContent: "start" },
+            ]}
         >
             {people.slice(0, isSmallWidth ? 6 : 7).map((person) => (
                 <SearchPersonButton
@@ -195,10 +199,8 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
     placeholderDimension,
 }) => {
     const [url, setURL] = useState<string | undefined>();
-
     useEffect(() => {
         let didCancel = false;
-
         void faceCrop(faceID, file).then((url) => !didCancel && setURL(url));
 
         return () => {
@@ -212,9 +214,9 @@ const FaceCropImageView: React.FC<FaceCropImageViewProps> = ({
         <Skeleton
             variant="circular"
             animation="wave"
-            sx={{
-                backgroundColor: (theme) => theme.colors.background.elevated2,
-            }}
+            sx={(theme) => ({
+                backgroundColor: theme.colors.background.elevated2,
+            })}
             width={placeholderDimension}
             height={placeholderDimension}
         />
diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index 3d6982f792..002c718bff 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -229,7 +229,7 @@ const PlanSelectorCard: React.FC<PlanSelectorCardProps> = ({
     );
 
     return (
-        <Stack spacing={3} p={1.5}>
+        <Stack sx={{ gap: 3, p: 1.5 }}>
             {subscription && isSubscriptionActivePaid(subscription) ? (
                 <PaidSubscriptionPlanSelectorCard
                     {...commonCardData}
@@ -308,7 +308,7 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
     children,
 }) => (
     <>
-        <Typography variant="h3" fontWeight={"bold"}>
+        <Typography variant="h3" sx={{ fontWeight: "bold" }}>
             {t("choose_plan")}
         </Typography>
         <Box>
@@ -318,7 +318,10 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
                         planPeriod={planPeriod}
                         togglePeriod={togglePeriod}
                     />
-                    <Typography variant="small" mt={0.5} color="text.muted">
+                    <Typography
+                        variant="small"
+                        sx={{ mt: 0.5, color: "text.muted" }}
+                    >
                         {t("two_months_free")}
                     </Typography>
                 </Box>
@@ -358,13 +361,13 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
     children,
 }) => (
     <>
-        <Box pl={1.5} py={0.5}>
+        <Box sx={{ pl: 1.5, py: 0.5 }}>
             <SpaceBetweenFlex>
                 <Box>
-                    <Typography variant="h3" fontWeight={"bold"}>
+                    <Typography variant="h3" sx={{ fontWeight: "bold" }}>
                         {t("subscription")}
                     </Typography>
-                    <Typography variant="small" color={"text.muted"}>
+                    <Typography variant="small" sx={{ color: "text.muted" }}>
                         {bytesInGB(subscription.storage, 2)}{" "}
                         {t("storage_unit.gb")}
                     </Typography>
@@ -375,8 +378,8 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
             </SpaceBetweenFlex>
         </Box>
 
-        <Box px={1.5}>
-            <Typography color={"text.muted"} fontWeight={"bold"}>
+        <Box sx={{ px: 1.5 }}>
+            <Typography sx={{ color: "text.muted", fontWeight: "bold" }}>
                 <Trans
                     i18nKey="current_usage"
                     values={{
@@ -388,25 +391,30 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
 
         <Box>
             <Stack
-                spacing={3}
-                border={(theme) => `1px solid ${theme.palette.divider}`}
-                p={1.5}
-                borderRadius={(theme) => `${theme.shape.borderRadius}px`}
+                sx={(theme) => ({
+                    border: `1px solid ${theme.palette.divider}`,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    gap: 3,
+                    p: 1.5,
+                })}
             >
                 <Box>
                     <PeriodToggler
                         planPeriod={planPeriod}
                         togglePeriod={togglePeriod}
                     />
-                    <Typography variant="small" mt={0.5} color="text.muted">
+                    <Typography
+                        variant="small"
+                        sx={{ mt: 0.5, color: "text.muted" }}
+                    >
                         {t("two_months_free")}
                     </Typography>
                 </Box>
                 {children}
             </Stack>
 
-            <Box py={1} px={1.5}>
-                <Typography color={"text.muted"}>
+            <Box sx={{ py: 1, px: 1.5 }}>
+                <Typography sx={{ color: "text.muted" }}>
                     {!isSubscriptionCancelled(subscription)
                         ? t("subscription_status_renewal_active", {
                               date: subscription.expiryTime,
@@ -543,7 +551,7 @@ const PlanRow: React.FC<PlanRowProps> = ({
             <TopAlignedFluidContainer>
                 <Typography variant="h1">{bytesInGB(plan.storage)}</Typography>
                 <FlexWrapper flexWrap={"wrap"} gap={1}>
-                    <Typography variant="h3" color="text.muted">
+                    <Typography variant="h3" sx={{ color: "text.muted" }}>
                         {t("storage_unit.gb")}
                     </Typography>
                     {popular &&
@@ -553,7 +561,7 @@ const PlanRow: React.FC<PlanRowProps> = ({
                         ) && <Badge>{t("POPULAR")}</Badge>}
                 </FlexWrapper>
             </TopAlignedFluidContainer>
-            <Box width="136px">
+            <Box sx={{ width: "136px" }}>
                 <PlanButton
                     sx={{
                         justifyContent: "flex-end",
@@ -563,11 +571,14 @@ const PlanRow: React.FC<PlanRowProps> = ({
                     size="large"
                     onClick={handleClick}
                 >
-                    <Box textAlign={"right"}>
-                        <Typography fontWeight={"bold"} variant="large">
+                    <Box sx={{ textAlign: "right" }}>
+                        <Typography variant="large" sx={{ fontWeight: "bold" }}>
                             {plan.price}{" "}
                         </Typography>{" "}
-                        <Typography color="text.muted" variant="small">
+                        <Typography
+                            variant="small"
+                            sx={{ color: "text.muted" }}
+                        >
                             {`/ ${
                                 plan.period === "month"
                                     ? t("month_short")
@@ -629,7 +640,7 @@ const FreePlanRow: React.FC<FreePlanRowProps> = ({ onClose, storage }) => (
     <FreePlanRow_ onClick={onClose}>
         <Box>
             <Typography>{t("free_plan_option")}</Typography>
-            <Typography variant="small" color="text.muted">
+            <Typography variant="small" sx={{ color: "text.muted" }}>
                 {t("free_plan_description", {
                     storage: formattedStorageByteSize(storage),
                 })}
@@ -657,7 +668,7 @@ interface AddOnBonusRowsProps {
 const AddOnBonusRows: React.FC<AddOnBonusRowsProps> = ({ addOnBonuses }) => (
     <>
         {addOnBonuses.map((bonus, i) => (
-            <Typography color="text.muted" key={i} sx={{ pt: 1 }}>
+            <Typography key={i} sx={{ color: "text.muted", pt: 1 }}>
                 <Trans
                     i18nKey={"add_on_valid_till"}
                     values={{
diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index 849aac6d4c..91e8fae595 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/web/packages/new/photos/components/SearchBar.tsx
@@ -320,13 +320,13 @@ const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
             }}
         >
             <Box
-                sx={{
+                sx={(theme) => ({
                     display: "inline-flex",
                     // Match the default padding of the ValueContainer to make
                     // the icon look properly spaced and aligned.
                     pl: "8px",
-                    color: (theme) => theme.colors.stroke.muted,
-                }}
+                    color: theme.colors.stroke.muted,
+                })}
             >
                 {iconForOption(props.getValue()[0])}
             </Box>
@@ -433,7 +433,7 @@ const EmptyState: React.FC<
 
 const SearchPeopleHeader: React.FC<ButtonishProps> = ({ onClick }) => (
     <SearchPeopleHeaderButton {...{ onClick }}>
-        <Typography color="text.muted">{t("people")}</Typography>
+        <Typography sx={{ color: "text.muted" }}>{t("people")}</Typography>
     </SearchPeopleHeaderButton>
 );
 
@@ -456,14 +456,17 @@ const Option: React.FC<OptionProps<SearchOption, false>> = (props) => (
 );
 
 const OptionContents = ({ data: option }: { data: SearchOption }) => (
-    <Stack className="option-contents" gap="4px" px={2} py={1}>
-        <Typography variant="mini" color="text.muted">
+    <Stack className="option-contents" sx={{ gap: "4px", px: 2, py: 1 }}>
+        <Typography variant="mini" sx={{ color: "text.muted" }}>
             {labelForOption(option)}
         </Typography>
         <Stack
             direction="row"
-            gap={1}
-            sx={{ alignItems: "center", justifyContent: "space-between" }}
+            sx={{
+                gap: 1,
+                alignItems: "center",
+                justifyContent: "space-between",
+            }}
         >
             <Box>
                 <Typography
@@ -471,12 +474,12 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => (
                 >
                     {option.suggestion.label}
                 </Typography>
-                <Typography color="text.muted">
+                <Typography sx={{ color: "text.muted" }}>
                     {t("photos_count", { count: option.fileCount })}
                 </Typography>
             </Box>
 
-            <Stack direction={"row"} gap={1}>
+            <Stack direction={"row"} sx={{ gap: 1 }}>
                 {option.previewFiles.map((file) => (
                     <ItemCard
                         key={file.id}
diff --git a/web/packages/new/photos/components/WhatsNew.tsx b/web/packages/new/photos/components/WhatsNew.tsx
index 0f4f4bbc37..3b09c81715 100644
--- a/web/packages/new/photos/components/WhatsNew.tsx
+++ b/web/packages/new/photos/components/WhatsNew.tsx
@@ -42,9 +42,9 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
             maxWidth="xs"
             fullWidth
         >
-            <Box m={1}>
+            <Box sx={{ m: 1 }}>
                 <DialogTitle mt={2}>
-                    <Typography variant="h4" color="text.muted">
+                    <Typography variant="h4" sx={{ color: "text.muted" }}>
                         {ut("What's new")}
                     </Typography>
                 </DialogTitle>
diff --git a/web/packages/new/photos/components/gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx
index 5786559998..1fff5897a4 100644
--- a/web/packages/new/photos/components/gallery/BarImpl.tsx
+++ b/web/packages/new/photos/components/gallery/BarImpl.tsx
@@ -218,7 +218,14 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
     );
 
     const controls1 = isSmallWidth && (
-        <Box display="flex" alignItems={"center"} gap={1} minHeight={"64px"}>
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                minHeight: "64px",
+            }}
+        >
             {mode != "people" && (
                 <>
                     <CollectionsSortOptions
@@ -235,7 +242,14 @@ export const GalleryBarImpl: React.FC<GalleryBarImplProps> = ({
     );
 
     const controls2 = !isSmallWidth && mode != "people" && (
-        <Box display="flex" alignItems={"center"} gap={1} height={"64px"}>
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                height: "64px",
+            }}
+        >
             <CollectionsSortOptions
                 activeSortBy={collectionsSortBy}
                 onChangeSortBy={onChangeCollectionsSortBy}
@@ -344,7 +358,7 @@ const ModeIndicator: React.FC<
 const ModeButton = styled(UnstyledButton, {
     shouldForwardProp: (propName) => propName != "active",
 })<{ active: boolean }>(
-    ({ active, theme }) => `
+    ({ theme, active }) => `
     p { color: ${active ? theme.colors.text.base : theme.colors.text.muted} }
     p:hover { color: ${theme.colors.text.base} }
 `,
@@ -367,11 +381,9 @@ const ScrollButtonBase_ = styled("button")`
     border: none;
     padding: 0;
     margin: 0;
-
     border-radius: 50%;
     background-color: ${({ theme }) => theme.colors.backdrop.muted};
     color: ${({ theme }) => theme.colors.stroke.base};
-
     & > svg {
         border-radius: 50%;
         height: 30px;
@@ -383,7 +395,6 @@ const ScrollButtonLeft = styled(ScrollButtonBase)`
     left: 0;
     text-align: right;
     transform: translate(-50%, 0%);
-
     & > svg {
         transform: rotate(180deg);
     }
@@ -465,7 +476,6 @@ const ListItem = memo((props: ListChildComponentProps<ItemData>) => {
             );
             break;
         }
-
         case "people": {
             const { people, activePerson, onSelectPerson } = data;
             const person = people[index]!;
@@ -508,7 +518,7 @@ const CollectionBarCard: React.FC<CollectionBarCardProps> = ({
 
 const CardText: React.FC<React.PropsWithChildren> = ({ children }) => (
     <TileTextOverlay>
-        <Box height={"2.1em"}>
+        <Box sx={{ height: "2.1em" }}>
             <Ellipsized2LineTypography variant="small">
                 {children}
             </Ellipsized2LineTypography>
@@ -527,9 +537,7 @@ const CollectionBarCardIcon: React.FC<CollectionBarCardIconProps> = ({
         {type == "favorites" && <FavoriteRoundedIcon />}
         {type == "archived" && (
             <ArchiveIcon
-                sx={(theme) => ({
-                    color: theme.colors.white.muted,
-                })}
+                sx={(theme) => ({ color: theme.colors.white.muted })}
             />
         )}
         {type == "outgoingShare" && <PeopleIcon />}
diff --git a/web/packages/new/photos/components/gallery/ListHeader.tsx b/web/packages/new/photos/components/gallery/ListHeader.tsx
index c309cb15bd..1f59074b83 100644
--- a/web/packages/new/photos/components/gallery/ListHeader.tsx
+++ b/web/packages/new/photos/components/gallery/ListHeader.tsx
@@ -55,13 +55,13 @@ export const GalleryItemsSummary: React.FC<GalleryItemsSummaryProps> = ({
 
         <Stack
             direction="row"
-            gap={1.5}
             sx={{
+                gap: 1.5,
                 // Keep height the same even when there is no endIcon
                 minHeight: "24px",
             }}
         >
-            <Typography variant="small" color="text.muted">
+            <Typography variant="small" sx={{ color: "text.muted" }}>
                 {t("photos_count", { count: fileCount })}
             </Typography>
             {endIcon && (
diff --git a/web/packages/new/photos/components/gallery/PeopleHeader.tsx b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
index 91bd6ff432..851f7b241b 100644
--- a/web/packages/new/photos/components/gallery/PeopleHeader.tsx
+++ b/web/packages/new/photos/components/gallery/PeopleHeader.tsx
@@ -651,7 +651,7 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                             ? t("saved_choices")
                             : t("review_suggestions")}
                     </DialogTitle>
-                    <Typography color="text.muted">
+                    <Typography sx={{ color: "text.muted" }}>
                         {person.name ?? " "}
                     </Typography>
                 </Stack>
@@ -698,8 +698,10 @@ const SuggestionsDialog: React.FC<SuggestionsDialogProps> = ({
                 ) : state.suggestions.length == 0 ? (
                     <CenteredFill>
                         <Typography
-                            color="text.muted"
-                            sx={{ textAlign: "center" }}
+                            sx={{
+                                color: "text.muted",
+                                textAlign: "center",
+                            }}
                         >
                             {t("people_suggestions_empty")}
                         </Typography>
@@ -760,7 +762,7 @@ const SuggestionOrChoiceList: React.FC<SuggestionOrChoiceListProps> = ({
                 }}
             >
                 <Stack sx={{ gap: "10px" }}>
-                    <Typography variant="small" color="text.muted">
+                    <Typography variant="small" sx={{ color: "text.muted" }}>
                         {/* Use the face count as as stand-in for the photo count */}
                         {t("photos_count", { count: item.faces.length })}
                     </Typography>
diff --git a/web/packages/new/photos/components/gallery/index.tsx b/web/packages/new/photos/components/gallery/index.tsx
index 216e08a2bc..dda0130e07 100644
--- a/web/packages/new/photos/components/gallery/index.tsx
+++ b/web/packages/new/photos/components/gallery/index.tsx
@@ -38,7 +38,7 @@ export const SearchResultsHeader: React.FC<SearchResultsHeaderProps> = ({
     fileCount,
 }) => (
     <GalleryItemsHeaderAdapter>
-        <Typography color="text.muted" variant="large">
+        <Typography variant="large" sx={{ color: "text.muted" }}>
             {t("search_results")}
         </Typography>
         <GalleryItemsSummary
@@ -74,8 +74,8 @@ export const PeopleEmptyStateMessage: React.FC<React.PropsWithChildren> = ({
 }) => (
     <CenteredFill>
         <Typography
-            color="text.muted"
             sx={{
+                color: "text.muted",
                 mx: 1,
                 // Approximately compensate for the hidden section bar (86px),
                 // and then add a bit extra padding so that the message appears
diff --git a/web/packages/new/photos/components/sidebar/MLSettings.tsx b/web/packages/new/photos/components/sidebar/MLSettings.tsx
index 315aa21774..3d73789064 100644
--- a/web/packages/new/photos/components/sidebar/MLSettings.tsx
+++ b/web/packages/new/photos/components/sidebar/MLSettings.tsx
@@ -89,7 +89,7 @@ export const MLSettings: React.FC<NestedSidebarDrawerVisibilityProps> = ({
 
 const Loading: React.FC = () => {
     return (
-        <Box textAlign="center" pt={4}>
+        <Box sx={{ textAlign: "center", pt: 4 }}>
             <ActivityIndicator />
         </Box>
     );
@@ -112,21 +112,20 @@ export const EnableML: React.FC<EnableMLProps> = ({
         openURL("https://help.ente.io/photos/features/machine-learning");
 
     return (
-        <Stack py={"20px"} px={"16px"} spacing={"32px"}>
-            <Typography color="text.muted">
+        <Stack sx={{ gap: "32px", py: "20px", px: "16px" }}>
+            <Typography sx={{ color: "text.muted" }}>
                 {t("ml_search_description")}
             </Typography>
-            <Stack spacing={"8px"}>
+            <Stack sx={{ gap: "8px" }}>
                 <Button color={"accent"} size="large" onClick={onEnable}>
                     {t("enable")}
                 </Button>
-
                 <Button color="secondary" size="large" onClick={moreDetails}>
                     {t("more_details")}
                 </Button>
             </Stack>
             {showMagicSearchHint && (
-                <Typography color="text.faint" variant="small">
+                <Typography variant="small" sx={{ color: "text.faint" }}>
                     {t("ml_search_footnote")}
                 </Typography>
             )}
@@ -153,7 +152,7 @@ const FaceConsentDrawer: React.FC<FaceConsentDrawerProps> = ({
             {...{ open, onClose }}
             onRootClose={handleRootClose}
         >
-            <Stack spacing={"4px"} py={"12px"}>
+            <Stack sx={{ gap: "4px", py: "12px" }}>
                 <SidebarDrawerTitlebar
                     onClose={onClose}
                     onRootClose={handleRootClose}
@@ -187,16 +186,13 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
             target="_blank"
             href="https://ente.io/privacy#8-biometric-information-privacy-policy"
             underline="always"
-            sx={{
-                color: "inherit",
-                textDecorationColor: "inherit",
-            }}
+            sx={{ color: "inherit", textDecorationColor: "inherit" }}
         />
     );
 
     return (
-        <Stack py={"20px"} px={"8px"} spacing={"32px"}>
-            <Typography component="div" color="text.muted" px={"8px"}>
+        <Stack sx={{ gap: "32px", py: "20px", px: "8px" }}>
+            <Typography component="div" sx={{ color: "text.muted", px: "8px" }}>
                 <Trans
                     i18nKey={"ml_consent_description"}
                     components={{ a: privacyPolicyLink }}
@@ -204,11 +200,7 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
             </Typography>
             <FormGroup sx={{ width: "100%" }}>
                 <FormControlLabel
-                    sx={{
-                        color: "text.muted",
-                        ml: 0,
-                        mt: 2,
-                    }}
+                    sx={{ color: "text.muted", ml: 0, mt: 2 }}
                     control={
                         <Checkbox
                             size="small"
@@ -219,7 +211,7 @@ export const FaceConsent: React.FC<FaceConsentProps> = ({
                     label={t("ml_consent_confirmation")}
                 />
             </FormGroup>
-            <Stack px={"8px"} spacing={"8px"}>
+            <Stack sx={{ gap: "8px", px: "8px" }}>
                 <Button
                     color={"accent"}
                     size="large"
@@ -286,8 +278,8 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
         });
 
     return (
-        <Stack px={"16px"} py={"20px"} gap={4}>
-            <Stack gap={3}>
+        <Stack sx={{ px: "16px", py: "20px", gap: 4 }}>
+            <Stack sx={{ gap: 3 }}>
                 <MenuItemGroup>
                     <EnteMenuItem
                         label={t("enabled")}
@@ -301,13 +293,15 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
                 <Stack>
                     <Stack
                         direction="row"
-                        gap={2}
-                        px={2}
-                        pt={1}
-                        pb={2}
-                        justifyContent={"space-between"}
+                        sx={{
+                            gap: 2,
+                            px: 2,
+                            pt: 1,
+                            pb: 2,
+                            justifyContent: "space-between",
+                        }}
                     >
-                        <Typography color="text.faint">
+                        <Typography sx={{ color: "text.faint" }}>
                             {t("indexing")}
                         </Typography>
                         <Typography>{status}</Typography>
@@ -315,16 +309,20 @@ const ManageML: React.FC<ManageMLProps> = ({ mlStatus, onDisableML }) => {
                     <Divider sx={{ marginInlineStart: 2 }} />
                     <Stack
                         direction="row"
-                        gap={2}
-                        px={2}
-                        pt={2}
-                        pb={1}
-                        justifyContent={"space-between"}
+                        sx={{
+                            gap: 2,
+                            px: 2,
+                            pt: 2,
+                            pb: 1,
+                            justifyContent: "space-between",
+                        }}
                     >
-                        <Typography color="text.faint">
+                        <Typography sx={{ color: "text.faint" }}>
                             {t("processed")}
                         </Typography>
-                        <Typography textAlign="right">{processed}</Typography>
+                        <Typography sx={{ textAlign: "right" }}>
+                            {processed}
+                        </Typography>
                     </Stack>
                 </Stack>
             </Paper>
diff --git a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
index 010bfbe1b6..906a1d3219 100644
--- a/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
+++ b/web/packages/new/photos/components/sidebar/TwoFactorSettings.tsx
@@ -85,14 +85,17 @@ const SetupDrawerContents: React.FC<ContentsProps> = ({ onRootClose }) => {
     return (
         <Stack sx={{ px: "16px", py: "20px", alignItems: "center" }}>
             <LockIcon
-                sx={{
+                sx={(theme) => ({
                     fontSize: "40px",
-                    color: (theme) => theme.colors.text.muted,
-                }}
+                    color: theme.colors.text.muted,
+                })}
             />
             <Typography
-                sx={{ textAlign: "center", marginBlock: "32px 36px" }}
-                color="text.muted"
+                sx={{
+                    color: "text.muted",
+                    textAlign: "center",
+                    marginBlock: "32px 36px",
+                }}
             >
                 {t("two_factor_info")}
             </Typography>
diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx
index fb8a28c575..89c4941e05 100644
--- a/web/packages/new/photos/pages/duplicates.tsx
+++ b/web/packages/new/photos/pages/duplicates.tsx
@@ -561,7 +561,10 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
         return (
             <Stack
                 {...{ style }}
-                sx={{ paddingBlockEnd: "16px", opacity: checked ? 1 : 0.8 }}
+                sx={[
+                    { paddingBlockEnd: "16px" },
+                    checked ? { opacity: 1 } : { opacity: 0.8 },
+                ]}
             >
                 <Stack
                     direction="row"
@@ -569,9 +572,15 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                         justifyContent: "space-between",
                         alignItems: "center",
                         marginInline: 1,
-                        paddingInline: `${layoutParams.paddingInline}px`,
+                        paddingInline: "var(--layoutParams-paddingInline)px",
                         paddingBlock: "24px 0px",
                     }}
+                    style={
+                        {
+                            "--layoutParams-paddingInline":
+                                layoutParams.paddingInline,
+                        } as React.CSSProperties
+                    }
                 >
                     <Typography color={checked ? "text.base" : "text.muted"}>
                         {t("duplicate_group_description", { count, itemSize })}
@@ -581,10 +590,10 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                 </Stack>
                 <Divider
                     variant="middle"
-                    sx={{
-                        opacity: hideDivider ? 0 : 0.8,
-                        marginBlock: "4px 20px",
-                    }}
+                    sx={[
+                        { marginBlock: "4px 20px" },
+                        hideDivider ? { opacity: 0 } : { opacity: 0.8 },
+                    ]}
                 />
                 <ItemGrid {...{ layoutParams }}>
                     {items.map((item, j) => (