Merge branch 'master' into first-load-ux

public/icon.svg

@@ -1,3 +1,6 @@
 <svg width="652" height="191" viewBox="0 0 652 191" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M158.192 111.968C158.192 114.464 158 118.016 157.616 122.624H36.944C39.056 133.952 44.528 142.976 53.36 149.696C62.384 156.224 73.52 159.488 86.768 159.488C103.664 159.488 117.584 153.92 128.528 142.784L147.824 164.96C140.912 173.216 132.176 179.456 121.616 183.68C111.056 187.904 99.152 190.016 85.904 190.016C69.008 190.016 54.128 186.656 41.264 179.936C28.4 173.216 18.416 163.904 11.312 152C4.4 139.904 0.944001 126.272 0.944001 111.104C0.944001 96.128 4.304 82.688 11.024 70.784C17.936 58.688 27.44 49.28 39.536 42.56C51.632 35.84 65.264 32.48 80.432 32.48C95.408 32.48 108.752 35.84 120.464 42.56C132.368 49.088 141.584 58.4 148.112 70.496C154.832 82.4 158.192 96.224 158.192 111.968ZM80.432 61.28C68.912 61.28 59.12 64.736 51.056 71.648C43.184 78.368 38.384 87.392 36.656 98.72H123.92C122.384 87.584 117.68 78.56 109.808 71.648C101.936 64.736 92.144 61.28 80.432 61.28ZM280.036 32.48C299.428 32.48 314.98 38.144 326.692 49.472C338.404 60.8 344.26 77.6 344.26 99.872V188H308.26V104.48C308.26 91.04 305.092 80.96 298.756 74.24C292.42 67.328 283.396 63.872 271.684 63.872C258.436 63.872 247.972 67.904 240.292 75.968C232.612 83.84 228.772 95.264 228.772 110.24V188H192.772V34.208H227.044V54.08C232.996 46.976 240.484 41.6 249.508 37.952C258.532 34.304 268.708 32.48 280.036 32.48ZM482.377 179.648C478.153 183.104 472.969 185.696 466.825 187.424C460.873 189.152 454.537 190.016 447.817 190.016C430.921 190.016 417.865 185.6 408.648 176.768C399.433 167.936 394.825 155.072 394.825 138.176V64.16H369.481V35.36H394.825V0.223997H430.825V35.36H472.009V64.16H430.825V137.312C430.825 144.8 432.649 150.56 436.297 154.592C439.945 158.432 445.225 160.352 452.137 160.352C460.201 160.352 466.921 158.24 472.297 154.016L482.377 179.648ZM651.505 111.968C651.505 114.464 651.313 118.016 650.929 122.624H530.257C532.369 133.952 537.841 142.976 546.673 149.696C555.697 156.224 566.833 159.488 580.081 159.488C596.977 159.488 610.897 153.92 621.841 142.784L641.137 164.96C634.225 173.216 625.489 179.456 614.929 183.68C604.369 187.904 592.465 190.016 579.217 190.016C562.321 190.016 547.441 186.656 534.577 179.936C521.713 173.216 511.729 163.904 504.625 152C497.713 139.904 494.257 126.272 494.257 111.104C494.257 96.128 497.617 82.688 504.337 70.784C511.249 58.688 520.753 49.28 532.849 42.56C544.945 35.84 558.577 32.48 573.745 32.48C588.721 32.48 602.065 35.84 613.777 42.56C625.681 49.088 634.897 58.4 641.425 70.496C648.145 82.4 651.505 96.224 651.505 111.968ZM573.745 61.28C562.225 61.28 552.433 64.736 544.369 71.648C536.497 78.368 531.697 87.392 529.969 98.72H617.233C615.697 87.584 610.993 78.56 603.121 71.648C595.249 64.736 585.457 61.28 573.745 61.28Z" fill="white"/>
