remove usage of styled components and replace with mui styled
This commit is contained in:
parent
a027ea721c
commit
d0765c52a1
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -19,12 +19,7 @@ const SortByOptionCreator =
|
|||
<MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
|
||||
<ListItemIcon style={{ minWidth: '25px' }}>
|
||||
{activeSortBy === props.sortBy && (
|
||||
<TickIcon
|
||||
css={`
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
`}
|
||||
/>
|
||||
<TickIcon sx={{ fontSize: 16 }} />
|
||||
)}
|
||||
</ListItemIcon>
|
||||
<ListItemText>{props.children}</ListItemText>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const ManageSectionLabel = styled.summary(
|
||||
import { styled } from '@mui/material';
|
||||
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)};
|
||||
`
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const LogoImage = styled.img`
|
||||
import { styled } from '@mui/material';
|
||||
const LogoImage = styled('img')`
|
||||
height: 18px;
|
||||
padding: 0 3px;
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const HeartUI = styled.button<{
|
||||
import { styled } from '@mui/material';
|
||||
const HeartUI = styled('button')<{
|
||||
isClick: boolean;
|
||||
size: number;
|
||||
}>`
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const LoadingOverlay = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
export const LoadingOverlay = styled('div')`
|
||||
left: 0;
|
||||
top: 0;
|
||||
outline: none;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export default styled.img`
|
||||
import { styled } from '@mui/material';
|
||||
export default styled('img')`
|
||||
height: 25px;
|
||||
vertical-align: bottom;
|
||||
padding-right: 15px;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -45,11 +45,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
|
|||
component={Button}
|
||||
color={attributes.variant}
|
||||
onClick={handleClick}
|
||||
css={`
|
||||
width: 320px;
|
||||
padding: 12px 16px;
|
||||
`}
|
||||
sx={{ textAlign: 'left' }}>
|
||||
sx={{
|
||||
textAlign: 'left',
|
||||
width: '320px',
|
||||
padding: '12px 16px',
|
||||
}}>
|
||||
<Stack
|
||||
flex={'1'}
|
||||
spacing={2}
|
||||
|
@ -68,11 +68,8 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
|
|||
{attributes?.action && (
|
||||
<Typography
|
||||
mb={0.5}
|
||||
css={`
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 19px;
|
||||
`}>
|
||||
variant="button"
|
||||
fontWeight={'bold'}>
|
||||
{attributes?.action.text}
|
||||
</Typography>
|
||||
)}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const Legend = styled.span`
|
||||
import { styled } from '@mui/material';
|
||||
export const Legend = styled('span')`
|
||||
font-size: 20px;
|
||||
color: #ddd;
|
||||
display: inline;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const LegendContainer = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
export const LegendContainer = styled('div')`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const LivePhotoBtn = styled.button`
|
||||
import { styled } from '@mui/material';
|
||||
export const LivePhotoBtn = styled('button')`
|
||||
position: absolute;
|
||||
bottom: 6vh;
|
||||
right: 6vh;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const Pre = styled.pre`
|
||||
import { styled } from '@mui/material';
|
||||
export const Pre = styled('p')`
|
||||
color: #aaa;
|
||||
padding: 7px 15px;
|
||||
`;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
const SearchStatsContainer = styled.div(
|
||||
import { styled } from '@mui/material';
|
||||
const SearchStatsContainer = styled('div')(
|
||||
({ theme }) => `
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
@ -18,12 +18,7 @@ export const OptionWithInfo = (props) => (
|
|||
const LabelWithInfo = ({ data }: { data: SearchOption }) => (
|
||||
<>
|
||||
<Box className="main" px={2} py={1}>
|
||||
<Typography
|
||||
css={`
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
`}
|
||||
mb={1}>
|
||||
<Typography variant="caption" mb={1}>
|
||||
{constants.SEARCH_TYPE(data.type)}
|
||||
</Typography>
|
||||
<SpaceBetweenFlex>
|
||||
|
|
|
@ -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) =>
|
||||
|
|
|
@ -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 }) => ({
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import Tooltip from '@mui/material/Tooltip';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const EllipseText = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
export const EllipseText = styled('div')`
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import VerticallyCentered from 'components/Container';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const QRCode = styled.img(
|
||||
import { styled } from '@mui/material';
|
||||
export const QRCode = styled('img')(
|
||||
({ theme }) => `
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import styled from 'styled-components';
|
||||
|
||||
export const NotUploadSectionHeader = styled.div(
|
||||
import { styled } from '@mui/material';
|
||||
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;
|
||||
|
|
|
@ -20,16 +20,7 @@ const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
|
|||
}));
|
||||
|
||||
const UploadProgressTitleText = ({ expanded }) => (
|
||||
<Typography
|
||||
{...(expanded ? { variant: 'title' } : {})}
|
||||
css={
|
||||
!expanded &&
|
||||
`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
`
|
||||
}>
|
||||
<Typography variant={expanded ? 'title' : 'subtitle'}>
|
||||
{constants.FILE_UPLOAD}
|
||||
</Typography>
|
||||
);
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Rotate = styled.div<{ disabled }>`
|
||||
import { styled } from '@mui/material';
|
||||
const Rotate = styled('div')<{ disabled }>`
|
||||
width: 24px;
|
||||
height: 27px;
|
||||
${(props) =>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
const Wrapper = styled('div')`
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
padding: 2px;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
css={`
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
`}>
|
||||
<Typography variant="body2" fontWeight={'bold'}>
|
||||
{constants.CREATE_COLLECTION}
|
||||
</Typography>
|
||||
<ImageContainer>+</ImageContainer>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const OptionIconWrapper = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
export const OptionIconWrapper = styled('div')`
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
font-weight: bold;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Container = styled.div`
|
||||
import { styled } from '@mui/material';
|
||||
const Container = styled('div')`
|
||||
position: fixed;
|
||||
bottom: 7%;
|
||||
right: 2%;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue