diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.css b/web/modals/keyserver-selection/keyserver-selection-modal.css
index 6ffb2f52e..f66c146e4 100644
--- a/web/modals/keyserver-selection/keyserver-selection-modal.css
+++ b/web/modals/keyserver-selection/keyserver-selection-modal.css
@@ -1,41 +1,49 @@
.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%;
}
+
+.keyserverRemoveConfirmationContainer {
+ display: flex;
+ flex-direction: column;
+ row-gap: 24px;
+ padding: 24px 32px;
+ color: var(--text-background-primary-default);
+}
diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.react.js b/web/modals/keyserver-selection/keyserver-selection-modal.react.js
index fae3f3dc0..8d5726d23 100644
--- a/web/modals/keyserver-selection/keyserver-selection-modal.react.js
+++ b/web/modals/keyserver-selection/keyserver-selection-modal.react.js
@@ -1,122 +1,164 @@
// @flow
import * as React from 'react';
+import { removeKeyserverActionType } from 'lib/actions/keyserver-actions.js';
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 { useDispatch } from 'lib/utils/redux-utils.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 Alert from '../alert.react.js';
+import ConfirmationAlert from '../confirmation-alert.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, pushModal } = useModalContext();
+ const { popModal, pushModal, clearModals } = useModalContext();
const onClickDisconnectKeyserver = React.useCallback(
() =>
// TODO: update this function when we have a way to
// disconnect from a keyserver
pushModal(