diff --git a/web/settings/keyserver-selection-list-item.css b/web/settings/keyserver-selection-list-item.css
--- a/web/settings/keyserver-selection-list-item.css
+++ b/web/settings/keyserver-selection-list-item.css
@@ -3,7 +3,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
- padding: 16px 0;
+ padding: 16px;
}
.container:not(:last-child) {
@@ -12,4 +12,6 @@
.container:hover {
cursor: pointer;
+ background-color: var(--listItem-background-primary-hover);
+ border-radius: 8px;
}
diff --git a/web/settings/keyserver-selection-list-panel.react.js b/web/settings/keyserver-selection-list-panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/keyserver-selection-list-panel.react.js
@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './keyserver-selection-list.css';
+import KeyserverSelectionList from './keyserver-selection-list.react.js';
+import PanelHeader from '../components/panel-header.react.js';
+import Panel, { type PanelData } from '../components/panel.react.js';
+import AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
+
+function KeyserverSelectionListPanel(): React.Node {
+ const { pushModal } = useModalContext();
+
+ const onClickAddKeyserver = React.useCallback(
+ () => pushModal(),
+ [pushModal],
+ );
+
+ const panelData: $ReadOnlyArray = React.useMemo(
+ () => [
+ {
+ header: (
+
+ ),
+ body: ,
+ classNameOveride: css.panelContainer,
+ },
+ ],
+ [onClickAddKeyserver],
+ );
+
+ return ;
+}
+
+export default KeyserverSelectionListPanel;
diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css
--- a/web/settings/keyserver-selection-list.css
+++ b/web/settings/keyserver-selection-list.css
@@ -1,20 +1,8 @@
-.container {
+.panelContainer {
flex: 1;
- background-color: var(--frame-background-primary-default);
- padding: 40px;
- max-width: 456px;
-}
-
-.headerContainer {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 16px;
}
-.header {
- color: var(--text-background-primary-default);
- font-weight: var(--semi-bold);
- line-height: var(--line-height-display);
+.container {
+ flex: 1;
+ padding: 8px;
}
diff --git a/web/settings/keyserver-selection-list.react.js b/web/settings/keyserver-selection-list.react.js
--- a/web/settings/keyserver-selection-list.react.js
+++ b/web/settings/keyserver-selection-list.react.js
@@ -2,14 +2,11 @@
import * as React from 'react';
-import { useModalContext } from 'lib/components/modal-provider.react.js';
import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js';
import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js';
import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js';
import css from './keyserver-selection-list.css';
-import AddButton from '../components/add-button.react.js';
-import AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
import { useSelector } from '../redux/redux-utils.js';
function KeyserverSelectionList(): React.Node {
@@ -30,24 +27,9 @@
[selectedKeyserverInfos],
);
- const { pushModal } = useModalContext();
-
- const onClickAddKeyserver = React.useCallback(
- () => pushModal(),
- [pushModal],
- );
-
const keyserverSelectionList = React.useMemo(
- () => (
-
-
- {selectedKeyservers}
-
- ),
- [onClickAddKeyserver, selectedKeyservers],
+ () => {selectedKeyservers}
,
+ [selectedKeyservers],
);
return keyserverSelectionList;