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,29 @@ [selectedKeyserverInfos], ); + const { pushModal } = useModalContext(); + + const onClickAddKeyserver = React.useCallback(() => { + pushModal(); + }, [pushModal]); + const keyserverSelectionList = React.useMemo( () => (
-

Keyservers

+
+

Keyservers

+
+ +
+
{selectedKeyservers}
), - [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); @@ -315,9 +318,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);