Migrate to emotion (#992)

next.config.js

@@ -28,12 +28,6 @@ module.exports = (phase) =>
                 '@mui/system',
                 '@mui/icons-material',
             ],
-            compiler: {
-                styledComponents: {
-                    ssr: true,
-                    displayName: true,
-                },
-            },
             env: {
                 SENTRY_RELEASE: GIT_SHA,
                 NEXT_PUBLIC_IS_TEST_APP: process.env.IS_TEST_RELEASE,

package.json

@@ -14,10 +14,12 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.14.0",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.2",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
-    "@mui/styled-engine-sc": "^5.6.1",
     "@mui/x-date-pickers": "^5.0.0-alpha.6",
     "@sentry/nextjs": "^6.7.1",
     "@stripe/stripe-js": "^1.13.2",
@@ -97,7 +99,6 @@
     "@types/react-select": "^4.0.15",
     "@types/react-window": "^1.8.2",
     "@types/react-window-infinite-loader": "^1.0.3",
-    "@types/styled-components": "^5.1.25",
     "@types/wicg-file-system-access": "^2020.9.5",
     "@types/yup": "^0.29.7",
     "@types/zxcvbn": "^4.4.1",
@@ -112,8 +113,5 @@
   },
   "standard": {
     "parser": "babel-eslint"
-  },
-  "resolutions": {
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   }
-}
+}

src/components/Collections/styledComponents.ts

@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material';
 import { Overlay } from 'components/Container';
-import { SpecialPadding } from 'styles/SpecialPadding';
+import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS } from 'constants/gallery';
 export const CollectionListWrapper = styled(Box)`
     position: relative;
     overflow: hidden;
@@ -10,7 +10,10 @@ export const CollectionListWrapper = styled(Box)`
 `;
 
 export const CollectionListBarWrapper = styled(Box)`
-    ${SpecialPadding}
+    padding: 0 24px;
+    @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
+        padding: 0 4px;
+    }
     margin-bottom: 16px;
     border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
 `;

src/components/EnteDrawer.tsx

@@ -1,5 +1,4 @@
-import { Drawer } from '@mui/material';
-import styled from 'styled-components';
+import { Drawer, styled } from '@mui/material';
 
 export const EnteDrawer = styled(Drawer)(({ theme }) => ({
     '& .MuiPaper-root': {

src/components/MachineLearning/ImageViews.tsx

@@ -1,19 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
+
 import { imageBitmapToBlob } from 'utils/image';
 import { logError } from 'utils/sentry';
 import { getBlobFromCache } from 'utils/storage/cache';
 
-export const Image = styled.img``;
-
-export const FaceCropsRow = styled.div`
+export const FaceCropsRow = styled('div')`
     & > img {
         width: 256px;
         height: 256px;
     }
 `;
 
-export const FaceImagesRow = styled.div`
+export const FaceImagesRow = styled('div')`
     & > img {
         width: 112px;
         height: 112px;
@@ -92,9 +91,5 @@ export function ImageBlobView(props: { blob: Blob }) {
         }
     }, [props.blob]);
 
-    return (
-        <>
-            <Image src={imgUrl}></Image>
-        </>
-    );
+    return <img src={imgUrl} />;
 }

src/components/MachineLearning/MlDebug-disabled.tsx

@@ -24,7 +24,8 @@ export {};
 // import mlIDbStorage from 'utils/storage/mlIDbStorage';
 // import { getFaceCropBlobFromStorage } from 'utils/machineLearning/faceCrop';
 // import { PeopleList } from './PeopleList';
-// import styled from 'styled-components';
+// import { styled } from '@mui/material';
+
 // import { RawNodeDatum } from 'react-d3-tree/lib/types/common';
 // import { DebugInfo, mstToBinaryTree } from 'hdbscan';
 // import { toD3Tree } from 'utils/machineLearning/clustering';
@@ -70,7 +71,7 @@ export {};
 //     );
 // }
 
-// const D3ImageContainer = styled.div`
+// const D3ImageContainer = styled('div')`
 //     & > img {
 //         width: 100%;
 //         height: 100%;

src/components/MachineLearning/PeopleList.tsx

@@ -5,7 +5,7 @@ import {
     getPeopleList,
     getUnidentifiedFaces,
 } from 'utils/machineLearning';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { EnteFile } from 'types/file';
 import { ImageCacheView } from './ImageViews';
 import { CACHES } from 'constants/cache';
@@ -14,7 +14,7 @@ import { addLogLine } from 'utils/logging';
 import { logError } from 'utils/sentry';
 import { t } from 'i18next';
 
-const FaceChipContainer = styled.div`
+const FaceChipContainer = styled('div')`
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -24,7 +24,7 @@ const FaceChipContainer = styled.div`
     overflow: auto;
 `;
 
