diff --git a/web/modals/keyserver-selection/keyserver-selection-modal.react.js b/web/modals/keyserver-selection/keyserver-selection-modal.react.js --- a/web/modals/keyserver-selection/keyserver-selection-modal.react.js +++ b/web/modals/keyserver-selection/keyserver-selection-modal.react.js @@ -22,6 +22,67 @@ const { popModal } = useModalContext(); + const { keyerverRemoveInfoText, keyserverRemoveButton } = + React.useMemo(() => { + if (keyserverInfo.connection.status !== 'connected') { + const removeInfoText = ( + <> + <div> + You may delete an 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’s communities after disconnecting or deleting. + </div> + </> + ); + + const removeButton = ( + <Button + variant="filled" + buttonColor={buttonThemes.danger} + className={css.button} + > + Delete keyserver from list + </Button> + ); + + return { + keyerverRemoveInfoText: removeInfoText, + keyserverRemoveButton: removeButton, + }; + } + const removeInfoText = ( + <> + <div> + Disconnecting from this keyserver will remove you from its + associated communities. + </div> + <div> + Any messages or content you have previously sent will remain on the + keyserver. + </div> + </> + ); + + const removeButton = ( + <Button + variant="filled" + buttonColor={buttonThemes.danger} + className={css.button} + > + Disconnect keyserver + </Button> + ); + + return { + keyerverRemoveInfoText: removeInfoText, + keyserverRemoveButton: removeButton, + }; + }, [keyserverInfo.connection.status]); + return ( <Modal size="large" onClose={popModal} name="Keyserver details"> <div className={css.container}> @@ -35,26 +96,10 @@ <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’s communities after disconnecting or deleting. - </div> + {keyerverRemoveInfoText} </div> </div> - <div className={css.buttonContainer}> - <Button - variant="filled" - buttonColor={buttonThemes.danger} - className={css.button} - > - Delete keyserver from list - </Button> - </div> + <div className={css.buttonContainer}>{keyserverRemoveButton}</div> </Modal> ); }