diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.css b/web/modals/keyserver-selection/keyserver-selection-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/keyserver-selection/keyserver-selection-modal.css @@ -0,0 +1,41 @@ +.container { + padding: 0 32px; +} + +.keyserverDetailsContainer { + background-color: var(--modal-background-secondary-default); + display: flex; + flex-direction: column; + align-items: center; + row-gap: 8px; + padding: 16px 0; + border-radius: 8px; + margin-top: 16px; +} + +.keyserverDetailsHeaderContainer { + display: flex; + align-items: center; + column-gap: 8px; +} + +.keyserverURL { + color: var(--text-background-primary-default); +} + +.keyserverRemoveTextContainer { + color: var(--text-background-primary-default); + margin: 16px 0 24px; + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.buttonContainer { + background-color: var(--modal-background-secondary-default); + padding: 16px 32px; +} + +.button { + width: 100%; +} diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.react.js b/web/modals/keyserver-selection/keyserver-selection-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/keyserver-selection/keyserver-selection-modal.react.js @@ -0,0 +1,62 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; +import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; +import type { GlobalAccountUserInfo } from 'lib/types/user-types.js'; + +import css from './keyserver-selection-modal.css'; +import Button, { buttonThemes } from '../../components/button.react.js'; +import KeyserverPill from '../../components/keyserver-pill.react.js'; +import StatusIndicator from '../../components/status-indicator.react.js'; +import Modal from '../modal.react.js'; + +type Props = { + +keyserverAdminUserInfo: GlobalAccountUserInfo, + +keyserverInfo: KeyserverInfo, +}; + +function KeyserverSelectionModal(props: Props): React.Node { + const { keyserverAdminUserInfo, keyserverInfo } = props; + + const { popModal } = useModalContext(); + + return ( + +
+
+
+ + +
+
{keyserverInfo.urlPrefix}
+
+
+
+ You may delete offline keyserver from your keyserver list. When you + delete a keyserver, you will still remain in the associated + communities. +
+
+ Any messages or content you have previously sent will remain on the + keyserver’s communities after disconnecting or deleting. +
+
+
+
+ +
+
+ ); +} + +export default KeyserverSelectionModal; diff --git a/web/settings/keyserver-selection-list-item.react.js b/web/settings/keyserver-selection-list-item.react.js --- a/web/settings/keyserver-selection-list-item.react.js +++ b/web/settings/keyserver-selection-list-item.react.js @@ -2,12 +2,14 @@ import * as React from 'react'; +import { useModalContext } from 'lib/components/modal-provider.react.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import type { GlobalAccountUserInfo } from 'lib/types/user-types.js'; import css from './keyserver-selection-list-item.css'; import KeyserverPill from '../components/keyserver-pill.react.js'; import StatusIndicator from '../components/status-indicator.react.js'; +import KeyserverSelectionModal from '../modals/keyserver-selection/keyserver-selection-modal.react.js'; type Props = { +keyserverAdminUserInfo: GlobalAccountUserInfo, @@ -17,16 +19,27 @@ function KeyserverSelectionListItem(props: Props): React.Node { const { keyserverAdminUserInfo, keyserverInfo } = props; + const { pushModal } = useModalContext(); + + const onClick = React.useCallback(() => { + pushModal( + , + ); + }, [keyserverAdminUserInfo, keyserverInfo, pushModal]); + const keyserverSelectionListItem = React.useMemo( () => ( -
+
), - [keyserverAdminUserInfo.username, keyserverInfo.connection], + [keyserverAdminUserInfo.username, keyserverInfo.connection, onClick], ); return keyserverSelectionListItem;