From 71d1607693f6b9d3bafa39e5f23124fa7a1efe59 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sat, 6 Jul 2024 03:40:33 +0300
Subject: [PATCH] several fixes on Login and CreateWallet screens

---
 Cargo.toml                               |   3 +
 ng-app/src/lib/FullLayout.svelte         |  16 +-
 ng-app/src/lib/Home.svelte               |   4 +-
 ng-app/src/lib/Login.svelte              | 161 ++++++++++-------
 ng-app/src/routes/User.svelte            |  28 +--
 ng-app/src/routes/WalletCreate.svelte    | 217 ++++++++++++-----------
 ngone/web/src/routes/WalletCreate.svelte |   2 +-
 7 files changed, 230 insertions(+), 201 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index bc843f9..aaca5cf 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -38,6 +38,9 @@ documentation = "https://docs.nextgraph.org/"
 lto = true
 opt-level = 's'
 
+[profile.dev]
+opt-level = 2
+
 [patch.crates-io]
 # tauri = { git = "https://github.com/simonhyll/tauri.git",  branch="fix/ipc-mixup"}
 # tauri = { git = "https://git.nextgraph.org/NextGraph/tauri.git", branch="alpha.11-nextgraph", features = ["no-ipc-custom-protocol"] }
diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte
index 6ccd37e..1be041b 100644
--- a/ng-app/src/lib/FullLayout.svelte
+++ b/ng-app/src/lib/FullLayout.svelte
@@ -112,7 +112,7 @@
             <svelte:fragment slot="icon">
               <Home
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none  dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -120,7 +120,7 @@
             <svelte:fragment slot="icon">
               <Bolt
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -128,7 +128,7 @@
             <svelte:fragment slot="icon">
               <MagnifyingGlass
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -136,7 +136,7 @@
             <svelte:fragment slot="icon">
               <PlusCircle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -144,7 +144,7 @@
             <svelte:fragment slot="icon">
               <Users
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -152,7 +152,7 @@
             <svelte:fragment slot="icon">
               <User
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
             </svelte:fragment>
           </SidebarItem>
@@ -164,7 +164,7 @@
             <svelte:fragment slot="icon">
               <PaperAirplane
                 tabindex="-1"
-                class="-rotate-45 w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="-rotate-45 w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span
                 class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
@@ -181,7 +181,7 @@
             <svelte:fragment slot="icon">
               <Bell
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span
                 class="inline-flex justify-center items-center p-3 mt-1 -ml-3 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
diff --git a/ng-app/src/lib/Home.svelte b/ng-app/src/lib/Home.svelte
index de364bd..47bddfd 100644
--- a/ng-app/src/lib/Home.svelte
+++ b/ng-app/src/lib/Home.svelte
@@ -49,7 +49,7 @@
             <LogoGray class="w-7 h-7 tall-xs:w-10 tall-xs:h-10" />
           {/if}
           <span
-            class="ml-4 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
+            class="ml-2 self-center text-lg font-normal text-gray-900 rounded-lg dark:text-white whitespace-nowrap"
             >NextGraph</span
           >
         </a>
@@ -60,7 +60,7 @@
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
             />
           </a>
-          <a href="#/messages" class="ml-6 row items-center" on:click>
+          <a href="#/messages" class="ml-4 row items-center" on:click>
             <PaperAirplane
               tabindex="-1"
               class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white focus:outline-none"
diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index b2bea3e..84c7e01 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -15,7 +15,7 @@
   -->
 
 <script lang="ts">
-  import { Alert, Toggle } from "flowbite-svelte";
+  import { Alert, Toggle, Button } from "flowbite-svelte";
   import { onMount, createEventDispatcher, tick } from "svelte";
   import ng from "../api";
   import { emoji_cat, emojis, load_svg } from "../wallet_emojis";
@@ -27,12 +27,18 @@
     LockOpen,
     Key,
     CheckCircle,
+    ArrowLeft,
   } from "svelte-heros-v2";
   import PasswordInput from "./components/PasswordInput.svelte";
   //import Worker from "../worker.js?worker&inline";
   export let wallet;
   export let for_import = false;
 
