diff --git a/webui-src/app/home.js b/webui-src/app/home.js index b6675f8..23411e4 100644 --- a/webui-src/app/home.js +++ b/webui-src/app/home.js @@ -88,11 +88,15 @@ const webhelp = () => { const ConfirmCopied = () => { return { view: () => [ - m('h3', 'Copy to Clipboard'), + m('h3', 'Copied to Clipboard'), m('hr'), m( - 'p', - 'Your Retroshare ID is copied to Clipboard, paste and send it to your friend via email or some other way' + 'p[style="margin: 12px 0 4px"]', + 'Your Retroshare ID has been copied to Clipboard.' + ), + m( + 'p[style="margin: 4px 0 12px"]', + 'Now, you can paste and send it to your friend via email or some other way.' ), m('button', {}, 'Ok'), ], @@ -104,7 +108,7 @@ const retroshareId = () => { view(v) { return m('.retroshareID', [ m('i.fas .fa-copy', { - style: 'color: #3ba4d7;margin-right:3px', + style: 'color: #3ba4d7; margin-right: 3px; cursor: pointer', onclick: () => { document.getElementById('retroId').select(); document.execCommand('copy'); @@ -119,6 +123,9 @@ const retroshareId = () => { rows: 1, cols: v.attrs.ownCert.substring(31).length + 2, placeholder: 'certificate', + onclick: () => { + document.getElementById('retroId').select(); + }, }, v.attrs.ownCert.substring(31) ), @@ -217,52 +224,52 @@ function confirmAddPrompt(details, cert, long) { long ? m( - 'button', - { - onclick: async () =>{ - const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert }); - if (res.body.retval) { - widget.popupMessage([ - m('h3', 'Successful'), - m('hr'), - m('p', 'Successfully added friend.'), - ]); - } else { - widget.popupMessage([ - m('h3', 'Error'), - m('hr'), - m('p', 'An error occoured during adding. Friend not added.'), - ]); - } + 'button', + { + onclick: async () => { + const res = await rs.rsJsonApiRequest('/rsPeers/loadCertificateFromString', { cert }); + if (res.body.retval) { + widget.popupMessage([ + m('h3', 'Successful'), + m('hr'), + m('p', 'Successfully added friend.'), + ]); + } else { + widget.popupMessage([ + m('h3', 'Error'), + m('hr'), + m('p', 'An error occoured during adding. Friend not added.'), + ]); + } }, }, - 'Finish' - ) + 'Finish' + ) : m( - 'button', - { - onclick: async () => { - const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', { - sslId: details.id, - pgpId: details.gpg_id, - }); - if (res.body.retval) { - widget.popupMessage([ - m('h3', 'Successful'), - m('hr'), - m('p', 'Successfully added friend.'), - ]); - } else { - widget.popupMessage([ - m('h3', 'Error'), - m('hr'), - m('p', 'An error occoured during adding. Friend not added.'), - ]); - } - }, + 'button', + { + onclick: async () => { + const res = await rs.rsJsonApiRequest('/rsPeers/addSslOnlyFriend', { + sslId: details.id, + pgpId: details.gpg_id, + }); + if (res.body.retval) { + widget.popupMessage([ + m('h3', 'Successful'), + m('hr'), + m('p', 'Successfully added friend.'), + ]); + } else { + widget.popupMessage([ + m('h3', 'Error'), + m('hr'), + m('p', 'An error occoured during adding. Friend not added.'), + ]); + } }, - 'Finish' - ), + }, + 'Finish' + ), ]); } @@ -306,7 +313,7 @@ const AddFriend = () => { m('h3', 'Add friend'), m( 'p', - 'Did you recieve a certificate from a friend? You can also drag and drop the file below' + 'Did you recieve a certificate from a friend?' ), m('hr'), m( @@ -319,8 +326,8 @@ const AddFriend = () => { // Styling element when file is dragged style: vnode.state.isDragged ? { - border: '5px solid #3ba4d7', - } + border: '5px solid #3ba4d7', + } : {}, ondragover: (e) => e.preventDefault(), @@ -332,19 +339,20 @@ const AddFriend = () => { }, [ + m('p[style="margin: 16px 0 4px; font-size: 12px;"]', 'You can directly upload or Drag and drop the file below'), m('input[type=file][name=certificate]', { onchange: (e) => { // Note: this one is for the 'browse' button loadFileContents(e.target.files || e.dataTransfer.files); }, }), - 'Or paste the certificate here', - m('textarea[rows=5][style="width: 90%; display: block;"]', { + m('p[style="width: 100%; text-align: center; margin: 5px 0;"]', 'OR'), + m('textarea[rows=5][placeholder="Paste the certificate here"][style="width: 100%; display: block; resize: vertical;"]', { oninput: (e) => (certificate = e.target.value), value: certificate, }), m( - 'button', + 'button[style="margin-top: 10px;"]', { onclick: () => addFriendFromCert(certificate), }, diff --git a/webui-src/app/theme.css b/webui-src/app/theme.css index 38da0dd..8c23664 100644 --- a/webui-src/app/theme.css +++ b/webui-src/app/theme.css @@ -139,6 +139,7 @@ hr { font-size: 1.1rem; border-radius: 5px; border: none; + resize: none; } .logo { @@ -153,7 +154,6 @@ hr { .webhelp { background: whitesmoke; font-size: 0.8rem; - border-radius: 5px; display: flex; justify-content: start; @@ -162,6 +162,7 @@ hr { border-radius: 5px; border: 1px solid black; padding: 0px 10px; + cursor: pointer; } .webhelp > i { margin-right: 1.2px; @@ -255,7 +256,9 @@ hr { width: 40%; /*height: 40%;*/ min-height: 250px; - transform: translate(60%, 50%); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); background-color: white; padding: 2em; border-radius: 20px;