Modal styles consistency (#1862)

* in progress * all modals reeady * extra style cleanup * lingui extract Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Jan 19, 2022 · bd91921 · bd91921
1 parent c79b2f5
commit bd91921
Show file tree

Hide file tree

Showing 19 changed files with 43 additions and 538 deletions.
diff --git 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
@@ -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"
               >