+<path d="M158.192 111.968C158.192 114.464 158 118.016 157.616 122.624H36.944C39.056 133.952 44.528 142.976 53.36 149.696C62.384 156.224 73.52 159.488 86.768 159.488C103.664 159.488 117.584 153.92 128.528 142.784L147.824 164.96C140.912 173.216 132.176 179.456 121.616 183.68C111.056 187.904 99.152 190.016 85.904 190.016C69.008 190.016 54.128 186.656 41.264 179.936C28.4 173.216 18.416 163.904 11.312 152C4.39997 139.904 0.94397 126.272 0.94397 111.104C0.94397 96.128 4.30397 82.688 11.024 70.784C17.936 58.688 27.44 49.28 39.536 42.56C51.632 35.84 65.264 32.48 80.432 32.48C95.408 32.48 108.752 35.84 120.464 42.56C132.368 49.088 141.584 58.4 148.112 70.496C154.832 82.4 158.192 96.224 158.192 111.968ZM80.432 61.28C68.912 61.28 59.12 64.736 51.056 71.648C43.184 78.368 38.384 87.392 36.656 98.72H123.92C122.384 87.584 117.68 78.56 109.808 71.648C101.936 64.736 92.144 61.28 80.432 61.28Z" fill="white"/>
+<path d="M280.036 32.48C299.428 32.48 314.98 38.144 326.692 49.472C338.404 60.8 344.26 77.6 344.26 99.872V188H308.26V104.48C308.26 91.04 305.092 80.96 298.756 74.24C292.42 67.328 283.396 63.872 271.684 63.872C258.436 63.872 247.972 67.904 240.292 75.968C232.612 83.84 228.772 95.264 228.772 110.24V188H192.772V34.208H227.044V54.08C232.996 46.976 240.484 41.6 249.508 37.952C258.532 34.304 268.708 32.48 280.036 32.48Z" fill="white"/>
+<path d="M482.376 179.648C478.152 183.104 472.968 185.696 466.824 187.424C460.872 189.152 454.536 190.016 447.816 190.016C430.92 190.016 417.864 185.6 408.648 176.768C399.432 167.936 394.824 155.072 394.824 138.176V64.16H369.48V35.36H394.824V0.223999H430.824V35.36H472.008V64.16H430.824V137.312C430.824 144.8 432.648 150.56 436.296 154.592C439.944 158.432 445.224 160.352 452.136 160.352C460.2 160.352 466.92 158.24 472.296 154.016L482.376 179.648Z" fill="white"/>
+<path d="M651.505 111.968C651.505 114.464 651.312 118.016 650.928 122.624H530.256C532.368 133.952 537.84 142.976 546.672 149.696C555.696 156.224 566.832 159.488 580.08 159.488C596.976 159.488 610.896 153.92 621.84 142.784L641.136 164.96C634.224 173.216 625.488 179.456 614.928 183.68C604.368 187.904 592.464 190.016 579.216 190.016C562.32 190.016 547.44 186.656 534.576 179.936C521.712 173.216 511.728 163.904 504.624 152C497.712 139.904 494.256 126.272 494.256 111.104C494.256 96.128 497.616 82.688 504.336 70.784C511.248 58.688 520.753 49.28 532.849 42.56C544.945 35.84 558.577 32.48 573.745 32.48C588.721 32.48 602.064 35.84 613.776 42.56C625.68 49.088 634.896 58.4 641.424 70.496C648.144 82.4 651.505 96.224 651.505 111.968ZM573.745 61.28C562.225 61.28 552.433 64.736 544.369 71.648C536.497 78.368 531.697 87.392 529.969 98.72H617.232C615.696 87.584 610.992 78.56 603.12 71.648C595.248 64.736 585.457 61.28 573.745 61.28Z" fill="white"/>
 </svg>

public/image.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M0 0h24v24H0z" fill="none"/><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>

src/components/Navbar.tsx

@@ -4,7 +4,7 @@ const Navbar = styled.div`
     padding: 8px 12px;
     font-size: 20px;
     line-height: 2rem;
-    background-color: #212121;
+    background-color: #111;
     color: #fff;
     min-height: 56px;
     display: flex;

src/pages/_app.tsx

@@ -32,7 +32,7 @@ const GlobalStyles = createGlobalStyle`
         flex: 1;
         display: flex;
         flex-direction: column;
-        background-color: #303030;
+        background-color: #191919;
     }
 
     #__next {
@@ -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;
     }
