From 842c4f54ac12e82a3c211a6cb020d4c78f5bd426 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Fri, 26 Apr 2024 16:32:31 +0200
Subject: [PATCH] ui: Wallet alert updates

---
 basicswap/templates/style.html  | 10 +++++
 basicswap/templates/wallet.html | 74 +++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/basicswap/templates/style.html b/basicswap/templates/style.html
index 6532c59..c03d453 100644
--- a/basicswap/templates/style.html
+++ b/basicswap/templates/style.html
@@ -462,6 +462,11 @@
    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
 </svg>
 ' %}
+{% set blue_cross_close_svg = '
+<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+</svg>
+' %}
 {% set white_automation_svg = '
 <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
    <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
@@ -565,6 +570,11 @@
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
 </svg>
 ' %}
+{% set circular_update_messages_svg = '
+<svg aria-hidden="true" width="16" height="16" class="relative top-0.5" fill="#3b82f6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+   <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+</svg>
+' %}
 {% set input_down_arrow_offer_svg = '
 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 z-50" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M11.3333 6.1133C11.2084 5.98913 11.0395 5.91943 10.8633 5.91943C10.6872 5.91943 10.5182 5.98913 10.3933 6.1133L8.00001 8.47329L5.64001 6.1133C5.5151 5.98913 5.34613 5.91943 5.17001 5.91943C4.99388 5.91943 4.82491 5.98913 4.70001 6.1133C4.63752 6.17527 4.58792 6.249 4.55408 6.33024C4.52023 6.41148 4.50281 6.49862 4.50281 6.58663C4.50281 6.67464 4.52023 6.76177 4.55408 6.84301C4.58792 6.92425 4.63752 6.99799 4.70001 7.05996L7.52667 9.88663C7.58865 9.94911 7.66238 9.99871 7.74362 10.0326C7.82486 10.0664 7.912 10.0838 8.00001 10.0838C8.08801 10.0838 8.17515 10.0664 8.25639 10.0326C8.33763 9.99871 8.41136 9.94911 8.47334 9.88663L11.3333 7.05996C11.3958 6.99799 11.4454 6.92425 11.4793 6.84301C11.5131 6.76177 11.5305 6.67464 11.5305 6.58663C11.5305 6.49862 11.5131 6.41148 11.4793 6.33024C11.4454 6.249 11.3958 6.17527 11.3333 6.1133Z" fill="#8896AB"></path>
diff --git a/basicswap/templates/wallet.html b/basicswap/templates/wallet.html
index 11718a2..059b327 100644
--- a/basicswap/templates/wallet.html
+++ b/basicswap/templates/wallet.html
@@ -1,5 +1,5 @@
 {% include 'header.html' %}
-{% from 'style.html' import select_box_arrow_svg, select_box_class, circular_arrows_svg, circular_error_svg, circular_info_svg, cross_close_svg, breadcrumb_line_svg, withdraw_svg, utxo_groups_svg, create_utxo_svg, red_cross_close_svg %} 
+{% from 'style.html' import select_box_arrow_svg, select_box_class, circular_arrows_svg, circular_error_svg, circular_info_svg, cross_close_svg, breadcrumb_line_svg, withdraw_svg, utxo_groups_svg, create_utxo_svg, red_cross_close_svg, blue_cross_close_svg, circular_update_messages_svg, circular_error_messages_svg %} 
 <script src="/static/js/libs//qrcode.js"></script>
 <div class="container mx-auto">
   <section class="p-5 mt-5">
@@ -28,49 +28,59 @@
     </div>
   </section>
   {% include 'inc_messages.html' %} 
-
   {% if w.updating %}
-  <section class="py-4" id="updating" role="alert">
-    <div class="container px-4 mx-auto">
-      <div class="p-6 bg-blue-100 border border-blue-200 rounded-md">
-        <div class="flex flex-wrap justify-between items-center -m-2">
-          <div class="flex-1 p-2">
-            <div class="flex flex-wrap -m-1">
-              <div class="w-auto p-1">
-                <div class="w-auto p-1"> {{ circular_info_svg | safe }} </div>
-              </div>
-              <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-blue-900">Updating, please wait...</h3>
-              </div>
+<section class="py-4" id="messages_updating" role="alert">
+  <div class="container px-4 mx-auto">
+    <div class="p-6 text-green-800 rounded-lg bg-blue-50 border border-blue-500 dark:bg-gray-500 dark:text-blue-400 rounded-md">
+      <div class="flex flex-wrap justify-between items-center -m-2">
+        <div class="flex-1 p-2">
+          <div class="flex flex-wrap -m-1">
+            <div class="w-auto p-1">
+            {{ circular_update_messages_svg | safe }}
             </div>
-          </div>
-          <div class="w-auto p-2"> <button type="button" class="ml-auto bg-blue-100 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#updating" aria-label="Close"> <span class="sr-only">Close</span> {{ cross_close_svg | safe }} </button> </div>
+            <ul class="ml-4 mt-1">
+                <li class="font-semibold text-sm text-blue-500 error_msg"><span class="bold">UPDATING:</span></li>
+                <li class="font-medium text-sm text-blue-500">Please wait...</li>
+            </ul>
+           </div>             
+        </div>
+        <div class="w-auto p-2">
+          <button type="button" class="ms-auto bg-blue-50 text-blue-500 rounded-lg focus:ring-0 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 focus:outline-none dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700" data-dismiss-target="#messages_updating" aria-label="Close"><span class="sr-only">Close</span>
+            {{ blue_cross_close_svg | safe }}
+          </button>
         </div>
       </div>
     </div>
-  </section>
+  </div>
+</section>
   {% endif %}
   {% if w.havedata %}
   {% if w.error %} 
-  <section class="py-4" id="error" role="alert">
-    <div class="container px-4 mx-auto">
-      <div class="p-6 bg-red-100 border border-red-200 rounded-md">
-        <div class="flex flex-wrap justify-between items-center -m-2">
-          <div class="flex-1 p-2">
-            <div class="flex flex-wrap -m-1">
-              <div class="w-auto p-1"> {{ circular_error_svg | safe }} </div>
-              <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-red-900 error_msg">
-                  <p class="error_msg">Error: {{ w.error }}</p>
-                </h3>
-              </div>
+<section class="py-4" id="messages_error" role="alert">
+  <div class="container px-4 mx-auto">
+    <div class="p-6 text-green-800 rounded-lg bg-red-50 border border-red-400 dark:bg-gray-500 dark:text-red-400 rounded-md">
+      <div class="flex flex-wrap justify-between items-center -m-2">
+        <div class="flex-1 p-2">
+          <div class="flex flex-wrap -m-1">
+            <div class="w-auto p-1">
+              {{ circular_error_messages_svg | safe }}
             </div>
-          </div>
-          <div class="w-auto p-2"> <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none" data-dismiss-target="#error" aria-label="Close"> <span class="sr-only">Close</span> {{ red_cross_close_svg | safe }} </button> </div>
+            <ul class="ml-4 mt-1">
+                <li class="font-semibold text-sm text-red-500 error_msg"><span class="bold">ERROR:</span></li>
+                <li class="font-medium text-sm text-red-500 error_msg">{{ w.error }}</li>
+            </ul>
+      </div>
+        </div>
+        <div class="w-auto p-2">
+          <button type="button" class="ml-auto bg-red-100 text-red-500 rounded-lg focus:ring-0 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 focus:outline-none inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#messages_error" aria-label="Close">
+            <span class="sr-only">Close</span>
+            {{ red_cross_close_svg | safe }}
+          </button>
         </div>
       </div>
     </div>
-  </section>
+  </div>
+</section>
   {% else %}
   <form method="post" autocomplete="off">
     <section>