Page MenuHomePhabricator
Files F3368006

D9920.id33363.diff
No OneTemporary
Actions

D9920.id33363.diff
View Options

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(--panel-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(--panel-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 (
+ <Modal size="large" onClose={popModal} name="Keyserver details">
+ <div className={css.container}>
+ <div className={css.keyserverDetailsContainer}>
+ <div className={css.keyserverDetailsHeaderContainer}>
+ <KeyserverPill
+ keyserverAdminUsername={keyserverAdminUserInfo.username}
+ />
+ <StatusIndicator connectionInfo={keyserverInfo.connection} />
+ </div>
+ <div className={css.keyserverURL}>{keyserverInfo.urlPrefix}</div>
+ </div>
+ <div className={css.keyserverRemoveTextContainer}>
+ <div>
+ You may delete offline keyserver from your keyserver list. When you
+ delete a keyserver, you will still remain in the associated
+ communities.
+ </div>
+ <div>
+ Any messages or content you have previously sent will remain on the
+ keyserver&rsquo;s communities after disconnecting or deleting.
+ </div>
+ </div>
+ </div>
+ <div className={css.buttonContainer}>
+ <Button
+ variant="filled"
+ buttonColor={buttonThemes.danger}
+ className={css.button}
+ >
+ Delete keyserver from list
+ </Button>
+ </div>
+ </Modal>
+ );
+}
+
+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(
+ <KeyserverSelectionModal
+ keyserverAdminUserInfo={keyserverAdminUserInfo}
+ keyserverInfo={keyserverInfo}
+ />,
+ );
+ }, [keyserverAdminUserInfo, keyserverInfo, pushModal]);
+
const keyserverSelectionListItem = React.useMemo(
() => (
- <div className={css.container}>
+ <div className={css.container} onClick={onClick}>
<KeyserverPill
keyserverAdminUsername={keyserverAdminUserInfo.username}
/>
<StatusIndicator connectionInfo={keyserverInfo.connection} />
</div>
),
- [keyserverAdminUserInfo.username, keyserverInfo.connection],
+ [keyserverAdminUserInfo.username, keyserverInfo.connection, onClick],
);
return keyserverSelectionListItem;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -258,6 +258,7 @@
:root {
/* Panel */
--panel-background-primary-default: var(--shades-black-95);
+ --panel-background-secondary-default: var(--shades-black-90);
/* Text */
--text-background-primary-default: var(--shades-white-100);
@@ -309,6 +310,7 @@
[data-theme='light'] {
/* Panel */
--panel-background-primary-default: var(--shades-white-100);
+ --panel-background-secondary-default: var(--shades-white-80);
/* Text */
--text-background-primary-default: var(--shades-black-95);

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 5:43 PM (18 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2585634
Default Alt Text
D9920.id33363.diff (5 KB)

Event Timeline