ui/ux: Update

- Fixed UI (wallet) reseed wallet button styling/footer. - Fixed (wallet page) coin icon sizes. - Added BSX version in footer (unlock). - Added version (Global for all pages) in render_template (http_server.py). - Added (BSX) in title (header/unlock/error/info). - Fixed dots dark/light mode (footer). - Added UX lock Rate / Amount Variable / Rate Variable discriptions (offer_new_1).
tecnovert · Aug 2, 2023 · af876fa · af876fa
1 parent 8f4b962
commit af876fa
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 30 deletions.
diff --git a/basicswap/http_server.py b/basicswap/http_server.py
@@ -131,7 +131,7 @@ def checkForm(self, post_string, name, messages):
         self.server.last_form_id[name] = form_id
         return form_data
 
-    def render_template(self, template, args_dict, status_code=200):
+    def render_template(self, template, args_dict, status_code=200, version=__version__):
         swap_client = self.server.swap_client
         if swap_client.ws_server:
             args_dict['ws_url'] = swap_client.ws_server.url
@@ -175,6 +175,8 @@ def render_template(self, template, args_dict, status_code=200):
         if self.server.msg_id_counter >= 0x7FFFFFFF:
             self.server.msg_id_counter = 0
 
+        args_dict['version'] = version
+
         self.putHeaders(status_code, 'text/html')
         return bytes(template.render(
             title=self.server.title,
@@ -381,11 +383,11 @@ def page_index(self, url_split):
         template = env.get_template('index.html')
         return self.render_template(template, {
             'refresh': 30,
-            'version': __version__,
             'summary': summary,
             'use_tor_proxy': swap_client.use_tor_proxy
         })
 
+
     def page_404(self, url_split):
         swap_client = self.server.swap_client
         summary = swap_client.getSummary()

diff --git a/basicswap/templates/error.html b/basicswap/templates/error.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
-  <title>{{ title }}</title>
+  <title>(BSX) BasicSwap - v{{ version }}</title>
 </head>
 <body>
   <h2>{{ title_str }}</h2>

diff --git a/basicswap/templates/footer.html b/basicswap/templates/footer.html
@@ -21,15 +21,15 @@
       <div class="w-full md:w-1/2 mb-6 md:mb-0">
         <div class="flex items-center">
           <div class="flex items-center">
-            <p class="mr-1 text-sm text-gray-90 dark:text-white font-medium ">© 2023~</p>
-            <p class="text-sm text-coolGray-400 dark:text-white font-medium">{{ title }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-            <p class="text-sm text-coolGray-400 dark:text-white font-medium">GUI 2.0.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
+            <p class="text-sm text-gray-90 dark:text-white font-medium">© 2023~ (BSX) BasicSwap</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
+            <p class="text-sm text-coolGray-400  font-medium">BSX: v{{ version }}</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
+            <p class="text-sm text-coolGray-400  font-medium">GUI: v2.0.2</p> <span class="w-1 h-1 mx-1.5 bg-gray-500 dark:bg-white rounded-full"></span>
             <p class="mr-2 text-sm font-bold dark:text-white text-gray-90 ">Made with </p>
             <svg 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="#f80b0b" stroke-linejoin="round">
                 <path d="M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z"></path>
               </g>
-            </svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div><!-- fix dots -->
+            </svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div>
         </div>
       </div>
       <div class="w-full md:w-1/2">

diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
@@ -86,7 +86,7 @@
 
 </script>
   <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
-  <title>{{ title }}</title>
+  <title>(BSX) BasicSwap - v{{ version }}</title>
 </head>
 <body class="dark:bg-gray-700">
   <section>

diff --git a/basicswap/templates/index.html b/basicswap/templates/index.html
@@ -3,7 +3,7 @@
  <section class="relative py-24 overflow-hidden">
   <div class="container px-4 mx-auto mb-16 md:mb-0">
    <div class="md:w-1/2 pl-4">
-    <span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">BasicSwap version: {{ version }}</span>
+    <span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">(BSX) BasicSwap v{{ version }}</span>
     <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter dark:text-white">Welcome to BasicSwap DEX</h3>
     <p class="mb-12 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 font-medium">Swap cryptocurrencies in <span class="underline">total privacy</span> with no middlemen, fees, <br> or restrictions. </p>
     <div class="flex flex-wrap mb-10 text-center md:text-left">

diff --git a/basicswap/templates/info.html b/basicswap/templates/info.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon-32.png">
-  <title>{{ title }}</title>
+  <title>(BSX) BasicSwap - v{{ version }}</title>
 </head>
 <body>
   <h2>{{ title_str }}</h2>

diff --git a/basicswap/templates/offer_new_1.html b/basicswap/templates/offer_new_1.html
@@ -326,10 +326,17 @@ <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">STEP 1</h4>
        </div>
        <input class="pl-10 hover:border-blue-500 pl-10 bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-300 dark:border-gray-400 dark:text-gray-50 dark:placeholder-white text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');">
       </div>
-      <div class="form-check form-check-inline mt-5">
-       <input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
-       <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
-      </div>
+
+    <div class="flex form-check form-check-inline mt-5">
+    <div class="flex items-center h-5">
+        <input class="form-check-input hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
+    </div>
+    <div class="ml-2 text-sm">
+        <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox1">Lock Rate</label>
+        <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Automatically adjusts the <b>You Get</b> value based on the rate you’ve entered. Without it, the rate value is automatically adjusted based on the number of coins you put in <b>You Get.</b></p>
+    </div>
+    </div>
+
      </div>
     </div>
    </div>
@@ -343,14 +350,27 @@ <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">STEP 1</h4>
     <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Options</p>
    </div>
    <div class="w-full md:flex-1 p-3">
-    <div class="form-check form-check-inline">
-     <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
-     <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
+
+<div class="flex form-check form-check-inline">
+    <div class="flex items-center h-5">
+        <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
     </div>
-    <div class="form-check form-check-inline mt-2">
-     <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
-     <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
+    <div class="ml-2 text-sm">
+        <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
+        <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different amount to the offer.</p>
     </div>
+</div>
+
+<div class="flex mt-2 form-check form-check-inline">
+    <div class="flex items-center h-5">
+        <input class="hover:border-blue-500 w-5 h-5 form-check-input text-blue-600 bg-gray-50 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-1 dark:bg-gray-500 dark:border-gray-400" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
+    </div>
+    <div class="ml-2 text-sm">
+        <label class="form-check-label text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
+        <p id="helper-checkbox-text" class="text-xs font-normal text-gray-500 dark:text-gray-300">Allow bids with a different rate to the offer.</p>
+    </div>
+</div>
+
    </div>
   </div>
  </div>

diff --git a/basicswap/templates/unlock.html b/basicswap/templates/unlock.html
@@ -23,7 +23,7 @@
   document.documentElement.classList.toggle('dark', isDarkMode);
 </script>
     <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
-    <title>{{ title }}</title>
+  <title>(BSX) BasicSwap - v{{ version }}</title>
   </head>
   <body class="dark:bg-gray-700">
     <section class="py-24 md:py-32">
@@ -102,6 +102,9 @@ <h3 class="text-left font-medium text-sm text-red-900 error_msg">Error: {{ m[1]
               <span class="text-xs font-medium dark:text-white" contenteditable="false">Need help?</span>
               <a class="inline-block text-xs font-medium text-blue-500 hover:text-blue-600 hover:underline" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank" contenteditable="false">Help / Tutorials</a>
             </p>
+            <p class="text-center">
+              <span class="text-xs font-medium text-coolGray-500 dark:text-gray-500" contenteditable="false">{{ title }} - GUI 2.0.2</span>
+            </p>      
             <input type="hidden" name="formid" value="{{ form_id }}">
           </form>
         </div>

diff --git a/basicswap/templates/wallet.html b/basicswap/templates/wallet.html
@@ -39,7 +39,7 @@
      <div class="w-full md:w-1/2 p-3">
       <h2 class="text-4xl font-bold text-white tracking-tighter">
        <span class="inline-block align-middle">
-        <img class="mr-2" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
+        <img class="mr-2 h-16" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
        </span>{{ w.name }} Wallet - <span id="total-usd-value"></span>
       </h2>
       <p class="font-normal text-coolGray-200 dark:text-white pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
@@ -206,15 +206,33 @@ <h3 class="font-medium text-sm text-red-900 error_msg">
            </table>
           </div>
          </div>
-         <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
-          <div class="w-full md:w-0/12">
-           <div class="flex flex-wrap justify-end -m-1.5">
-            <div class="w-full md:w-auto p-1.5 ml-2">
-             <input class="flex flex-wrap justify-center px-4 py-2.5 font-medium text-sm text-red-500 hover:text-red-600 border border-red-400 hover:border-red-500 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
-            </div>
-           </div>
-          </div>
+</section>
+
+
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+  <div class="pb-6 border-coolGray-100">
+   <div class="flex flex-wrap items-center justify-between -m-2">
+    <div class="w-full pt-2">
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="flex flex-wrap justify-end">
+         <div class="w-full md:w-auto p-1.5">
+             <input class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white hover:text-red border border-red-500 hover:border-red-500 hover:bg-red-600 bg-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none" type="submit" name="reseed_{{ w.cid }}" value="Reseed wallet" onclick="return confirmReseed();">
          </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
+
+
+
      {% else %}
        </tr>
      {% if w.cid == '1' %}