remove usage of styled components and replace with mui styled

src/components/AddToCollectionBtn.tsx

@@ -1,7 +1,7 @@
+import { styled } from '@mui/material';
 import React from 'react';
-import styled from 'styled-components';
 
-const Wrapper = styled.button`
+const Wrapper = styled('button')`
     border: none;
     background-color: #51cd7c;
     position: fixed;

src/components/CodeBlock/styledComponents.tsx

@@ -1,7 +1,6 @@
 import { IconButton } from '@mui/material';
 import { CenteredFlex } from 'components/Container';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
 export const Wrapper = styled(CenteredFlex)`
     position: relative;
     background: ${({ theme }) => theme.palette.accent.dark};
@@ -15,7 +14,7 @@ export const CopyButtonWrapper = styled(IconButton)`
     margin: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const CodeWrapper = styled.div`
+export const CodeWrapper = styled('div')`
     padding: 36px 36px 16px 16px;
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
 `;

src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx

@@ -19,12 +19,7 @@ const SortByOptionCreator =
             <MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
                 <ListItemIcon style={{ minWidth: '25px' }}>
                     {activeSortBy === props.sortBy && (
-                        <TickIcon
+                        <TickIcon sx={{ fontSize: 16 }} />
-                            css={`
-                                height: 16px;
-                                width: 16px;
-                            `}
-                        />
                     )}
                 </ListItemIcon>
                 <ListItemText>{props.children}</ListItemText>

src/components/Collections/CollectionBar/ScrollButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
+import { css, styled } from '@mui/material';
 
-const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
+const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
     position: absolute;
     z-index: 2;
     top: 7px;

src/components/Collections/CollectionShare/publicShare/switch.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SwitchProps, Switch } from '@mui/material';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
 const PublicShareSwitch = styled((props: SwitchProps) => (
     <Switch
         focusVisibleClassName=".Mui-focusVisible"

src/components/Collections/CollectionShare/styledComponents.tsx

@@ -1,13 +1,12 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const ManageSectionLabel = styled('summary')(
-export const ManageSectionLabel = styled.summary(
     ({ theme }) => `
     text-align: center;
     margin-bottom:${theme.spacing(1)};
 `
 );
 
-export const ManageSectionOptions = styled.section(
+export const ManageSectionOptions = styled('section')(
     ({ theme }) => `
     margin-bottom:${theme.spacing(4)};
 `

src/components/Collections/styledComponents.ts

@@ -1,7 +1,6 @@
 import { Box } from '@mui/material';
 import { PaddedContainer } from 'components/Container';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
 export const CollectionListWrapper = styled(Box)`
     position: relative;
     overflow: hidden;
@@ -19,7 +18,7 @@ export const CollectionInfoBarWrapper = styled(Box)`
     margin-bottom: 24px;
 `;
 
-export const ScrollContainer = styled.div`
+export const ScrollContainer = styled('div')`
     width: 100%;
     height: 100px;
     overflow: auto;
@@ -27,7 +26,7 @@ export const ScrollContainer = styled.div`
     display: flex;
 `;
 
-export const CollectionTile = styled.div`
+export const CollectionTile = styled('div')`
     display: flex;
     position: relative;
     border-radius: 4px;
@@ -42,18 +41,18 @@ export const CollectionTile = styled.div`
     }
 `;
 
-export const CollectionTileWrapper = styled.div`
+export const CollectionTileWrapper = styled('div')`
     margin-right: 4px;
 `;
 
-export const ActiveIndicator = styled.div`
+export const ActiveIndicator = styled('div')`
     height: 3px;
     background-color: ${({ theme }) => theme.palette.text.primary};
     margin-top: 18px;
     border-radius: 2px;
 `;
 
-export const Hider = styled.div<{ hide: boolean }>`
+export const Hider = styled('div')<{ hide: boolean }>`
     display: ${(props) => (props.hide ? 'none' : 'block')};
 `;
 
@@ -85,7 +84,7 @@ export const ResultPreviewTile = styled(AllCollectionTile)`
     border-radius: 4px;
 `;
 
-export const CollectionTileTextOverlay = styled.div`
+export const CollectionTileTextOverlay = styled('div')`
     height: 100%;
     width: 100%;
     position: absolute;

src/components/Container.ts

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { default as MuiStyled } from '@mui/styled-engine';
 import { IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery';
 
@@ -15,13 +15,13 @@ const VerticallyCentered = MuiStyled(Box)`
 
 export default VerticallyCentered;
 