+  let top;
+  function scrollToTop() {
+    top.scrollIntoView();
+  }
+
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
 
   const dispatch = createEventDispatcher();
@@ -63,6 +69,8 @@
     selection = [];
     error = undefined;
 
+    scrollToTop();
+
     // This is only for awaiting that SVGs are loaded.
     await load_svg();
     loaded = true;
@@ -72,11 +80,13 @@
     loaded = false;
     step = "pazzle";
     unlockWith = "pazzle";
+    scrollToTop();
   }
   function start_with_mnemonic() {
     loaded = false;
     step = "mnemonic";
     unlockWith = "mnemonic";
+    scrollToTop();
   }
 
   let emojis2 = [];
@@ -115,6 +125,7 @@
     // In case, this is called by the cancel button, we need to reset the selection.
     selection.forEach((emoji) => (emoji.sel = undefined));
     selection = selection;
+    scrollToTop();
   }
 
   async function start_pin() {
@@ -281,18 +292,20 @@
         selection = selection;
       }
     } else if (step === "pin") {
-      if (unlockWith === "mnemonic") {
-        start_with_mnemonic();
-      } else if (pin_code.length === 0) {
-        // Unselect the last two elements.
-        const to_unselect = ordered.slice(-2);
-        to_unselect.forEach((val) => {
-          val.sel = null;
-        });
-
-        ordered = ordered.slice(0, -2);
-        selection = selection;
-        step = "order";
+      if (pin_code.length === 0) {
+        if (unlockWith === "mnemonic") {
+          start_with_mnemonic();
+        } else {
+          // Unselect the last two elements.
+          const to_unselect = ordered.slice(-2);
+          to_unselect.forEach((val) => {
+            val.sel = null;
+          });
+
+          ordered = ordered.slice(0, -2);
+          selection = selection;
+          step = "order";
+        }
       } else {
         pin_code = pin_code.slice(0, pin_code.length - 1);
       }
@@ -301,8 +314,8 @@
 
   let width: number;
   let height: number;
-  const breakPointWidth: number = 530;
-  const breakPointHeight: number = 900;
+  const breakPointWidth: number = 535;
+  const breakPointHeight: number = 1005;
   let mobile = false;
   $: if (width >= breakPointWidth && height >= breakPointHeight) {
     mobile = false;
@@ -312,14 +325,18 @@
 </script>
 
 <div
-  class="flex flex-col justify-center md:max-w-2xl p-4 sm:px-8"
-  class:h-screen={step !== "load"}
+  class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
+  class:h-screen={step !== "load" && height > 660}
+  class:flex={height > 660}
+  bind:this={top}
 >
   {#if step == "load"}
-    <div class="flex flex-col justify-center p-4 pt-6">
-      <h2 class="pb-5 text-xl self-start">How to open your wallet:</h2>
-      <h3 class="pb-2 text-lg self-start">By your Pazzle</h3>
-      <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
+    <div class="flex-col justify-center p-4 pt-6" class:flex={height > 660}>
+      <h2 class="pb-5 text-xl self-start">
+        How to open your wallet? You have 2 options:
+      </h2>
+      <h3 class="pb-2 text-lg self-start">With your Pazzle</h3>
+      <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
         <li>
           For each one of the 9 categories of images, you will be presented with
           the 15 possible image choices. The categories are shuffled at every
@@ -356,11 +373,11 @@
       </ul>
 
       <h3 class="pb-2 text-lg self-start">
-        By your 12 word Mnemonic (passphrase)
+        With your 12 words Mnemonic (passphrase)
       </h3>
-      <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
+      <ul class="mb-8 ml-3 space-y-4 text-justify text-sm list-decimal">
         <li>
-          Enter your twelve word mnemonic in the input field. The words must be
+          Enter your twelve words mnemonic in the input field. The words must be
           separated by spaces.
         </li>
         <li>Enter the PIN code that you chose when you created your wallet.</li>
@@ -419,32 +436,34 @@
             >
               <PuzzlePiece
                 tabindex="-1"
-                class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
               />
               Open with Pazzle!
             </button>
           {/if}
+          <button
+            on:click={cancel}
+            class="mt-3 mb-2 text-gray-500 dark:text-gray-400 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            ><ArrowLeft
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none  group-hover:text-gray-900 dark:group-hover:text-white"
+            />Cancel login</button
+          >
           <a
             on:click={start_with_mnemonic}
+            tabindex="0"
             class="mt-1 text-lg px-5 py-2.5 text-center inline-flex items-center mb-2 underline cursor-pointer"
           >
             Open with Mnemonic instead
           </a>
-          <button
-            on:click={cancel}
-            class="mt-1 mb-2 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-            ><XCircle
-              tabindex="-1"
-              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-            />Cancel</button
-          >
         </div>
       </div>
     </div>
     <!-- The following steps have navigation buttons and fixed layout -->
   {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
     <div
-      class="flex flex-col justify-center h-screen p-4"
+      class="flex-col justify-center h-screen"
+      class:flex={height > 660}
       class:min-w-[310px]={mobile}
       class:min-w-[500px]={!mobile}
       class:max-w-[370px]={mobile}
@@ -458,25 +477,25 @@
             <label
               for="mnemonic-input"
               class="block mb-2 text-xl text-gray-900 dark:text-white"
-              >Your 12 word mnemonic</label
+              >Your 12 words mnemonic</label
             >
             <PasswordInput
               id="mnemonic-input"
-              placeholder="Enter your 12 word mnemonic here separated by spaces"
+              placeholder="Enter your 12 words mnemonic here separated by spaces"
               bind:value={mnemonic}
               className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
               auto_complete="mnemonic"
             />
             <div class="flex">
-              <button
+              <Button
                 type="submit"
-                class="mt-1 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+                class="mt-3 ml-auto text-white bg-primary-700 disabled:opacity-65 focus:ring-4 focus:ring-blue-500 focus:border-blue-500 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-blue-500 dark:focus:border-blue-500"
                 on:click={start_pin}
                 disabled={mnemonic.split(" ").length !== 12}
                 ><CheckCircle
                   tabindex="-1"
                   class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-                />Confirm</button
+                />Confirm</Button
               >
             </div>
           </form>
@@ -484,7 +503,7 @@
           <p class="max-w-xl mx-auto lg:max-w-2xl">
             <span class="text-xl">
               <!-- TODO: Internationalization-->
-              Select your emoji of category: {emoji_cat[
+              Select your emoji of category:<br />{emoji_cat[
                 shuffle.category_indices[pazzlePage]
               ]}</span
             >
@@ -506,7 +525,7 @@
           {/each}
         {:else if step == "order"}
           <p class="max-w-xl mx-auto lg:max-w-2xl mb-2">
-            <span class="text-xl">Click your emojis in the correct order</span>
+            <span class="text-xl">Select each image in the correct order</span>
           </p>
           {#each [0, 1, 2] as row}
             <div class="columns-3 gap-0">
@@ -543,11 +562,8 @@
             </div>
           {/each}
         {:else if step == "pin"}
-          <p class="flex items-center">
-            <span class="text-xl">Enter your PIN code:</span>
-            <span class="text-xl min-w-[2em] ml-1 text-left"
-              >{#each pin_code as pin_key}*{/each}</span
-            >
+          <p class="items-center">
+            <span class="text-xl">Enter your PIN code</span>
           </p>
           <!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
                However, this leads to the width decreasing and the buttons come together in mobile view.
@@ -557,7 +573,7 @@
               {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}
                 <button
                   tabindex="0"
-                  class="m-1 disabled:opacity-15 select-none align-bottom text-7xl p-0 w-full aspect-square border-0 pt-[5%]"
+                  class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
                   on:click={async () => await on_pin_key(num)}
                   disabled={pin_code.length >= 4}
                 >
@@ -570,43 +586,47 @@
             <div class="m-1 w-full aspect-square" />
             <button
               tabindex="0"
-              class="disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 w-full aspect-square border-0 pt-[5%]"
+              class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
               on:click={async () => await on_pin_key(shuffle_pin[9])}
               disabled={pin_code.length >= 4}
             >
               <span>{shuffle_pin[9]}</span>
             </button>
-            <button
+            <Button
               tabindex="0"
-              class="w-full bg-green-300 hover:bg-green-300/90 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
+              class="w-full bg-green-300 hover:bg-green-300/90 enabled:animate-bounce disabled:bg-gray-200 disabled:opacity-15 m-1 select-none align-bottom text-7xl p-0 aspect-square border-0"
               on:click={async () => await finish()}
               disabled={pin_code.length < 4}
             >
               <LockOpen
                 tabindex="-1"
-                class="w-full h-[50%] transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-full h-[50%] transition duration-75 focus:outline-none select-none group-hover:text-gray-900 dark:group-hover:text-white"
               />
-            </button>
+            </Button>
           </div>
+          <span class="mt-3 text-9xl min-h-[8rem] text-center"
+            >{#each pin_code as pin_key}*{/each}</span
+          >
         {/if}
       </div>
       <!-- Navigation Buttons for pazzle, order pin, mnemonic -->
-      <div class="flex justify-between mt-auto">
+      <div class="flex justify-between mb-6 mt-auto">
         <button
           on:click={cancel}
-          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
           ><XCircle
             tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+            class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
           />Cancel</button
         >
         <button
-          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+          class="mt-1 ml-2 min-w-[141px] focus:ring-4 focus:ring-primary-100/50 rounded-lg sm:text-lg px-5 py-2.5 text-center select-none inline-flex items-center dark:focus:ring-primary-700/55"
           on:click={go_back}
           ><Backspace
             tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
-          />Go Back</button
+            class="w-8 h-8 mr-2 -ml-1 transition focus:outline-none duration-75 group-hover:text-gray-900 dark:group-hover:text-white"
+          />{#if step === "mnemonic" || (step === "pazzle" && pazzlePage === 0)}Go
+            back{:else}Correct{/if}</button
         >
       </div>
     </div>
@@ -638,7 +658,7 @@
     </div>
   {:else if step == "end"}
     {#if error}
-      <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
+      <div class=" max-w-6xl lg:px-8 mx-auto text-red-800">
         <div class="mt-auto max-w-6xl lg:px-8">
           An error occurred !
           <svg
@@ -661,24 +681,24 @@
           </Alert>
         </div>
         <div class="flex justify-between mt-auto gap-4">
+          <button
+            on:click={cancel}
+            class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            ><XCircle
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
+            />Cancel</button
+          >
           <button
             class="mt-10 select-none text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
             on:click={init}
           >
             <ArrowPath
               tabindex="-1"
-              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75 focus:outline-none group-hover:text-gray-900 dark:group-hover:text-white"
             />
             Try again
           </button>
-          <button
-            on:click={cancel}
-            class="mt-10 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-            ><XCircle
-              tabindex="-1"
-              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-            />Cancel</button
-          >
         </div>
       </div>
     {:else}
@@ -707,6 +727,10 @@
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 
 <style>
+  .pindigit {
+    min-height: 99px;
+  }
+
   .pazzleline {
     margin-right: auto;
     margin-left: auto;
@@ -722,7 +746,6 @@
     font-weight: 700;
     justify-content: center;
     align-items: center;
-    padding-top: 25%;
   }
 
   .sel-emoji {
diff --git a/ng-app/src/routes/User.svelte b/ng-app/src/routes/User.svelte
index 5eee826..709bc18 100644
--- a/ng-app/src/routes/User.svelte
+++ b/ng-app/src/routes/User.svelte
@@ -160,7 +160,7 @@
             >
               <ArrowLeft
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Back</span>
             </li>
@@ -171,7 +171,7 @@
               {#if $online}
                 <Signal
                   tabindex="-1"
-                  class="w-7 h-7 text-green-600 transition duration-75 dark:text-green-400 "
+                  class="w-7 h-7 text-green-600 transition duration-75 focus:outline-none dark:text-green-400 "
                 />
                 <span class="ml-3 text-green-600 dark:text-green-400"
                   >Online</span
@@ -179,7 +179,7 @@
               {:else}
                 <SignalSlash
                   tabindex="-1"
-                  class="w-7 h-7 text-red-600 transition duration-75 dark:text-red-400 "
+                  class="w-7 h-7 text-red-600 transition duration-75 focus:outline-none dark:text-red-400 "
                 />
                 <span class="ml-3 text-red-600 dark:text-red-400">Offline</span>
               {/if}
@@ -194,7 +194,7 @@
             >
               <ArrowRightOnRectangle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Logout</span>
             </li>
@@ -220,7 +220,7 @@
               >
                 <DocumentArrowDown
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
                 <span class="ml-3">Download wallet file</span>
               </li>
@@ -231,7 +231,7 @@
               >
                 <NoSymbol
                   tabindex="-1"
-                  class="w-7 h-7 text-red-700 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-red-700 transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
                 <span class="ml-3 text-left"
                   >Download failed:<br /> {download_error}</span
@@ -244,7 +244,7 @@
               >
                 <DocumentArrowDown
                   tabindex="-1"
-                  class="w-7 h-7 text-blue-700  transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-blue-700  transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
                 <span class="ml-3 text-left">Download in progress...</span>
               </li>
@@ -274,7 +274,7 @@
                   >
                     <DocumentArrowDown
                       tabindex="-1"
-                      class="w-14 h-14  transition duration-75 dark:text-white  dark:group-hover:text-white"
+                      class="w-14 h-14  transition duration-75 focus:outline-none dark:text-white  dark:group-hover:text-white"
                     />
                     Click here to download the wallet file
                   </button>
@@ -285,7 +285,7 @@
               <svelte:fragment slot="icon">
                 <Cog6Tooth
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -293,7 +293,7 @@
               <svelte:fragment slot="icon">
                 <PuzzlePiece
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -301,7 +301,7 @@
               <svelte:fragment slot="icon">
                 <Key
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -309,7 +309,7 @@
               <svelte:fragment slot="icon">
                 <User
                   tabindex="-1"
-                  class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                  class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                 />
               </svelte:fragment>
             </SidebarItem>
@@ -370,7 +370,7 @@
             >
               <Gift
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">Donate to NextGraph</span>
             </li>
@@ -384,7 +384,7 @@
             >
               <InformationCircle
                 tabindex="-1"
-                class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
+                class="w-7 h-7 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
               <span class="ml-3">About NextGraph</span>
             </li>
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 7385088..5bcbc44 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -430,76 +430,76 @@
   }
 
   // Loads an example wallet.
-  const loadWallet = async () => {
-    options = {
-      trusted: true,
-      cloud: false,
-      bootstrap: false,
-      pdf: false,
-    };
-    creating = true;
-    let local_invitation = await ng.get_local_bootstrap(location.href);
-    let additional_bootstrap;
-    if (local_invitation) {
-      additional_bootstrap = local_invitation.V0.bootstrap;
-    }
-    let core_registration;
-    if (invitation?.V0.code) {
-      core_registration = invitation.V0.code.ChaCha20Key;
-    }
-    let params = {
-      security_img: security_img,
-      security_txt,
-      pin,
-      pazzle_length: 9,
-      send_bootstrap: false, //options.cloud || options.bootstrap ?  : undefined,
-      send_wallet: options.cloud,
-      local_save: options.trusted,
-      result_with_wallet_file: false, // this will be automatically changed to true for browser app
-      core_bootstrap: invitation?.V0.bootstrap,
-      core_registration,
-      additional_bootstrap,
-    };
-    try {
-      ready = await import("./wallet.json");
-      wallets.set(await ng.get_wallets());
-      if (!options.trusted && !tauri_platform) {
-        let lws = $wallets[ready.wallet_name];
-        if (lws.in_memory) {
-          let new_in_mem = {
-            lws,
-            name: ready.wallet_name,
-            opened: false,
-            cmd: "new_in_mem",
-          };
-          window.wallet_channel.postMessage(new_in_mem, location.href);
-        }
-      }
-      console.log("pazzle ids", ready.pazzle);
-      console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle));
+  // const loadWallet = async () => {
+  //   options = {
+  //     trusted: true,
+  //     cloud: false,
+  //     bootstrap: false,
+  //     pdf: false,
+  //   };
+  //   creating = true;
+  //   let local_invitation = await ng.get_local_bootstrap(location.href);
+  //   let additional_bootstrap;
+  //   if (local_invitation) {
+  //     additional_bootstrap = local_invitation.V0.bootstrap;
+  //   }
+  //   let core_registration;
+  //   if (invitation?.V0.code) {
+  //     core_registration = invitation.V0.code.ChaCha20Key;
+  //   }
+  //   let params = {
+  //     security_img: security_img,
+  //     security_txt,
+  //     pin,
+  //     pazzle_length: 9,
+  //     send_bootstrap: false, //options.cloud || options.bootstrap ?  : undefined,
+  //     send_wallet: options.cloud,
+  //     local_save: options.trusted,
+  //     result_with_wallet_file: false, // this will be automatically changed to true for browser app
+  //     core_bootstrap: invitation?.V0.bootstrap,
+  //     core_registration,
+  //     additional_bootstrap,
+  //   };
+  //   try {
+  //     ready = await import("./wallet.json");
+  //     wallets.set(await ng.get_wallets());
+  //     if (!options.trusted && !tauri_platform) {
+  //       let lws = $wallets[ready.wallet_name];
+  //       if (lws.in_memory) {
+  //         let new_in_mem = {
+  //           lws,
+  //           name: ready.wallet_name,
+  //           opened: false,
+  //           cmd: "new_in_mem",
+  //         };
+  //         window.wallet_channel.postMessage(new_in_mem, location.href);
+  //       }
+  //     }
+  //     console.log("pazzle ids", ready.pazzle);
+  //     console.log("pazzle emojis", emojis_from_pazzle_ids(ready.pazzle));
 
-      download_name = "wallet-" + ready.wallet_name + ".ngw";
-      if (options.cloud) {
-        cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
-      }
-      if (ready.wallet_file.length) {
-        const blob = new Blob([ready.wallet_file], {
-          type: "application/octet-stream",
-        });
-        download_link = URL.createObjectURL(blob);
-      }
-    } catch (e) {
-      console.error(e);
-      error = e;
-    }
-    wait = false;
-    registration_error = false;
-    intro = false;
-    pin = [0, 8, 1, 5];
-    pin_confirm = [0, 8, 1, 5];
-    invitation = true;
-  };
-  loadWallet();
+  //     download_name = "wallet-" + ready.wallet_name + ".ngw";
+  //     if (options.cloud) {
+  //       cloud_link = "https://nextgraph.one/#/w/" + ready.wallet_name;
+  //     }
+  //     if (ready.wallet_file.length) {
+  //       const blob = new Blob([ready.wallet_file], {
+  //         type: "application/octet-stream",
+  //       });
+  //       download_link = URL.createObjectURL(blob);
+  //     }
+  //   } catch (e) {
+  //     console.error(e);
+  //     error = e;
+  //   }
+  //   wait = false;
+  //   registration_error = false;
+  //   intro = false;
+  //   pin = [0, 8, 1, 5];
+  //   pin_confirm = [0, 8, 1, 5];
+  //   invitation = true;
+  // };
+  // loadWallet();
 
   let width: number;
   let height: number;
@@ -516,7 +516,7 @@
 <svelte:window bind:innerWidth={width} bind:innerHeight={height} />
 
 <CenteredLayout>
-  <div class="max-w-2xl lg:px-8 mx-auto px-4">
+  <div class="max-w-2xl lg:px-8 mx-auto" class:px-4={width > 328}>
     {#if wait}
       <div class="lg:px-8 text-primary-700">
         {#if wait === true}
@@ -599,11 +599,11 @@
           </div>
         {:else if intro}
           <div class=" max-w-6xl lg:px-8 mx-auto px-4">
-            <p class="max-w-xl md:mx-auto lg:max-w-2xl">
+            <p class="max-w-xl text-justify md:mx-auto lg:max-w-2xl">
               A <b>NextGraph Wallet</b> is unique to each person. It stores your
               credentials and authorizations to access documents. You need one
               in order to start using NextGraph.<br /><br />If you already have
-              a wallet, you should not create a new one, instead,
+              a wallet, you should not create a new one. Instead,
               <a href="/wallet/login" use:link
                 >login here with your existing wallet.</a
               >
@@ -848,7 +848,7 @@
                   d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
                 />
               </svg>
-              Ok, I create my wallet now !
+              I create my wallet now !
             </button>
           </div>
         {:else if !invitation}
@@ -1217,7 +1217,7 @@
             </button>
           </div>
         {:else if pin.length < 4}
-          <div class=" max-w-6xl lg:px-8 mx-auto px-3">
+          <div class=" max-w-6xl lg:px-8 mx-auto">
             {#if registration_success}
               <Alert color="green" class="mb-5">
                 <span class="font-bold text-xl"
@@ -1237,8 +1237,8 @@
                 NextGraph will never see your PIN.
               </Alert>
             </p>
-            <p class="text-left mt-5">Here are the rules for the PIN :</p>
-            <ul class="text-left list-disc list-inside">
+            <p class="text-left mt-5 px-3">Here are the rules for the PIN :</p>
+            <ul class="text-left list-disc list-inside px-3">
               <li>It cannot be a series like 1234 or 8765</li>
               <li>
                 The same digit cannot repeat more than once. By example 4484 is
@@ -1606,7 +1606,7 @@
               </svg>
             </div>
           {:else}
-            <div class="text-left">
+            <div class="text-left mx-4">
               <div class="text-green-800 mx-auto flex flex-col items-center">
                 <div>Your wallet is ready!</div>
                 <svg
@@ -1626,37 +1626,41 @@
                 </svg>
               </div>
               {#if download_link}
-                Please download your wallet and keep it in a safe location<br />
-                <a
-                  href={download_link}
-                  target="_blank"
-                  download={download_name}
-                >
-                  <button
-                    tabindex="-1"
-                    class:animate-bounce={animateDownload}
-                    on:click={() => (animateDownload = false)}
-                    class="mt-10 mb-8 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+                <div class="text-center">
+                  Please download your wallet and keep it in a safe location<br
+                  />
+                  <a
+                    href={download_link}
+                    target="_blank"
+                    download={download_name}
                   >
-                    <svg
-                      class="w-8 h-8 mr-2 -ml-1"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                      aria-hidden="true"
+                    <button
+                      tabindex="-1"
+                      class:animate-bounce={animateDownload}
+                      on:click={() => (animateDownload = false)}
+                      class="mt-10 mb-8 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
                     >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-                      />
-                    </svg>
+                      <svg
+                        class="w-8 h-8 mr-2 -ml-1"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m.75 12l3 3m0 0l3-3m-3 3v-6m-1.5-9H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+                        />
+                      </svg>
 
-                    Download my wallet
-                  </button>
-                </a><br />
+                      Download my wallet
+                    </button>
+                  </a>
+                </div>
+                <br />
               {:else if !options.trusted}
                 Your wallet file has been downloaded into your "Downloads"
                 folder, with the name<br /><span class="text-black">
@@ -1707,7 +1711,6 @@
 
               <br />
 
-              <br /><br />
               <!-- Mnemonic (copy button). TODO: once the component is available-->
               <label for="mnemonic mb-2"
                 >And here is your mnemonic (your alternative passphrase):</label
@@ -1769,7 +1772,7 @@
                 <span class="text-lg text-neutral-950">
                   The pazzle and the mnemonic <span class="font-bold">
                     will not be shown to you again</span
-                  >. Please make sure, you have written it down.
+                  >. Please make sure, you have written them down.
                 </span>
                 <div>
                   <button
diff --git a/ngone/web/src/routes/WalletCreate.svelte b/ngone/web/src/routes/WalletCreate.svelte
index 46ad494..52f9509 100644
--- a/ngone/web/src/routes/WalletCreate.svelte
+++ b/ngone/web/src/routes/WalletCreate.svelte
@@ -51,7 +51,7 @@
     A <b>NextGraph Wallet</b> is unique to each person.<br /> It stores your
     credentials to access documents. You need one in order to start using
     NextGraph.<br />If you already have a wallet, you should not create a new
-    one, instead,
+    one. Instead,
     {#if display_note_on_local_wallets}
       <a href="/" use:link>login here with your existing wallet.</a>
     {:else}