From 683465cbc90b92df94a2b963920b0b8ae979f062 Mon Sep 17 00:00:00 2001 From: Abhinav Kumar <46242073+abhinavkgrd@users.noreply.github.com> Date: Mon, 13 Jun 2022 19:53:26 +0530 Subject: [PATCH] Revert "Revert back to emotion" --- .babelrc | 13 +- package.json | 15 +- src/components/AddToCollectionBtn.tsx | 4 +- src/components/CodeBlock/styledComponents.tsx | 5 +- .../CollectionSort/optionCreator.tsx | 7 +- .../CollectionBar/ScrollButton.tsx | 4 +- .../CollectionShare/publicShare/switch.tsx | 3 +- .../CollectionShare/styledComponents.tsx | 7 +- .../Collections/styledComponents.ts | 20 +- src/components/Container.ts | 14 +- src/components/DeleteBtn.tsx | 4 +- src/components/EmptyScreen.tsx | 4 +- src/components/EnteLogo.tsx | 5 +- src/components/ExportInProgress.tsx | 4 +- src/components/ExportModal.tsx | 6 +- src/components/FavButton.tsx | 5 +- src/components/FullScreenDropZone.tsx | 8 +- src/components/LoadingOverlay.tsx | 5 +- src/components/LogoImg.tsx | 5 +- src/components/Navbar/SelectionBar.tsx | 3 +- src/components/Navbar/base.tsx | 3 +- src/components/Notification.tsx | 17 +- src/components/PhotoFrame.tsx | 4 +- src/components/PhotoList.tsx | 4 +- .../PhotoSwipe/styledComponents/Legend.tsx | 5 +- .../styledComponents/LegendContainer.tsx | 5 +- .../styledComponents/LivePhotoBtn.tsx | 5 +- .../PhotoSwipe/styledComponents/Pre.tsx | 5 +- .../Search/SearchStatsContainer.tsx | 5 +- src/components/Search/optionWithInfo.tsx | 7 +- src/components/Search/styledComponents.tsx | 2 +- src/components/Sidebar/styledComponents.tsx | 5 +- src/components/TruncateText.tsx | 5 +- src/components/TwoFactor/styledComponents.ts | 5 +- .../UploadProgress/styledComponents.tsx | 9 +- src/components/UploadProgress/title.tsx | 11 +- src/components/icons/InProgressIcon.tsx | 5 +- .../icons/LivePhotoIndicatorOverlay.tsx | 5 +- .../pages/dedupe/SelectedFileOptions.tsx | 6 +- .../pages/gallery/AddCollectionButton.tsx | 11 +- src/components/pages/gallery/AlertBanner.tsx | 4 +- src/components/pages/gallery/OptionIcon.tsx | 5 +- .../gallery/PlanSelector/plans/planTile.tsx | 4 +- src/components/pages/gallery/PreviewCard.tsx | 14 +- src/components/pages/gallery/UploadButton.tsx | 4 +- .../gallery/UploadStrategyChoiceModal.tsx | 4 +- .../pages/sharedAlbum/AbuseReportForm.tsx | 4 +- src/components/pages/sharedAlbum/GoToEnte.tsx | 6 +- .../pages/sharedAlbum/ReportAbuse.tsx | 5 +- src/createEmotionCache.js | 7 - src/pages/_app.tsx | 149 +++--- src/pages/_document.tsx | 96 ++-- src/pages/deduplicate/index.tsx | 4 +- src/pages/gallery/index.tsx | 6 +- src/pages/index.tsx | 18 +- src/types/theme/styled.d.ts | 7 + src/utils/strings/englishConstants.tsx | 6 +- yarn.lock | 452 ++++++------------ 58 files changed, 453 insertions(+), 607 deletions(-) delete mode 100644 src/createEmotionCache.js create mode 100644 src/types/theme/styled.d.ts diff --git a/.babelrc b/.babelrc index e67b47447..189f09ac0 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,13 @@ { - "presets": [["next/babel"]], - "plugins": ["@emotion/babel-plugin"] + "presets": ["next/babel"], + "plugins": [ + [ + "styled-components", + { + "ssr": true, + "displayName": true, + "preprocess": false + } + ] + ] } diff --git a/package.json b/package.json index ac11cc47b..5f5256267 100644 --- a/package.json +++ b/package.json @@ -13,13 +13,11 @@ "prepare": "husky install" }, "dependencies": { - "@emotion/cache": "^11.9.3", - "@emotion/react": "^11.9.3", - "@emotion/server": "^11.4.0", - "@emotion/styled": "^11.9.3", "@ente-io/next-with-workbox": "^1.0.3", "@mui/icons-material": "^5.6.2", - "@mui/material": "^5.8.3", + "@mui/material": "^5.6.2", + "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest", + "@mui/styled-engine-sc": "^5.6.1", "@sentry/nextjs": "^6.7.1", "@stripe/stripe-js": "^1.13.2", "@typescript-eslint/eslint-plugin": "^4.25.0", @@ -61,6 +59,7 @@ "react-window": "^1.8.6", "react-window-infinite-loader": "^1.0.5", "scrypt-js": "^3.0.1", + "styled-components": "^5.3.5", "workbox-precaching": "^6.1.5", "workbox-recipes": "^6.1.5", "workbox-routing": "^6.1.5", @@ -70,7 +69,6 @@ "yup": "^0.29.3" }, "devDependencies": { - "@emotion/babel-plugin": "^11.9.2", "@next/bundle-analyzer": "^9.5.3", "@types/debounce-promise": "^3.1.3", "@types/libsodium-wrappers": "^0.7.8", @@ -82,7 +80,9 @@ "@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/yup": "^0.29.7", + "babel-plugin-styled-components": "^1.11.1", "eslint": "^7.27.0", "eslint-config-google": "^0.14.0", "eslint-config-prettier": "^8.3.0", @@ -101,5 +101,8 @@ "eslint --fix", "prettier --write --ignore-unknown" ] + }, + "resolutions": { + "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" } } diff --git a/src/components/AddToCollectionBtn.tsx b/src/components/AddToCollectionBtn.tsx index 5316923f9..07f0f0597 100644 --- a/src/components/AddToCollectionBtn.tsx +++ b/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; diff --git a/src/components/CodeBlock/styledComponents.tsx b/src/components/CodeBlock/styledComponents.tsx index 8783dac3d..5ad154d6f 100644 --- a/src/components/CodeBlock/styledComponents.tsx +++ b/src/components/CodeBlock/styledComponents.tsx @@ -1,6 +1,7 @@ import { IconButton } from '@mui/material'; import { CenteredFlex } from 'components/Container'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; + export const Wrapper = styled(CenteredFlex)` position: relative; background: ${({ theme }) => theme.palette.accent.dark}; @@ -14,7 +15,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; `; diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx index 32b859211..795358711 100644 --- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx +++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx @@ -19,7 +19,12 @@ const SortByOptionCreator = {activeSortBy === props.sortBy && ( - + )} {props.children} diff --git a/src/components/Collections/CollectionBar/ScrollButton.tsx b/src/components/Collections/CollectionBar/ScrollButton.tsx index 20aed9d0e..c5244e933 100644 --- a/src/components/Collections/CollectionBar/ScrollButton.tsx +++ b/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; diff --git a/src/components/Collections/CollectionShare/publicShare/switch.tsx b/src/components/Collections/CollectionShare/publicShare/switch.tsx index 1f4daa2bb..e8f30f7ab 100644 --- a/src/components/Collections/CollectionShare/publicShare/switch.tsx +++ b/src/components/Collections/CollectionShare/publicShare/switch.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { SwitchProps, Switch } from '@mui/material'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; + const PublicShareSwitch = styled((props: SwitchProps) => ( ` text-align: center; margin-bottom:${theme.spacing(1)}; ` ); -export const ManageSectionOptions = styled('section')( +export const ManageSectionOptions = styled.section( ({ theme }) => ` margin-bottom:${theme.spacing(4)}; ` diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts index 82d34105a..c02df7cd4 100644 --- a/src/components/Collections/styledComponents.ts +++ b/src/components/Collections/styledComponents.ts @@ -1,6 +1,7 @@ import { Box } from '@mui/material'; import { PaddedContainer } from 'components/Container'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; + export const CollectionListWrapper = styled(Box)` position: relative; overflow: hidden; @@ -18,7 +19,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; @@ -26,33 +27,34 @@ export const ScrollContainer = styled('div')` display: flex; `; -export const CollectionTile = styled('div')` +export const CollectionTile = styled.div` display: flex; position: relative; border-radius: 4px; user-select: none; cursor: pointer; + background-size: cover; & > img { object-fit: cover; - width: 100%; - height: 100%; + max-width: 100%; + min-height: 100%; flex: 1; pointer-events: none; } `; -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')}; `; @@ -84,7 +86,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; diff --git a/src/components/Container.ts b/src/components/Container.ts index 3af2b1b27..aeea70b92 100644 --- a/src/components/Container.ts +++ b/src/components/Container.ts @@ -1,5 +1,5 @@ import { Box } from '@mui/material'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/DeleteBtn.tsx b/src/components/DeleteBtn.tsx index df4511cdd..7753e3e14 100644 --- a/src/components/DeleteBtn.tsx +++ b/src/components/DeleteBtn.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/EmptyScreen.tsx b/src/components/EmptyScreen.tsx index bb1113843..717a36e9c 100644 --- a/src/components/EmptyScreen.tsx +++ b/src/components/EmptyScreen.tsx @@ -1,10 +1,10 @@ import React, { useContext } from 'react'; import { Button } from 'react-bootstrap'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/EnteLogo.tsx b/src/components/EnteLogo.tsx index b7978af6e..83eb7fd7e 100644 --- a/src/components/EnteLogo.tsx +++ b/src/components/EnteLogo.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { styled } from '@mui/material'; -const LogoImage = styled('img')` +import styled from 'styled-components'; + +const LogoImage = styled.img` height: 18px; padding: 0 3px; `; diff --git a/src/components/ExportInProgress.tsx b/src/components/ExportInProgress.tsx index 0e87bc290..6f508a545 100644 --- a/src/components/ExportInProgress.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; `; diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx index b715e2ba3..d9d176e89 100644 --- a/src/components/ExportModal.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/FavButton.tsx b/src/components/FavButton.tsx index 896174c97..32a988e8b 100644 --- a/src/components/FavButton.tsx +++ b/src/components/FavButton.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { styled } from '@mui/material'; -const HeartUI = styled('button')<{ +import styled from 'styled-components'; + +const HeartUI = styled.button<{ isClick: boolean; size: number; }>` diff --git a/src/components/FullScreenDropZone.tsx b/src/components/FullScreenDropZone.tsx index d51ad0fcf..0cae1fa1e 100644 --- a/src/components/FullScreenDropZone.tsx +++ b/src/components/FullScreenDropZone.tsx @@ -1,20 +1,20 @@ import React, { useEffect, useState } from 'react'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/LoadingOverlay.tsx b/src/components/LoadingOverlay.tsx index 3d75a1848..7eedd1750 100644 --- a/src/components/LoadingOverlay.tsx +++ b/src/components/LoadingOverlay.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const LoadingOverlay = styled('div')` +import styled from 'styled-components'; + +export const LoadingOverlay = styled.div` left: 0; top: 0; outline: none; diff --git a/src/components/LogoImg.tsx b/src/components/LogoImg.tsx index 2acf5aee8..539979720 100644 --- a/src/components/LogoImg.tsx +++ b/src/components/LogoImg.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export default styled('img')` +import styled from 'styled-components'; + +export default styled.img` height: 25px; vertical-align: bottom; padding-right: 15px; diff --git a/src/components/Navbar/SelectionBar.tsx b/src/components/Navbar/SelectionBar.tsx index 6a20cba99..edeb56e23 100644 --- a/src/components/Navbar/SelectionBar.tsx +++ b/src/components/Navbar/SelectionBar.tsx @@ -1,5 +1,6 @@ import NavbarBase from 'components/Navbar/base'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; + export const SelectionBar = styled(NavbarBase)` position: fixed; z-index: 2; diff --git a/src/components/Navbar/base.tsx b/src/components/Navbar/base.tsx index 42825c964..f799ee676 100644 --- a/src/components/Navbar/base.tsx +++ b/src/components/Navbar/base.tsx @@ -1,5 +1,6 @@ import { FlexWrapper } from 'components/Container'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; + const NavbarBase = styled(FlexWrapper)` padding: 0 20px; min-height: 64px; diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index f415466a6..405ba85cf 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -45,11 +45,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) { component={Button} color={attributes.variant} onClick={handleClick} - sx={{ - textAlign: 'left', - width: '320px', - padding: '12px 16px', - }}> + css={` + width: 320px; + padding: 12px 16px; + `} + sx={{ textAlign: 'left' }}> + css={` + font-size: 16px; + font-weight: 600; + line-height: 19px; + `}> {attributes?.action.text} )} diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx index 0cfab6e99..4cb323a04 100644 --- a/src/components/PhotoFrame.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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%; diff --git a/src/components/PhotoList.tsx b/src/components/PhotoList.tsx index 99f534deb..22c887eb7 100644 --- a/src/components/PhotoList.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; `; diff --git a/src/components/PhotoSwipe/styledComponents/Legend.tsx b/src/components/PhotoSwipe/styledComponents/Legend.tsx index a9508a9d6..8acc293ff 100644 --- a/src/components/PhotoSwipe/styledComponents/Legend.tsx +++ b/src/components/PhotoSwipe/styledComponents/Legend.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const Legend = styled('span')` +import styled from 'styled-components'; + +export const Legend = styled.span` font-size: 20px; color: #ddd; display: inline; diff --git a/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx b/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx index d1af121f8..af1910869 100644 --- a/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx +++ b/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const LegendContainer = styled('div')` +import styled from 'styled-components'; + +export const LegendContainer = styled.div` display: flex; justify-content: space-between; `; diff --git a/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx b/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx index 31aa6bf3b..da9de73ba 100644 --- a/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx +++ b/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const LivePhotoBtn = styled('button')` +import styled from 'styled-components'; + +export const LivePhotoBtn = styled.button` position: absolute; bottom: 6vh; right: 6vh; diff --git a/src/components/PhotoSwipe/styledComponents/Pre.tsx b/src/components/PhotoSwipe/styledComponents/Pre.tsx index 4e744fe05..977d1bc3d 100644 --- a/src/components/PhotoSwipe/styledComponents/Pre.tsx +++ b/src/components/PhotoSwipe/styledComponents/Pre.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const Pre = styled('p')` +import styled from 'styled-components'; + +export const Pre = styled.pre` color: #aaa; padding: 7px 15px; `; diff --git a/src/components/Search/SearchStatsContainer.tsx b/src/components/Search/SearchStatsContainer.tsx index 131191cc2..9e490a10d 100644 --- a/src/components/Search/SearchStatsContainer.tsx +++ b/src/components/Search/SearchStatsContainer.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -const SearchStatsContainer = styled('div')( +import styled from 'styled-components'; + +const SearchStatsContainer = styled.div( ({ theme }) => ` display: flex; justify-content: center; diff --git a/src/components/Search/optionWithInfo.tsx b/src/components/Search/optionWithInfo.tsx index f19a3e1cf..6955a1c15 100644 --- a/src/components/Search/optionWithInfo.tsx +++ b/src/components/Search/optionWithInfo.tsx @@ -18,7 +18,12 @@ export const OptionWithInfo = (props) => ( const LabelWithInfo = ({ data }: { data: SearchOption }) => ( <> - + {constants.SEARCH_TYPE(data.type)} diff --git a/src/components/Search/styledComponents.tsx b/src/components/Search/styledComponents.tsx index beace6777..794b2b335 100644 --- a/src/components/Search/styledComponents.tsx +++ b/src/components/Search/styledComponents.tsx @@ -3,7 +3,7 @@ import { FlexWrapper, FluidContainer, } from 'components/Container'; -import { styled, css } from '@mui/material'; +import styled, { css } from 'styled-components'; export const SearchBarWrapper = styled(CenteredFlex)<{ isOpen: boolean }>` ${(props) => diff --git a/src/components/Sidebar/styledComponents.tsx b/src/components/Sidebar/styledComponents.tsx index fda3f4d0a..852c4c22f 100644 --- a/src/components/Sidebar/styledComponents.tsx +++ b/src/components/Sidebar/styledComponents.tsx @@ -1,7 +1,8 @@ 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 = styled(Drawer)(({ theme }) => ({ +export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({ '& .MuiPaper-root': { width: '320px', padding: theme.spacing(2, 1, 4, 1), @@ -10,7 +11,7 @@ export const DrawerSidebar = styled(Drawer)(({ theme }) => ({ DrawerSidebar.defaultProps = { anchor: 'left' }; -export const PaddedDivider = styled(Divider)<{ +export const PaddedDivider = MuiStyled(Divider)<{ invisible?: boolean; spaced?: boolean; }>(({ theme, invisible, spaced }) => ({ diff --git a/src/components/TruncateText.tsx b/src/components/TruncateText.tsx index 8b51834f1..4840d8e61 100644 --- a/src/components/TruncateText.tsx +++ b/src/components/TruncateText.tsx @@ -1,7 +1,8 @@ import Tooltip from '@mui/material/Tooltip'; import React from 'react'; -import { styled } from '@mui/material'; -export const EllipseText = styled('div')` +import styled from 'styled-components'; + +export const EllipseText = styled.div` white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/components/TwoFactor/styledComponents.ts b/src/components/TwoFactor/styledComponents.ts index 662b20672..eab05601f 100644 --- a/src/components/TwoFactor/styledComponents.ts +++ b/src/components/TwoFactor/styledComponents.ts @@ -1,6 +1,7 @@ import VerticallyCentered from 'components/Container'; -import { styled } from '@mui/material'; -export const QRCode = styled('img')( +import styled from 'styled-components'; + +export const QRCode = styled.img( ({ theme }) => ` height: 200px; width: 200px; diff --git a/src/components/UploadProgress/styledComponents.tsx b/src/components/UploadProgress/styledComponents.tsx index 8d3034be4..97087c8a6 100644 --- a/src/components/UploadProgress/styledComponents.tsx +++ b/src/components/UploadProgress/styledComponents.tsx @@ -1,5 +1,6 @@ -import { styled } from '@mui/material'; -export const NotUploadSectionHeader = styled('div')( +import styled from 'styled-components'; + +export const NotUploadSectionHeader = styled.div( ({ theme }) => ` text-align: center; color: ${theme.palette.danger.main}; @@ -8,7 +9,7 @@ export const NotUploadSectionHeader = styled('div')( ` ); -export const InProgressItemContainer = styled('div')` +export const InProgressItemContainer = styled.div` display: inline-block; & > span { display: inline-block; @@ -26,7 +27,7 @@ export const InProgressItemContainer = styled('div')` } `; -export const ResultItemContainer = styled('div')` +export const ResultItemContainer = styled.div` position: relative; top: 5px; display: inline-block; diff --git a/src/components/UploadProgress/title.tsx b/src/components/UploadProgress/title.tsx index a390022ec..fffeb0ca2 100644 --- a/src/components/UploadProgress/title.tsx +++ b/src/components/UploadProgress/title.tsx @@ -20,7 +20,16 @@ const IconButtonWithBG = styled(IconButton)(({ theme }) => ({ })); const UploadProgressTitleText = ({ expanded }) => ( - + {constants.FILE_UPLOAD} ); diff --git a/src/components/icons/InProgressIcon.tsx b/src/components/icons/InProgressIcon.tsx index da0ad8ece..f23bcd809 100644 --- a/src/components/icons/InProgressIcon.tsx +++ b/src/components/icons/InProgressIcon.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { styled } from '@mui/material'; -const Rotate = styled('div')<{ disabled }>` +import styled from 'styled-components'; + +const Rotate = styled.div<{ disabled }>` width: 24px; height: 27px; ${(props) => diff --git a/src/components/icons/LivePhotoIndicatorOverlay.tsx b/src/components/icons/LivePhotoIndicatorOverlay.tsx index 253a0883f..9d5e26ea8 100644 --- a/src/components/icons/LivePhotoIndicatorOverlay.tsx +++ b/src/components/icons/LivePhotoIndicatorOverlay.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { styled } from '@mui/material'; -const Wrapper = styled('div')` +import styled from 'styled-components'; + +const Wrapper = styled.div` font-size: 10px; position: absolute; padding: 2px; diff --git a/src/components/pages/dedupe/SelectedFileOptions.tsx b/src/components/pages/dedupe/SelectedFileOptions.tsx index dd36afe62..1c2e89e38 100644 --- a/src/components/pages/dedupe/SelectedFileOptions.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/pages/gallery/AddCollectionButton.tsx b/src/components/pages/gallery/AddCollectionButton.tsx index 6cfa704b7..3e204d8ff 100644 --- a/src/components/pages/gallery/AddCollectionButton.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; import constants from 'utils/strings/constants'; -const ImageContainer = styled('div')` +const ImageContainer = styled.div` position: absolute; width: 100%; height: 100%; @@ -25,7 +25,12 @@ export default function AddCollectionButton({ collectionTile={CollectionSelectorTile} onClick={() => showNextModal()} latestFile={null}> - + {constants.CREATE_COLLECTION} + diff --git a/src/components/pages/gallery/AlertBanner.tsx b/src/components/pages/gallery/AlertBanner.tsx index 8b786ebc9..fa14b6de5 100644 --- a/src/components/pages/gallery/AlertBanner.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/pages/gallery/OptionIcon.tsx b/src/components/pages/gallery/OptionIcon.tsx index 4269d0963..c71241bd1 100644 --- a/src/components/pages/gallery/OptionIcon.tsx +++ b/src/components/pages/gallery/OptionIcon.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { styled } from '@mui/material'; -export const OptionIconWrapper = styled('div')` +import styled from 'styled-components'; + +export const OptionIconWrapper = styled.div` display: inline-block; opacity: 0; font-weight: bold; diff --git a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx index d9d245d00..ba42cbe16 100644 --- a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx +++ b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx @@ -1,6 +1,6 @@ -import { css, styled } from '@mui/material'; +import styled, { css } from 'styled-components'; -export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>` +export const PlanTile = styled.div<{ currentlySubscribed: boolean }>` border-radius: 20px; width: 220px; border: 2px solid #333; diff --git a/src/components/pages/gallery/PreviewCard.tsx b/src/components/pages/gallery/PreviewCard.tsx index e8505ede1..3a6e3c9c5 100644 --- a/src/components/pages/gallery/PreviewCard.tsx +++ b/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 '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/pages/gallery/UploadButton.tsx b/src/components/pages/gallery/UploadButton.tsx index b40b4cdf3..eeeec54bd 100644 --- a/src/components/pages/gallery/UploadButton.tsx +++ b/src/components/pages/gallery/UploadButton.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { styled } from '@mui/material'; +import styled from 'styled-components'; 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; diff --git a/src/components/pages/gallery/UploadStrategyChoiceModal.tsx b/src/components/pages/gallery/UploadStrategyChoiceModal.tsx index 794ad861d..8731869c6 100644 --- a/src/components/pages/gallery/UploadStrategyChoiceModal.tsx +++ b/src/components/pages/gallery/UploadStrategyChoiceModal.tsx @@ -34,7 +34,7 @@ function UploadStrategyChoiceModal({