-export const DisclaimerContainer = styled.div`
+export const DisclaimerContainer = styled('div')`
     margin: 16px 0;
     color: rgb(158, 150, 137);
     font-size: 14px;
 `;
 
-export const IconButton = styled.button`
+export const IconButton = styled('button')`
     background: none;
     border: none;
     border-radius: 50%;
@@ -38,18 +38,18 @@ export const IconButton = styled.button`
     }
 `;
 
-export const Row = styled.div`
+export const Row = styled('div')`
     display: flex;
     align-items: center;
     margin-bottom: ${({ theme }) => theme.spacing(2)};
     flex: 1;
 `;
 
-export const Label = styled.div<{ width?: string }>`
+export const Label = styled('div')<{ width?: string }>`
     width: ${(props) => props.width ?? '70%'};
     color: ${(props) => props.theme.palette.text.secondary};
 `;
-export const Value = styled.div<{ width?: string }>`
+export const Value = styled('div')<{ width?: string }>`
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -62,7 +62,7 @@ export const FlexWrapper = styled(Box)`
     align-items: center;
 `;
 
-export const FreeFlowText = styled.div`
+export const FreeFlowText = styled('div')`
     word-break: break-word;
     min-width: 30%;
     text-align: left;

src/components/DeleteBtn.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { IconWithMessage } from './IconWithMessage';
 
-const Wrapper = styled.button`
+const Wrapper = styled('button')`
     border: none;
     background-color: #ff6666;
     position: fixed;

src/components/EmptyScreen.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { DeduplicateContext } from 'pages/deduplicate';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     display: flex;
     justify-content: center;
     align-items: center;

src/components/EnteLogo.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const LogoImage = styled('img')`
-const LogoImage = styled.img`
     height: 18px;
     padding: 0 3px;
 `;

src/components/ExportInProgress.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Button, ProgressBar } from 'react-bootstrap';
 import { ExportProgress } from 'types/export';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { ExportStage } from 'constants/export';
 
-export const ComfySpan = styled.span`
+export const ComfySpan = styled('span')`
     word-spacing: 1rem;
     color: #ddd;
 `;

src/components/ExportModal.tsx

@@ -5,7 +5,7 @@ import exportService from 'services/exportService';
 import { ExportProgress, ExportStats } from 'types/export';
 import { getLocalFiles } from 'services/fileService';
 import { User } from 'types/user';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { sleep } from 'utils/common';
 import { getExportRecordFileUID } from 'utils/export';
 import { logError } from 'utils/sentry';
@@ -20,7 +20,7 @@ import InProgressIcon from './icons/InProgressIcon';
 import DialogBox from './DialogBox';
 import { ExportStage, ExportType } from 'constants/export';
 
-const FolderIconWrapper = styled.div`
+const FolderIconWrapper = styled('div')`
     width: 15%;
     margin-left: 10px;
     cursor: pointer;
@@ -32,7 +32,7 @@ const FolderIconWrapper = styled.div`
     }
 `;
 
-const ExportFolderPathContainer = styled.span`
+const ExportFolderPathContainer = styled('span')`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/components/FavButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const HeartUI = styled('button')<{
-const HeartUI = styled.button<{
     isClick: boolean;
     size: number;
 }>`

src/components/FullScreenDropZone.tsx

@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import CloseIcon from '@mui/icons-material/Close';
 
-const CloseButtonWrapper = styled.div`
+const CloseButtonWrapper = styled('div')`
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
 `;
-const DropDiv = styled.div`
+const DropDiv = styled('div')`
     flex: 1;
     display: flex;
     flex-direction: column;
 `;
-const Overlay = styled.div`
+const Overlay = styled('div')`
     border-width: 8px;
     left: 0;
     top: 0;

src/components/LoadingOverlay.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const LoadingOverlay = styled('div')`
-export const LoadingOverlay = styled.div`
     left: 0;
     top: 0;
     outline: none;

src/components/LogoImg.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export default styled('img')`
-export default styled.img`
     height: 25px;
     vertical-align: bottom;
     padding-right: 15px;

src/components/Navbar/SelectionBar.tsx

