diff --git a/web/account/log-in-form.css b/web/account/log-in-form.css --- a/web/account/log-in-form.css +++ b/web/account/log-in-form.css @@ -1,6 +1,9 @@ div.modal_body { display: flex; flex-direction: column; + justify-content: center; + min-height: 324px; + min-width: 320px; padding: 20px 40px; border-radius: 16px; background-color: var(--modal-bg); diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js --- a/web/account/log-in-form.react.js +++ b/web/account/log-in-form.react.js @@ -29,18 +29,30 @@ setSIWEAuthFlowSelected(false); }, []); - let siweSection; + let siweLoginForm, siweButton; if (isDev && siweAuthFlowSelected && signer) { - siweSection = ; + siweLoginForm = ; } else if (isDev) { - siweSection = ; + siweButton = ; + } + + if (siweLoginForm) { + return
{siweLoginForm}
; + } + + if (siweButton) { + return ( +
+ +
+ {siweButton} +
+ ); } return (
- {siweSection ?
: null} - {siweSection}
); } diff --git a/web/account/siwe-login-form.react.js b/web/account/siwe-login-form.react.js --- a/web/account/siwe-login-form.react.js +++ b/web/account/siwe-login-form.react.js @@ -127,8 +127,8 @@ if (!siweNonce || !primaryIdentityPublicKey) { return ( -
- +
+
); } diff --git a/web/account/siwe.css b/web/account/siwe.css --- a/web/account/siwe.css +++ b/web/account/siwe.css @@ -44,6 +44,11 @@ padding-bottom: 20px; } +div.loadingIndicator { + display: flex; + justify-content: center; +} + div.siweContainer { display: flex; flex-direction: column;