Page MenuHomePhabricator
Files F3180250

D9918.id33960.diff
No OneTemporary
Actions

D9918.id33960.diff
View Options

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
@@ -2,11 +2,30 @@
flex: 1;
background-color: var(--panel-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);
- margin-bottom: 16px;
+}
+
+.addButton {
+ background-color: var(--button-background-secondary-default);
+ border-radius: 4px;
+ color: var(--button-label-secondary-default);
+}
+
+.addButton:hover {
+ cursor: pointer;
+ background-color: var(--button-background-secondary-hover);
}
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,11 +2,14 @@
import * as React from 'react';
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.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 AddKeyserverModal from '../modals/keyserver-selection/add-keyserver-modal.react.js';
import { useSelector } from '../redux/redux-utils.js';
function KeyserverSelectionList(): React.Node {
@@ -27,14 +30,30 @@
[selectedKeyserverInfos],
);
+ const { pushModal } = useModalContext();
+
+ const onClickAddKeyserver = React.useCallback(
+ () => pushModal(<AddKeyserverModal />),
+ [pushModal],
+ );
+
const keyserverSelectionList = React.useMemo(
() => (
<div className={css.container}>
- <h4 className={css.header}>Keyservers</h4>
+ <div className={css.headerContainer}>
+ <h4 className={css.header}>Keyservers</h4>
+ <div onClick={onClickAddKeyserver}>
+ <SWMansionIcon
+ icon="plus-small"
+ size={26}
+ className={css.addButton}
+ />
+ </div>
+ </div>
{selectedKeyservers}
</div>
),
- [selectedKeyservers],
+ [onClickAddKeyserver, selectedKeyservers],
);
return keyserverSelectionList;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -267,9 +267,12 @@
/* Button */
--button-background-primary-default: var(--violet-dark-100);
+ --button-background-secondary-default: var(--shades-black-75);
--button-background-primary-hover: var(--violet-dark-80);
+ --button-background-secondary-hover: var(--shades-black-60);
--button-background-primary-disabled: var(--shades-black-75);
--button-label-primary-default: var(--shades-white-100);
+ --button-label-secondary-default: var(--shades-white-60);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);
@@ -316,9 +319,12 @@
/* Button */
--button-background-primary-default: var(--violet-dark-100);
+ --button-background-secondary-default: var(--shades-black-50);
--button-background-primary-hover: var(--violet-dark-80);
+ --button-background-secondary-hover: var(--shades-black-60);
--button-background-primary-disabled: var(--shades-white-60);
--button-label-primary-default: var(--shades-white-100);
+ --button-label-secondary-default: var(--shades-white-90);
--button-label-primary-hover: var(--shades-white-90);
--button-label-primary-disabled: var(--shades-black-50);

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 9, 4:29 AM (21 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2448625
Default Alt Text
D9918.id33960.diff (3 KB)

Event Timeline