@@ -101,10 +101,29 @@ const GlobalStyles = createGlobalStyle`
         overflow: hidden;
         margin: 0 0 5px 0;
     }
-    .modal-content{
+    .modal-content {
-        background-color:#303030 !important;
+        background-color:#202020 !important;
         color:#aaa;
     }
+    .btn-primary {
+        background: #2dc262;
+        border-color: #29a354;
+        padding: 8px;
+        padding-left: 24px;
+        padding-right: 24px;
+    }
+    .btn-primary:hover {
+        background-color: #29a354;
+        border-color: #2dc262;
+    }
+    .btn-primary:disabled {
+        background-color: #69b383;
+    }
+    .card {
+        background-color: #242424;
+        color: #fff;
+        border-radius: 12px;
+    }
 `;
 
 const Image = styled.img`
@@ -166,7 +185,7 @@ export default function App({ Component, pageProps }) {
         >
             <Head>
                 <title>
-                    ente.io | Privacy friendly alternative to Google Photos
+                    ente.io | Encrypted Photo Storage
                 </title>
             </Head>
             <GlobalStyles />

src/pages/_document.tsx

@@ -34,7 +34,7 @@ export default class MyDocument extends Document {
                 <Head>
                     <meta
                         name="description"
-                        content="ente is a privacy focussed alternative to Google Photos that supports end-to-end encryption. Because memories are precious."
+                        content="ente is a privacy focussed photo storage service that offers end-to-end encryption."
                     />
                     <link rel="icon" href="/icon.svg" type="image/png" />
                 </Head>

src/pages/credentials/index.tsx

@@ -90,10 +90,10 @@ export default function Credentials() {
 
     return (
         <Container>
-            <Image alt="vault" src="/vault.svg" />
+            {/* <Image alt="vault" src="/vault.svg" /> */}
-            <Card style={{ minWidth: '300px' }}>
+            <Card style={{ minWidth: '320px', padding: '40px 30px' }} className="text-center">
                 <Card.Body>
-                    <p className="text-center">{constants.ENTER_PASSPHRASE}</p>
+                    <Card.Title style={{ marginBottom: '24px' }}>{constants.ENTER_PASSPHRASE}</Card.Title>
                     <Formik<formValues>
                         initialValues={{ passphrase: '' }}
                         onSubmit={verifyPassphrase}

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}
@@ -25,7 +26,7 @@ function CollectionSelector(props) {
                 <Card>
                     <PreviewCard
                         data={item.file}
-                    updateUrl={() => {}}
+                        updateUrl={() => { }}
                         forcedEnable
                     />
                     <Card.Text className="text-center">
@@ -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/pages/gallery/components/Collections.tsx

@@ -11,7 +11,7 @@ interface CollectionProps {
 const Container = styled.div`
     margin: 0 auto;
     overflow-y: hidden;
-    height: 40px;
+    height: 50px;
     display: flex;
     max-width: 100%;
 
@@ -30,15 +30,16 @@ const Container = styled.div`
 
 const Wrapper = styled.div`
     height: 70px;
+    margin-top: 10px;
     flex: 1;
     white-space: nowrap;
     overflow: auto;
     max-width: 100%;
 `;
 const Chip = styled.button<{ active: boolean }>`
-    border-radius: 20px;
+    border-radius: 8px;
-    padding: 2px 10px;
+    padding: 4px 14px;
-    margin: 2px 5px 2px 2px;
+    margin: 2px 8px 2px 2px;
     border: none;
     background-color: ${(props) =>
         props.active ? '#fff' : 'rgba(255, 255, 255, 0.3)'};

src/pages/gallery/components/CreateCollection.tsx

@@ -4,6 +4,7 @@ import { createAlbum } from 'services/collectionService';
 import UploadService from 'services/uploadService';
 import { CollectionAndItsLatestFile } from 'services/collectionService';
 import { getToken } from 'utils/common/key';
