merge upstream

ChainSafe · Nov 11, 2021 · 0891cf2 · 0891cf2
2 parents bcaf160 + 10ef94b
commit 0891cf2
Show file tree

Hide file tree

Showing 21 changed files with 234 additions and 235 deletions.
diff --git a/.github/workflows/test-files-on-demand.yml b/.github/workflows/test-files-on-demand.yml
@@ -52,10 +52,11 @@ jobs:
       #     path: packages/files-ui/cypress/videos
 
       - name: Slack Notification
-        uses: rtCamp/action-slack-notify@v2.0.2
+        uses: rtCamp/action-slack-notify@v2.2.0
         env:
-          SLACK_TITLE: Files UI Test Suite On-Demand Result
-          SLACK_WEBHOOK: ${{ secrets.SLACK_UI_WEBHOOK }}
+          SLACK_TITLE: 'Files UI Test Suite On-Demand Result:'
           SLACK_MESSAGE: ${{ job.status }}
           SLACK_COLOR: ${{ job.status }}
-          SLACK_ICON: packages/common-components/src/Logos/ChainSafe-Files-logo.png
+          MSG_MINIMAL: actions url
+          SLACK_WEBHOOK: ${{ secrets.SLACK_UI_WEBHOOK }}
+          SLACK_FOOTER: 'Test run ${{ github.run_number }} was executed on branch: ${{ github.ref }}'
diff --git a/packages/common-components/src/Dialog/Dialog.tsx b/packages/common-components/src/Dialog/Dialog.tsx
@@ -7,13 +7,10 @@ import { Button, IButtonProps } from "../Button"
 
 const useStyles = makeStyles(({ breakpoints, constants }: ITheme) =>
   createStyles({
-    // JSS in CSS goes here
     root: {},
     inner: {
       padding: constants.generalUnit * 2,
       borderRadius: 2,
-      transform: "translate(-50%, 0)",
-      top: constants.generalUnit * 2,
       [breakpoints.down("sm")]: {
         maxWidth: `calc(100% - ${constants.generalUnit * 3}px) !important`
       }

diff --git a/packages/common-components/src/Modal/Modal.tsx b/packages/common-components/src/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef } from "react"
+import React, { ReactNode, useEffect, useRef } from "react"
 import { ITheme, useOnClickOutside, makeStyles, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import { CloseSvg } from "../Icons/icons/Close.icon"
@@ -180,6 +180,16 @@ const Modal = ({
   const classes = useStyles()
   const ref = useRef(null)
 
+  useEffect(() => {
+    if(!active) return
+
+    document.body.style.overflow = "hidden"
+
+    return () => {
+      document.body.style.overflow = "auto"
+    }
+  }, [active])
+
   const handleClose = () => {
     onClose && onClose()
   }
@@ -214,7 +224,7 @@ const Modal = ({
             <CloseSvg />
           </div>
         )}
-        <ModalBase>
+        <ModalBase injectedClassInner={injectedClass?.inner}>
           {children}
         </ModalBase>
         {subModal && (

diff --git a/packages/files-ui/src/Components/Elements/SharedUsers.tsx b/packages/files-ui/src/Components/Elements/SharedUsers.tsx
@@ -3,11 +3,15 @@ import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-th
 import UserBubble from "./UserBubble"
 import { BucketKeyPermission, RichUserInfo } from "../../Contexts/FilesContext"
 import { getUserDisplayName } from "../../Utils/getUserDisplayName"
+import { CSFTheme } from "../../Themes/types"
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles(({ constants }: CSFTheme) => {
   return createStyles({
     root: {
       display: "flex"
+    },
+    bubble: {
+      marginRight: constants.generalUnit
     }
   })
 })
@@ -55,6 +59,7 @@ const SharedUsers = ({ bucket }: Props) => {
     <div className={classes.root}>
       <UserBubble
         tooltip={userLabels[0]}
+        className={userLabels.length > 1 ? classes.bubble : undefined}
       />
       {userLabels.length > 2 && (
         <UserBubble

diff --git a/packages/files-ui/src/Components/Elements/UserBubble.tsx b/packages/files-ui/src/Components/Elements/UserBubble.tsx
@@ -19,9 +19,6 @@ const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFThem
       justifyContent: "center",
       "& svg": {
         fill: palette.common.white.main
-      },
-      "&:first-child": {
-        marginRight: constants.generalUnit
       }
     },
     text : {
@@ -66,9 +63,10 @@ const useStyles = makeStyles(({ zIndex, animation, constants, palette }: CSFThem
 interface Props {
   text?: string
   tooltip: string | string[]
+  className?: string
 }
 
-const UserBubble = ({ text, tooltip }: Props) => {
+const UserBubble = ({ text, tooltip, className }: Props) => {
   const classes = useStyles()
   const [showTooltip, setShowTooltip] = useState(false)
 
@@ -80,7 +78,7 @@ const UserBubble = ({ text, tooltip }: Props) => {
     <div
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
-      className={classes.bubble}
+      className={clsx(classes.bubble, className)}
       onClick={toggleTooltip}
     >
       <div className={clsx(classes.tooltip, { "active": showTooltip })}>