Add more CSS to enforce consistent visibility.

diff --git a/src/lib/wallet/sign.ts b/src/lib/wallet/sign.ts
index b08cadd786af54a892239ee2b63f626090b07b1f..308da4a3a6a2d2edeed34770d9c9df9ff03796c3 100644 (file)
--- a/src/lib/wallet/sign.ts
+++ b/src/lib/wallet/sign.ts
@@ -86,14 +86,24 @@ export async function _signBlock (wallet: Wallet, vault: Vault, index: unknown,
 
 async function confirm (id: string, address: string, message: Block | string[]): Promise<string | null> {
        BROWSER: return new Promise((resolve, reject) => {
+               const cssHeading = 'color:black !important;display:block !important;font-family:sans-serif !important;font-size=1rem !important;font-weight:bold !important;margin-top:1rem !important;margin-right:1rem !important;margin-bottom:1rem !important;margin-left:1rem !important;padding-top:0 !important;padding-right:0 !important;padding-bottom:0 !important;padding-left:0 !important;text-align:center !important;visibility:visible !important;'
+               const cssBody = 'color:grey !important;display:block !important;font-family:sans-serif !important;font-size=1rem !important;font-weight:normal !important;margin-top:1rem !important;margin-right:1rem !important;margin-bottom:0 !important;margin-left:1rem !important;padding-top:0 !important;padding-right:0 !important;padding-bottom:0 !important;padding-left:0 !important;visibility:visible !important;'
+               const cssCode = 'color:black !important;display:block !important;font-family:monospace !important;font-size=1rem !important;font-weight:normal !important;margin-top:0 !important;margin-right:1rem !important;margin-bottom:0 !important;margin-left:1rem !important;padding-top:0 !important;padding-right:0 !important;padding-bottom:0 !important;padding-left:0 !important;visibility:visible !important;'
+               const cssButton = 'color:black !important;display:inline-block !important;font-family:sans-serif !important;font-size=1rem !important;font-weight:bold !important;margin-top:1rem !important;margin-right:1rem !important;margin-bottom:1rem !important;margin-left:1rem !important;padding-top:1rem !important;padding-right:1rem !important;padding-bottom:1rem !important;padding-left:1rem !important;text-align:center !important;visibility:visible !important;'
                const dialog = document.createElement('dialog')
                dialog.innerHTML = `
-               <form method="dialog">
-                       <p style="font-size=1rem !important;"><strong>Sign using account ${address}?</strong></p>
-                       <pre style="font-size=1rem !important;">${JSON.stringify(message, null, '\t')}</pre>
-                       <div style="text-align:right;">
-                               <button value="no" autofocus>NO, cancel</button>
-                               <button value="yes">YES, sign</button>
+               <form method="dialog" style="${cssBody}">
+                       <p style="${cssHeading}">Review Transaction</p>
+                       <hr style="${cssBody}"/>
+                       <p style="${cssBody}">Signing account</p>
+                       <pre style="${cssCode}">${address}</pre>
+                       <p style="${cssBody}">Message to sign</p>
+                       <pre style="${cssCode}">${JSON.stringify(message, null, '\t')}</pre>
+                       <hr style="${cssBody}"/>
+                       <p style="${cssHeading}">Sign transaction?</p>
+                       <div style="${cssHeading}">
+                               <button value="no" autofocus style="${cssButton}">NO, cancel</button>
+                               <button value="yes" style="${cssButton}font-weight:normal !important;">YES, sign</button>
                        </div>
                </form>`
                dialog.addEventListener('close', (ev) => {