+import constants from 'utils/strings/constants';
 
 export default function CreateCollection(props) {
     const {
@@ -78,17 +79,17 @@ export default function CreateCollection(props) {
         }
     };
     return (
-        <Modal show={modalView} onHide={closeModal} centered backdrop="static">
+        <Modal show={modalView} onHide={closeModal} centered backdrop="static"
+            style={{ background: 'rgba(0, 0, 0, 0.8)' }}>
             <Modal.Header closeButton>
-                <Modal.Title>Create Collection</Modal.Title>
+                <Modal.Title>{constants.CREATE_COLLECTION}</Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 <Form onSubmit={handleSubmit}>
                     <Form.Group controlId="formBasicEmail">
-                        <Form.Label>Album Name:</Form.Label>
                         <Form.Control
                             type="text"
-                            placeholder="Enter Album Name"
+                            placeholder={constants.ALBUM_NAME}
                             value={albumName}
                             onChange={handleChange}
                         />
@@ -98,7 +99,7 @@ export default function CreateCollection(props) {
                         type="submit"
                         style={{ width: '100%' }}
                     >
-                        Submit
+                        {constants.CREATE}
                     </Button>
                 </Form>
             </Modal.Body>

src/pages/gallery/components/PreviewCard.tsx

@@ -12,7 +12,7 @@ interface IProps {
 }
 
 const Cont = styled.div<{ disabled: boolean }>`
-    background: #555 url(/image.svg) no-repeat center;
+    background: #222;
     display: block;
     width: fit-content;
     height: 192px;

src/pages/gallery/components/UploadButton.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
+import constants from 'utils/strings/constants';
 
 function UploadButton({ showModal }) {
     return (
         <Button variant="primary" onClick={showModal}>
-            Upload New Photos
+            {constants.UPLOAD_BUTTON_TEXT}
         </Button>
     );
 }

src/pages/gallery/index.tsx

@@ -304,7 +304,6 @@ export default function Gallery(props) {
                         {constants.INITIAL_LOAD_DELAY_WARNING}
                     </Alert>
                 )}
-                <Spinner animation="border" variant="primary" />
             </div>
         );
     }
@@ -346,7 +345,7 @@ export default function Gallery(props) {
         <>
             <ErrorAlert errorCode={errorCode} />
             <LoadingBar
-                color="#007bff"
+                color="#2dc262"
                 progress={progress}
                 onLoaderFinished={() => setProgress(0)}
             />

src/pages/index.tsx

@@ -59,14 +59,14 @@ export default function Home() {
 
     return (
         <>
-            <div style={{ display: showMessage ? 'block' : 'none' }}>
+            <div style={{ display: showMessage ? 'block' : 'none', textAlign: 'center' }}>
-                <Alert variant="info">{constants.WEB_SIGNUPS_DISABLED}</Alert>
+                <Alert variant="warning">{constants.WEB_SIGNUPS_DISABLED()}</Alert>
             </div>
 
             <Container>
-                <Card style={{ minWidth: '300px' }} className="text-center">
+                <Card style={{ minWidth: '320px' }} className="text-center">
-                    <Card.Body>
+                    <Card.Body style={{ padding: '40px 30px' }}>
-                        <Card.Title style={{ marginBottom: '20px' }}>
+                        <Card.Title style={{ marginBottom: '32px' }}>
                             {constants.LOGIN}
                         </Card.Title>
                         <Formik<formValues>
@@ -110,7 +110,7 @@ export default function Home() {
                                         disabled={loading}
                                         style={{ marginBottom: '12px' }}
                                     >
-                                        {constants.SUBMIT}
+                                        {constants.LOGIN}
                                     </Button>
                                 </Form>
                             )}
@@ -120,7 +120,7 @@ export default function Home() {
                             onClick={register}
                             style={{ fontSize: '14px' }}
                         >
-                            Don't have an account?
+                            {constants.NO_ACCOUNT}
                         </Card.Link>
                     </Card.Body>
                 </Card>

src/pages/verify/index.tsx

@@ -82,10 +82,9 @@ export default function Verify() {
 
     return (
         <Container>
-            <Image alt="Email Sent" src="/email_sent.svg" />
             <Card style={{ minWidth: '300px' }} className="text-center">
                 <Card.Body>
-                    <Card.Title>{constants.VERIFY_EMAIL}</Card.Title>
+                    <Card.Title style={{ fontWeight: 'bold', marginBottom: '24px' }}>{constants.VERIFY_EMAIL}</Card.Title>
                     {constants.EMAIL_SENT({ email })}
                     {constants.CHECK_INBOX}
                     <br />
@@ -118,6 +117,7 @@ export default function Verify() {
                                         )}
                                         placeholder={constants.ENTER_OTT}
                                         disabled={loading}
+                                        autoFocus={true}
                                     />
                                     <Form.Control.Feedback type="invalid">
                                         {errors.ott}

src/utils/strings/englishConstants.tsx

@@ -5,66 +5,78 @@ import { template } from './vernacularStrings';
  */
 const englishConstants = {
     COMPANY_NAME: 'ente',
-    LOGIN: 'Login',
+    LOGIN: 'login',
-    SIGN_UP: 'Sign Up',
+    SIGN_UP: 'sign up',
-    NAME: 'Name',
+    NAME: 'name',
     ENTER_NAME: 'your name',
-    EMAIL: 'Email Address',
+    EMAIL: 'email',
-    ENTER_EMAIL: 'email address',
+    ENTER_EMAIL: 'email',
-    DATA_DISCLAIMER: `We'll never share your data with anyone else.`,
+    DATA_DISCLAIMER: `we'll never share your data with anyone else.`,
-    SUBMIT: 'Submit',
+    SUBMIT: 'submit',
-    EMAIL_ERROR: 'Enter a valid email address',
+    EMAIL_ERROR: 'enter a valid email',
-    REQUIRED: 'Required',
+    REQUIRED: 'required',
-    VERIFY_EMAIL: 'Verify Email',
+    VERIFY_EMAIL: 'verify email',
     EMAIL_SENT: ({ email }) => (
         <p>
-            We have sent a mail to <b>{email}</b>.
+            we have sent a mail to <b>{email}</b>
         </p>
     ),
-    CHECK_INBOX: 'Please check your inbox (and spam) to complete verification.',
+    CHECK_INBOX: 'please check your inbox (and spam) to complete verification',
-    ENTER_OTT: 'Enter verification code here',
+    ENTER_OTT: 'verification code',
-    RESEND_MAIL: 'Did not get email?',
+    RESEND_MAIL: 'did not get email?',
-    VERIFY: 'Verify',
+    VERIFY: 'verify',
-    UNKNOWN_ERROR: 'Oops! Something went wrong. Please try again.',
+    UNKNOWN_ERROR: 'something went wrong, please try again',
-    INVALID_CODE: 'Invalid verification code',
+    INVALID_CODE: 'invalid verification code',
-    SENDING: 'Sending...',
+    SENDING: 'sending...',
-    SENT: 'Sent! Check again.',
+    SENT: 'sent!',
-    ENTER_PASSPHRASE: 'Please enter your passphrase.',
+    ENTER_PASSPHRASE: 'enter your password',
-    RETURN_PASSPHRASE_HINT: 'That thing you promised to never forget.',
+    RETURN_PASSPHRASE_HINT: 'password',
-    SET_PASSPHRASE: 'Set Passphrase',
+    SET_PASSPHRASE: 'set password',
-    VERIFY_PASSPHRASE: 'Verify Passphrase',
+    VERIFY_PASSPHRASE: 'sign in',
-    INCORRECT_PASSPHRASE: 'Incorrect Passphrase',
+    INCORRECT_PASSPHRASE: 'incorrect password',
     ENTER_ENC_PASSPHRASE:
-        'Please enter a passphrase that we can use to encrypt your data.',
+        'please enter a password that we can use to encrypt your data',
     PASSPHRASE_DISCLAIMER: () => (
         <p>
-            We don't store your passphrase, so if you forget,
+            we don't store your password, so if you forget,
             <strong> we will not be able to help you</strong> recover your data.
         </p>
     ),
-    PASSPHRASE_HINT: 'Something you will never forget',
+    PASSPHRASE_HINT: 'password',
-    PASSPHRASE_CONFIRM: 'Please repeat it once more',
+    PASSPHRASE_CONFIRM: 'password again',
-    PASSPHRASE_MATCH_ERROR: `Passphrase didn't match`,
+    PASSPHRASE_MATCH_ERROR: `passwords don't match`,
     CONSOLE_WARNING_STOP: 'STOP!',
-    CONSOLE_WARNING_DESC: `This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a feature or "hack" someone's account, it is a scam and will give them access to your account.`,
+    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`,
-    CLOSE: 'Close',
+    CREATE_COLLECTION: `create album`,
+    CLOSE: 'close',
     NOTHING_HERE: `nothing to see here! 👀`,
     UPLOAD: {
-        0: 'Preparing to upload',
+        0: 'preparing to upload',
-        1: 'Encryting your files',
+        1: 'encrypting your files',
-        2: 'Uploading your Files',
+        2: 'uploading your files',
-        3: 'Files Uploaded Successfully !!!',
+        3: 'files uploaded successfully!',
     },
     OF: 'of',
     SUBSCRIPTION_EXPIRED:
-        "You don't have a active subscription plan!! Please get one in the mobile app",
+        'your subscription has expired, please renew it form the mobile app',
     STORAGE_QUOTA_EXCEEDED:
-        'You have exceeded your designated storage Quota, please upgrade your plan to add more files',
+        'you have exceeded your storage quota, please upgrade your plan from the mobile app',
-    WEB_SIGNUPS_DISABLED:
-        'Web signups are disabled for now, please install the mobile app and signup there',
-    USER_DOES_NOT_EXIST: 'Incorrect emailId, no such user exists',
     INITIAL_LOAD_DELAY_WARNING: 'Please wait, intial load may take some time',
+
+    WEB_SIGNUPS_DISABLED: () => (
+        <div>
+            sorry signups are possibly only on the{' '}
+            <a href="https://ente.io/app" target="_blank">
+                mobile app
+            </a>
+        </div>
+    ),
+    USER_DOES_NOT_EXIST: 'sorry, could not find a user with that email',
+    UPLOAD_BUTTON_TEXT: 'upload',
+    NO_ACCOUNT: "don't have an account?",
+    ALBUM_NAME: 'album name',
+    CREATE: 'create',
 };
 
 export default englishConstants;