diff --git a/app/components/Modal.js b/app/components/Modal.js index c5f615b5..8dbf6197 100644 --- a/app/components/Modal.js +++ b/app/components/Modal.js @@ -9,6 +9,7 @@ import breakpoint from "styled-components-breakpoint"; import { fadeAndScaleIn } from "shared/styles/animations"; import Flex from "components/Flex"; import NudeButton from "components/NudeButton"; +import Scrollable from "components/Scrollable"; ReactModal.setAppElement("#root"); @@ -27,7 +28,8 @@ const GlobalStyles = createGlobalStyle` } ${breakpoint("tablet")` - .ReactModalPortal + .ReactModalPortal { + .ReactModalPortal + .ReactModalPortal, + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal { .ReactModal__Overlay { margin-left: 12px; box-shadow: 0 -2px 10px ${(props) => props.theme.shadow}; @@ -36,13 +38,15 @@ const GlobalStyles = createGlobalStyle` } } - .ReactModalPortal + .ReactModalPortal + .ReactModalPortal { + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal, + .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal { .ReactModal__Overlay { margin-left: 24px; } } - .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal { + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal, + .ReactModalPortal + .ReactModalPortal + .ReactModalPortal + [data-react-modal-body-trap] + .ReactModalPortal { .ReactModal__Overlay { margin-left: 36px; } @@ -72,10 +76,11 @@ const Modal = ({ isOpen={isOpen} {...rest} > - ev.stopPropagation()} column> - {title &&

{title}

} - - {children} + + ev.stopPropagation()} column> + {title &&

{title}

} + {children} +
@@ -89,10 +94,20 @@ const Modal = ({ ); }; -const Content = styled(Flex)` +const Content = styled(Scrollable)` + width: 100%; + padding: 8vh 2rem 2rem; + + ${breakpoint("tablet")` + padding-top: 13vh; + `}; +`; + +const Centered = styled(Flex)` width: 640px; max-width: 100%; position: relative; + margin: 0 auto; `; const StyledModal = styled(ReactModal)` @@ -107,16 +122,9 @@ const StyledModal = styled(ReactModal)` display: flex; justify-content: center; align-items: flex-start; - overflow-x: hidden; - overflow-y: auto; background: ${(props) => props.theme.background}; transition: ${(props) => props.theme.backgroundTransition}; - padding: 8vh 2rem 2rem; outline: none; - - ${breakpoint("tablet")` - padding-top: 13vh; - `}; `; const Text = styled.span` @@ -147,7 +155,7 @@ const Close = styled(NudeButton)` `; const Back = styled(NudeButton)` - position: fixed; + position: absolute; display: none; align-items: center; top: 2rem; diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index 8a149811..df7e38a3 100644 --- a/app/menus/CollectionMenu.js +++ b/app/menus/CollectionMenu.js @@ -127,6 +127,7 @@ class CollectionMenu extends React.Component { collection={collection} onSubmit={this.handleMembersModalClose} handleEditCollectionOpen={this.handleEditCollectionOpen} + onEdit={this.handleEditCollectionOpen} /> diff --git a/app/scenes/CollectionMembers/CollectionMembers.js b/app/scenes/CollectionMembers/CollectionMembers.js index 3a0a991a..028a86a9 100644 --- a/app/scenes/CollectionMembers/CollectionMembers.js +++ b/app/scenes/CollectionMembers/CollectionMembers.js @@ -132,7 +132,7 @@ class CollectionMembers extends React.Component { collection. You can make this collection visible to the entire team by{" "} - changing its visibility + changing the visibility .