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

update AddCollectionButton

Browse source
This commit is contained in:
Abhinav 2022-05-26 20:40:51 +05:30
parent 08d316bbaa
commit cafaef68e5
1 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/pages/gallery/AddCollectionButton.tsx
View file

@ -1,18 +1,18 @@
import { Typography } from '@mui/material';
import CollectionCard from 'components/Collections/CollectionCard';
import { CollectionSelectorTile } from 'components/Collections/styledComponents';
import React from 'react'; import React from 'react';
import { Card } from 'react-bootstrap';
import styled from 'styled-components'; import styled from 'styled-components';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import { CollectionIcon } from './CollectionSelector';
const ImageContainer = styled.div` const ImageContainer = styled.div`
min-height: 192px; position: absolute;
max-width: 192px; width: 100%;
border: 1px solid #555; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 42px; font-size: 42px;
cursor: pointer;
`; `;
export default function AddCollectionButton({ export default function AddCollectionButton({
@ -21,15 +21,18 @@ export default function AddCollectionButton({
showNextModal: () => void; showNextModal: () => void;
}) { }) {
return ( return (
<CollectionIcon <CollectionCard
style={{ margin: '10px' }} collectionTile={CollectionSelectorTile}
onClick={() => showNextModal()}> onClick={() => showNextModal()}>
<Card> <Typography
<ImageContainer>+</ImageContainer> css={`
<Card.Text style={{ textAlign: 'center' }}> font-size: 14px;
{constants.CREATE_COLLECTION} font-weight: 600;
</Card.Text> line-height: 20px;
</Card> `}>
</CollectionIcon> {constants.CREATE_COLLECTION}
</Typography>
<ImageContainer>+</ImageContainer>
</CollectionCard>
); );
} }