From f3097a67c361b4635d9f785f9fc04e2b30a73860 Mon Sep 17 00:00:00 2001
From: Vishnu Mohandas <vishnu@vishnu.tech>
Date: Mon, 15 Feb 2021 18:49:59 +0530
Subject: [PATCH] Update collection selector modal

---
 src/pages/_app.tsx                            |  6 +--
 .../gallery/components/AddCollection.tsx      |  7 ++--
 .../gallery/components/CollectionSelector.tsx | 41 ++++++++++---------
 src/utils/strings/englishConstants.tsx        |  3 +-
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 2795e77f5..755586a01 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -82,7 +82,7 @@ const GlobalStyles = createGlobalStyle`
     }
     .modal-90w{
         width:90vw;
-        max-width:880px!important;
+        max-width:960px!important;
     }
     .modal .modal-header, .modal  .modal-footer {
         border-color: #444 !important;
@@ -92,7 +92,7 @@ const GlobalStyles = createGlobalStyle`
         text-shadow: none;
     }
     .modal .card {
-        background-color: #303030;
+        background-color: #202020;
         border: none;
         color: #aaa;
     }
@@ -102,7 +102,7 @@ const GlobalStyles = createGlobalStyle`
         margin: 0 0 5px 0;
     }
     .modal-content {
-        background-color:#303030 !important;
+        background-color:#202020 !important;
         color:#aaa;
     }
     .btn-primary {
diff --git a/src/pages/gallery/components/AddCollection.tsx b/src/pages/gallery/components/AddCollection.tsx
index 535b62a07..8a3c016fc 100644
--- a/src/pages/gallery/components/AddCollection.tsx
+++ b/src/pages/gallery/components/AddCollection.tsx
@@ -3,6 +3,7 @@ import { Card } from 'react-bootstrap';
 import styled from 'styled-components';
 import CreateCollection from './CreateCollection';
 import DropzoneWrapper from './DropzoneWrapper';
+import constants from 'utils/strings/constants';
 
 const ImageContainer = styled.div`
     min-height: 192px;
@@ -32,12 +33,12 @@ export default function AddCollection(props) {
         <StyledCard>
             <ImageContainer>+</ImageContainer>
             <Card.Text style={{ textAlign: 'center' }}>
-                Create New Album
+                {constants.CREATE_COLLECTION}
             </Card.Text>
         </StyledCard>
     );
     return (
-        <>
+        <div style={{ margin: '10px' }}>
             <DropzoneWrapper
                 onDropAccepted={createCollection}
                 onDropRejected={closeUploadModal}
@@ -51,6 +52,6 @@ export default function AddCollection(props) {
                 closeModal={() => setCreateCollectionView(false)}
                 acceptedFiles={acceptedFiles}
             />
-        </>
+        </div>
     );
 }
diff --git a/src/pages/gallery/components/CollectionSelector.tsx b/src/pages/gallery/components/CollectionSelector.tsx
index 18f9ee4f1..ebf3c5c54 100644
--- a/src/pages/gallery/components/CollectionSelector.tsx
+++ b/src/pages/gallery/components/CollectionSelector.tsx
@@ -15,24 +15,26 @@ function CollectionSelector(props) {
     } = props;
 
     const CollectionIcons = collectionAndItsLatestFile?.map((item) => (
-        <CollectionDropZone
-            key={item.collection.id}
-            {...rest}
-            closeModal={closeUploadModal}
-            showModal={showUploadModal}
-            collectionAndItsLatestFile={item}
-        >
-            <Card>
-                <PreviewCard
-                    data={item.file}
-                    updateUrl={() => {}}
-                    forcedEnable
-                />
-                <Card.Text className="text-center">
-                    {item.collection.name}
-                </Card.Text>
-            </Card>
-        </CollectionDropZone>
+        <div style={{ margin: '10px' }}>
+            <CollectionDropZone
+                key={item.collection.id}
+                {...rest}
+                closeModal={closeUploadModal}
+                showModal={showUploadModal}
+                collectionAndItsLatestFile={item}
+            >
+                <Card>
+                    <PreviewCard
+                        data={item.file}
+                        updateUrl={() => { }}
+                        forcedEnable
+                    />
+                    <Card.Text className="text-center">
+                        {item.collection.name}
+                    </Card.Text>
+                </Card>
+            </CollectionDropZone>
+        </div>
     ));
 
     return (
@@ -40,9 +42,10 @@ function CollectionSelector(props) {
             show={uploadModalView}
             onHide={closeUploadModal}
             dialogClassName="modal-90w"
+            style={{ maxWidth: '100%' }}
         >
             <Modal.Header closeButton>
-                <Modal.Title>{constants.SELECT_COLLECTION}</Modal.Title>
+                <Modal.Title style={{ marginLeft: '12px' }}>{constants.SELECT_COLLECTION}</Modal.Title>
             </Modal.Header>
             <Modal.Body
                 style={{
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 857f86167..97b0ffbab 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -47,7 +47,8 @@ const englishConstants = {
     PASSPHRASE_MATCH_ERROR: `passwords don't match`,
     CONSOLE_WARNING_STOP: 'STOP!',
     CONSOLE_WARNING_DESC: `This is a browser feature intended for developers. Please don't copy-paste unverified code here.`,
-    SELECT_COLLECTION: `Select/Click on Collection to upload`,
+    SELECT_COLLECTION: `select an album to upload to`,
+    CREATE_COLLECTION: `create album`,
     CLOSE: 'Close',
     NOTHING_HERE: `nothing to see here! 👀`,
     UPLOAD: {