further improvement of UI

src/lib/ACCs.svelte

@@ -6,8 +6,9 @@
   } from "./services/mutateAccessControlConditions.ts";
   let signingConditions =
     JSON.parse(localStorage.getItem("signingConditions")) || [];
-  let newParameter = "";
+
-  let newComparator = "";
+  let newParameter = ":userAddress";
+  let newComparator = "=";
   let newValue = "";
 
   async function handleCreateNewACC() {
@@ -24,48 +25,50 @@
   }
 </script>
 
-<h1>Access Control Conditions</h1>
 {#each signingConditions as condition, index (index)}
   {#each condition.accs as acc}
-    <div class="text-lg p-4 border rounded-md shadow-md">
+    <div
-      <span class="text-xl"
+      class="card"
-        ><b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b></span
+      style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;"
+    >
+      <div class="p-4">
+        <h2 class="text-xl">
+          <b>{condition.resourceId.baseUrl}{condition.resourceId.path}</b>
+        </h2>
+        <p>
+          {acc.parameters.join(", ")}
+          {acc.returnValueTest.comparator}
+          {acc.returnValueTest.value}
+        </p>
+      </div>
+      <button
+        on:click={() => handleDeleteACC(index)}
+        class="btn variant-filled-error mt-2">Delete ACC</button
       >
-      <p>
-        {acc.parameters.join(", ")}
-        {acc.returnValueTest.comparator}
-        {acc.returnValueTest.value}
-      </p>
-      <p>
-        <span class="text-xs">{JSON.stringify(condition)}</span>
-      </p>
     </div>
   {/each}
-  <p />
-  <p />
-  <button
-    on:click={() => handleDeleteACC(index)}
-    class="mt-2 px-4 py-2 bg-red-500 text-white rounded-md">Delete ACC</button
-  >
 {/each}
-<div class="mt-4">
+<div class="mt-4 flex">
   <input
     bind:value={newParameter}
     placeholder="Parameter"
-    class="px-4 py-2 border rounded-md mr-2"
+    class="input mr-2"
+    style="width: max-content; max-width: 125px;"
+    readonly
   />
   <input
     bind:value={newComparator}
     placeholder="Comparator"
-    class="px-4 py-2 border rounded-md mr-2"
+    class="input mr-2"
+    style="width: max-content; max-width: 36px;"
+    readonly
   />
   <input
     bind:value={newValue}
     placeholder="Value"
-    class="px-4 py-2 border rounded-md mr-2"
+    class="input mr-2 flex-grow"
   />
-  <button
+  <button on:click={handleCreateNewACC} class="btn variant-filled flex-grow"
-    on:click={handleCreateNewACC}
+    >Create New ACC</button
-    class="px-4 py-2 bg-blue-500 text-white rounded-md">Create New ACC</button
   >
 </div>

src/lib/Wallet.svelte

@@ -9,6 +9,7 @@
     startSignIn as startSignInService,
   } from "./services/signInWithGoogle";
   import { getDrawerStore } from "@skeletonlabs/skeleton";
+  import { goto } from "$app/navigation";
 
   const { state, send } = useMachine(walletMachine);
   const drawerStore = getDrawerStore();
@@ -66,7 +67,7 @@
       <div class="flex flex-col items-center w-1/3">
         <button
           on:click={startSignIn}
-          class="flex items-center justify-center w-full py-2 text-white bg-blue-500 rounded hover:bg-blue-700"
+          class="btn variant-filled flex items-center justify-center py-2"
         >
           <span class="mr-2"><Icon icon="flat-color-icons:google" /></span>
           <span>Sign in with Google</span>
@@ -78,22 +79,20 @@
       <div class="flex items-center justify-between w-full space-x-4">
         <div class="w-full h-full overflow-hidden grid grid-cols-6">
           <aside class="col-span-1">
-            <div class="flex items-center space-x-2">
+            <a href="/me" on:click|preventDefault={() => goto("/me")}>
-              <Icon
+              <div class="flex items-center space-x-2">
-                icon="iconamoon:profile-circle-fill"
+                <Icon
-                class="w-12 h-12 text-gray-500"
+                  icon="iconamoon:profile-circle-fill"
-              />
+                  class="w-12 h-12 text-gray-500"
-              <div>
+                />
-                <p class="text-sm">
+                <div>
-                  <span class="font-semibold">Address:</span>
+                  <div class="text-sm">
-                  {$state.context.pkps[0].ethAddress.substring(0, 8) + "..."}
+                    <div class="font-semibold">Address</div>
-                </p>
+                    {$state.context.pkps[0].ethAddress.substring(0, 8) + "..."}
-                <p class="text-xs">
+                  </div>
-                  <span class="font-semibold">Provider:</span>
+                </div>
-                  {$state.context.providerName}
-                </p>
               </div>
-            </div>
+            </a>
           </aside>
           <div class="col-span-5 w-full">
             <div class="flex justify-end space-x-4">
@@ -132,9 +131,9 @@
     </div>
   {/if}
 {:else}
-  <div class="p-10 bg-white rounded-full">
+  <div class="flex justify-center items-center w-full pb-4">
-    <div class="p-5 bg-white rounded-full animate-spin">
+    <div class="animate-spin">
-      <Icon icon="la:spinner" width="100" height="100" />
+      <Icon icon="la:spinner" width="48" height="48" />
     </div>
   </div>
 {/if}

src/lib/machines/walletMachine.ts

@@ -52,7 +52,7 @@ const walletMachine = createMachine({
                     actions: [
                         assign({
                             pkps: (_, event) => event.data,
-                        })
+                        }),
                     ],
                 },
                 onError: 'authenticated',