From cafaef68e5f0d16ab412a1224a37476ee1f71927 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Thu, 26 May 2022 20:40:51 +0530
Subject: [PATCH] update AddCollectionButton

---
 .../pages/gallery/AddCollectionButton.tsx     | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/pages/gallery/AddCollectionButton.tsx b/src/components/pages/gallery/AddCollectionButton.tsx
index 14ad58586..89713e8fa 100644
--- a/src/components/pages/gallery/AddCollectionButton.tsx
+++ b/src/components/pages/gallery/AddCollectionButton.tsx
@@ -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 { Card } from 'react-bootstrap';
 import styled from 'styled-components';
 import constants from 'utils/strings/constants';
-import { CollectionIcon } from './CollectionSelector';
 
 const ImageContainer = styled.div`
-    min-height: 192px;
-    max-width: 192px;
-    border: 1px solid #555;
+    position: absolute;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 42px;
-    cursor: pointer;
 `;
 
 export default function AddCollectionButton({
@@ -21,15 +21,18 @@ export default function AddCollectionButton({
     showNextModal: () => void;
 }) {
     return (
-        <CollectionIcon
-            style={{ margin: '10px' }}
+        <CollectionCard
+            collectionTile={CollectionSelectorTile}
             onClick={() => showNextModal()}>
-            <Card>
-                <ImageContainer>+</ImageContainer>
-                <Card.Text style={{ textAlign: 'center' }}>
-                    {constants.CREATE_COLLECTION}
-                </Card.Text>
-            </Card>
-        </CollectionIcon>
+            <Typography
+                css={`
+                    font-size: 14px;
+                    font-weight: 600;
+                    line-height: 20px;
+                `}>
+                {constants.CREATE_COLLECTION}
+            </Typography>
+            <ImageContainer>+</ImageContainer>
+        </CollectionCard>
     );
 }