beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'ui-redesign' into sidebar-items-redesign

Browse source
This commit is contained in:
Abhinav 2022-05-13 14:06:27 +05:30
parent 7cb6fff817 41b7c0a01f
commit e70011b55f
46 changed files with 691 additions and 570 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -80,7 +80,7 @@
"@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.3",
"@types/styled-components": "^5.1.25",
"@types/yup": "^0.29.7",
"babel-plugin-styled-components": "^1.11.1",
"eslint": "^7.27.0",

2
src/components/CodeBlock.tsx
View file

@ -3,7 +3,7 @@ import { FreeFlowText, IconButton } from './Container';
import CopyIcon from './icons/CopyIcon';
import React, { useState } from 'react';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
import TickIcon from './icons/TickIcon';
import TickIcon from '@mui/icons-material/Done';
import EnteSpinner from './EnteSpinner';
const Wrapper = styled.div`

111
src/components/Collections/AllCollections.tsx
View file

@ -1,111 +0,0 @@
import { CollectionSummaries } from 'types/collection';
interface Iprops {
isOpen: boolean;
close: () => void;
collectionSummaries: CollectionSummaries;
setActiveCollection: (id?: number) => void;
}
import * as React from 'react';
import DialogContent from '@mui/material/DialogContent';
import Typography from '@mui/material/Typography';
import constants from 'utils/strings/constants';
import { FlexWrapper, SpaceBetweenFlex } from 'components/Container';
import { LargerCollectionTile } from './styledComponents';
import CollectionCard from './CollectionCard';
import Divider from '@mui/material/Divider';
import CollectionSort from 'components/pages/gallery/CollectionSort';
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
import { sortCollectionSummaries } from 'services/collectionService';
import {
Transition,
FloatingDrawer,
} from 'components/Collections/FloatingDrawer';
import { useLocalState } from 'hooks/useLocalState';
import { LS_KEYS } from 'utils/storage/localStorage';
const LeftSlideTransition = Transition('up');
export default function AllCollections(props: Iprops) {
const { collectionSummaries, isOpen, close, setActiveCollection } = props;
const onCollectionClick = (collectionID: number) => {
setActiveCollection(collectionID);
close();
};
const [collectionSortBy, setCollectionSortBy] =
useLocalState<COLLECTION_SORT_BY>(
LS_KEYS.COLLECTION_SORT_BY,
COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING
);
return (
<>
<FloatingDrawer
position="right"
TransitionComponent={LeftSlideTransition}
onClose={close}
open={isOpen}>
<DialogTitleWithCloseButton onClose={close}>
<Typography variant="h6">
<strong>{constants.ALL_ALBUMS}</strong>
</Typography>
<SpaceBetweenFlex>
<Typography variant="subtitle1">
{`${[...props.collectionSummaries.keys()].length} ${
constants.ALBUMS
}`}
</Typography>
<CollectionSort
activeSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
/>
</SpaceBetweenFlex>
</DialogTitleWithCloseButton>
<Divider />
<DialogContent>
<FlexWrapper>
{sortCollectionSummaries(
[...collectionSummaries.values()].filter(
(x) =>
x.collectionAttributes.type !==
CollectionType.system
),
collectionSortBy
).map(
({
latestFile,
collectionAttributes,
fileCount,
}) => (
<CollectionCard
key={collectionAttributes.id}
latestFile={latestFile}
onClick={() =>
onCollectionClick(
collectionAttributes.id
)
}
customCollectionTile={LargerCollectionTile}>
<div>
<Typography>
<strong>
{collectionAttributes.name}
</strong>
</Typography>
<Typography>
{fileCount} {constants.PHOTOS}
</Typography>
</div>
</CollectionCard>
)
)}
</FlexWrapper>
</DialogContent>
</FloatingDrawer>
</>
);
}

37
src/components/Collections/AllCollections/CollectionCard.tsx Normal file
View file

@ -0,0 +1,37 @@
import { Typography } from '@mui/material';
import constants from 'utils/strings/constants';
import React from 'react';
import CollectionCard from '../CollectionCard';
export default function AllCollectionCard({
onCollectionClick,
collectionAttributes,
latestFile,
fileCount,
}) {
return (
<CollectionCard
large
latestFile={latestFile}
onClick={() => onCollectionClick(collectionAttributes.id)}>
<div>
<Typography
css={`
font-size: 14px;
font-weight: 600;
line-height: 20px;
`}>
{collectionAttributes.name}
</Typography>
<Typography
css={`
font-size: 14px;
font-weight: 400;
line-height: 20px;
`}>
{fileCount} {constants.PHOTOS}
</Typography>
</div>
</CollectionCard>
);
}

44
src/components/Collections/AllCollections/CollectionSort/index.tsx Normal file
View file

@ -0,0 +1,44 @@
import React, { useState } from 'react';
import { COLLECTION_SORT_BY } from 'constants/collection';
import Menu from '@mui/material/Menu';
import { IconButton, styled } from '@mui/material';
import SortIcon from '@mui/icons-material/Sort';
import CollectionSortOptions from './options';
export interface CollectionSortProps {
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
activeSortBy: COLLECTION_SORT_BY;
}
const StyledMenu = styled(Menu)`
& .MuiPaper-root {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
}
`;
export default function CollectionSort(props: CollectionSortProps) {
const [sortByEl, setSortByEl] = useState(null);
const handleClose = () => setSortByEl(null);
return (
<>
<IconButton
onClick={(event) => setSortByEl(event.currentTarget)}
aria-controls={sortByEl ? 'collection-sort' : undefined}
aria-haspopup="true"
aria-expanded={sortByEl ? 'true' : undefined}>
<SortIcon />
</IconButton>
<StyledMenu
id="collection-sort"
anchorEl={sortByEl}
open={Boolean(sortByEl)}
onClose={handleClose}
MenuListProps={{
disablePadding: true,
'aria-labelledby': 'collection-sort',
}}>
<CollectionSortOptions {...props} close={handleClose} />
</StyledMenu>
</>
);
}

35
src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import { MenuItem, ListItemIcon, ListItemText } from '@mui/material';
import { COLLECTION_SORT_BY } from 'constants/collection';
import TickIcon from '@mui/icons-material/Done';
import { CollectionSortProps } from '.';
export interface SortOptionProps extends CollectionSortProps {
close: () => void;
}
const SortByOptionCreator =
({ setCollectionSortBy, activeSortBy, close }: SortOptionProps) =>
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
const handleClick = () => {
setCollectionSortBy(props.sortBy);
close();
};
return (
<MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
<ListItemIcon style={{ minWidth: '25px' }}>
{activeSortBy === props.sortBy && (
<TickIcon
css={`
height: 16px;
width: 16px;
`}
/>
)}
</ListItemIcon>
<ListItemText>{props.children}</ListItemText>
</MenuItem>
);
};
export default SortByOptionCreator;

26
src/components/Collections/AllCollections/CollectionSort/options.tsx Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import { MenuList } from '@mui/material';
import { COLLECTION_SORT_BY } from 'constants/collection';
import constants from 'utils/strings/constants';
import SortByOptionCreator, { SortOptionProps } from './optionCreator';
export default function CollectionSortOptions(props: SortOptionProps) {
const SortByOption = SortByOptionCreator(props);
return (
<MenuList>
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
{constants.SORT_BY_NAME}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_DESCENDING}>
{constants.SORT_BY_CREATION_TIME_DESCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
{constants.SORT_BY_CREATION_TIME_ASCENDING}
</SortByOption>
<SortByOption sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
</SortByOption>
</MenuList>
);
}

30
src/components/Collections/AllCollections/content.tsx Normal file
View file

@ -0,0 +1,30 @@
import React from 'react';
import { DialogContent } from '@mui/material';
import { FlexWrapper } from 'components/Container';
import AllCollectionCard from './CollectionCard';
export default function AllCollectionContent({
sortedCollectionSummaries,
onCollectionClick,
}) {
return (
<DialogContent>
<FlexWrapper
style={{
flexWrap: 'wrap',
}}>
{sortedCollectionSummaries.map(
({ latestFile, collectionAttributes, fileCount }) => (
<AllCollectionCard
onCollectionClick={onCollectionClick}
collectionAttributes={collectionAttributes}
key={collectionAttributes.id}
latestFile={latestFile}
fileCount={fileCount}
/>
)
)}
</FlexWrapper>
</DialogContent>
);
}

46
src/components/Collections/AllCollections/header.tsx Normal file
View file

@ -0,0 +1,46 @@
import React from 'react';
import { DialogTitle, IconButton, Typography } from '@mui/material';
import { SpaceBetweenFlex } from 'components/Container';
import CollectionSort from 'components/Collections/AllCollections/CollectionSort';
import constants from 'utils/strings/constants';
import Close from '@mui/icons-material/Close';
export default function AllCollectionsHeader({
onClose,
collectionCount,
collectionSortBy,
setCollectionSortBy,
}) {
return (
<DialogTitle>
<SpaceBetweenFlex>
<Typography
css={`
font-size: 24px;
font-weight: 600;
line-height: 36px;
`}>
{constants.ALL_ALBUMS}
</Typography>
<IconButton onClick={onClose}>
<Close />
</IconButton>
</SpaceBetweenFlex>
<SpaceBetweenFlex>
<Typography
css={`
font-size: 24px;
font-weight: 600;
line-height: 36px;
`}
color={'text.secondary'}>
{`${collectionCount} ${constants.ALBUMS}`}
</Typography>
<CollectionSort
activeSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
/>
</SpaceBetweenFlex>
</DialogTitle>
);
}

67
src/components/Collections/AllCollections/index.tsx Normal file
View file

@ -0,0 +1,67 @@
import React, { useMemo } from 'react';
import Divider from '@mui/material/Divider';
import { CollectionType, COLLECTION_SORT_BY } from 'constants/collection';
import { sortCollectionSummaries } from 'services/collectionService';
import {
Transition,
FloatingDrawer,
} from 'components/Collections/FloatingDrawer';
import { useLocalState } from 'hooks/useLocalState';
import { LS_KEYS } from 'utils/storage/localStorage';
import AllCollectionsHeader from './header';
import { CollectionSummaries } from 'types/collection';
import AllCollectionContent from './content';
interface Iprops {
isOpen: boolean;
close: () => void;
collectionSummaries: CollectionSummaries;
setActiveCollection: (id?: number) => void;
}
const LeftSlideTransition = Transition('up');
export default function AllCollections(props: Iprops) {
const { collectionSummaries, isOpen, close, setActiveCollection } = props;
const [collectionSortBy, setCollectionSortBy] =
useLocalState<COLLECTION_SORT_BY>(
LS_KEYS.COLLECTION_SORT_BY,
COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING
);
const sortedCollectionSummaries = useMemo(
() =>
sortCollectionSummaries(
[...collectionSummaries.values()].filter(
(x) => x.collectionAttributes.type !== CollectionType.system
),
collectionSortBy
),
[collectionSortBy, collectionSummaries]
);
const onCollectionClick = (collectionID: number) => {
setActiveCollection(collectionID);
close();
};
return (
<FloatingDrawer
TransitionComponent={LeftSlideTransition}
onClose={close}
open={isOpen}>
<AllCollectionsHeader
onClose={close}
collectionCount={props.collectionSummaries.size}
collectionSortBy={collectionSortBy}
setCollectionSortBy={setCollectionSortBy}
/>
<Divider />
<AllCollectionContent
sortedCollectionSummaries={sortedCollectionSummaries}
onCollectionClick={onCollectionClick}
/>
</FloatingDrawer>
);
}

4
src/components/Collections/CollectionCardWithActiveIndicator.tsx → src/components/Collections/CollectionBar/CollectionCardWithActiveIndicator.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { EnteFile } from 'types/file';
import { CollectionTileWrapper, ActiveIndicator } from './styledComponents';
import CollectionCard from './CollectionCard';
import { CollectionTileWrapper, ActiveIndicator } from '../styledComponents';
import CollectionCard from '../CollectionCard';
const CollectionCardWithActiveIndicator = React.forwardRef(
(

2
src/components/Collections/CreateCollectionTile.tsx → src/components/Collections/CollectionBar/CreateCollectionTile.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import constants from 'utils/strings/englishConstants';
import { CollectionTitleWithDashedBorder } from './styledComponents';
import { CollectionTitleWithDashedBorder } from '../styledComponents';
export const CreateNewCollectionTile = (props) => {
return (

15
src/components/Collections/NavigationButton.tsx → src/components/Collections/CollectionBar/NavigationButton.tsx
View file

@ -1,6 +1,6 @@
import React from 'react';
import styled, { css } from 'styled-components';
import NavigateNext from '../icons/NavigateNext';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
export enum SCROLL_DIRECTION {
LEFT = -1,
@ -8,15 +8,18 @@ export enum SCROLL_DIRECTION {
}
const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
position: absolute;
top: 7px;
height: 50px;
width: 50px;
border: none;
padding: 0;
margin: 0;
border-radius: 50%;
background-color: ${({ theme }) => theme.palette.background.paper};
border: none;
color: ${({ theme }) => theme.palette.text.primary};
position: absolute;
${(props) =>
props.direction === SCROLL_DIRECTION.LEFT
? css`
@ -38,15 +41,11 @@ const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
height: 30px;
width: 30px;
}
&:hover {
color: #fff;
}
`;
const NavigationButton = ({ scrollDirection, ...rest }) => (
<Wrapper direction={scrollDirection} {...rest}>
<NavigateNext />
<NavigateNextIcon />
</Wrapper>
);
export default NavigationButton;

4
src/components/Collections/CollectionBar.tsx → src/components/Collections/CollectionBar/index.tsx
View file

@ -1,6 +1,6 @@
import NavigationButton, {
SCROLL_DIRECTION,
} from 'components/Collections/NavigationButton';
} from 'components/Collections/CollectionBar/NavigationButton';
import React, { useEffect } from 'react';
import { Collection, CollectionSummaries } from 'types/collection';
import constants from 'utils/strings/constants';
@ -12,7 +12,7 @@ import {
ScrollContainer,
PaddedSpaceBetweenFlex,
} from 'components/Collections/styledComponents';
import CollectionCardWithActiveIndicator from 'components/Collections/CollectionCardWithActiveIndicator';
import CollectionCardWithActiveIndicator from 'components/Collections/CollectionBar/CollectionCardWithActiveIndicator';
import useComponentScroll from 'hooks/useComponentScroll';
import useWindowSize from 'hooks/useWindowSize';

8
src/components/Collections/CollectionCard.tsx
View file

@ -3,15 +3,15 @@ import { GalleryContext } from 'pages/gallery';
import { useState, useContext, useEffect } from 'react';
import downloadManager from 'services/downloadManager';
import { EnteFile } from 'types/file';
import { CollectionTile } from './styledComponents';
import { CollectionTile, LargerCollectionTile } from './styledComponents';
export default function CollectionCard(props: {
children?: any;
latestFile: EnteFile;
onClick: () => void;
customCollectionTile?: any;
large?: boolean;
}) {
const { latestFile: file, onClick, children, customCollectionTile } = props;
const { latestFile: file, onClick, children, large } = props;
const [coverImageURL, setCoverImageURL] = useState(null);
const galleryContext = useContext(GalleryContext);
@ -28,7 +28,7 @@ export default function CollectionCard(props: {
};
main();
}, [file]);
const UsedCollectionTile = customCollectionTile ?? CollectionTile;
const UsedCollectionTile = large ? LargerCollectionTile : CollectionTile;
return (
<UsedCollectionTile coverImgURL={coverImageURL} onClick={onClick}>
{children}

15
src/components/Collections/CollectionInfo.tsx
View file

@ -25,10 +25,19 @@ export default function collectionInfo(props: Iprops) {
return (
<PaddedSpaceBetweenFlex>
<div>
<Typography variant="h5">
<strong>{collectionAttributes.name}</strong>
<Typography
css={`
font-size: 24px;
font-weight: 600;
line-height: 36px;
`}>
{collectionAttributes.name}
</Typography>
<Typography variant="subtitle1">
<Typography
css={`
font-size: 14px;
line-height: 20px;
`}>
{fileCount} {constants.PHOTOS}
</Typography>
</div>

22
src/components/Collections/CollectionNamer.tsx
View file

@ -1,10 +1,17 @@
import React from 'react';
import { Dialog, DialogContent, TextField } from '@mui/material';
import {
Dialog,
DialogContent,
DialogTitle,
IconButton,
TextField,
} from '@mui/material';
import constants from 'utils/strings/constants';
import SubmitButton from 'components/SubmitButton';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { DialogTitleWithCloseButton } from 'components/MessageDialog';
import { SpaceBetweenFlex } from 'components/Container';
import Close from '@mui/icons-material/Close';
export interface CollectionNamerAttributes {
callback: (name) => void;
@ -37,9 +44,14 @@ export default function CollectionNamer({ attributes, ...props }: Props) {
return (
<Dialog open={props.show} onClose={props.onHide} maxWidth="xs">
<DialogTitleWithCloseButton onClose={props.onHide}>
{attributes?.title}
</DialogTitleWithCloseButton>
<DialogTitle>
<SpaceBetweenFlex>
{attributes?.title}
<IconButton onClick={props.onHide}>
<Close />
</IconButton>
</SpaceBetweenFlex>
</DialogTitle>
<DialogContent>
<Formik<formValues>
initialValues={{

1
src/components/Collections/CollectionOptions.tsx
View file

@ -172,6 +172,7 @@ const CollectionOptions = (props: CollectionOptionsProps) => {
open={Boolean(optionEl)}
onClose={handleClose}
MenuListProps={{
disablePadding: true,
'aria-labelledby': 'collection-options',
}}>
<Paper sx={{ borderRadius: '10px' }}>

30
src/components/Collections/FloatingDrawer.tsx
View file

@ -2,22 +2,20 @@ import { Dialog, Slide, styled } from '@mui/material';
import React from 'react';
import PropTypes from 'prop-types';
export const FloatingDrawer = styled(Dialog)<{ position: 'left' | 'right' }>(
({ position, theme }) => ({
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
'& .MuiDialogActions-root': {
padding: theme.spacing(1),
},
'& .MuiPaper-root': {
maxWidth: '510px',
},
'& .MuiDialog-container': {
justifyContent: position === 'left' ? 'flex-start' : 'flex-end',
},
})
);
export const FloatingDrawer = styled(Dialog)(({ theme }) => ({
'& .MuiDialog-container': {
justifyContent: 'flex-end',
},
'& .MuiPaper-root': {
maxWidth: '498px',
},
'& .MuiDialogTitle-root': {
padding: theme.spacing(3, 2),
},
'& .MuiDialogContent-root': {
padding: theme.spacing(2),
},
}));
FloatingDrawer.propTypes = {
children: PropTypes.node,

9
src/components/Collections/styledComponents.ts
View file

@ -13,7 +13,7 @@ export const CollectionBarWrapper = styled.div`
@media (max-width: ${IMAGE_CONTAINER_MAX_WIDTH * 4}px) {
padding: 0 4px;
}
border-bottom: 1px solid ${({ theme }) => theme.palette.grey.A400};
border-bottom: 1px solid ${({ theme }) => theme.palette.grey.A200};
`;
export const PaddedSpaceBetweenFlex = styled(SpaceBetweenFlex)`
@ -37,7 +37,6 @@ export const ScrollContainer = styled.div`
export const CollectionTile = styled.div<{
coverImgURL?: string;
}>`
flex-shrink: 0;
display: flex;
width: 80px;
height: 64px;
@ -50,10 +49,12 @@ export const CollectionTile = styled.div<{
background-image: url(${({ coverImgURL }) => coverImgURL});
background-size: cover;
border: 1px solid ${({ theme }) => theme.palette.grey.A200};
font-size: 14px;
line-height: 20px;
`;
export const CollectionTileWrapper = styled.div`
margin-right: 6px;
margin-right: 4px;
`;
export const ActiveIndicator = styled.div`
@ -72,7 +73,7 @@ export const LargerCollectionTile = styled(CollectionTile)`
width: 150px;
height: 150px;
align-items: flex-start;
margin: 4px;
margin: 2px;
`;
export const CollectionTitleWithDashedBorder = styled(CollectionTile)`

12
src/components/Container.ts
View file

@ -1,3 +1,4 @@
import { Box } from '@mui/material';
import styled from 'styled-components';
const Container = styled.div`
@ -54,9 +55,8 @@ export const Value = styled.div<{ width?: string }>`
color: #ddd;
`;
export const FlexWrapper = styled.div`
export const FlexWrapper = styled(Box)`
display: flex;
flex-wrap: wrap;
align-items: center;
`;
@ -70,6 +70,14 @@ export const SpaceBetweenFlex = styled(FlexWrapper)`
justify-content: space-between;
`;
export const CenteredFlex = styled(FlexWrapper)`
justify-content: center;
`;
export const FluidContainer = styled(FlexWrapper)`
flex: 1;
`;
export const InvertedIconButton = styled(IconButton)`
background-color: ${({ theme }) => theme.palette.primary.main};
color: ${({ theme }) => theme.palette.background.default};

26
src/components/MessageDialog/TitleWithCloseButton.tsx Normal file
View file

@ -0,0 +1,26 @@
import React from 'react';
import { DialogTitle, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { SpaceBetweenFlex } from 'components/Container';
const DialogTitleWithCloseButton = (props) => {
const { children, onClose, ...other } = props;
return (
<DialogTitle {...other}>
<SpaceBetweenFlex>
{children}
{onClose && (
<IconButton
aria-label="close"
onClick={onClose}
sx={{ float: 'right' }}>
<CloseIcon />
</IconButton>
)}
</SpaceBetweenFlex>
</DialogTitle>
);
};
export default DialogTitleWithCloseButton;

27
src/components/MessageDialog.tsx → src/components/MessageDialog/index.tsx
View file

@ -1,8 +1,5 @@
import DialogTitle from '@mui/material/DialogTitle';
import IconButton from '@mui/material/IconButton';
import React from 'react';
import constants from 'utils/strings/constants';
import CloseIcon from '@mui/icons-material/Close';
import {
Breakpoint,
Button,
@ -12,6 +9,7 @@ import {
DialogContentText,
Divider,
} from '@mui/material';
import DialogTitleWithCloseButton from './TitleWithCloseButton';
export type ButtonColors =
| 'inherit'
@ -46,29 +44,6 @@ type Props = React.PropsWithChildren<{
size?: Breakpoint;
}>;
export const DialogTitleWithCloseButton = (props) => {
const { children, onClose, ...other } = props;
return (
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
{children}
{onClose ? (
<IconButton
aria-label="close"
onClick={onClose}
sx={{
position: 'absolute',
right: 8,
top: 8,
color: (theme) => theme.palette.grey[400],
}}>
<CloseIcon />
</IconButton>
) : null}
</DialogTitle>
);
};
export default function MessageDialog({
attributes,
children,

2
src/components/PhotoSwipe/PhotoSwipe.tsx
View file

@ -38,7 +38,7 @@ import { livePhotoBtnHTML } from 'components/LivePhotoBtn';
import { logError } from 'utils/sentry';
import CloseIcon from '@mui/icons-material/Close';
import TickIcon from 'components/icons/TickIcon';
import TickIcon from '@mui/icons-material/Done';
import { Formik } from 'formik';
import * as Yup from 'yup';
import EnteSpinner from 'components/EnteSpinner';

58
src/components/Sidebar/Button.tsx
View file

@ -1,44 +1,38 @@
import React from 'react';
import { Button } from '@mui/material';
import React, { FC } from 'react';
import { Button, ButtonProps } from '@mui/material';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { FluidContainer } from 'components/Container';
interface IProps {
children: any;
bgDark?: boolean;
hideArrow?: boolean;
onClick: () => void;
color?:
| 'inherit'
| 'danger'
| 'primary'
| 'secondary'
| 'success'
| 'error'
| 'info'
| 'warning';
smallerArrow?: boolean;
}
export default function SidebarButton({
const SidebarButton: FC<ButtonProps<'button', IProps>> = ({
children,
bgDark,
hideArrow,
smallerArrow,
sx,
...props
}: IProps) {
}) => {
return (
<Button
{...props}
variant="text"
sx={{
width: '100%',
marginBottom: '16px',
display: 'flex',
justifyContent: 'space-between',
bgcolor: bgDark && 'grey.800',
padding: '10px',
borderRadius: '8px',
textTransform: 'none',
fontSize: '18px',
}}>
{children}
{!hideArrow && <NavigateNextIcon />}
fullWidth
sx={{ my: 0.5, px: 1, py: '10px', ...sx }}
css={`
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
`}
{...props}>
<FluidContainer>{children}</FluidContainer>
{!hideArrow && (
<NavigateNextIcon
fontSize={smallerArrow ? 'small' : 'medium'}
/>
)}
</Button>
);
}
};
export default SidebarButton;

26
src/components/Sidebar/Header.tsx
View file

@ -2,6 +2,7 @@ import { Typography, IconButton } from '@mui/material';
import React from 'react';
import constants from 'utils/strings/constants';
import CloseIcon from '@mui/icons-material/Close';
import { SpaceBetweenFlex } from 'components/Container';
interface IProps {
closeSidebar: () => void;
@ -9,21 +10,18 @@ interface IProps {
export default function HeaderSection({ closeSidebar }: IProps) {
return (
<>
<Typography variant="h6">
<strong>{constants.ENTE}</strong>
<SpaceBetweenFlex>
<Typography
css={`
font-size: 18px;
font-weight: 600;
line-height: 24px;
`}>
{constants.ENTE}
</Typography>
<IconButton
aria-label="close"
onClick={closeSidebar}
sx={{
position: 'absolute',
right: 16,
top: 16,
color: (theme) => theme.palette.grey[400],
}}>
<CloseIcon />
<IconButton aria-label="close" onClick={closeSidebar}>
<CloseIcon fontSize="small" />
</IconButton>
</>
</SpaceBetweenFlex>
);
}

10
src/components/Sidebar/HelpSection.tsx
View file

@ -10,12 +10,16 @@ import { getToken } from 'utils/common/key';
import isElectron from 'is-electron';
import { downloadApp, initiateEmail } from 'utils/common';
import { GalleryContext } from 'pages/gallery';
import { useLocalState } from 'hooks/useLocalState';
import { LS_KEYS } from 'utils/storage/localStorage';
import { UserDetails } from 'types/user';
export default function HelpSection({ userDetails }) {
const { setDialogMessage } = useContext(GalleryContext);
export default function HelpSection() {
const [userDetails] = useLocalState<UserDetails>(LS_KEYS.USER_DETAILS);
const [exportModalView, setExportModalView] = useState(false);
const { setDialogMessage } = useContext(GalleryContext);
function openFeedbackURL() {
const feedbackURL: string = `${getEndpoint()}/users/feedback?token=${encodeURIComponent(
getToken()

25
src/components/Sidebar/InfoSection.tsx
View file

@ -1,25 +0,0 @@
import React, { useState } from 'react';
import { Typography } from '@mui/material';
import { SpaceBetweenFlex } from 'components/Container';
import ThemeToggler from './ThemeToggler';
import { UserDetails } from 'types/user';
interface IProps {
userDetails: UserDetails;
}
export enum THEMES {
LIGHT,
DARK,
}
export default function InfoSection({ userDetails }: IProps) {
const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
return (
<SpaceBetweenFlex style={{ marginBottom: '20px' }}>
<Typography pl="5px">{userDetails?.email}</Typography>
<ThemeToggler theme={theme} setTheme={setTheme} />
</SpaceBetweenFlex>
);
}

40
src/components/Sidebar/NavigationButton.tsx Normal file
View file

@ -0,0 +1,40 @@
import React, { FC } from 'react';
import { Box, ButtonProps } from '@mui/material';
import SidebarButton from './Button';
import { DotSeparator } from './styledComponents';
interface IProps {
hideArrow?: boolean;
icon: JSX.Element;
label: JSX.Element | string;
count: number;
}
const NavigationButton: FC<ButtonProps<'button', IProps>> = ({
icon,
label,
count,
...props
}) => {
return (
<SidebarButton
smallerArrow
variant="contained"
color="secondary"
sx={{ px: '12px' }}
css={`
font-size: 14px;
line-height: 20px;
font-weight: 500;
`}
{...props}>
<Box mr={'12px'}>{icon}</Box>
{label}
<DotSeparator />
<Box component={'span'} sx={{ color: 'text.secondary' }}>
{count}
</Box>
</SidebarButton>
);
};
export default NavigationButton;

58
src/components/Sidebar/NavigationSection.tsx
View file

@ -1,66 +1,46 @@
import React, { useContext } from 'react';
import SidebarButton from './Button';
import constants from 'utils/strings/constants';
import { GalleryContext } from 'pages/gallery';
import { ARCHIVE_SECTION, TRASH_SECTION } from 'constants/collection';
import DeleteIcon from '@mui/icons-material/Delete';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import { Box, Typography } from '@mui/material';
import { FlexWrapper } from 'components/Container';
import { CollectionSummaries } from 'types/collection';
import NavigationButton from './NavigationButton';
interface Iprops {
closeSidebar: () => void;
collectionSummaries: CollectionSummaries;
}
const DotSeparator = () => (
<Typography color="text.secondary" ml="10px" mr="10px" fontWeight={700}>
{'·'}
</Typography>
);
export default function NavigationSection({
closeSidebar,
collectionSummaries,
}: Iprops) {
const galleryContext = useContext(GalleryContext);
const openArchiveSection = () => {
galleryContext.setActiveCollection(ARCHIVE_SECTION);
closeSidebar();
};
const openTrashSection = () => {
galleryContext.setActiveCollection(TRASH_SECTION);
closeSidebar();
};
const openArchiveSection = () => {
galleryContext.setActiveCollection(ARCHIVE_SECTION);
closeSidebar();
};
return (
<>
<SidebarButton bgDark onClick={openTrashSection}>
<FlexWrapper>
<Box mr="10px">
<DeleteIcon />
</Box>
{constants.TRASH}
<DotSeparator />
<Typography color="text.secondary">
{collectionSummaries.get(TRASH_SECTION).fileCount}
</Typography>
</FlexWrapper>
</SidebarButton>
<SidebarButton bgDark onClick={openArchiveSection}>
<FlexWrapper>
<Box mr="10px">
<VisibilityOffIcon />
</Box>
{constants.ARCHIVE}
<DotSeparator />
<Typography color="text.secondary">
{collectionSummaries.get(ARCHIVE_SECTION).fileCount}
</Typography>
</FlexWrapper>
</SidebarButton>
<NavigationButton
icon={<DeleteIcon />}
label={constants.TRASH}
count={collectionSummaries.get(TRASH_SECTION)?.fileCount}
onClick={openTrashSection}
/>
<NavigationButton
icon={<VisibilityOffIcon />}
label={constants.ARCHIVE}
count={collectionSummaries.get(ARCHIVE_SECTION)?.fileCount}
onClick={openArchiveSection}
/>
</>
);
}

9
src/components/Sidebar/ThemeToggler.tsx → src/components/Sidebar/ThemeSwitcher.tsx
View file

@ -2,19 +2,20 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import React from 'react';
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import { THEMES } from './InfoSection';
import { THEMES } from 'types/theme';
interface Iprops {
theme: THEMES;
setTheme: (theme: THEMES) => void;
}
export default function ThemeToggler({ theme, setTheme }: Iprops) {
export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
const handleChange = (event, theme: THEMES) => {
setTheme(theme);
if (theme !== null) {
setTheme(theme);
}
};
return (
<ToggleButtonGroup
color="primary"
size="small"
value={theme}
exclusive

45
src/components/Sidebar/index.tsx
View file

@ -1,58 +1,39 @@
import React, { useContext, useEffect, useState } from 'react';
import { LS_KEYS, setData } from 'utils/storage/localStorage';
import React, { useContext } from 'react';
import { getUserDetails } from 'services/userService';
import { UserDetails } from 'types/user';
import { getLocalUserDetails } from 'utils/user';
import InfoSection from './InfoSection';
import NavigationSection from './NavigationSection';
import UtilitySection from './UtilitySection';
import HelpSection from './HelpSection';
import ExitSection from './ExitSection';
import DebugLogs from './DebugLogs';
import { DrawerSidebar, DividerWithMargin } from './styledComponents';
// import DebugLogs from './DebugLogs';
import { DrawerSidebar, PaddedDivider } from './styledComponents';
import { AppContext } from 'pages/_app';
import SubscriptionDetails from './SubscriptionDetails';
import HeaderSection from './Header';
import { CollectionSummaries } from 'types/collection';
import UserDetailsSection from './userDetailsSection';
interface Iprops {
collectionSummaries: CollectionSummaries;
}
export default function Sidebar({ collectionSummaries }: Iprops) {
const { sidebarView, closeSidebar } = useContext(AppContext);
const [userDetails, setUserDetails] = useState<UserDetails>(null);
useEffect(() => {
setUserDetails(getLocalUserDetails());
}, []);
useEffect(() => {
const main = async () => {
const userDetails = await getUserDetails();
setUserDetails(userDetails);
setData(LS_KEYS.USER_DETAILS, userDetails);
};
main();
}, [sidebarView]);
return (
<DrawerSidebar anchor="left" open={sidebarView} onClose={closeSidebar}>
<DrawerSidebar open={sidebarView} onClose={closeSidebar}>
<HeaderSection closeSidebar={closeSidebar} />
<DividerWithMargin />
<InfoSection userDetails={userDetails} />
<SubscriptionDetails userDetails={userDetails} />
<DividerWithMargin />
<PaddedDivider spaced />
<UserDetailsSection sidebarView={sidebarView} />
<PaddedDivider invisible />
<NavigationSection
closeSidebar={closeSidebar}
collectionSummaries={collectionSummaries}
/>
<UtilitySection closeSidebar={closeSidebar} />
<DividerWithMargin />
<HelpSection userDetails={userDetails} />
<DividerWithMargin />
<PaddedDivider />
<HelpSection />
<PaddedDivider />
<ExitSection />
<DividerWithMargin />
<DebugLogs />
{/* <PaddedDivider />
<DebugLogs /> */}
</DrawerSidebar>
);
}

28
src/components/Sidebar/styledComponents.tsx
View file

@ -1,14 +1,30 @@
import { Drawer, Divider } from '@mui/material';
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)(() => ({
export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
'& .MuiPaper-root': {
width: '320px',
padding: '20px',
padding: theme.spacing(2, 1, 4, 1),
},
}));
export const DividerWithMargin = MuiStyled(Divider)(() => ({
marginTop: '20px',
marginBottom: '20px',
DrawerSidebar.defaultProps = { anchor: 'left' };
export const PaddedDivider = MuiStyled(Divider)<{
invisible?: boolean;
spaced?: boolean;
}>(({ theme, invisible, spaced }) => ({
margin: theme.spacing(spaced ? 2 : 1, 0),
opacity: invisible ? 0 : 1,
}));
export const DotSeparator = styled(CircleIcon)`
height: 4px;
width: 4px;
left: 86px;
top: 18px;
border-radius: 0px;
margin: 0 ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.palette.text.secondary};
`;

40
src/components/Sidebar/userDetailsSection.tsx Normal file
View file

@ -0,0 +1,40 @@
import React, { useEffect } from 'react';
import { SpaceBetweenFlex } from 'components/Container';
import { PaddedDivider } from './styledComponents';
import SubscriptionDetails from './SubscriptionDetails';
import { getUserDetails } from 'services/userService';
import { UserDetails } from 'types/user';
import { LS_KEYS } from 'utils/storage/localStorage';
import { useLocalState } from 'hooks/useLocalState';
import { THEMES } from 'types/theme';
import ThemeSwitcher from './ThemeSwitcher';
import Typography from '@mui/material/Typography';
export default function UserDetailsSection({ sidebarView }) {
const [userDetails, setUserDetails] = useLocalState<UserDetails>(
LS_KEYS.USER_DETAILS
);
const [theme, setTheme] = useLocalState<THEMES>(LS_KEYS.THEME, THEMES.DARK);
useEffect(() => {
if (!sidebarView) {
return;
}
const main = async () => {
const userDetails = await getUserDetails();
setUserDetails(userDetails);
};
main();
}, [sidebarView]);
return (
<>
<SpaceBetweenFlex px={1}>
<Typography>{userDetails?.email}</Typography>
<ThemeSwitcher theme={theme} setTheme={setTheme} />
</SpaceBetweenFlex>
<PaddedDivider invisible />
<SubscriptionDetails userDetails={userDetails} />
</>
);
}

22
src/components/icons/NavigateNext.tsx
View file

@ -1,22 +0,0 @@
import React from 'react';
export default function NavigateNext(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="40"
viewBox="0 0 24 24"
width="24px"
fill="currentColor"
{...props}>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
);
}
NavigateNext.defaultProps = {
height: 24,
width: 24,
viewBox: '0 0 24 24',
};

23
src/components/icons/SortIcon.tsx
View file

@ -1,23 +0,0 @@
import React from 'react';
export default function SortIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}>
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"
fill="currentColor"
/>
</svg>
);
}
SortIcon.defaultProps = {
height: 24,
width: 24,
viewBox: '0 0 24 24',
};

20
src/components/icons/TickIcon.tsx
View file

@ -1,20 +0,0 @@
import React from 'react';
export default function TickIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height={props.height}
viewBox={props.viewBox}
width={props.width}
fill="currentColor">
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg>
);
}
TickIcon.defaultProps = {
height: 20,
width: 20,
viewBox: '0 0 24 24',
};

90
src/components/pages/gallery/CollectionSort.tsx
View file

@ -1,90 +0,0 @@
import React, { useState } from 'react';
import { COLLECTION_SORT_BY } from 'constants/collection';
import Menu from '@mui/material/Menu';
import { IconButton, MenuItem } from '@mui/material';
import SortIcon from 'components/icons/SortIcon';
import TickIcon from 'components/icons/TickIcon';
import constants from 'utils/strings/constants';
import { ListItemIcon, ListItemText, MenuList, Paper } from '@mui/material';
interface Props {
setCollectionSortBy: (sortBy: COLLECTION_SORT_BY) => void;
activeSortBy: COLLECTION_SORT_BY;
}
interface OptionProps extends Props {
close: () => void;
}
const SortByOptionCreator =
({ setCollectionSortBy, activeSortBy, close }: OptionProps) =>
(props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
const handleClick = () => {
setCollectionSortBy(props.sortBy);
close();
};
return (
<MenuItem onClick={handleClick}>
<ListItemIcon
sx={{
minWidth: '30px',
}}>
{activeSortBy === props.sortBy && <TickIcon />}
</ListItemIcon>
<ListItemText>{props.children}</ListItemText>
</MenuItem>
);
};
const CollectionSortOptions = (props: OptionProps) => {
const SortByOption = SortByOptionCreator(props);
return (
<Paper sx={{ maxWidth: '100%' }}>
<MenuList>
<SortByOption sortBy={COLLECTION_SORT_BY.NAME}>
{constants.SORT_BY_NAME}
</SortByOption>
<SortByOption
sortBy={COLLECTION_SORT_BY.CREATION_TIME_DESCENDING}>
{constants.SORT_BY_CREATION_TIME_DESCENDING}
</SortByOption>
<SortByOption
sortBy={COLLECTION_SORT_BY.CREATION_TIME_ASCENDING}>
{constants.SORT_BY_CREATION_TIME_ASCENDING}
</SortByOption>
<SortByOption
sortBy={COLLECTION_SORT_BY.UPDATION_TIME_DESCENDING}>
{constants.SORT_BY_UPDATION_TIME_DESCENDING}
</SortByOption>
</MenuList>
</Paper>
);
};
export default function CollectionSort(props: Props) {
const [sortByEl, setSortByEl] = useState(null);
const handleClose = () => setSortByEl(null);
return (
<>
<IconButton
onClick={(event) => setSortByEl(event.currentTarget)}
aria-controls={sortByEl ? 'collection-sort' : undefined}
aria-haspopup="true"
aria-expanded={sortByEl ? 'true' : undefined}>
<SortIcon />
</IconButton>
<Menu
id="collection-sort"
anchorEl={sortByEl}
open={Boolean(sortByEl)}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'collection-sort',
}}>
<CollectionSortOptions {...props} close={handleClose} />
</Menu>
</>
);
}

62
src/darkThemeOptions.tsx
View file

@ -1,62 +0,0 @@
import { createTheme } from '@mui/material/styles';
declare module '@mui/material/styles' {
interface Palette {
accent: Palette['primary'];
danger: Palette['primary'];
}
interface PaletteOptions {
accent: PaletteOptions['primary'];
danger: PaletteOptions['primary'];
}
}
declare module '@mui/material/Button' {
export interface ButtonPropsColorOverrides {
danger: true;
}
}
// Create a theme instance.
const darkThemeOptions = createTheme({
components: {
MuiPaper: {
styleOverrides: { root: { backgroundImage: 'none' } },
},
MuiLink: {
styleOverrides: {
root: {
color: '#fff',
textDecoration: 'none',
'&:hover': {
color: '#fff',
textDecoration: 'underline',
textDecorationColor: '#fff',
},
},
},
},
},
palette: {
mode: 'dark',
primary: {
main: '#fff',
},
text: {
primary: 'hsla(0, 0%, 100%, 1)',
secondary: 'hsla(0, 0%, 100%, 0.5)',
},
accent: {
main: '#43BA6C',
dark: '#369556',
},
danger: {
main: '#c93f3f',
},
background: { default: '#191919', paper: '#191919' },
},
});
export default darkThemeOptions;

13
src/hooks/useComponentScroll.tsx
View file

@ -1,4 +1,4 @@
import { SCROLL_DIRECTION } from 'components/Collections/NavigationButton';
import { SCROLL_DIRECTION } from 'components/Collections/CollectionBar/NavigationButton';
import { useRef, useState, useEffect } from 'react';
export default function useComponentScroll({
@ -15,14 +15,17 @@ export default function useComponentScroll({
}>({});
const updateScrollObj = () => {
if (componentRef.current) {
const { scrollLeft, scrollWidth, clientWidth } =
componentRef.current;
setScrollObj({ scrollLeft, scrollWidth, clientWidth });
if (!componentRef.current) {
return;
}
const { scrollLeft, scrollWidth, clientWidth } = componentRef.current;
setScrollObj({ scrollLeft, scrollWidth, clientWidth });
};
useEffect(() => {
if (!componentRef.current) {
return;
}
// Add event listener
componentRef.current?.addEventListener('scroll', updateScrollObj);

4
src/pages/_app.tsx
View file

@ -24,9 +24,11 @@ import MessageDialog, {
SetDialogMessage,
} from 'components/MessageDialog';
import { ThemeProvider as MThemeProvider } from '@mui/material/styles';
import darkThemeOptions from 'darkThemeOptions';
import darkThemeOptions from 'themes/darkThemeOptions';
import { CssBaseline } from '@mui/material';
import SidebarToggler from 'components/Navbar/SidebarToggler';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as types from 'styled-components/cssprop';
export const LogoImage = styled.img`
max-height: 28px;

96
src/themes/darkThemeOptions.tsx Normal file
View file

@ -0,0 +1,96 @@
import {
createTheme,
PaletteColor,
PaletteColorOptions,
} from '@mui/material/styles';
declare module '@mui/material/styles' {
interface Palette {
accent: PaletteColor;
danger: PaletteColor;
}
interface PaletteOptions {
accent?: PaletteColorOptions;
danger?: PaletteColorOptions;
}
}
declare module '@mui/material/Button' {
export interface ButtonPropsColorOverrides {
accent: true;
danger: true;
}
}
declare module '@mui/material/ToggleButtonGroup' {
export interface ToggleButtonGroupPropsColorOverrides {
negative: true;
}
}
// Create a theme instance.
const darkThemeOptions = createTheme({
components: {
MuiPaper: {
styleOverrides: { root: { backgroundImage: 'none' } },
},
MuiLink: {
styleOverrides: {
root: {
textDecoration: 'none',
'&:hover': {
textDecoration: 'underline',
},
},
},
},
MuiMenu: {
styleOverrides: { paper: { margin: '10px' } },
},
MuiButton: {
styleOverrides: {
root: {
fontSize: '18px',
lineHeight: '21.78px',
padding: '16px',
textTransform: 'none',
borderRadius: '8px',
},
},
},
},
palette: {
mode: 'dark',
primary: {
main: '#f0f0f0',
},
secondary: {
main: 'rgba(256, 256, 256, 0.12)',
contrastText: '#fff',
},
text: {
primary: '#fff',
secondary: '#808080',
},
accent: {
main: '#43BA6C',
dark: '#369556',
},
danger: {
main: '#c93f3f',
},
background: { default: '#000000', paper: '#1b1b1b' },
grey: {
A100: '#ccc',
A200: 'rgba(256, 256, 256, 0.24)',
},
divider: 'rgba(255, 255, 255, 0.24)',
},
shape: {
borderRadius: 8,
},
});
export default darkThemeOptions;

4
src/types/theme/index.ts Normal file
View file

@ -0,0 +1,4 @@
export enum THEMES {
LIGHT,
DARK,
}

1
src/utils/storage/localStorage.ts
View file

@ -18,6 +18,7 @@ export enum LS_KEYS {
LOGS = 'logs',
USER_DETAILS = 'userDetails',
COLLECTION_SORT_BY = 'collectionSortBy',
THEME = 'theme',
}
export const setData = (key: LS_KEYS, value: object) => {

2
src/utils/strings/englishConstants.tsx
View file

@ -32,6 +32,7 @@ const Trigger = styled.span`
`;
const englishConstants = {
ENTE: 'ente',
HERO_HEADER: () => (
<div>
with <Logo src="/icon.svg" />
@ -718,7 +719,6 @@ const englishConstants = {
VIEW_ALL_ALBUMS: 'View all Albums',
ALL_ALBUMS: 'All Albums',
PHOTOS: 'Photos',
ENTE: 'ente',
ENDS: 'Ends',
};

8
yarn.lock
View file

@ -1634,10 +1634,10 @@
resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
"@types/styled-components@^5.1.3":
version "5.1.14"
resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.14.tgz"
integrity sha512-d6P1/tyNytqKwam3cQXq7a9uPtovc/mdAs7dBiz1YbDdNIT3X4WmuFU78YdSYh84TXVuhOwezZ3EeKuNBhwsHQ==
"@types/styled-components@^5.1.25":
version "5.1.25"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
dependencies:
"@types/hoist-non-react-statics" "*"
"@types/react" "*"