@@ -1,6 +1,5 @@
 import NavbarBase from 'components/Navbar/base';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
 export const SelectionBar = styled(NavbarBase)`
     position: fixed;
     z-index: 2;

src/components/Navbar/base.tsx

@@ -1,6 +1,5 @@
 import { FlexWrapper } from 'components/Container';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
 const NavbarBase = styled(FlexWrapper)`
     padding: 0 20px;
     min-height: 64px;

src/components/Notification.tsx

@@ -45,11 +45,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                 component={Button}
                 color={attributes.variant}
                 onClick={handleClick}
-                css={`
+                sx={{
-                    width: 320px;
+                    textAlign: 'left',
-                    padding: 12px 16px;
+                    width: '320px',
-                `}
+                    padding: '12px 16px',
-                sx={{ textAlign: 'left' }}>
+                }}>
                 <Stack
                     flex={'1'}
                     spacing={2}
@@ -68,11 +68,8 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                         {attributes?.action && (
                             <Typography
                                 mb={0.5}
-                                css={`
+                                variant="button"
-                                    font-size: 16px;
+                                fontWeight={'bold'}>
-                                    font-weight: 600;
-                                    line-height: 19px;
-                                `}>
                                 {attributes?.action.text}
                             </Typography>
                         )}

src/components/PhotoFrame.tsx

@@ -2,7 +2,7 @@ import { GalleryContext } from 'pages/gallery';
 import PreviewCard from './pages/gallery/PreviewCard';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import DownloadManager from 'services/downloadManager';
 import constants from 'utils/strings/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -30,7 +30,7 @@ import { Search } from 'types/search';
 import { logError } from 'utils/sentry';
 import { CustomError } from 'utils/error';
 
-const Container = styled.div`
+const Container = styled('div')`
     display: block;
     flex: 1;
     width: 100%;

