diff --git a/web/modals/keyserver-selection/add-keyserver-modal.css b/web/modals/keyserver-selection/add-keyserver-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/keyserver-selection/add-keyserver-modal.css @@ -0,0 +1,17 @@ +.container { + padding: 32px; +} + +.inputTitle { + color: var(--text-background-primary-default); + margin-bottom: 8px; +} + +.buttonContainer { + background-color: var(--panel-background-secondary-default); + padding: 16px 32px; +} + +.button { + width: 100%; +} diff --git a/web/modals/keyserver-selection/add-keyserver-modal.react.js b/web/modals/keyserver-selection/add-keyserver-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/keyserver-selection/add-keyserver-modal.react.js @@ -0,0 +1,58 @@ +// @flow + +import * as React from 'react'; + +import { useModalContext } from 'lib/components/modal-provider.react.js'; + +import css from './add-keyserver-modal.css'; +import Button, { buttonThemes } from '../../components/button.react.js'; +import Input from '../input.react.js'; +import Modal from '../modal.react.js'; + +function AddKeyserverModal(): React.Node { + const { popModal } = useModalContext(); + + const [keyserverURL, setKeyserverURL] = React.useState(''); + + const onChangeKeyserverURL = React.useCallback( + (event: SyntheticEvent) => { + setKeyserverURL(event.currentTarget.value); + }, + [], + ); + + const onClickAddKeyserver = React.useCallback(() => { + // TODO + }, []); + + const addKeyserverModal = React.useMemo( + () => ( + +
+
Keyserver URL
+ +
+
+ +
+
+ ), + [keyserverURL, onChangeKeyserverURL, onClickAddKeyserver, popModal], + ); + + return addKeyserverModal; +} + +export default AddKeyserverModal;