diff --git a/web/sidebar/community-creation/community-creation-modal.css b/web/sidebar/community-creation/community-creation-modal.css new file mode 100644 --- /dev/null +++ b/web/sidebar/community-creation/community-creation-modal.css @@ -0,0 +1,7 @@ +div.modal_body { + display: flex; + flex-direction: column; + width: 383px; + height: 560px; + overflow: hidden; +} diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js new file mode 100644 --- /dev/null +++ b/web/sidebar/community-creation/community-creation-modal.react.js @@ -0,0 +1,24 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import css from './community-creation-modal.css'; +import Modal from '../../modals/modal.react.js'; + +function CommunityCreationModal(): React.Node { + const modalContext = useModalContext(); + + return ( + <Modal + name="Create a community" + onClose={modalContext.popModal} + size="small" + > + <div className={css.modal_body}></div> + </Modal> + ); +} + +export default CommunityCreationModal; diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js --- a/web/sidebar/community-picker.react.js +++ b/web/sidebar/community-picker.react.js @@ -4,8 +4,10 @@ import * as React from 'react'; import { useDispatch } from 'react-redux'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; +import CommunityCreationModal from './community-creation/community-creation-modal.react.js'; import CommunityDrawer from './community-drawer.react.js'; import css from './community-picker.css'; import { @@ -16,6 +18,7 @@ function CommunityPicker(): React.Node { const dispatch = useDispatch(); + const modalContext = useModalContext(); const openAccountSettings = React.useCallback( (event: SyntheticEvent<HTMLButtonElement>) => { @@ -62,11 +65,15 @@ [css.sideLineActive]: isSettingsOpen, }); + const onPressCommunityCreationButton = React.useCallback(() => { + modalContext.pushModal(<CommunityCreationModal />); + }, [modalContext]); + const isCommunityCreationButtonEnabled = false; let communityCreationButton; if (isCommunityCreationButtonEnabled) { communityCreationButton = ( - <a className={css.itemContainer}> + <a className={css.itemContainer} onClick={onPressCommunityCreationButton}> <div className={css.sideLine} /> <div className={css.plusIcon}> <SWMansionIcon icon="plus-small" size={26} />