src/components/PhotoList.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext } from 'react';
 import { VariableSizeList as List } from 'react-window';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { EnteFile } from 'types/file';
 import {
     IMAGE_CONTAINER_MAX_WIDTH,
@@ -49,7 +49,7 @@ export interface TimeStampListItem {
     fileCount?: number;
 }
 
-const ListItem = styled.div`
+const ListItem = styled('div')`
     display: flex;
     justify-content: center;
 `;

src/components/PhotoSwipe/styledComponents/Legend.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const Legend = styled('span')`
-export const Legend = styled.span`
     font-size: 20px;
     color: #ddd;
     display: inline;

src/components/PhotoSwipe/styledComponents/LegendContainer.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const LegendContainer = styled('div')`
-export const LegendContainer = styled.div`
     display: flex;
     justify-content: space-between;
 `;

src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const LivePhotoBtn = styled('button')`
-export const LivePhotoBtn = styled.button`
     position: absolute;
     bottom: 6vh;
     right: 6vh;

src/components/PhotoSwipe/styledComponents/Pre.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const Pre = styled('p')`
-export const Pre = styled.pre`
     color: #aaa;
     padding: 7px 15px;
 `;

src/components/Search/SearchStatsContainer.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const SearchStatsContainer = styled('div')(
-const SearchStatsContainer = styled.div(
     ({ theme }) => `
     display: flex;
     justify-content: center;

src/components/Search/optionWithInfo.tsx

@@ -18,12 +18,7 @@ export const OptionWithInfo = (props) => (
 const LabelWithInfo = ({ data }: { data: SearchOption }) => (
     <>
         <Box className="main" px={2} py={1}>
-            <Typography
+            <Typography variant="caption" mb={1}>
-                css={`
-                    font-size: 12px;
-                    line-height: 16px;
-                `}
-                mb={1}>
                 {constants.SEARCH_TYPE(data.type)}
             </Typography>
             <SpaceBetweenFlex>

src/components/Search/styledComponents.tsx

@@ -3,7 +3,7 @@ import {
     FlexWrapper,
     FluidContainer,
 } from 'components/Container';
-import styled, { css } from 'styled-components';
+import { styled, css } from '@mui/material';
 
 export const SearchBarWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
     ${(props) =>

src/components/Sidebar/styledComponents.tsx

@@ -1,8 +1,7 @@
 import { Drawer, Divider, styled } from '@mui/material';
-import { default as MuiStyled } from '@mui/styled-engine';
 import CircleIcon from '@mui/icons-material/Circle';
 
-export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
+export const DrawerSidebar = styled(Drawer)(({ theme }) => ({
     '& .MuiPaper-root': {
         width: '320px',
         padding: theme.spacing(2, 1, 4, 1),
@@ -11,7 +10,7 @@ export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
 
 DrawerSidebar.defaultProps = { anchor: 'left' };
 
-export const PaddedDivider = MuiStyled(Divider)<{
+export const PaddedDivider = styled(Divider)<{
     invisible?: boolean;
     spaced?: boolean;
 }>(({ theme, invisible, spaced }) => ({

src/components/TruncateText.tsx

@@ -1,8 +1,7 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const EllipseText = styled('div')`
-export const EllipseText = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

src/components/TwoFactor/styledComponents.ts

@@ -1,7 +1,6 @@
 import VerticallyCentered from 'components/Container';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const QRCode = styled('img')(
-export const QRCode = styled.img(
     ({ theme }) => `
     height: 200px;
     width: 200px;

src/components/UploadProgress/styledComponents.tsx

@@ -1,6 +1,5 @@
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const NotUploadSectionHeader = styled('div')(
-export const NotUploadSectionHeader = styled.div(
     ({ theme }) => `
     text-align: center;
     color: ${theme.palette.danger.main};
@@ -9,7 +8,7 @@ export const NotUploadSectionHeader = styled.div(
 `
 );
 
-export const InProgressItemContainer = styled.div`
+export const InProgressItemContainer = styled('div')`
     display: inline-block;
     & > span {
         display: inline-block;
@@ -27,7 +26,7 @@ export const InProgressItemContainer = styled.div`
     }
 `;
 
-export const ResultItemContainer = styled.div`
+export const ResultItemContainer = styled('div')`
     position: relative;
     top: 5px;
     display: inline-block;

src/components/UploadProgress/title.tsx

@@ -20,16 +20,7 @@ const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
 }));
 
 const UploadProgressTitleText = ({ expanded }) => (
-    <Typography
+    <Typography variant={expanded ? 'title' : 'subtitle'}>
-        {...(expanded ? { variant: 'title' } : {})}
-        css={
-            !expanded &&
-            `
-font-size: 24px;
-font-weight: 600;
-line-height: 36px;
-`
-        }>
         {constants.FILE_UPLOAD}
     </Typography>
 );

src/components/icons/InProgressIcon.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const Rotate = styled('div')<{ disabled }>`
-const Rotate = styled.div<{ disabled }>`
     width: 24px;
     height: 27px;
     ${(props) =>

src/components/icons/LivePhotoIndicatorOverlay.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const Wrapper = styled('div')`
-const Wrapper = styled.div`
     font-size: 10px;
     position: absolute;
     padding: 2px;

src/components/pages/dedupe/SelectedFileOptions.tsx

@@ -3,14 +3,14 @@ import { SelectionBar } from '../../Navbar/SelectionBar';
 import constants from 'utils/strings/constants';
 import DeleteIcon from 'components/icons/DeleteIcon';
 import React, { useContext } from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { IconWithMessage } from 'components/IconWithMessage';
 import { AppContext } from 'pages/_app';
 import CloseIcon from '@mui/icons-material/Close';
 import BackButton from '@mui/icons-material/ArrowBackOutlined';
 
-const VerticalLine = styled.div`
+const VerticalLine = styled('div')`
     position: absolute;
     width: 1px;
     top: 0;
@@ -18,7 +18,7 @@ const VerticalLine = styled.div`
     background: #303030;
 `;
 
-const CheckboxText = styled.div`
+const CheckboxText = styled('div')`
     margin-left: 0.5em;
     font-size: 16px;
     margin-right: 0.8em;

src/components/pages/gallery/AddCollectionButton.tsx

@@ -2,10 +2,10 @@ import { Typography } from '@mui/material';
 import CollectionCard from 'components/Collections/CollectionCard';
 import { CollectionSelectorTile } from 'components/Collections/styledComponents';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 
-const ImageContainer = styled.div`
+const ImageContainer = styled('div')`
     position: absolute;
     width: 100%;
     height: 100%;
@@ -25,12 +25,7 @@ export default function AddCollectionButton({
             collectionTile={CollectionSelectorTile}
             onClick={() => showNextModal()}
             latestFile={null}>
-            <Typography
+            <Typography variant="body2" fontWeight={'bold'}>
-                css={`
-                    font-size: 14px;
-                    font-weight: 600;
-                    line-height: 20px;
-                `}>
                 {constants.CREATE_COLLECTION}
             </Typography>
             <ImageContainer>+</ImageContainer>

src/components/pages/gallery/AlertBanner.tsx

@@ -1,14 +1,14 @@
 import { FlexWrapper } from 'components/Container';
 import WarningIcon from 'components/icons/WarningIcon';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 
 interface Props {
     bannerMessage?: any;
     variant?: string;
 }
-const Banner = styled.div`
+const Banner = styled('div')`
     border: 1px solid ${getVariantColor(ButtonVariant.warning)};
     border-radius: 8px;
     padding: 16px 28px;

src/components/pages/gallery/OptionIcon.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+export const OptionIconWrapper = styled('div')`
-export const OptionIconWrapper = styled.div`
     display: inline-block;
     opacity: 0;
     font-weight: bold;

src/components/pages/gallery/PlanSelector/plans/planTile.tsx

@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
+import { css, styled } from '@mui/material';
 
-export const PlanTile = styled.div<{ currentlySubscribed: boolean }>`
+export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
     border-radius: 20px;
     width: 220px;
     border: 2px solid #333;

src/components/pages/gallery/PreviewCard.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
 import DownloadManager from 'services/downloadManager';
 import useLongPress from 'utils/common/useLongPress';
@@ -28,7 +28,7 @@ interface IProps {
     isInsSelectRange?: boolean;
 }
 
-const Check = styled.input<{ active: boolean }>`
+const Check = styled('input')<{ active: boolean }>`
     appearance: none;
     position: absolute;
     z-index: 10;
@@ -87,7 +87,7 @@ const Check = styled.input<{ active: boolean }>`
     }
 `;
 
-export const HoverOverlay = styled.div<{ checked: boolean }>`
+export const HoverOverlay = styled('div')<{ checked: boolean }>`
     opacity: 0;
     left: 0;
     top: 0;
@@ -100,7 +100,7 @@ export const HoverOverlay = styled.div<{ checked: boolean }>`
         'background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0))'};
 `;
 
-export const InSelectRangeOverLay = styled.div<{ active: boolean }>`
+export const InSelectRangeOverLay = styled('div')<{ active: boolean }>`
     opacity: ${(props) => (!props.active ? 0 : 1)};
     left: 0;
     top: 0;
@@ -111,7 +111,7 @@ export const InSelectRangeOverLay = styled.div<{ active: boolean }>`
     ${(props) => props.active && 'background:rgba(81, 205, 124, 0.25)'};
 `;
 
-export const FileAndCollectionNameOverlay = styled.div`
+export const FileAndCollectionNameOverlay = styled('div')`
     width: 100%;
     bottom: 0;
     left: 0;
@@ -135,7 +135,7 @@ export const FileAndCollectionNameOverlay = styled.div`
     position: absolute;
 `;
 
-export const SelectedOverlay = styled.div<{ selected: boolean }>`
+export const SelectedOverlay = styled('div')<{ selected: boolean }>`
     z-index: 5;
     position: absolute;
     left: 0;
@@ -146,7 +146,7 @@ export const SelectedOverlay = styled.div<{ selected: boolean }>`
     border-radius: 4px;
 `;
 
-const Cont = styled.div<{ disabled: boolean }>`
+const Cont = styled('div')<{ disabled: boolean }>`
     background: #222;
     display: flex;
     width: fit-content;

src/components/pages/gallery/UploadButton.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
 import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled.div<{ isDisabled: boolean }>`
+const Wrapper = styled('div')<{ isDisabled: boolean }>`
     display: flex;
     align-items: center;
     justify-content: center;

src/components/pages/sharedAlbum/AbuseReportForm.tsx

@@ -8,7 +8,7 @@ import { Col, Form, FormControl, Row } from 'react-bootstrap';
 import { reportAbuse } from 'services/publicCollectionService';
 import constants from 'utils/strings/constants';
 import * as Yup from 'yup';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { AbuseReportDetails, AbuseReportRequest } from 'types/publicCollection';
 import { AppContext } from 'pages/_app';
 
@@ -52,7 +52,7 @@ const defaultInitialValues: FormValues = {
     },
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     padding: 5px 20px;
 `;
 

src/components/pages/sharedAlbum/GoToEnte.tsx

@@ -1,16 +1,16 @@
 import { ENTE_WEBSITE_LINK } from 'constants/urls';
 import React, { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import GetDeviceOS, { OS } from 'utils/common/deviceDetection';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     position: fixed;
     right: 20px;
 `;
 
-const NoStyleAnchor = styled.a`
+const NoStyleAnchor = styled('a')`
     color: inherit;
     text-decoration: none !important;
     &:hover {

src/components/pages/sharedAlbum/ReportAbuse.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
-
+const Container = styled('div')`
-const Container = styled.div`
     position: fixed;
     bottom: 7%;
     right: 2%;

src/pages/deduplicate/index.tsx

@@ -22,13 +22,13 @@ import DeduplicateOptions from 'components/pages/dedupe/SelectedFileOptions';
 import { PAGES } from 'constants/pages';
 import router from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { syncCollections } from 'services/collectionService';
 
 export const DeduplicateContext = createContext<DeduplicateContextType>(
     DefaultDeduplicateContext
 );
-export const Info = styled.div`
+export const Info = styled('div')`
     padding: 24px;
     font-size: 18px;
 `;

src/pages/gallery/index.tsx

@@ -14,7 +14,7 @@ import {
     trashFiles,
     deleteFromTrash,
 } from 'services/fileService';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import {
     syncCollections,
     getFavItemIds,
@@ -104,7 +104,7 @@ import SearchResultInfo from 'components/Search/SearchResultInfo';
 import { NotificationAttributes } from 'types/Notification';
 import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 
-export const DeadCenter = styled.div`
+export const DeadCenter = styled('div')`
     flex: 1;
     display: flex;
     justify-content: center;
@@ -112,7 +112,7 @@ export const DeadCenter = styled.div`
     text-align: center;
     flex-direction: column;
 `;
-const AlertContainer = styled.div`
+const AlertContainer = styled('div')`
     background-color: #111;
     padding: 5px 0;
     font-size: 14px;

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Carousel from 'react-bootstrap/Carousel';
 import Button from 'react-bootstrap/Button';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { AppContext } from './_app';
 import Login from 'components/Login';
 import { useRouter } from 'next/router';
@@ -13,7 +13,7 @@ import localForage from 'utils/storage/localForage';
 import { logError } from 'utils/sentry';
 import { getAlbumSiteHost, PAGES } from 'constants/pages';
 
-const Container = styled.div`
+const Container = styled('div')`
     display: flex;
     flex: 1;
     align-items: center;
@@ -25,7 +25,7 @@ const Container = styled.div`
     }
 `;
 
-const SlideContainer = styled.div`
+const SlideContainer = styled('div')`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -38,7 +38,7 @@ const SlideContainer = styled.div`
     }
 `;
 
-const DesktopBox = styled.div`
+const DesktopBox = styled('div')`
     flex: 1;
     height: 100%;
     padding: 10px;
@@ -52,7 +52,7 @@ const DesktopBox = styled.div`
     }
 `;
 
-const MobileBox = styled.div`
+const MobileBox = styled('div')`
     display: none;
 
     @media (max-width: 1024px) {
@@ -62,13 +62,13 @@ const MobileBox = styled.div`
     }
 `;
 
-const SideBox = styled.div`
+const SideBox = styled('div')`
     display: flex;
     flex-direction: column;
     min-width: 320px;
 `;
 
-const TextContainer = styled.div`
+const TextContainer = styled('div')`
     padding: 20px;
     max-width: 300px;
     margin: 0 auto;
@@ -80,14 +80,14 @@ const UpperText = styled(TextContainer)`
     margin-bottom: 20px;
 `;
 
-const FeatureText = styled.div`
+const FeatureText = styled('div')`
     color: #51cd7c;
     font-weight: bold;
     padding-top: 20px;
     font-size: 24px;
 `;
 
-const Img = styled.img`
+const Img = styled('img')`
     height: 250px;
     object-fit: contain;
 

src/utils/strings/englishConstants.tsx

@@ -2,7 +2,7 @@ import { Box, Typography } from '@mui/material';
 import Link from '@mui/material/Link';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { SuggestionType } from 'types/search';
 import { formatNumberWithCommas } from '.';
 
@@ -18,11 +18,11 @@ const dateString = function (date) {
     });
 };
 
-const Strong = styled.strong`
+const Strong = styled('strong')`
     color: #ddd;
 `;
 
-const Logo = styled.img`
+const Logo = styled('img')`
     height: 18px;
     vertical-align: middle;
     margin-top: -3px;