Update collection selector modal

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 {

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>
     );
 }

src/pages/gallery/components/CollectionSelector.tsx

@@ -15,6 +15,7 @@ function CollectionSelector(props) {
     } = props;
 
     const CollectionIcons = collectionAndItsLatestFile?.map((item) => (
+        <div style={{ margin: '10px' }}>
             <CollectionDropZone
                 key={item.collection.id}
                 {...rest}
@@ -33,6 +34,7 @@ function CollectionSelector(props) {
                     </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={{

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: {