jr popup: separate modals for keypairs and recover keypair

jrx/pages/popup.html

@@ -22,7 +22,7 @@
     </tr>
 </table>
 
-<div style="margin-top: 5px; width: 95%; background: #d9ffd6; border: 1px solid #6c5d96; border-radius: 5px;">
+<div style="margin-top: 5px; width: 95%; background: #d9ffd6; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
     <table >
         <tr>
             <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
@@ -31,18 +31,35 @@
             </td>
         </tr>
     </table>
+
+    <!-- hidden if there are keypairs -->
     <p id="no-keypairs">You have no keypairs yet. Either generate a new one or
     recover one you already have.</p>
+
+    <!-- keypairs added dynamically from page script -->
     <ul id="keypairs"></ul>
-    <!-- recover from faert phrase -->
+
+    <!-- generate new keypair -->
     <form>
         <button id="generate-btn">Generate New Keypair</button>
     </form>
+</div>
+
+<!-- faert recovery -->
+<div style="margin-top: 5px; width: 95%; background: #ffd6d9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+    <table >
+        <tr>
+            <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
+            <td style="justify-content: center; font-size: 28px; text-align: center; font-weight: bold">
+                RECOVER KEYPAIR FROM GajuPhrase
+            </td>
+        </tr>
+    </table>
     <!-- recover from faert phrase -->
     <form>
-        <label for="faert-input">FÆRT Phrase:</label>
+        <label for="faert-input">GajuPhrase:</label>
         <input id="faert-input"></input>
-        <button id="faert-btn">Recover Keypair from FÆRT Phrase</button>
+        <button id="faert-btn">Recover Keypair from GajuPhrase</button>
     </form>
     <!-- recover from seed phrase
             <form>