From bd91921fd864ea6d4299e4ac0566ed13b7d83ae6 Mon Sep 17 00:00:00 2001 From: Tanmoy Basak Anjan Date: Wed, 19 Jan 2022 20:34:59 +0600 Subject: [PATCH] Modal styles consistency (#1862) * in progress * all modals reeady * extra style cleanup * lingui extract Co-authored-by: GitHub Actions --- .../src/Components/Elements/CustomModal.tsx | 7 +- .../FileBrowsers/CreateFolderModal.tsx | 18 +- .../CreateOrEditSharedFolderModal.tsx | 367 ------------------ .../CreateOrManageSharedFolder.tsx | 10 - .../CreateOrManageSharedFolderModal.tsx | 7 +- .../Modules/FileBrowsers/FileInfoModal.tsx | 25 +- .../Modules/FileBrowsers/MoveFileModal.tsx | 16 +- .../Modules/FileBrowsers/ReportFileModal.tsx | 33 +- .../views/FileSystemItem/FileSystemItem.tsx | 25 +- .../views/FileSystemItem/SharedFolderRow.tsx | 25 +- .../SavedBrowsers/BrowserPanel.tsx | 13 +- .../SubscriptionTab/AddCard/AddCard.tsx | 15 +- .../SubscriptionTab/AddCard/AddCardModal.tsx | 4 - .../src/Components/SharingExplainerModal.tsx | 1 - packages/files-ui/src/locales/de/messages.po | 3 - packages/files-ui/src/locales/en/messages.po | 3 - packages/files-ui/src/locales/es/messages.po | 3 - packages/files-ui/src/locales/fr/messages.po | 3 - packages/files-ui/src/locales/no/messages.po | 3 - 19 files changed, 43 insertions(+), 538 deletions(-) delete mode 100644 packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx diff --git a/packages/files-ui/src/Components/Elements/CustomModal.tsx b/packages/files-ui/src/Components/Elements/CustomModal.tsx index dbe5d76a25..4da3478686 100644 --- a/packages/files-ui/src/Components/Elements/CustomModal.tsx +++ b/packages/files-ui/src/Components/Elements/CustomModal.tsx @@ -18,15 +18,12 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) => }, mobileStickyBottom: { [breakpoints.down("md")]: { + position: "fixed", top: "unset", bottom: 0, left: 0, width: "100% !important", - transform: "unset", - borderRadiusLeftTop: `${constants.generalUnit * 1.5}px`, - borderRadiusRightTop: `${constants.generalUnit * 1.5}px`, - borderRadiusLeftBottom: 0, - borderRadiusRightBottom: 0 + transform: "unset" } }, closeIcon : { diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx index 0bc8f9b0d4..c754ae0000 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateFolderModal.tsx @@ -25,23 +25,19 @@ const useStyles = makeStyles( ({ breakpoints, constants, typography, zIndex }: CSFTheme) => { return createStyles({ root: { - padding: constants.generalUnit * 4, + padding: constants.generalUnit * 3, flexDirection: "column" }, modalRoot: { zIndex: zIndex?.blocker, [breakpoints.down("md")]: { - paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit + paddingBottom: Number(constants?.mobileButtonHeight) } }, modalInner: { backgroundColor: constants.createFolder.backgroundColor, color: constants.createFolder.color, [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, maxWidth: `${breakpoints.width("md")}px !important` } }, @@ -51,15 +47,6 @@ const useStyles = makeStyles( okButton: { marginLeft: constants.generalUnit }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, label: { fontSize: 14, lineHeight: "22px" @@ -175,7 +162,6 @@ const CreateFolderModal = ({ modalOpen, close }: ICreateFolderModalProps) => { data-cy="button-cancel-create-folder" onClick={onCancel} size="medium" - className={classes.cancelButton} variant={desktop ? "outline" : "gray"} type="button" > diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx deleted file mode 100644 index 0424df0615..0000000000 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrEditSharedFolderModal.tsx +++ /dev/null @@ -1,367 +0,0 @@ -import { Button, ShareAltSvg, TagsInput, Typography, Grid, TextInput } from "@chainsafe/common-components" -import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" -import React, { useState, useCallback } from "react" -import CustomModal from "../../Elements/CustomModal" -import { CSFTheme } from "../../../Themes/types" -import { BucketKeyPermission } from "../../../Contexts/FilesContext" -import CustomButton from "../../Elements/CustomButton" -import { t, Trans } from "@lingui/macro" -import { useEffect } from "react" -import { SharedFolderModalMode } from "./types" -import { useCreateOrEditSharedFolder } from "./hooks/useCreateOrEditSharedFolder" -import { useLookupSharedFolderUser } from "./hooks/useLookupUser" -import { nameValidator } from "../../../Utils/validationSchema" -import { getUserDisplayName } from "../../../Utils/getUserDisplayName" -import LinkList from "./LinkSharing/LinkList" - -const useStyles = makeStyles( - ({ breakpoints, constants, typography, zIndex, palette }: CSFTheme) => { - return createStyles({ - root: { - padding: constants.generalUnit * 4, - flexDirection: "column", - display: "flex", - alignItems: "center" - }, - modalRoot: { - zIndex: zIndex?.blocker, - [breakpoints.down("md")]: { - paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit - } - }, - modalInner: { - backgroundColor: constants.modalDefault.backgroundColor, - color: constants.modalDefault.color, - [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, - maxWidth: `${breakpoints.width("md")}px !important` - } - }, - okButton: { - marginLeft: constants.generalUnit - }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, - label: { - fontSize: 14, - lineHeight: "22px" - }, - heading: { - color: constants.modalDefault.color, - fontWeight: typography.fontWeight.semibold, - marginBottom: 10 - }, - iconBacking: { - backgroundColor: constants.modalDefault.iconBackingColor, - width: 48, - height: 48, - borderRadius: 24, - marginBottom: 16, - "& > svg": { - width: 16, - height: 16, - fill: palette.primary.main, - position: "relative", - display: "block", - transform: "translate(-50%, -50%)", - top: "50%", - left: "50%" - } - }, - modalFlexItem: { - width: "100%", - margin: 5 - }, - buttons: { - justifyContent: "flex-end", - display: "flex", - paddingRight: 5, - marginTop: 10 - }, - shareNameInput: { - display: "block" - }, - inputLabel: { - fontSize: 16, - fontWeight: 600 - }, - shareFolderNameInput: { - margin: `0 ${constants.generalUnit * 1.5}px ${constants.generalUnit}px`, - display: "block" - }, - footer: { - width: "100%", - padding: `${constants.generalUnit * 2}px ${constants.generalUnit}px` - }, - errorText: { - marginLeft: constants.generalUnit * 1.5, - color: palette.error.main - }, - sharingLink: { - padding: constants.generalUnit * 2, - margin: 0 - } - }) - } -) - -interface ICreateOrEditSharedFolderModalProps { - mode?: SharedFolderModalMode - isModalOpen: boolean - onClose: () => void - bucketToEdit?: BucketKeyPermission -} - -const CreateOrEditSharedFolderModal = ({ mode, isModalOpen, onClose, bucketToEdit }: ICreateOrEditSharedFolderModalProps) => { - const classes = useStyles() - const { desktop, tablet, mobile } = useThemeSwitcher() - const { handleCreateSharedFolder, handleEditSharedFolder, isEditingSharedFolder, isCreatingSharedFolder } = useCreateOrEditSharedFolder() - const [sharedFolderName, setSharedFolderName] = useState("") - const { sharedFolderReaders, sharedFolderWriters, onNewUsers, handleLookupUser, usersError, resetUsers } = useLookupSharedFolderUser() - const [hasPermissionsChanged, setHasPermissionsChanged] = useState(false) - const [nameError, setNameError] = useState("") - - const onReset = useCallback(() => { - setSharedFolderName("") - setHasPermissionsChanged(false) - resetUsers() - }, [resetUsers]) - - useEffect(() => { - onReset() - - if (!bucketToEdit) return - - const newWriters = bucketToEdit.writers.map((writer) => ({ - label: getUserDisplayName(writer), - value: writer.uuid || "", - data: writer - }) - ) || [] - - const newReaders = bucketToEdit.readers.map((reader) => ({ - label: getUserDisplayName(reader), - value: reader.uuid || "", - data: reader - }) - ) || [] - - onNewUsers(newWriters, "write") - onNewUsers(newReaders, "read") - }, [bucketToEdit, onNewUsers, onReset]) - - const onNameChange = useCallback((value?: string | number) => { - if (value === undefined) return - - const name = value.toString() - setSharedFolderName(name) - - nameValidator - .validate({ name }) - .then(() => { - setNameError("") - }) - .catch((e: Error) => { - setNameError(e.message) - }) - }, []) - - const handleClose = useCallback(() => { - onReset() - onClose() - }, [onClose, onReset]) - - const onCreateSharedFolder = useCallback(() => { - handleCreateSharedFolder(sharedFolderName, sharedFolderReaders, sharedFolderWriters) - .catch(console.error) - .finally(handleClose) - }, [handleCreateSharedFolder, sharedFolderName, sharedFolderWriters, sharedFolderReaders, handleClose]) - - const onEditSharedFolder = useCallback(() => { - if (!bucketToEdit) return - handleEditSharedFolder(bucketToEdit, sharedFolderReaders, sharedFolderWriters) - .catch(console.error) - .finally(handleClose) - }, [handleEditSharedFolder, sharedFolderWriters, sharedFolderReaders, handleClose, bucketToEdit]) - - return ( - - )} - > -
-
- -
-
- - {mode === "create" - ? Create Shared Folder - : Update Shared Folder - } - - -
- {mode === "create" && -
- - {nameError && ( - - {nameError} - - )} -
- } -
- { - setHasPermissionsChanged(true) - onNewUsers(values, "read") - }} - label={t`Give view-only permission to:`} - labelClassName={classes.inputLabel} - value={sharedFolderReaders} - fetchTags={(inputVal) => handleLookupUser(inputVal, "read")} - placeholder={t`Add by sharing address, username or wallet address`} - styles={{ - control: (provided) => ({ - ...provided, - minHeight: 90, - alignContent: "start" - }), - valueContainer: (provided) => mobile && !tablet ? ({ - ...provided, - paddingBottom: 24 - }) : ({ - ...provided - }) - }} - loadingMessage={t`Loading`} - noOptionsMessage={t`No user found for this query.`} - data-cy="tag-view-permission-user" - /> -
-
- { - setHasPermissionsChanged(true) - onNewUsers(values, "write") - }} - label={t`Give edit permission to:`} - labelClassName={classes.inputLabel} - value={sharedFolderWriters} - fetchTags={(inputVal) => handleLookupUser(inputVal, "write")} - placeholder={t`Add by sharing address, username or wallet address`} - styles={{ - control: (provided) => ({ - ...provided, - minHeight: 90, - alignContent: "start" - }), - valueContainer: (provided) => mobile && !tablet ? ({ - ...provided, - paddingBottom: 24 - }) : ({ - ...provided - }) - }} - loadingMessage={t`Loading`} - noOptionsMessage={t`No user found for this query.`} - data-cy="tag-edit-permission-user" - /> -
- - {!!usersError && ( - - {usersError} - - )} - - - Cancel - - - - -
- - ) -} - -export default CreateOrEditSharedFolderModal diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx index 489c4ccebd..db57cbd247 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/CreateOrManageSharedFolder.tsx @@ -27,15 +27,6 @@ const useStyles = makeStyles( okButton: { marginLeft: constants.generalUnit }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, label: { fontSize: 14, lineHeight: "22px" @@ -278,7 +269,6 @@ const CreateOrManageSharedFolder = ({ mode, onClose, bucketToEdit }: ICreateOrMa )} + mobileStickyBottom={false} > { const [loadingFileInfo, setLoadingInfo] = useState(false) const [fullFileInfo, setFullFullInfo] = useState() const { bucket } = useFileBrowser() + const { desktop } = useThemeSwitcher() useEffect(() => { - if (!bucket) return setLoadingInfo(true) @@ -439,8 +425,7 @@ const FileInfoModal = ({ filePath, close }: IFileInfoModuleProps) => { close()} size="large" - className={classes.closeButton} - variant="outline" + variant={desktop ? "outline" : "gray"} type="button" > Close diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx index 4e4715db66..b3d8dae63b 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/MoveFileModal.tsx @@ -19,32 +19,19 @@ const useStyles = makeStyles( modalRoot: { zIndex: zIndex?.blocker, [breakpoints.down("md")]: { - paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit + paddingBottom: Number(constants?.mobileButtonHeight) } }, modalInner: { backgroundColor: constants.moveFileModal.background, color: constants.moveFileModal.color, [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, maxWidth: `${breakpoints.width("md")}px !important` } }, okButton: { marginLeft: constants.generalUnit }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, heading: { fontWeight: typography.fontWeight.semibold, textAlign: "left", @@ -256,7 +243,6 @@ const MoveFileModule = ({ filesToMove, onClose, onCancel, mode }: IMoveFileModul { const { encryptForPublicKey } = useThresholdKey() const [copied, setCopied] = useState(false) const { filesApiClient } = useFilesApi() + const { desktop } = useThemeSwitcher() useEffect(() => { filesApiClient.abuseUser() @@ -393,7 +382,7 @@ const ReportFileModal = ({ filePath, close }: IReportFileModalProps) => { onClick={() => close()} size="large" className={classes.closeButton} - variant="outline" + variant={desktop ? "outline" : "gray"} type="button" > Close diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx index 60a34af3d3..57007b4475 100644 --- a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx +++ b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx @@ -36,6 +36,7 @@ import { getPathWithFile } from "../../../../../Utils/pathUtils" import { BucketUser } from "@chainsafe/files-api-client" import { useMemo } from "react" import { nameValidator } from "../../../../../Utils/validationSchema" +import CustomButton from "../../../../Elements/CustomButton" const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => { return createStyles({ @@ -47,17 +48,11 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => { }, modalRoot: { [breakpoints.down("md")]: { - paddingBottom: Number(constants?.mobileButtonHeight) + constants.generalUnit + paddingBottom: Number(constants?.mobileButtonHeight) } }, modalInner: { [breakpoints.down("md")]: { - bottom: - Number(constants?.mobileButtonHeight) + constants.generalUnit, - borderTopLeftRadius: `${constants.generalUnit * 1.5}px`, - borderTopRightRadius: `${constants.generalUnit * 1.5}px`, - borderBottomLeftRadius: `${constants.generalUnit * 1.5}px`, - borderBottomRightRadius: `${constants.generalUnit * 1.5}px`, maxWidth: `${breakpoints.width("md")}px !important` } }, @@ -92,15 +87,6 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => { okButton: { marginLeft: constants.generalUnit }, - cancelButton: { - [breakpoints.down("md")]: { - position: "fixed", - bottom: 0, - left: 0, - width: "100%", - height: constants?.mobileButtonHeight - } - }, menuIcon: { display: "flex", justifyContent: "center", @@ -561,15 +547,14 @@ const FileSystemItem = ({ }