-const FaceChip = styled.div<{ clickable?: boolean }>`
+const FaceChip = styled('div')<{ clickable?: boolean }>`
     width: 112px;
     height: 112px;
     margin: 5px;

src/components/Navbar/base.tsx

@@ -1,6 +1,6 @@
 import { FlexWrapper } from 'components/Container';
 import { styled } from '@mui/material';
-import { SpecialPadding } from 'styles/SpecialPadding';
+import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS } from 'constants/gallery';
 const NavbarBase = styled(FlexWrapper)`
     min-height: 64px;
     position: sticky;
@@ -10,7 +10,10 @@ const NavbarBase = styled(FlexWrapper)`
     border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
     background-color: ${({ theme }) => theme.palette.background.default};
     margin-bottom: 16px;
-    ${SpecialPadding}
+    padding: 0 24px;
+    @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
+        padding: 0 4px;
+    }
 `;
 
 export default NavbarBase;

src/components/PhotoList.tsx

@@ -19,7 +19,6 @@ import { DeduplicateContext } from 'pages/deduplicate';
 import { FlexWrapper } from './Container';
 import { Typography } from '@mui/material';
 import { GalleryContext } from 'pages/gallery';
-import { SpecialPadding } from 'styles/SpecialPadding';
 import { formatDate } from 'utils/time/format';
 import { Trans } from 'react-i18next';
 import { t } from 'i18next';
@@ -111,7 +110,10 @@ const ListContainer = styled(Box)<{
     grid-column-gap: ${GAP_BTW_TILES}px;
     width: 100%;
     color: #fff;
-    ${SpecialPadding}
+    padding: 0 24px;
+    @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
+        padding: 0 4px;
+    }
 `;
 
 const ListItemContainer = styled(FlexWrapper)<{ span: number }>`

src/components/Search/SearchBar/styledComponents.tsx

@@ -4,10 +4,13 @@ import {
     FluidContainer,
 } from 'components/Container';
 import { css, styled } from '@mui/material';
-import { SpecialPadding } from 'styles/SpecialPadding';
+import { IMAGE_CONTAINER_MAX_WIDTH, MIN_COLUMNS } from 'constants/gallery';
 
 export const SearchBarWrapper = styled(FlexWrapper)`
-    ${SpecialPadding}
+    padding: 0 24px;
+    @media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * MIN_COLUMNS}px) {
+        padding: 0 4px;
+    }
 `;
 
 export const SearchMobileBox = styled(FluidContainer)`

src/pages/_app.tsx

@@ -25,8 +25,6 @@ import { styled, ThemeProvider } from '@mui/material/styles';
 import darkThemeOptions from 'themes/darkThemeOptions';
 import lightThemeOptions from 'themes/lightThemeOptions';
 import { CssBaseline, useMediaQuery } from '@mui/material';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import * as types from 'styled-components/cssprop'; // need to css prop on styled component
 import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
 import {
     getFamilyPortalRedirectURL,
@@ -56,6 +54,9 @@ import { SetTheme } from 'types/theme';
 import { useLocalState } from 'hooks/useLocalState';
 import { THEME_COLOR } from 'constants/theme';
 import { setupI18n } from 'i18n';
+import createEmotionCache from 'themes/createEmotionCache';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import { AppProps } from 'next/app';
 
 export const MessageContainer = styled('div')`
     background-color: #111;
@@ -115,7 +116,19 @@ const redirectMap = new Map([
 
 const APP_TITLE = 'ente Photos';
 
-export default function App({ Component, err }) {
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
+
+export interface EnteAppProps extends AppProps {
+    emotionCache?: EmotionCache;
+}
+
+export default function App(props) {
+    const {
+        Component,
+        emotionCache = clientSideEmotionCache,
+        pageProps,
+    } = props;
     const router = useRouter();
     const [isI18nReady, setIsI18nReady] = useState<boolean>(false);
     const [loading, setLoading] = useState(false);
@@ -323,7 +336,7 @@ export default function App({ Component, err }) {
         });
 
     return (
-        <>
+        <CacheProvider value={emotionCache}>
             <Head>
                 <title>{isI18nReady ? t('TITLE') : APP_TITLE}</title>
                 <meta
@@ -411,10 +424,10 @@ export default function App({ Component, err }) {
                             </EnteSpinner>
                         </VerticallyCentered>
                     ) : (
-                        <Component err={err} setLoading={setLoading} />
+                        <Component setLoading={setLoading} {...pageProps} />
                     )}
                 </AppContext.Provider>
             </ThemeProvider>
-        </>
+        </CacheProvider>
     );
 }