Merge pull request #634 from ente-io/upload-choice-screen

Upload type choice screen

src/components/Collections/AllCollections/header.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
-import { Box, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
+import { Box, DialogTitle, Stack, Typography } from '@mui/material';
-import { FlexWrapper, FluidContainer } from 'components/Container';
+import {
+    FlexWrapper,
+    FluidContainer,
+    IconButtonWithBG,
+} from 'components/Container';
 import CollectionSort from 'components/Collections/AllCollections/CollectionSort';
 import constants from 'utils/strings/constants';
 import Close from '@mui/icons-material/Close';
@@ -29,13 +33,9 @@ export default function AllCollectionsHeader({
                         activeSortBy={collectionSortBy}
                         setCollectionSortBy={setCollectionSortBy}
                     />
-                    <IconButton
+                    <IconButtonWithBG onClick={onClose}>
-                        onClick={onClose}
-                        sx={{
-                            background: (theme) => theme.palette.fill.dark,
-                        }}>
                         <Close />
-                    </IconButton>
+                    </IconButtonWithBG>
                 </Stack>
             </FlexWrapper>
         </DialogTitle>

src/components/Collections/CollectionListBar/index.tsx

@@ -11,7 +11,7 @@ import {
 import CollectionListBarCard from 'components/Collections/CollectionListBar/CollectionCard';
 import useComponentScroll, { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
 import useWindowSize from 'hooks/useWindowSize';
-import { SpaceBetweenFlex } from 'components/Container';
+import { IconButtonWithBG, SpaceBetweenFlex } from 'components/Container';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { AppContext } from 'pages/_app';
 import { CollectionSummary } from 'types/collection';
@@ -114,13 +114,9 @@ export default function CollectionListBar(props: IProps) {
                             setCollectionSortBy={props.setCollectionSortBy}
                             activeSortBy={props.collectionSortBy}
                         />
-                        <IconButton
+                        <IconButtonWithBG onClick={showAllCollections}>
-                            onClick={showAllCollections}
-                            sx={{
-                                background: (theme) => theme.palette.fill.dark,
-                            }}>
                             <ExpandMore />
-                        </IconButton>
+                        </IconButtonWithBG>
                     </Box>
                 )}
             </Box>

src/components/Container.ts

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, IconButton } from '@mui/material';
 import { styled } from '@mui/material';
 
 const VerticallyCentered = styled(Box)`
@@ -69,3 +69,7 @@ export const Overlay = styled(Box)`
     top: 0;
     left: 0;
 `;
+
+export const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
+    backgroundColor: theme.palette.fill.dark,
+}));

src/components/DialogBox/TitleWithCloseButton.tsx

@@ -21,7 +21,8 @@ const DialogTitleWithCloseButton = (props) => {
                     <IconButton
                         aria-label="close"
                         onClick={onClose}
-                        sx={{ float: 'right' }}>
+                        sx={{ float: 'right' }}
+                        color="secondary">
                         <CloseIcon />
                     </IconButton>
                 )}

src/components/Upload/UploadProgress/title.tsx

@@ -1,24 +1,13 @@
 import React, { useContext } from 'react';
 import Close from '@mui/icons-material/Close';
-import {
+import { DialogTitle, Box, Typography, Stack } from '@mui/material';
-    DialogTitle,
+import { IconButtonWithBG, SpaceBetweenFlex } from 'components/Container';
-    Box,
-    Typography,
-    IconButton,
-    styled,
-    Stack,
-} from '@mui/material';
-import { SpaceBetweenFlex } from 'components/Container';
 import { UPLOAD_STAGES } from 'constants/upload';
 import constants from 'utils/strings/constants';
 import UploadProgressContext from 'contexts/uploadProgress';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 
-const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
-    backgroundColor: theme.palette.secondary.main,
-}));
-
 const UploadProgressTitleText = ({ expanded }) => (
     <Typography variant={expanded ? 'title' : 'subtitle'}>
         {constants.FILE_UPLOAD}

src/components/Upload/UploadTypeSelector/index.tsx

@@ -5,7 +5,7 @@ import { default as FolderUploadIcon } from '@mui/icons-material/PermMediaOutlin
 import GoogleIcon from '@mui/icons-material/Google';
 import { UploadTypeOption } from './option';
 import DialogTitleWithCloseButton from 'components/DialogBox/TitleWithCloseButton';
-import { Dialog, DialogContent, Stack } from '@mui/material';
+import { Box, Dialog, Stack, Typography } from '@mui/material';
 
 export default function UploadTypeSelector({
     onHide,
@@ -17,30 +17,39 @@ export default function UploadTypeSelector({
     return (
         <Dialog
             open={show}
-            PaperProps={{ sx: { maxWidth: '375px' } }}
+            PaperProps={{
+                sx: (theme) => ({
+                    maxWidth: '375px',
+                    p: 1,
+                    [theme.breakpoints.down(360)]: { p: 0 },
+                }),
+            }}
             onClose={onHide}>
             <DialogTitleWithCloseButton onClose={onHide}>
                 {constants.UPLOAD}
             </DialogTitleWithCloseButton>
-            <DialogContent sx={{ '&&&&': { pt: 0 } }}>
+            <Box p={1.5} pt={0.5}>
-                <Stack spacing={1}>
+                <Stack spacing={0.5}>
                     <UploadTypeOption
-                        uploadFunc={uploadFiles}
+                        onClick={uploadFiles}
-                        Icon={FileUploadIcon}
+                        startIcon={<FileUploadIcon />}>
-                        uploadName={constants.UPLOAD_FILES}
+                        {constants.UPLOAD_FILES}
-                    />
+                    </UploadTypeOption>
                     <UploadTypeOption
-                        uploadFunc={uploadFolders}
+                        onClick={uploadFolders}
-                        Icon={FolderUploadIcon}
+                        startIcon={<FolderUploadIcon />}>
-                        uploadName={constants.UPLOAD_DIRS}
+                        {constants.UPLOAD_DIRS}
-                    />
+                    </UploadTypeOption>
                     <UploadTypeOption
-                        uploadFunc={uploadGoogleTakeoutZips}
+                        onClick={uploadGoogleTakeoutZips}
-                        Icon={GoogleIcon}
+                        startIcon={<GoogleIcon />}>
-                        uploadName={constants.UPLOAD_GOOGLE_TAKEOUT}
+                        {constants.UPLOAD_GOOGLE_TAKEOUT}
-                    />
+                    </UploadTypeOption>
                 </Stack>
-            </DialogContent>
+                <Typography p={1.5} pt={4} color="text.secondary">
+                    {constants.DRAG_AND_DROP_HINT}
+                </Typography>
+            </Box>
         </Dialog>
     );
 }

src/components/Upload/UploadTypeSelector/option.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
-import { Button } from '@mui/material';
+import { Button, ButtonProps } from '@mui/material';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import { FluidContainer } from 'components/Container';
 
-export function UploadTypeOption({ uploadFunc, Icon, uploadName }) {
+type Iprops = ButtonProps<'button'>;
+
+export function UploadTypeOption({ children, ...props }: Iprops) {
     return (
         <Button
             size="large"
-            sx={{ justifyContent: 'flex-start' }}
-            onClick={uploadFunc}
             color="secondary"
-            startIcon={<Icon />}>
+            endIcon={<ChevronRight />}
-            {uploadName}
+            {...props}>
+            <FluidContainer>{children}</FluidContainer>
         </Button>
     );
 }

src/components/pages/gallery/PlanSelector/card/paid.tsx

@@ -22,7 +22,7 @@ export default function PaidSubscriptionPlanSelectorCard({
 }) {
     return (
         <>
-            <Box px={1.5} py={0.5}>
+            <Box pl={1.5} py={0.5}>
                 <SpaceBetweenFlex>
                     <Box>
                         <Typography variant="h3" fontWeight={'bold'}>
@@ -33,7 +33,7 @@ export default function PaidSubscriptionPlanSelectorCard({
                             {constants.GB}
                         </Typography>
                     </Box>
-                    <IconButton onClick={closeModal}>
+                    <IconButton onClick={closeModal} color="secondary">
                         <Close />
                     </IconButton>
                 </SpaceBetweenFlex>

src/components/pages/gallery/PlanSelector/manageSubscription/button.tsx

@@ -4,13 +4,7 @@ import { FluidContainer } from 'components/Container';
 import React from 'react';
 
 const ManageSubscriptionButton = ({ children, ...props }: ButtonProps) => (
-    <Button
+    <Button size="large" endIcon={<ChevronRight />} {...props}>
-        {...props}
-        endIcon={<ChevronRight />}
-        sx={{
-            ...props.sx,
-            justifyContent: 'flex-start',
-        }}>
         <FluidContainer>{children}</FluidContainer>
     </Button>
 );

src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx

@@ -7,7 +7,6 @@ import {
     cancelSubscription,
     updatePaymentMethod,
     manageFamilyMethod,
-    hasPaidSubscription,
     hasStripeSubscription,
     isSubscriptionCancelled,
 } from 'utils/billing';
@@ -24,15 +23,24 @@ export function ManageSubscription({
     closeModal,
     setLoading,
 }: Iprops) {
+    const appContext = useContext(AppContext);
+    const openFamilyPortal = () =>
+        manageFamilyMethod(appContext.setDialogMessage, setLoading);
+
     return (
         <Stack spacing={1}>
-            {hasPaidSubscription(subscription) && (
+            {hasStripeSubscription(subscription) && (
-                <PaidSubscriptionOptions
+                <StripeSubscriptionOptions
                     subscription={subscription}
-                    setLoading={setLoading}
                     closeModal={closeModal}
+                    setLoading={setLoading}
                 />
             )}
+            <ManageSubscriptionButton
+                color="secondary"
+                onClick={openFamilyPortal}>
+                {constants.MANAGE_FAMILY_PORTAL}
+            </ManageSubscriptionButton>
         </Stack>
     );
 }
@@ -110,30 +118,3 @@ function StripeSubscriptionOptions({
         </>
     );
 }
-
-function PaidSubscriptionOptions({
-    subscription,
-    setLoading,
-    closeModal,
-}: Iprops) {
-    const appContext = useContext(AppContext);
-    const openFamilyPortal = () =>
-        manageFamilyMethod(appContext.setDialogMessage, setLoading);
-
-    return (
-        <>
-            {hasStripeSubscription(subscription) && (
-                <StripeSubscriptionOptions
-                    subscription={subscription}
-                    closeModal={closeModal}
-                    setLoading={setLoading}
-                />
-            )}
-            <ManageSubscriptionButton
-                color="secondary"
-                onClick={openFamilyPortal}>
-                {constants.MANAGE_FAMILY_PORTAL}
-            </ManageSubscriptionButton>
-        </>
-    );
-}

src/utils/strings/englishConstants.tsx

@@ -700,9 +700,9 @@ const englishConstants = {
     LOCK: 'Lock',
     DOWNLOAD_UPLOAD_LOGS: 'Debug logs',
     CHOOSE_UPLOAD_TYPE: 'Upload',
-    UPLOAD_FILES: 'File Upload',
+    UPLOAD_FILES: 'File',
-    UPLOAD_DIRS: 'Folder Upload',
+    UPLOAD_DIRS: 'Folder',
-    UPLOAD_GOOGLE_TAKEOUT: 'Google Takeout',
+    UPLOAD_GOOGLE_TAKEOUT: 'Google takeout',
     CANCEL_UPLOADS: 'Cancel uploads',
     DEDUPLICATE_FILES: 'Deduplicate files',
     NO_DUPLICATES_FOUND: "You've no duplicate files that can be cleared",
@@ -778,6 +778,7 @@ const englishConstants = {
     ),
     WEAK_DEVICE:
         "The web browser you're using is not powerful enough to encrypt your photos. Please try to log in to ente on your computer, or download the ente mobile/desktop app.",
+    DRAG_AND_DROP_HINT: 'Or drag and drop into the ente window',
 };
 
 export default englishConstants;