diff --git a/src/components/Collections/AllCollections/header.tsx b/src/components/Collections/AllCollections/header.tsx
index 30d2f47cc..c2e1023fa 100644
--- a/src/components/Collections/AllCollections/header.tsx
+++ b/src/components/Collections/AllCollections/header.tsx
@@ -1,6 +1,10 @@
import React from 'react';
-import { Box, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
-import { FlexWrapper, FluidContainer } from 'components/Container';
+import { Box, DialogTitle, Stack, Typography } from '@mui/material';
+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}
/>
- theme.palette.fill.dark,
- }}>
+
-
+
diff --git a/src/components/Collections/CollectionListBar/index.tsx b/src/components/Collections/CollectionListBar/index.tsx
index dbccfda5d..0d601692c 100644
--- a/src/components/Collections/CollectionListBar/index.tsx
+++ b/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}
/>
- theme.palette.fill.dark,
- }}>
+
-
+
)}
diff --git a/src/components/Container.ts b/src/components/Container.ts
index cf8722e6c..76844f93b 100644
--- a/src/components/Container.ts
+++ b/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,
+}));
diff --git a/src/components/DialogBox/TitleWithCloseButton.tsx b/src/components/DialogBox/TitleWithCloseButton.tsx
index 8d3bf160f..f78902b7a 100644
--- a/src/components/DialogBox/TitleWithCloseButton.tsx
+++ b/src/components/DialogBox/TitleWithCloseButton.tsx
@@ -21,7 +21,8 @@ const DialogTitleWithCloseButton = (props) => {
+ sx={{ float: 'right' }}
+ color="secondary">
)}
diff --git a/src/components/Upload/UploadProgress/title.tsx b/src/components/Upload/UploadProgress/title.tsx
index 64042437b..a900ab171 100644
--- a/src/components/Upload/UploadProgress/title.tsx
+++ b/src/components/Upload/UploadProgress/title.tsx
@@ -1,24 +1,13 @@
import React, { useContext } from 'react';
import Close from '@mui/icons-material/Close';
-import {
- DialogTitle,
- Box,
- Typography,
- IconButton,
- styled,
- Stack,
-} from '@mui/material';
-import { SpaceBetweenFlex } from 'components/Container';
+import { DialogTitle, Box, Typography, Stack } from '@mui/material';
+import { IconButtonWithBG, 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 }) => (
{constants.FILE_UPLOAD}
diff --git a/src/components/Upload/UploadTypeSelector/index.tsx b/src/components/Upload/UploadTypeSelector/index.tsx
index 360ade6ed..6579e8df7 100644
--- a/src/components/Upload/UploadTypeSelector/index.tsx
+++ b/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 (
);
}
diff --git a/src/components/Upload/UploadTypeSelector/option.tsx b/src/components/Upload/UploadTypeSelector/option.tsx
index 748e5393f..b80f73747 100644
--- a/src/components/Upload/UploadTypeSelector/option.tsx
+++ b/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 (
}>
- {uploadName}
+ endIcon={}
+ {...props}>
+ {children}
);
}
diff --git a/src/components/pages/gallery/PlanSelector/card/paid.tsx b/src/components/pages/gallery/PlanSelector/card/paid.tsx
index c7f2830b9..3aeb853ef 100644
--- a/src/components/pages/gallery/PlanSelector/card/paid.tsx
+++ b/src/components/pages/gallery/PlanSelector/card/paid.tsx
@@ -22,7 +22,7 @@ export default function PaidSubscriptionPlanSelectorCard({
}) {
return (
<>
-
+
@@ -33,7 +33,7 @@ export default function PaidSubscriptionPlanSelectorCard({
{constants.GB}
-
+
diff --git a/src/components/pages/gallery/PlanSelector/manageSubscription/button.tsx b/src/components/pages/gallery/PlanSelector/manageSubscription/button.tsx
index dc2c90f45..c70db22e7 100644
--- a/src/components/pages/gallery/PlanSelector/manageSubscription/button.tsx
+++ b/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) => (
- }
- sx={{
- ...props.sx,
- justifyContent: 'flex-start',
- }}>
+ } {...props}>
{children}
);
diff --git a/src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx b/src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx
index 09d0f14cf..89771f8f9 100644
--- a/src/components/pages/gallery/PlanSelector/manageSubscription/index.tsx
+++ b/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 (
- {hasPaidSubscription(subscription) && (
-
)}
+
+ {constants.MANAGE_FAMILY_PORTAL}
+
);
}
@@ -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) && (
-
- )}
-
- {constants.MANAGE_FAMILY_PORTAL}
-
- >
- );
-}
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 0d929a622..85e0f5ec3 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/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_DIRS: 'Folder Upload',
- UPLOAD_GOOGLE_TAKEOUT: 'Google Takeout',
+ UPLOAD_FILES: 'File',
+ UPLOAD_DIRS: 'Folder',
+ 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;