Merge remote-tracking branch 'crz/master' into dev

basicswap/__init__.py

@@ -1,3 +1,3 @@
 name = "basicswap"
 
-__version__ = "0.11.60"
+__version__ = "0.11.61"

basicswap/static/css/libs/dd.min.css

@@ -1,179 +0,0 @@
-/*! * 
-/** * * MSDropdown - dd.js * * @author: Marghoob Suleman * * @website: https://www.marghoobsuleman.com/ * * @version: 4.0.2 * * @date: Wed Oct 13 2021 15:19:38 GMT+0530 (India Standard Time) * * msDropdown is free web component: you can redistribute it and/or modify * * it under the terms of the either the MIT License or the Gnu General Public License (GPL) Version 2 * * / */
-/*! */
- .ms-pr {
-     position: relative;
-     border-width: 1px;
-     border-color: #fff
-}
- .ms-effect:active {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-effect:focus {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-dd {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #d1d5db;
-     background: none
-}
- .ms-list-option:active {
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #3b82f6;
-     outline: none !important
-}
- .ms-dd .ms-value-input {
-     left: 20px;
-     position: absolute;
-     top: 10px;
-     width: 50% 
-}
- .ms-dd .ms-dd-header {
-     c cursor: pointer;
-     min-height: 35px;
-     position: relative;
-     width: 100%;
-}
- .ms-dd .ms-dd-header .option-selected {
-     color: #333f51;
-     display: block;
-     overflow: hidden;
-     padding: 9px 19px 9px 9px;
-     pointer-events: none;
-     border-radius: 0.5rem;
-     border-width: 1px;
-     border-color: #f9fafb;
-     background: none
-}
- .ms-dd .ms-dd-header .ms-list-counter, .ms-dd .ms-dd-header input[type=checkbox] {
-     display: none 
-}
- .ms-dd .ms-dd-header .ms-header-counter {
-     color: #0e76a8
-}
- .ms-dd .ms-dd-header .ms-filter-box {
-     box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-     padding: 6px 10px;
-     min-height: 44px
-}
- .ms-dd .ms-dd-option-image, .ms-dd .ms-dd-selected-img {
-     margin-right: 5px;
-     max-width: 40px;
-     vertical-align: middle 
-}
- .ms-dd .ms-dd-arrow {
-     height: 0;
-     margin-top: -3px;
-     position: absolute;
-     right: 10px;
-     top: 50%;
-     width: 0 
-}
- .ms-dd .ms-dd-arrow.ms-dd-pointer-down {
-     display: none 
-}
- .ms-dd .ms-dd-arrow.ms-dd-pointer-up {
-     display: none
-}
- .ms-dd .ms-options {
-     background: #fff;
-     border: 1px solid #767676;
-     box-shadow: 0 1px 5px #ddd;
-     display: none;
-     list-style: none;
-     margin: 0;
-     overflow: auto;
-     padding: 0;
-     position: absolute;
-     width: 100%;
-     z-index: 9999
-}
- .ms-dd .ms-list-option, .ms-dd .ms-optgroup ul .ms-list-option {
-     align-items: center;
-     color: #333;
-     cursor: pointer;
-     display: flex;
-     justify-content: flex-start;
-     overflow: hidden;
-     padding: 10px;
-     position: relative;
-     text-decoration: none
-}
- .ms-dd .ms-list-option input[type=checkbox], .ms-dd .ms-optgroup ul .ms-list-option input[type=checkbox] {
-     margin-right: 5px;
-     vertical-align: middle 
-}
- .ms-dd .ms-list-option:last-child, .ms-dd .ms-optgroup ul .ms-list-option:last-child {
-     border-bottom: none 
-}
- .ms-dd .ms-list-option:hover, .ms-dd .ms-optgroup ul .ms-list-option:hover {
-     background: #e0e0e6;
-     color: #000 
-}
- .ms-dd .ms-list-option.option-selected, .ms-dd .ms-optgroup ul .ms-list-option.option-selected {
-     background: #f9fafb 
-}
- .ms-dd .ms-list-option.ico-align-right .ms-dd-option-image, .ms-dd .ms-list-option.ico-align-right .ms-dd-selected-img, .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-option-image, .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-selected-img {
-     order: 2 
-}
- .ms-dd .ms-list-option.disabled, .ms-dd .ms-list-option:disabled, .ms-dd .ms-optgroup ul .ms-list-option.disabled, .ms-dd .ms-optgroup ul .ms-list-option:disabled {
-     cursor: default;
-     opacity: .4 
-}
- .ms-dd .ms-list-option .ms-dd-desc, .ms-dd .ms-optgroup ul .ms-list-option .ms-dd-desc {
-     color: #aaa;
-     display: block;
-     line-height: 1.5em;
-     overflow: hidden;
-     text-shadow: 0 1px .5px #fff 
-}
- .ms-dd .ms-header-middle-content, .ms-dd .ms-middle {
-     display: -webkit-box;
-     display: -ms-flexbox;
-     display: flex;
-     -webkit-box-align: center;
-     -ms-flex-align: center;
-     align-items: center;
-     font-size: 0.875rem; 
-     min-width: 100px
-}
- .ms-dd.disabled, .ms-dd:disabled {
-     cursor: default;
-     opacity: .4;
-     pointer-events: none 
-}
- .ms-dd .ms-optgroup-padding {
-     padding: 10px 10px 0 
-}
- .ms-dd .ms-optgroup {
-     display: block 
-}
- .ms-dd .ms-optgroup:hover {
-     background: #fff;
-     color: #000 
-}
- .ms-dd .ms-optgroup ul {
-     margin: 0;
-     padding: 0 
-}
- .ms-dd .ms-optgroup ul .ms-list-option {
-     padding-left: 20px 
-}
- .ms-dd .ms-optgroup ul:last-child {
-}
- .ms-dd .ms-dd-option-content {
-     width: 100% 
-}
- .ms-value-input {
-     display:none;
-}

basicswap/static/css/style.css

@@ -16,16 +16,12 @@
 
 .floatright
 {
-  position: absolute;
+  position: fixed;
   top:1.25rem;
   right:1.25rem;
   z-index: 9999;
 }
 
-.error
-{
-}
-
 .error_msg
 {
   color:red;
@@ -56,3 +52,63 @@
         visibility:hidden;
     }
 }
+
+.custom-select .select {
+    appearance: none;
+    background-image: url('/static/images/other/coin.png');
+    background-position: 10px center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+.custom-select select::-webkit-scrollbar {
+  width: 0;
+}
+
+.custom-select .select option {
+  padding-left: 0;
+  text-indent: 0;
+  background-repeat: no-repeat;
+  background-position: 0 50%;
+}
+
+.custom-select .select option.no-space {
+  padding-left: 0;
+}
+
+.custom-select .select option[data-image] {
+  background-image: url('');
+}
+
+.custom-select .select-icon {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+}
+
+.custom-select .select-image {
+  display: none;
+  margin-top: 10px;
+}
+
+.custom-select .select:focus + .select-dropdown .select-image {
+  display: block;
+}
+
+
+/* Disable opacity on disabled form elements in Chrome */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  select:disabled,
+  input:disabled,
+  textarea:disabled {
+    opacity: 1 !important;
+  }
+}
+
+
+
+/* Add this to your existing CSS file */
+.error {
+  border: 1px solid red !important;
+}

basicswap/static/js/coin_icons.js

@@ -0,0 +1,70 @@
+// Define a cache object to store selected option data
+const selectCache = {};
+
+// Function to update the cache with the selected option data for a given select element
+function updateSelectCache(select) {
+  const selectedOption = select.options[select.selectedIndex];
+  const image = selectedOption.getAttribute('data-image');
+  const name = selectedOption.textContent.trim();
+  selectCache[select.id] = { image, name };
+}
+
+// Function to set the selected option and associated image and name for a given select element
+
+
+function setSelectData(select) {
+  const selectedOption = select.options[select.selectedIndex];
+  const image = selectedOption.getAttribute('data-image') || 'https://dummyimage.com/20x20/000/fff'; // set a default image URL
+  const name = selectedOption.textContent.trim();
+  if (image) {
+    select.style.backgroundImage = `url(${image})`;
+    select.nextElementSibling.querySelector('.select-image').src = image;
+  } else {
+    select.style.backgroundImage = '';
+    select.nextElementSibling.querySelector('.select-image').src = '';
+  }
+  select.nextElementSibling.querySelector('.select-name').textContent = name;
+  updateSelectCache(select);
+}
+
+
+// Function to get the selected option data from cache for a given select element
+function getSelectData(select) {
+  return selectCache[select.id] || {};
+}
+
+// Update all custom select elements on the page
+const selects = document.querySelectorAll('.custom-select .select');
+selects.forEach((select) => {
+  // Set the initial select data based on the cached data (if available) or the selected option (if any)
+  const cachedData = getSelectData(select);
+  if (cachedData.image) {
+    select.style.backgroundImage = `url(${cachedData.image})`;
+    select.nextElementSibling.querySelector('.select-image').src = cachedData.image;
+  }
+  if (cachedData.name) {
+    select.nextElementSibling.querySelector('.select-name').textContent = cachedData.name;
+  }
+  if (select.selectedIndex >= 0) {
+    setSelectData(select);
+  }
+
+  // Add event listener to update select data when an option is selected
+  select.addEventListener('change', () => {
+    setSelectData(select);
+  });
+});
+
+// Hide the select image and name on page load
+const selectIcons = document.querySelectorAll('.custom-select .select-icon');
+const selectImages = document.querySelectorAll('.custom-select .select-image');
+const selectNames = document.querySelectorAll('.custom-select .select-name');
+selectIcons.forEach((icon) => {
+  icon.style.display = 'none';
+});
+selectImages.forEach((image) => {
+  image.style.display = 'none';
+});
+selectNames.forEach((name) => {
+  name.style.display = 'none';
+});

basicswap/static/js/coin_icons_2.js

@@ -0,0 +1,56 @@
+// Define the function for setting up the custom select element
+function setupCustomSelect(select) {
+  const options = select.querySelectorAll('option');
+  const selectIcon = select.parentElement.querySelector('.select-icon');
+  const selectImage = select.parentElement.querySelector('.select-image');
+
+  // Set the background image for each option that has a data-image attribute
+  options.forEach(option => {
+    const image = option.getAttribute('data-image');
+    if (image) {
+      option.style.backgroundImage = `url(${image})`;
+    }
+  });
+
+  // Set the selected option based on the stored value
+  const storedValue = localStorage.getItem(select.name);
+  if (storedValue) {
+    const selectedOption = select.querySelector(`option[value="${storedValue}"]`);
+    if (selectedOption) {
+      select.value = storedValue;
+      const image = selectedOption.getAttribute('data-image');
+      if (image) {
+        select.style.backgroundImage = `url(${image})`;
+        selectImage.src = image;
+      }
+    }
+  }
+
+  // Update the select element and image when the user makes a selection
+  select.addEventListener('change', () => {
+    const selectedOption = select.options[select.selectedIndex];
+    const image = selectedOption.getAttribute('data-image');
+    if (image) {
+      select.style.backgroundImage = `url(${image})`;
+      selectImage.src = image;
+    } else {
+      select.style.backgroundImage = '';
+      selectImage.src = '';
+    }
+
+    // Save the selected value to localStorage
+    localStorage.setItem(select.name, select.value);
+  });
+
+  // Hide the select icon and image on page load
+  selectIcon.style.display = 'none';
+  selectImage.style.display = 'none';
+}
+
+// Call the setupCustomSelect function for each custom select element
+const customSelects = document.querySelectorAll('.custom-select select');
+customSelects.forEach(select => {
+  setupCustomSelect(select);
+});
+
+

basicswap/static/js/new_offer.js

@@ -1,8 +1,7 @@
-
 window.addEventListener('DOMContentLoaded', (event) => {
   let err_msgs = document.querySelectorAll('p.error_msg');
   for (let i = 0; i < err_msgs.length; i++) {
-        err_msg = err_msgs[i].innerText
+    err_msg = err_msgs[i].innerText;
     if (err_msg.indexOf('coin_to') >= 0 || err_msg.indexOf('Coin To') >= 0) {
       e = document.getElementById('coin_to');
       e.classList.add('error');
@@ -23,5 +22,19 @@ window.addEventListener('DOMContentLoaded', (event) => {
       e = document.getElementById('amt_bid_min');
       e.classList.add('error');
     }
+    if (err_msg.indexOf('Select coin you send') >= 0) {
+      e = document.getElementById('coin_from').parentNode;
+      e.classList.add('error');
+    }
   }
+
+  // remove error class on input or select focus
+  let inputs = document.querySelectorAll('input.error');
+  let selects = document.querySelectorAll('select.error');
+  let elements = [...inputs, ...selects];
+  elements.forEach((element) => {
+    element.addEventListener('focus', (event) => {
+      event.target.classList.remove('error');
+    });
+  });
 });

basicswap/templates/404.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/404">404</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/404">404</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -25,15 +27,15 @@
   </div>
  </section>
 {% include 'inc_messages.html' %}
-  <section class="relative py-24 md:py-40 bg-white">
+  <section class="relative py-24 md:py-40">
     <div class="relative z-10 container px-4 mx-auto">
       <div class="flex flex-wrap items-center -mx-4">
         <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
-          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block mb-6 px-3 py-1 font-semibold bg-blue-100 rounded-full text-sm">Error 404</span>
-            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter">Oh no! Error 404</h2>
-            <p class="mb-6 text-lg md:text-xl text-coolGray-500">Something went wrong, so this page is broken.</p>
+          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <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">Error 404</span>
+            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter dark:text-white">Oh no! Error 404</h2>
+            <p class="mb-6 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 ">Something went wrong, so this page is broken.</p>
             <div class="flex flex-wrap">
-              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go back to Homepage</a></div>
+              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go Back</a></div>
               <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div>
               <!-- todo add last URL page visit -->
             </div>

basicswap/templates/active.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/active">Swaps In Progress</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/active">Swaps In Progress</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,66 +28,94 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center">
+    <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Swaps in Progress</h2>
-            <p class="font-semibold text-coolGray-200">Your swaps that are currently in progress.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Your swaps that are currently in progress.</p>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
       {% if refresh %}
-            <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
       {% else %}
-            <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/active" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span></a>
+       </svg>
+       <span>Refresh</span>
+      </a>
       {% endif %}
       </div>
     </div>
    </div>
   </div>
  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
+ <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 px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6"> Bid ID </th>
-                      <th scope="col" class="py-3 px-6"> Offer ID </th>
-                      <th scope="col" class="py-3 px-6"> Bid Status </th>
-                      <th scope="col" class="py-4 px-7"> ITX Status </th>
-                      <th scope="col" class="py-3 px-7"> PTX Status </th>
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID </span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status </span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status </span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status </span>
+              </div>
+             </th>
             </tr>
            </thead>
-                  <tbody>
            {% for s in active_swaps %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ s[0] }}>{{ s[0] }}</a></td>
-                      <td class="py-4 px-6 text-xs monospace"><a href=/offer/{{ s[1] }}>{{ s[1] }}</a></td>
-                      <td class="py-4 px-6">{{ s[2] }}</td>
-                      <td class="py-4 px-6">{{ s[3] }}</td>
-                      <td class="py-4 px-6">{{ s[4] }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 monospace">
+             <a href=/bid/{{ s[0] }}>{{ s[0] }}</a>
+            </td>
+            <td class="py-3 px-6 monospace">
+             <a href=/offer/{{ s[1] }}>{{ s[1] }}</a>
+            </td>
+            <td class="py-3 px-6">{{ s[2] }}</td>
+            <td class="py-3 px-6">{{ s[3] }}</td>
+            <td class="py-3 px-6">{{ s[4] }}</td>
            </tr>
            {% endfor %}
-                </tbody>
           </table>
          </div>
         </div>
@@ -93,6 +123,8 @@
       </div>
      </div>
     </div>
+   </div>
+  </div>
  </section>
 </div>
 {% include 'footer.html' %}

basicswap/templates/automation_strategies.html

@@ -1,74 +1,105 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
-          </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
     </ul>
+    </ul>
    </div>
   </div>
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
-        <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/elements/wave.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategies</h2>
-            <p class="font-semibold text-coolGray-200"></p>
-          </div>
-          <div class="w-full md:w-1/2 p-3">
-            <a id="refresh" href="/newautomationstrategy">
-              <button class="block md:ml-auto px-5 py-3 font-medium text-lcg text-white bg-blue-500 hover:bg-blue-600 rounded-md focus:ring-0 focus:outline-none">Create New Strategy</button>
+      <p class="font-normal text-coolGray-200 dark:text-white"></p>
+     </div>
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+      <a href="/newautomationstrategy" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       <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">
+         <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#ffffff"></line>
+         <line x1="3" y1="1" x2="7" y2="1" stroke="#fffffwww"></line>
+         <line data-cap="butt" x1="19" y1="1" x2="19" y2="6" stroke="#ffffff"></line>
+         <line x1="17" y1="1" x2="21" y2="1" stroke="#ffffff"></line>
+         <rect x="6" y="15" width="12" height="4" stroke="#ffffff"></rect>
+         <line data-cap="butt" x1="10" y1="19" x2="10" y2="15" stroke="#ffffff"></line>
+         <line data-cap="butt" x1="14" y1="19" x2="14" y2="15" stroke="#ffffff"></line>
+         <line x1="6" y1="11" x2="8" y2="11" stroke="#ffffff"></line>
+         <line x1="16" y1="11" x2="18" y2="11" stroke="#fff"></line>
+         <polygon points="23 6 5 6 1 6 1 23 23 23 23 6"></polygon>
+        </g>
+       </svg>
+       <span>Create New Strategy</span>
       </a>
      </div>
     </div>
    </div>
   </div>
-  </section> {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ </section>
+ {% include 'inc_messages.html' %}
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
       <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Filter</th>
-                        <th scope="col" class="py-3 px-6"></th>
-                        <th scope="col"></th>
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Filters</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96"> Sort by: </td>
-                      <td class="py-4 bold w-96">
-                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Sort by:</td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="sort_by">
                <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
               </select>
              </td>
-                      <td class="py-4 px-6 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir">
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="sort_dir">
                <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
                <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
               </select>
@@ -77,58 +108,83 @@
            </table>
           </div>
          </div>
-            <div class="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">
-                    <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                      </svg> <span>Page Back</span> </button>
-                  </div>
-                  <div class="flex items-center">
-                    <div class="w-full md:w-auto p-1.5">
-                      <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
         </div>
        </div>
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
-                      <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                      </svg>
-                    </button>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5 ml-2">
+           <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+              <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+              <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+              <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+              <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
+              <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+              <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+              <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+             </g>
+            </svg> Clear</button>
           </div>
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">        <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper">
+           <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
               <rect x="2" y="2" width="7" height="7"></rect>
               <rect x="15" y="15" width="7" height="7"></rect>
               <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
+              <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
              </g>
-                            </svg>  Clear Filters</button>
+            </svg>Apply Filters</button>
           </div>
-                               <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
          </div>
         </div>
        </div>
       </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </form>
-            <div class="container px-0 mx-auto mt-10">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Name</th>
-                      <th scope="col" class="py-3">Type</th>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Name</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+              </div>
+             </th>
             </tr>
            </thead>
            {% for s in strategies %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96"> <a class="monospace bolder-t" href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a> </td>
-                    <td class="py-4 pr-5">{{ s[2] }} </td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold monospace">
+             <a href=/automationstrategy/{{ s[0] }}>{{ s[1] }}</a>
+            </td>
+            <td class="py-3 px-6">{{ s[2] }}</td>
            </tr>
            {% endfor %}
           </table>
@@ -136,9 +192,49 @@
         </div>
        </div>
       </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
+          <div class="w-full md:w-auto p-1.5">
+           <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+            <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+            </svg>
+            <span>Page Back</span>
+           </button>
+          </div>
+          <div class="flex items-center">
+           <div class="w-full md:w-auto p-1.5">
+            <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+           </div>
+          </div>
+          <div class="w-full md:w-auto p-1.5">
+           <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+            <span>Page Forwards</span>
+            <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+            </svg>
+           </button>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
    </div>
   </div>
  </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+ </form>
 </div>
 {% include 'footer.html' %}
 </div>

basicswap/templates/automation_strategy.html

@@ -1,109 +1,164 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
-          </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">ID: {{ strategy_id }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">ID: <!-- todo ID here {{ strategy_id }} --></a>
+     </li>
+    </ul>
     </ul>
    </div>
   </div>
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2></div>
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Automation Strategy {{ strategy_id }}</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">ID: <!-- todo ID here  {{ strategy_id }} -->
+      </p>
+     </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2 text-center ">
+ <section>
   <form method="post" autocomplete="off">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Option</th>
-                      <th scope="col" class="py-3">Type</th>
-                      <th scope="col"></th>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Label</td>
-                    <td>{{ strategy.label }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">{{ strategy.label }}</td>
             </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Type</td>
-                    <td>{{ strategy.type }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Type</td>
+             <td class="py-3 px-6">{{ strategy.type }}</td>
             </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Only known identities</td>
-                    <td>{{ strategy.only_known_identities }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Only known identities</td>
+             <td class="py-3 px-6">{{ strategy.only_known_identities }}</td>
             </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">Data</td>
-                    <td class="py-4 pr-5">
-                      <textarea name="data" class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.data }}</textarea>
-                      <tr class="bg-white border-t hover:bg-gray-50">
-                        <td class="py-4 px-6 bold w-96">Notes</td>
-                        <td class="py-4 pr-5">
-                          <textarea name="note" class="outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="5" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.note }}</textarea>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Data</td>
+             <td class="py-3 px-6">
+              <textarea name="data" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 monospace" rows="20" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.data }}</textarea>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea name="note" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 monospace" rows="20" {% if not show_edit_form %}readonly{% endif %}>{{ strategy.note }}</textarea>
              </td>
             </tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
           {% if show_edit_form %}
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+           <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply</button>
           </div>
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="cancel" value="Cancel" type="submit"class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Cancel</button>
-                  </div>
-                  {% else %}
-                  <div class="w-full md:w-auto p-1.5">
+           <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+            <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round">
+             <line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line>
+             <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line>
+             <circle cx="12" cy="12" r="11"></circle>
+            </g>
+            </svg>Cancel</button>
+          </div> {% else %} <div class="w-full md:w-auto p-1.5">
            <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                    <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg>Edit</button>
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line>
+              <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line>
+              <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon>
+             </g>
+            </svg>Edit</button>
           </div>
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> <span>Back</span> </a>
+           <a href="/automation" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+              <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+              <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>
+            <span>Back</span>
+           </a>
           </div>
           {% endif %}
+          <input type="hidden" name="formid" value="{{ form_id }}">
+          </form>
+         </div>
         </div>
        </div>
       </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
      </div>
     </div>
    </div>

basicswap/templates/automation_strategy_new.html

@@ -1,46 +1,53 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+   <section class="p-5 mt-5">
     <div class="flex flex-wrap items-center -m-2">
      <div class="w-full md:w-1/2 p-2">
       <ul class="flex flex-wrap items-center gap-x-3 mb-2">
        <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
          <p>Home</p>
         </a>
-          </li>
        <li>
         <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
         </svg>
        </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/automation">Automation Strategies</a></li>
+       <li>
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/automation">Automation Strategies</a>
+       </li>
        <li>
         <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
         </svg>
        </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newautomationstrategy">New</a></li>
+       <li>
+        <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newautomationstrategy">New</a>
+       </li>
+      </ul>
       </ul>
      </div>
     </div>
    </section>
    <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+     <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
       <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
       <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
       <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
       <div class="relative z-20 flex flex-wrap items-center -m-3">
        <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy (todo)</h2></div>
+        <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">New Automation Strategy</h2>
+        <p class="font-normal text-coolGray-200 dark:text-white">Todo <!-- todo -->
+        </p>
+       </div>
       </div>
      </div>
     </div>
    </section>
    {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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 text-center "></div>

basicswap/templates/bid.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,49 +14,49 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Bids</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Bids</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="{{ bid_id }}">BID ID: {{ bid_id }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="{{ bid_id }}">BID ID: {{ bid_id }}</a>
+     </li>
     </ul>
    </div>
   </div>
  </section>
-  <section class="py-4">
+ <section class="py-3">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid
-              {% if debug_mode == true %}
-              (Debug: bid template)
-              {% endif %}
-            </h2>
-            <p class="font-semibold text-coolGray-200">Bid ID: {{ bid_id }}</p>
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Bid {% if debug_mode == true %} (Debug: bid template) {% endif %}</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Bid ID: {{ bid_id }}</p>
      </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            {% if refresh %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
-              {% else %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a> {% else %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span> </a>
+       </svg>
+       <span>Refresh</span>
+      </a>
     {% endif %}
       </div>
     </div>
@@ -64,259 +64,407 @@
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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 px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-1/3">Details</th>
-                      <th scope="col"></th>
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+              </div>
+             </th>
             </tr>
            </thead>
            {% if data.was_sent == 'True' %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Swap</td>
-                    <td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Swap</td>
+            <td class="py-3 px-6">
              <div class="content flex py-2">
               <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
               <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
-                      <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path></svg>
-                       <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
+               <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
+              </svg>
+              <span class="text-xs bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
              </div>
             </td>
            </tr>
            {% else %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Swap</td>
-                    <td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Swap</td>
+            <td class="py-3 px-6">
              <div class="content flex py-2">
               <span class="bold">{{ data.amt_from }} {{ data.ticker_from }}</span>
               <svg aria-hidden="true " class="w-5 h-5 ml-3 mr-3" fill="currentColor " viewBox="0 0 20 20 " xmlns="http://www.w3.org/2000/svg ">
-                      <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path></svg>
+               <path fill-rule="evenodd " d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z " clip-rule="evenodd "></path>
+              </svg>
               <span class="bold">{{ data.amt_to }} {{ data.ticker_to }}</span>
              </div>
             </td>
            </tr>
            {% endif %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Bid Rate</td>
-                    <td>{{ data.bid_rate }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Bid Rate</td>
+            <td class="py-3 px-6">{{ data.bid_rate }}</td>
            </tr>
            {% if data.was_sent == 'True' %}
-                   <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Send </td>
-                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">You Send</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
-                    </span> {{ data.coin_to }} </td>
+             </span>{{ data.coin_to }}
+            </td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Get</td>
-                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">You Get</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
-                    </span> {{ data.coin_from }} </td>
-                  </tr>
-                  {% else %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Send</td>
-                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+             </span>{{ data.coin_from }}
+            </td>
+           </tr> {% else %} <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">You Send</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
-                    </span> {{ data.coin_from }} </td>
+             </span>{{ data.coin_from }}
+            </td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">You Get</td>
-                    <td> <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">You Get</td>
+            <td class="py-3 px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
-                    </span> {{ data.coin_to }} </td>
-                  </tr>
-                  {% endif %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Bid State</td>
-                    <td>{{ data.bid_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">State Description </td>
-                    <td>{{ data.state_description }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">ITX State</td>
-                    <td>{{ data.itx_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">PTX State</td>
-                    <td>{{ data.ptx_state }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Offer</td>
-                    <td><a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a></td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Address From</td>
-                    <td><a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
+             </span>{{ data.coin_to }}
+            </td>
+           </tr> {% endif %} <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Bid State</td>
+            <td class="py-3 px-6">{{ data.bid_state }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">State Description </td>
+            <td class="py-3 px-6">{{ data.state_description }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Offer</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold select-all" href="/offer/{{ data.offer_id }}">{{ data.offer_id }}</a>
+            </td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Proof of Funds</td>
-                    <td>{{ data.proof_address }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Address From</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold select-all" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}
+            </td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
              <svg alt="" class="w-5 h-5 rounded-full ml-5" 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="#6b7280" stroke-linejoin="round">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3B82F6" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#3B82F6"></polyline>
               </g>
              </svg>
-                      <div class="py-4 pl-2 bold">
+             <div class="py-3 pl-2 bold">
               <div>Created At</div>
              </div>
             </td>
-                    <td>{{ data.created_at }}</td>
+            <td class="py-3 px-6">{{ data.created_at }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
              <svg alt="" class="w-5 h-5 rounded-full  ml-5" 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="#6b7280" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11"></circle>
                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
               </g>
              </svg>
-                      <div class="py-4 pl-2 bold">
+             <div class="py-3 pl-2 bold">
               <div>Expired At</div>
              </div>
             </td>
-                    <td>{{ data.expired_at }}</td>
+            <td class="py-3 px-6">{{ data.expired_at }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Sent</td>
-                    <td>{{ data.was_sent }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Sent</td>
+            <td class="py-3 px-6">{{ data.was_sent }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Received</td>
-                    <td>{{ data.was_received }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Received</td>
+            <td class="py-3 px-6">{{ data.was_received }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx</td>
-                    <td class="monospace">{{ data.initiate_tx }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Initiate Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Conf</td>
-                    <td>{{ data.initiate_conf }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Initiate Conf</td>
+            <td class="py-3 px-6">{{ data.initiate_conf }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx</td>
-                    <td class="monospace">{{ data.participate_tx }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Participate Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Conf</td>
-                    <td>{{ data.participate_conf }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Participate Conf</td>
+            <td class="py-3 px-6">{{ data.participate_conf }}</td>
            </tr>
            {% if data.show_txns %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx Refund</td>
-                    <td class="monospace">{{ data.initiate_tx_refund }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Initiate Tx Refund</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx_refund }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx Refund</td>
-                    <td class="monospace">{{ data.participate_tx_refund }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Participate Tx Refund</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx_refund }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Initiate Tx Spend Tx</td>
-                    <td class="monospace">{{ data.initiate_tx_spend }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Initiate Tx Spend Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.initiate_tx_spend }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Participate Tx Spend Tx</td>
-                    <td class="monospace">{{ data.participate_tx_spend }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Participate Tx Spend Tx</td>
+            <td class="py-3 px-6 monospace">{{ data.participate_tx_spend }}</td>
            </tr>
            {% endif %}
           </table>
          </div>
         </div>
-            <section class="bg-white p-6">
+        </table>
+       </div>
+      </div>
+     </div>
+ </section>
+ <section class="p-6">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Old states</h4> </div>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Old states</h4>
+   </div>
   </div>
  </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Old States</th>
-                      <th scope="col">Set at Time</th>
+ <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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Set at time</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Old states</span>
+              </div>
+             </th>
             </tr>
            </thead>
            {% for s in old_states %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-3 px-6 w-1/3 bold"> {{ s[1] }}</td>
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
-                      <svg alt="" class="w-5 h-5 rounded-full  mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center whitespace-nowrap">
+             <svg alt="" class="w-5 h-5 rounded-full  ml-5" 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="#6b7280" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11"></circle>
                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
               </g>
              </svg>
-                      <div class="py-4 pr-2">
+             <div class="py-3 pl-2 bold">
               <div>{{ s[0] | formatts }}</div>
              </div>
             </td>
+            <td class="py-3 px-6">{{ s[1] }}</td>
            </tr>
            {% endfor %}
           </table>
          </div>
-            </div> {% if data.events %}
-            <section class="bg-white p-6">
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% if data.events %}
+ <section class="p-6">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Events</h4> </div>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Events</h4>
+   </div>
   </div>
  </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="w-1/3 py-3 px-6 bold">Time</th>
-                      <th scope="col">Events</th>
+ <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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Time</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Events</span>
+              </div>
+             </th>
             </tr>
            </thead>
            {% for e in data.events %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td scope="row" class="flex items-center px-46 whitespace-nowrap">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="flex items-center px-46 whitespace-nowrap">
              <svg alt="" class="w-5 h-5 rounded-full  ml-5" 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="#6b7280" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11"></circle>
                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
               </g>
              </svg>
-                      <div class="py-4 pl-2 bold">
+             <div class="py-3 pl-2 bold">
               <div>{{ e.at | formatts }}</div>
              </div>
             </td>
-                    <td>{{ e.desc }}</td>
-                  </tr> {% endfor %} </table>
+            <td class="py-3 px-6">{{ e.desc }}</td>
+           </tr>
+           {% endfor %}
+          </table>
+         </div>
+        </div>
+       </div>
       </div>
      </div>
+    </div>
+   </div>
+  </div>
+ </section>
  {% else %}
  {% endif %}
-            <form method="post">
-              <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">
+ <form method="post"> {% if data.show_bidder_seq_diagram %} <section class="p-6">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Bidder Sequence Diagram</h4>
+    </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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <div class="overflow-x-auto items-center justify-center relative">
+            <div class="flex items-center justify-center min-h-screen">
+             <div class="flex items-center justify-between text-white">
+              <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg">
+             </div>
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  {% endif %}
+  {% if data.show_offerer_seq_diagram %}
+  <section class="p-6">
+   <div class="flex flex-wrap items-center">
+    <div class="w-full">
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Offerer Sequence Diagram</h4>
+    </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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <div class="overflow-x-auto items-center justify-center relative">
+            <div class="flex items-center justify-center min-h-screen">
+             <div class="flex items-center justify-between text-white">
+              <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg">
+             </div>
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  {% endif %}
   {% if edit_bid %}
-                    <table class="mt-1">
-                      <tr>
-                        <td class="pr-2 bold">Change Bid State:</td>
-                        <td>
+  <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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Option</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </th>
+             </tr>
+            </thead>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Change Bid State:</td>
+             <td class="py-3 px-6">
               <div class="relative">
                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="new_state">
+               <select class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-" name="new_state">
                 {% for s in data.bid_states %}
                 <option value="{{ s[0] }}" {% if data.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
                 {% endfor %}
@@ -325,14 +473,14 @@
              </td>
             </tr>
             {% if data.debug_ui == true %}
-                      <tr>
-                        <td class="py-6 pr-2 bold">Debug Option:</td>
-                        <td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Debug Option</td>
+             <td class="py-3 px-6">
               <div class="relative">
                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
+               <select class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-" name="debugind">
                 <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
                 {% for a in data.debug_options %}
                 <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
@@ -343,109 +491,99 @@
             </tr>
               {% endif %}
            </table>
-                    <div class="w-full md:w-auto p-1.5 ml-2">
-                      <button name="edit_bid_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
           </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </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">
-                      <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
- <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit </button>
+            <button name="edit_bid_cancel" value="Cancel" type="submit" class="lex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Cancel</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5">
+            <button name="edit_bid_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Submit Edit</button>
            </div>
            {% else %}
+           <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">
                     {% if data.show_bidder_seq_diagram %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Bidder Sequence Diagram </button>
+                     <button name="hide_bidder_seq_diagram" type="submit" value="Hide Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Hide Bidder Sequence Diagram</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Bidder Sequence Diagram </button>
+                     <button name="show_bidder_seq_diagram" type="submit" value="Show Bidder Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Show Bidder Sequence Diagram</button>
                     </div>
                     {% endif %}
                     {% if data.show_offerer_seq_diagram %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Hide Offerer Sequence Diagram </button>
+                     <button name="hide_offerer_seq_diagram" type="submit" value="Hide Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Hide Offerer Sequence Diagram</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><rect x="2" y="2" width="8" height="4"></rect><rect x="2" y="18" width="8" height="4"></rect><line x1="6" y1="9" x2="6" y2="15"></line><polyline points="13 4 17 4 17 6"></polyline><polyline points="13 20 17 20 17 18"></polyline><polygon points="12 12 17 9 22 12 17 15 12 12" stroke="#556987"></polygon></g></svg> Show Offerer Sequence Diagram </button>
-                    </div>
-                    {% endif %}
-                    {% if data.can_abandon == true %}
-                    <div class="w-full md:w-auto p-1.5">
-                      <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full 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">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Abandon Bid </button>
+                     <button name="show_offerer_seq_diagram" type="submit" value="Show Offerer Sequence Diagram" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Show Offerer Sequence Diagram</button>
                     </div>
                     {% endif %}
                     {% if data.show_txns %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Hide info </button>
+                     <button name="hide_txns" type="submit" value="Hide Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Hide More info</button>
                     </div>
                     {% else %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><circle cx="12" cy="12" r="11"></circle><line x1="12" y1="11" x2="12" y2="17" stroke="#556987"></line><circle cx="12" cy="7" r="1" stroke="none" fill="#556987"></circle></g></svg> Show More Info </button>
+                     <button name="show_txns" type="submit" value="Show More Info" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Show More Info </button>
                     </div>
                     {% endif %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
- <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Edit bid </button>
+                     <button name="edit_bid" type="submit" value="Edit Bid" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Edit Bid</button>
                     </div>
                     {% endif %}
-                    {% if data.was_received == 'True' %}
+                    {% if data.can_abandon == true and not edit_bid %}
                     <div class="w-full md:w-auto p-1.5">
-                      <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-<svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg> Accept Bid </button>
+                     <button name="abandon_bid" type="submit" value="Abandon Bid" onclick="return confirmPopup();" 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">Abandon Bid</button>
                     </div>
                     {% endif %}
+                     {% if data.was_received == 'True' and not edit_bid %}
+                    <div class="w-full md:w-auto p-1.5">
+                     <button name="accept_bid" value="Accept Bid" type="submit" onclick='return confirmPopup("Accept");' class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Accept Bid</button>
                     </div>
+                    {% endif %}
                     </div>
                   </div>
-              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
-              {% if data.show_bidder_seq_diagram %}
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Bidder Sequence Diagram</h4></div>
                  </div>
-            </section>
-            <section>
-              <div class="container mx-auto">
-                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
-                  <div class="flex items-center justify-center min-h-screen">
-                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/bidder.alt.xu.min.svg"> </div>
                 </div>
                </div>
-            </section>
-            {% endif %}
-            {% if data.show_offerer_seq_diagram %}
-            <section class="bg-white p-6">
-              <div class="flex flex-wrap items-center">
-                <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Offerer Sequence Diagram</h4></div>
               </div>
-            </section>
-            <section>
-              <div class="container mx-auto">
-                <div class="overflow-x-auto items-center justify-center relative border sm:rounded-lg p-10">
-                  <div class="flex items-center justify-center min-h-screen">
-                    <div class="flex items-center justify-between text-white"> <img class="h-full py-2 pr-4 ml-8" src="/static/sequence_diagrams/offerer.alt.xu.min.svg"> </div>
              </div>
             </div>
            </section>
-          {% endif %}
+           <input type="hidden" name="formid" value="{{ form_id }}">
           </div>
          </div>
         </div>
        </div>
-  </section>
+ </form>
  <script>
-    function confirmPopup() {
-      return confirm("Are you sure?");
+  function confirmPopup(name) {
+   return confirm(name + " Bid - Are you sure?");
   }
  </script>
 </div>

basicswap/templates/bids.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,24 +28,24 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type_available }} {{ page_type_received }} {{ page_type_sent }}</h2>
-            <p class="font-semibold text-coolGray-200">{{ page_type_available_description }} {{ page_type_received_description }} {{ page_type_sent_description }}</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_available_description }} {{ page_type_received_description }} {{ page_type_sent_description }}</p>
      </div>
-          <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            {% if refresh %}
-            <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+     <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto"> {% if refresh %} <a id="refresh" href="/bid/{{ bid_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
     {% endif %}
       </div>
     </div>
@@ -51,27 +53,21 @@
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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">
      <form method="post">
-              <div class="flex justify-between items-center pb-4 bg-white">
-                <div class="bg-white bg-opacity-60 rounded-b-md">
+      <div class="flex justify-between items-center pb-4 dark:text-white">
+       <div class="rounded-b-md">
         <div class="w-full md:w-0/12">
          <div class="flex flex-wrap justify-end -m-1.5">
-                      <div class="flex items-center">
-                        <div class="w-full md:w-auto p-1.5">
-                          <p class="text-sm font-heading bold">Sort By:</p>
-                        </div>
-                      </div>
           <div class="w-full md:w-auto p-1.5">
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
             </svg>
-                          <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <select name="sort_by" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
              <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time At</option>
             </select>
            </div>
@@ -81,7 +77,7 @@
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
             </svg>
-                          <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <select name="sort_dir" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
              <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
              <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
             </select>
@@ -97,7 +93,7 @@
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
             </svg>
-                          <select name="state" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <select name="state" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
              <option value="-1" {% if filters.bid_state_ind==-1 %} selected{% endif %}>Any</option>
              {% for s in data.bid_states %}
              <option value="{{ s[0] }}" {% if filters.bid_state_ind==s[0] %} selected{% endif %}>{{ s[1] }}</option>
@@ -115,7 +111,7 @@
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
             </svg>
-                          <select name="with_expired" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+            <select name="with_expired" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
              <option value="true" {% if filters.with_expired==true %} selected{% endif %}>Include</option>
              <option value="false" {% if filters.with_expired==false %} selected{% endif %}>Exclude</option>
             </select>
@@ -123,55 +119,89 @@
           </div>
           <div class="w-full md:w-auto p-1.5">
            <div class="relative">
-                          <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
              <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#fff" stroke-linejoin="round">
                <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
                <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
-                                <line x1="18" y1="15" x2="23" y2="15" stroke="#556987"></line>
-                                <line x1="17" y1="19" x2="23" y2="19" stroke="#556987"></line>
-                                <line x1="19" y1="23" x2="23" y2="23" stroke="#556987"></line>
+               <line x1="18" y1="15" x2="23" y2="15" stroke="#fff"></line>
+               <line x1="17" y1="19" x2="23" y2="19" stroke="#fff"></line>
+               <line x1="19" y1="23" x2="23" y2="23" stroke="#fff"></line>
                <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
                <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
                <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
               </g>
-                            </svg> <span>Clear</span> </button>
+             </svg>
+             <span>Clear</span>
+            </button>
            </div>
           </div>
           <div class="w-full md:w-auto p-1.5">
            <div class="relative">
-                          <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
              <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#fff" stroke-linejoin="round">
                <rect x="2" y="2" width="7" height="7"></rect>
                <rect x="15" y="15" width="7" height="7"></rect>
                <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
+               <polyline points="15 6 17 8 22 3" stroke="#fff"></polyline>
               </g>
-                            </svg> <span>Apply Filters</span> </button>
+             </svg>
+             <span>Apply Filters</span>
+            </button>
+           </div>
+          </div>
+         </div>
         </div>
        </div>
       </div>
+      <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="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
               </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Offer ID</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid From</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
               </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">ITX Status</span>
               </div>
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6"> Time At </th>
-                        <th scope="col" class="py-3 px-6"> Bid ID </th>
-                        <th scope="col" class="py-3 px-6"> Offer ID </th>
-                        <th scope="col" class="py-4 px-7"> Bid From </th>
-                        <th scope="col" class="py-3 px-7"> Bid Status </th>
-                        <th scope="col" class="py-3 px-6"> ITX Status </th>
-                        <th scope="col" class="py-3 px-6"> PTX Status </th>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">PTX Status</span>
+              </div>
+             </th>
             </tr>
            </thead>
            <tbody>
             {% for b in bids %}
-                      <tr class="bg-white border-t hover:bg-gray-50">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
              <th scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
               <svg class="w-5 h-5 rounded-full ml-5" 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="#6b7280" stroke-linejoin="round">
@@ -180,39 +210,49 @@
                </g>
               </svg>
               <div class="pl-3">
-                            <div class="font-semibold text-xs">{{ b[0] }}</div>
+               <div class="font-semibold text-xs dark:text-white">{{ b[0] }}</div>
               </div>
              </th>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a></td>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a></td>
-                        <td class="py-4 px-6 text-xs monospace"><a href=/identity/{{ b[6] }}>{{ b[6] }}</a></td>
-                        <td class="py-4 px-6">{{ b[3] }}</td>
-                        <td class="py-4 px-6">{{ b[4] }}</td>
-                        <td class="py-4 px-6">{{ b[5] }}</td>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/bid/{{ b[1] }}>{{ b[1]|truncate(20, True) }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/offer/{{ b[2] }}>{{ b[2]|truncate(20, True) }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs monospace">
+              <a href=/identity/{{ b[6] }}>{{ b[6] }}</a>
+             </td>
+             <td class="py-3 px-6 text-xs">{{ b[3] }}</td>
+             <td class="py-3 px-6 text-xs">{{ b[4] }}</td>
+             <td class="py-3 px-6 text-xs">{{ b[5] }}</td>
             </tr>
            </tbody>
            {% endfor %}
           </table>
           <input type="hidden" name="formid" value="{{ form_id }}">
-                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"></div>
+          <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+         </div>
         </div>
-              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
+        <div class="rounded-b-md">
          <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
+          <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-200 dark:border-gray-400">
            <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                        </svg> <span>Page Back</span> </button>
+             </svg>
+             <span>Page Back</span>
+            </button>
            </div>
            <div class="flex items-center">
             <div class="w-full md:w-auto p-1.5">
-                        <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
+             <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
             </div>
            </div>
            <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
-                        <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <span>Page Forwards</span>
+             <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
              </svg>
             </button>

basicswap/templates/changepassword.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -15,8 +15,8 @@
       </svg>
      </li>
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">
-              <p>Wallets</p>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">
+       <p>Home</p>
       </a>
      </li>
      <li>
@@ -25,7 +25,7 @@
       </svg>
      </li>
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/changepassword">Change Password</a>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/changepassword">Change Password</a>
      </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -38,38 +38,48 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Change Password</h2>
-            <p class="font-semibold text-coolGray-200">Update your BasicSwap / Wallets password.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Update your BasicSwap / Wallets password.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="border-coolGray-100">
     <div class="flex flex-wrap items-center justify-between -m-2">
      <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Password</th>
-                      <th scope="col" class="py-3"></th>
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Password</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+              </div>
+             </th>
             </tr>
            </thead>
            <form method="post" autocomplete="off">
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Old Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Old Password</td>
+             <td td class="py-3 px-6">
               <div class="relative w-full">
                <div class="absolute inset-y-0 right-0 flex items-center px-2">
                 <input class="hidden js-password-toggle" id="toggle-old" type="checkbox" />
@@ -81,13 +91,13 @@
                  </svg>
                 </label>
                </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="oldpassword" id="input-old">
+               <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="password" name="oldpassword" id="input-old">
               </div>
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">New Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">New Password</td>
+             <td td class="py-3 px-6">
               <div class="relative w-full">
                <div class="absolute inset-y-0 right-0 flex items-center px-2">
                 <input class="hidden js-password-toggle" id="toggle-new" type="checkbox" />
@@ -99,13 +109,13 @@
                  </svg>
                 </label>
                </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="newpassword" id="input-new">
+               <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="password" name="newpassword" id="input-new">
               </div>
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Confirm Password</td>
-                      <td td class="py-4 pr-5 w-2/3">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Confirm Password</td>
+             <td td class="py-3 px-6">
               <div class="relative w-full">
                <div class="absolute inset-y-0 right-0 flex items-center px-2">
                 <input class="hidden js-password-toggle" id="toggle-conf" type="checkbox" />
@@ -117,16 +127,29 @@
                  </svg>
                 </label>
                </div>
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="password" name="confirmpassword" id="input-confirm">
+               <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" type="password" name="confirmpassword" id="input-confirm">
               </div>
              </td>
             </tr>
           </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>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
           <div class="w-full md:w-auto p-1.5 ml-2">
            <button type="submit" name="unlock" value="Unlock" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
@@ -139,13 +162,16 @@
          </div>
         </div>
        </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">
-            </form>
+      </div>
      </div>
     </div>
    </div>
   </div>
  </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
+</div>
+</section>
 {% include 'footer.html' %}
 <script>
 function togglePassword(event) {
@@ -172,7 +198,6 @@ const toggles = ["toggle-old", "toggle-new", "toggle-conf"]
 toggles.forEach(function (toggle_id, index) {
     document.getElementById(toggle_id).addEventListener('change', togglePassword, false);
 });
-
 </script>
 </body>
 </html>

basicswap/templates/debug.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/debug">Debug</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/debug">Debug</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,42 +28,62 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Debug</h2>
-            <p class="font-semibold text-coolGray-200"></p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Debug options & Easter eggs.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+   <div class="border-coolGray-100">
     <div class="flex flex-wrap items-center justify-between -m-2">
      <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Option</th>
-                      <th scope="col" class="py-3"></th>
+      <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="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+              </div>
+             </th>
             </tr>
            </thead>
            <form method="post">
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 pl-5 pr-5 bold">Reinitialise XMR wallet</td>
-                      <td td class="py-4">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Reinitialise XMR wallet</td>
+             <td td class="py-3 px-6 ">
               <button name="reinit_xmr" type="submit" value="Yes" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline><path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path><path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path><path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path><path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path><path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path></g></svg> Yes </button>
+               <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+                <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+                 <polyline points="2.966 1.13 2.237 6.927 7.929 5.341"></polyline>
+                 <path d="M2.921,18.2a11.006,11.006,0,0,1-1.041-1.9" stroke="#ffffff"></path>
+                 <path d="M8.461,22.412a11.07,11.07,0,0,1-1.529-.654q-.2-.1-.392-.214" stroke="#ffffff"></path>
+                 <path d="M15.539,22.41a11.062,11.062,0,0,1-2.06.486" stroke="#ffffff"></path>
+                 <path d="M21.08,18.206a10.984,10.984,0,0,1-1.438,1.705" stroke="#ffffff"></path>
+                 <path d="M2.759,6.027A11,11,0,0,1,22.9,13.464"></path>
+                </g>
+               </svg>Yes - Start Process</button>
              </td>
-                      <input type="hidden" name="formid" value="{{ form_id }}"> </tr>
+             <input type="hidden" name="formid" value="{{ form_id }}">
+            </tr>
            </form>
           </table>
          </div>
@@ -70,6 +92,23 @@
       </div>
      </div>
     </div>
+   </div>
+  </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6"></div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
  </section>
  <!-- todo
 {% if result %}

basicswap/templates/explorers.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/explorers">Explorers</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/explores">Explorers</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,86 +28,133 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Explorers</h2>
-            <p class="font-semibold text-coolGray-200">Query blockchain explorers with quick commands.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Query blockchain explorers with quick commands.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
       <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Select Explorer</th>
-                        <th scope="col">Action</th>
+       <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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Select Explorer</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6">Action</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t">
-                      <td class="py-4 px-6 bold w-96">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
               <div class="relative">
                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="explorer">
-                            <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->{% for e in explorers %}
+               <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="explorer">
+                <!-- <option value="-1" {% if explorer==-1 %} selected{% endif %}>Select Explorer</option> -->
+                {% for e in explorers %}
                 <option value="{{ e[0] }}" {% if explorer==e[0] %} selected{% endif %}>{{ e[1] }}</option>
                 {% endfor %}
                </select>
               </div>
              </td>
-                      <td class="py-4 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="action">
-                          <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option> {% for a in actions %}
-                          <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="action">
+               <option value="-1" {% if action==-1 %} selected{% endif %}>Select Action</option>
+               {% for a in actions %} <option value="{{ a[0] }}" {% if action==a[0] %} selected{% endif %}>{{ a[1] }}</option>
                {% endfor %}
               </select>
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold"> Arguments: </td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="args" placeholder="Arguments"> </td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Arguments:</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 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" name="args" placeholder="Arguments">
+             </td>
             </tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
           <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+           <button type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply</button>
+          </div>
+         </div>
+        </div>
        </div>
       </div>
      </div>
     </div>
+   </div>
+ </section>
  <input type="hidden" name="formid" value="{{ form_id }}">
  {% if result %}
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Explorer output:</th>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Explorer output</span>
+              </div>
+             </th>
             </tr>
            </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5">
-                      <textarea class="whitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15"> {{ result }} </textarea>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <td class="py-3 px-6">
+             <textarea class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" rows="20">{{ result }}</textarea>
             </td>
            </tr>
           </table>
@@ -120,6 +169,6 @@
  </section>
 </div>
 {% include 'footer.html' %}
-</div>
 </body>
 </html>
+<!-- todo round corners -->

basicswap/templates/footer.html

@@ -1,32 +1,35 @@
-<section class="bg-white overflow-hidden">
+<section class="overflow-hidden">
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap lg:items-center pt-24 pb-12 -mx-4">
       <div class="w-full md:w-3/4 px-4">
-        <a class="block mb-8 max-w-max" href="#"> <img class="h-8" src="/static/images/logos/basicswap-logo-dark.svg" alt=""> </a>
+        <a class="block mb-8 max-w-max" href="/">
+          <img src="/static/images/logos/basicswap-logo.svg" class="h-8 imageshow dark-image">
+          <img src="/static/images/logos/basicswap-logo-dark.svg" class="h-8 imageshow light-image">
+        </a>
         <div class="mb-12 md:mb-0 flex flex-wrap -mx-3 md:-mx-6">
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
-          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-dex/basicswap_explained.html" target="_blank">BasicSwap Explained</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/basicswap-guides/basicswapguides_installation.html" target="_blank">Tutorials and Guides</a></div>
+          <div class="w-full md:w-auto p-3 md:py-0 md:px-6"><a class="inline-block text-coolGray-500 dark:text-gray-300 font-medium" href="https://academy.particl.io/en/latest/faq/get_support.html" target="_blank">Get Support</a></div>
         </div>
       </div>
       <div class="w-full md:w-1/4 px-4"> </div>
     </div>
   </div>
-  <div class="border-b border-coolGray-100"></div>
+  <div class="border-b border-gray-100 dark:border-gray-500 dark:bg-body dark:border-b-2"></div> 
   <div class="container px-4 mx-auto">
     <div class="flex flex-wrap items-center py-12 md:pb-32">
       <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 font-medium ">© 2022~ </p>
-            <p class="text-sm text-coolGray-400 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 font-medium">GUI 0.1.2 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full"></span>
-            <p class="mr-2 text-sm font-bold text-gray-90 ">Made with </p>
+            <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 </p> <span class="w-1 h-1 mx-1.5 bg-gray-500 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 text-gray-90 ">by TV and CRZ</span></div>
+            </svg> <span class="ml-2 text-sm font-bold dark:text-white text-gray-90 ">by TV and CRZ</span></div><!-- fix dots -->
         </div>
       </div>
       <div class="w-full md:w-1/2">
@@ -48,4 +51,65 @@
     </div>
   </div>
 </section>
-<script src="/static/js/libs/dd.min.js"></script>
+    <script>
+      window.onload = () => {
+        toggleImages();
+      };
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        toggleImages();
+      });
+
+      function toggleImages() {
+        const html = document.querySelector('html');
+        const darkImages = document.querySelectorAll('.dark-image');
+        const lightImages = document.querySelectorAll('.light-image');
+
+        if (html && html.classList.contains('dark')) {
+          toggleImageDisplay(darkImages, 'block');
+          toggleImageDisplay(lightImages, 'none');
+        } else {
+          toggleImageDisplay(darkImages, 'none');
+          toggleImageDisplay(lightImages, 'block');
+        }
+      }
+
+      function toggleImageDisplay(images, display) {
+        images.forEach(img => {
+          img.style.display = display;
+        });
+      }
+    </script>
+
+<script>
+      var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          themeToggleLightIcon.classList.remove('hidden');
+      } else {
+          themeToggleDarkIcon.classList.remove('hidden');
+      }
+
+      function setTheme(theme) {
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        } else {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        }
+      }
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        if (localStorage.getItem('color-theme') === 'dark') {
+          setTheme('light');
+        } else {
+          setTheme('dark');
+        }
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+        toggleImages();
+      });
+
+</script>

basicswap/templates/header.html

@@ -5,17 +5,91 @@
   {% if refresh %}
   <meta http-equiv="refresh" content="{{ refresh }}">
   {% endif %}
+  <link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" />
   <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
-  <link type="text/css" media="all" href="/static/css/libs/dd.min.css" rel="stylesheet">
   <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
   <script src="/static/js/main.js"></script>
   <script src="/static/js/libs/flowbite.js"></script>
+<script>
+  const isDarkMode =
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!localStorage.getItem('color-theme') &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  if (!localStorage.getItem('color-theme')) {
+    localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light');
+  }
+
+  document.documentElement.classList.toggle('dark', isDarkMode);
+</script>
+
+  <script>
+  window.Components = {
+  customSelect(options) {
+    return {
+      init() {
+        this.$refs.listbox.focus()
+        this.optionCount = this.$refs.listbox.children.length
+        this.$watch('selected', value => {
+          if (!this.open) return
+
+          if (this.selected === null) {
+            this.activeDescendant = ''
+            return
+          }
+
+          this.activeDescendant = this.$refs.listbox.children[this.selected - 1].id
+        })
+      },
+      activeDescendant: null,
+      optionCount: null,
+      open: false,
+      selected: null,
+      value: 1,
+      choose(option) {
+        this.value = option
+        this.open = false
+      },
+      onButtonClick() {
+        if (this.open) return
+        this.selected = this.value
+        this.open = true
+        this.$nextTick(() => {
+          this.$refs.listbox.focus()
+          this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+        })
+      },
+      onOptionSelect() {
+        if (this.selected !== null) {
+          this.value = this.selected
+        }
+        this.open = false
+        this.$refs.button.focus()
+      },
+      onEscape() {
+        this.open = false
+        this.$refs.button.focus()
+      },
+      onArrowUp() {
+        this.selected = this.selected - 1 < 1 ? this.optionCount : this.selected - 1
+        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+      },
+      onArrowDown() {
+        this.selected = this.selected + 1 > this.optionCount ? 1 : this.selected + 1
+        this.$refs.listbox.children[this.selected - 1].scrollIntoView({ block: 'nearest' })
+      },
+      ...options,
+    }
+  },
+}
+
+</script>
   <link rel=icon sizes="32x32" type="image/png" href="/static/images/favicon/favicon-32.png">
   <title>{{ title }}</title>
 </head>
-<body>
+<body class="dark:bg-gray-700">
   <section>
-    <nav class="relative bg-gray-800">
+    <nav class="relative bg-gray-700">
       <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
         <a class="flex-shrink-0 mr-12 text-2xl text-white font-semibold" href="/"> <img class="h-10" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
         <ul class="hidden xl:flex">
@@ -56,7 +130,7 @@
           </li>
         </ul>
         <ul class="mr-10 hidden xl:flex lg:justify-end lg:items-center lg:space-x-6 ml-auto">
-          <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50">
+          <div id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex justify-between items-center py-2 pr-4 pl-3 w-full text-gray-50 text-sm  md:border-0 md:p-0 md:w-auto text-gray-50 hover:text-gray-100">
             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                 <path d="M14,19l2.95,2.95A3.5,3.5,0,0,0,21.9,22l.051-.051h0A3.5,3.5,0,0,0,22,17l-.051-.051L20,15" stroke="#6b7280"></path>
@@ -70,10 +144,10 @@
           </div>
         </ul>
         <!-- dropdown settings & tools -->
-        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100">
+        <div id="dropdownNavbar" class="hidden z-50 w-50 font-normal bg-white shadow divide-y divide-gray-100 dark:bg-gray-500 dark:divide-gray-400 dark:text-white">
           <ul class="py-0 text-sm text-gray-700" aria-labelledby="dropdownLargeButton">
             <li>
-              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+              <a href="/settings" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <circle cx="12" cy="12" r="3" stroke="#6b7280"></circle>
@@ -83,7 +157,7 @@
             </li>
             {% if debug_mode == true %}
             <li>
-              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">RPC</span>
+              <a href="/rpc" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">RPC</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                     <rect x="1" y="2" width="22" height="20"></rect>
@@ -97,7 +171,7 @@
             {% endif %}
             {% if debug_mode == true %}
             <li>
-              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+              <a href="/debug" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                   <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                     <path data-cap="butt" d="M5.29,10H4A3,3,0,0,1,1,7V6" stroke="#6b7280"></path>
@@ -114,7 +188,7 @@
             {% endif %}
             {% if debug_mode == true %}
             <li>
-              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Explorers</span>
+              <a href="/explorers" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Explorers</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                     <line x1="22" y1="22" x2="15.656" y2="15.656" stroke="#6b7280"></line>
@@ -125,7 +199,7 @@
             {% endif %}
             {% if use_tor_proxy == true %}
             <li>
-              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Debug</span>
+              <a href="/tor" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Debug</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
                           <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                             <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#6b7280"></path>
@@ -137,7 +211,7 @@
             </li>
             {% endif %}
             <li>
-              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Settings</span>
+              <a href="/smsgaddresses" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Settings</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                     <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#6b7280"></path>
@@ -148,7 +222,7 @@
                 </svg> SMSG Addresses</a>
             </li>
             <li>
-              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+              <a href="/watched" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                     <path d="M1.373,13.183a2.064,2.064,0,0,1,0-2.366C2.946,8.59,6.819,4,12,4s9.054,4.59,10.627,6.817a2.064,2.064,0,0,1,0,2.366C21.054,15.41,17.181,20,12,20S2.946,15.41,1.373,13.183Z"></path>
@@ -158,7 +232,7 @@
             </li>
             {% if debug_mode == true %}
             <li>
-              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Automation Strategies</span>
+              <a href="/automation" class="flex items-center block py-4 px-4 hover:bg-gray-10 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Automation Strategies</span>
                 <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                     <line data-cap="butt" x1="5" y1="1" x2="5" y2="6" stroke="#6b7280"></line>
@@ -177,7 +251,7 @@
           {% endif %}
         </ul>
           <div class="text-sm text-gray-700">
-            <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100"> <span class="sr-only">Shutdown</span>
+            <a href="/shutdown/{{ shutdown_token }}" class="flex items-center block py-4 px-4 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white"> <span class="sr-only">Shutdown</span>
               <svg class="text-gray-500 w-5 h-5 mr-3" 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="#6b7280" stroke-linejoin="round">
                   <line data-cap="butt" x1="11" y1="10" x2="22" y2="10" stroke="#6b7280"></line>
@@ -192,62 +266,62 @@
         <!-- notifications -->
         <button id="dropdownNotificationButton" data-dropdown-toggle="dropdownNotification" class="inline-flex items-center text-sm font-medium text-center text-gray-500 focus:outline-none " type="button">
           <svg class="h-5 w-5" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="currentColor"></path>
+            <path d="M14 11.18V8C13.9986 6.58312 13.4958 5.21247 12.5806 4.13077C11.6655 3.04908 10.3971 2.32615 9 2.09V1C9 0.734784 8.89464 0.48043 8.70711 0.292893C8.51957 0.105357 8.26522 0 8 0C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V2.09C5.60294 2.32615 4.33452 3.04908 3.41939 4.13077C2.50425 5.21247 2.00144 6.58312 2 8V11.18C1.41645 11.3863 0.910998 11.7681 0.552938 12.2729C0.194879 12.7778 0.00173951 13.3811 0 14V16C0 16.2652 0.105357 16.5196 0.292893 16.7071C0.48043 16.8946 0.734784 17 1 17H4.14C4.37028 17.8474 4.873 18.5954 5.5706 19.1287C6.26819 19.6621 7.1219 19.951 8 19.951C8.8781 19.951 9.73181 19.6621 10.4294 19.1287C11.127 18.5954 11.6297 17.8474 11.86 17H15C15.2652 17 15.5196 16.8946 15.7071 16.7071C15.8946 16.5196 16 16.2652 16 16V14C15.9983 13.3811 15.8051 12.7778 15.4471 12.2729C15.089 11.7681 14.5835 11.3863 14 11.18ZM4 8C4 6.93913 4.42143 5.92172 5.17157 5.17157C5.92172 4.42143 6.93913 4 8 4C9.06087 4 10.0783 4.42143 10.8284 5.17157C11.5786 5.92172 12 6.93913 12 8V11H4V8ZM8 18C7.65097 17.9979 7.30857 17.9045 7.00683 17.7291C6.70509 17.5536 6.45451 17.3023 6.28 17H9.72C9.54549 17.3023 9.29491 17.5536 8.99317 17.7291C8.69143 17.9045 8.34903 17.9979 8 18ZM14 15H2V14C2 13.7348 2.10536 13.4804 2.29289 13.2929C2.48043 13.1054 2.73478 13 3 13H13C13.2652 13 13.5196 13.1054 13.7071 13.2929C13.8946 13.4804 14 13.7348 14 14V15Z" fill="#6b7280"></path>
           </svg>
           <div class="flex relative">
             <!-- Todo -->
-            <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div>
+            <!-- <div class="inline-flex relative -top-2 right-2 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></div> -->
             <!-- Red <div class="inline-flex relative -top-2 right-3 w-3 h-3 bg-red-500 rounded-full border-2 border-white"></div>  --></div>
         </button>
         <!-- Dropdown menu -->
-        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow" aria-labelledby="dropdownNotificationButton">
-          <div class="block py-2 px-4 font-medium text-center text-gray-700 bg-gray-50 drop-shadow"> Notifications </div>
-          <div class="divide-y divide-gray-100">
+        <div id="dropdownNotification" class="hidden z-50 w-full max-w-sm bg-white shadow rounded divide-y divide-gray-100 drop-shadow dark:bg-gray-500 dark:divide-gray-400 dark:text-white" aria-labelledby="dropdownNotificationButton">
+          <div class="block py-2 px-4 font-semibold text-center text-gray-700 bg-gray-50 drop-shadow dark:text-white dark:bg-gray-500">Notifications History</div>
+          <div class="divide-y divide-gray-100 dark:divide-gray-400">
             {% for entry in notifications %} {% if entry[1] == 1 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    NEW NETWORK <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
+                    NEW NETWORK <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 2 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><rect x="9.843" y="5.379" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -0.7635 13.1569)" width="11.314" height="4.243"></rect> <polyline points="3,23 3,19 15,19 15,23 "></polyline> <line x1="4" y1="15" x2="1" y2="15" stroke="#ffffff"></line> <line x1="5.757" y1="10.757" x2="3.636" y2="8.636" stroke="#ffffff"></line> <line x1="1" y1="23" x2="17" y2="23"></line> <line x1="17" y1="9" x2="23" y2="15"></line></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 dark:text-white text-sm mb-1.5"> <span class="font-semibold text-gray-900 dark:text-white">
+                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">NEW BID</a> ON <a class="underline text-blue-500" href="/offer/{{ entry[2].offer_id }}">OFFER</a></span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                       <a href="/offer/{{ entry[2].offer_id }}">{{ entry[2].offer_id|truncate(42, True) }}</a>
                     </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% elif entry[1] == 3 %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
-                    <a class="underline" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
+                    <a class="underline text-blue-500" href="/bid/{{ entry[2].bid_id }}">BID</a> ACCEPTED</span>
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   <a href="/bid/{{ entry[2].bid_id }}">{{ entry[2].bid_id|truncate(42, True) }}</a>
                   </span></div>
-                <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                <div class="text-xs text-gray-600 bold dark:text-gray-300">{{ entry[0] }}</div>
               </div>
             </div>
             {% else %}
-            <div class="flex py-3 px-4 hover:bg-gray-100">
+            <div class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-700">
               <div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 bg-blue-500 rounded-lg"><svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div>
               <div class="pl-3 w-full">
-                <div class="text-gray-500 text-sm mb-1.5"> <span class="font-semibold text-gray-900">
+                <div class="text-gray-500 text-sm mb-1.5 dark:text-white"> <span class="font-semibold text-gray-900 dark:text-white">
                     UNKNOWN EVENT</span>
-                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center">
+                  <br/> <span class="mt-2 inline-flex text-xs font-small monospace text-center dark:text-gray-300">
                   {{ entry[1] }}
-                  <div class="text-xs text-gray-600 bold">{{ entry[0] }}</div>
+                  <div class="text-xs text-gray-600 bold dark:text-gray-300 dark:text-gray-300">{{ entry[0] }}</div>
                 </div>
               </div>
                {% endif %}
@@ -267,7 +341,7 @@
 <!-- notifications -->
 <!-- todo - fix line -->
 <div class="flex mr-2 items-center text-gray-50 hover:text-gray-100 text-sm ml-5">
-  <div class="flex-shrink-0 w-px h-10 bg-gray-600 ml-4 mr-5"></div>
+  <div class="flex-shrink-0 w-px h-10 bg-gray-400 dark:bg-gray-400 ml-4 mr-5"></div>
               {% if debug_mode == true %}
               <!-- dev mode icons on/off -->
               <ul class="xl:flex">
@@ -335,6 +409,13 @@
                 </ul>
                 <!-- tor -->
               {% endif %}
+              <button data-tooltip-target="tooltip-darkmode" id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 focus:outline-none rounded-lg text-sm ml-5">
+               <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
+               <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="#F59E0B" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+               <span data-tooltip-target="tooltip-TOR"></span>
+                  <div class="tooltip-arrow" data-popper-arrow></div>
+                  <div id="tooltip-darkmode" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">Dark mode</div>
+              </button>
             </div>
               <div class="hidden xl:block"></div>
               <!-- mobile menu -->
@@ -348,11 +429,11 @@
               </div>
               <!-- mobile menu -->
             </div>
-            <div class="hidden xl:block py-5 px-6 bg-gray-50 border-b">
+            <div class="hidden xl:block py-5 px-6 bg-coolGray-100 border-gray-100 dark:border-gray-500 dark:bg-body border-b dark:border-b-2">
               <div class="flex items-center container flex flex-wrap items-center justify-between items-center mx-auto">
                 <ul class="flex items-center">
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/active">
+                    <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/active">
                       <svg class="text-gray-100 w-5 h-5 ml-7 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="#6b7280" stroke-linejoin="round">
                           <circle data-cap="butt" cx="12" cy="12" r="3" stroke="#6b7280"></circle>
@@ -363,9 +444,9 @@
                         </g>
                       </svg><span>Swaps in Progress </span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_swapping }}</span></a>
                   </li>
-                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 mr-10"></div>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                   <li>
-                    <a class="flex mr-5 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentoffers">
+                    <a class="flex mr-5 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentoffers">
                       <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
                         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#6b7280" stroke-linejoin="round">
                           <circle cx="5" cy="5" r="4"></circle>
@@ -377,9 +458,9 @@
                         </g>
                       </svg><span>Your Offers</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_offers }}</span></a>
                   </li>
-                  <div class="flex-shrink-0 w-px h-10 bg-gray-300 ml-4 mr-10"></div>
+                  <div class="flex-shrink-0 w-px h-10 bg-gray-200 dark:bg-gray-400 mr-10"></div>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/availablebids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/availablebids">
                       <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="#6b7280" stroke-linejoin="round">
                           <circle cx="12" cy="12" r="11"></circle>
@@ -388,7 +469,7 @@
                       </svg><span>Available Bids</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_available_bids }}</span></a>
                   </li>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/receivedbids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/receivedbids">
                       <svg class="text-gray-100 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="#6b7280" stroke-linejoin="round">
                           <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"> </path>
@@ -398,7 +479,7 @@
                       </svg><span>Bids Received</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_recv_bids }}</span></a>
                   </li>
                   <li>
-                    <a class="flex mr-10 items-center text-sm text-gray-500 hover:text-gray-600" href="/sentbids">
+                    <a class="flex mr-10 items-center text-sm text-gray-400 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-100" href="/sentbids">
                       <svg class="text-gray-100 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="#6b7280" stroke-linejoin="round">
                           <path d="M2,16v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V16"></path>
@@ -411,15 +492,15 @@
               </div>
             </div>
     </nav>
-    <!-- mobile sidebar -->
+    <!-- mobile sidebar TODO/WIP  -->
     <div class="hidden navbar-menu fixed top-0 left-0 bottom-0 w-3/4 lg:w-80 sm:max-w-xs z-50">
-      <div class="navbar-backdrop fixed inset-0 bg-gray-800 opacity-10"></div>
-      <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-800 overflow-y-auto">
+      <div class="navbar-backdrop fixed inset-0 bg-gray-700 dark:bg-gray-600 opacity-10"></div>
+      <nav class="relative flex flex-col pt-6 pb-8 h-full w-full bg-gray-700 dark:bg-gray-600 overflow-y-auto">
         <div class="flex w-full items-center px-6 pb-6 mb-6 lg:border-b border-gray-700">
           <a class="text-xl text-white font-semibold" href="/"> <img class="h-8" src="/static/images/logos/basicswap-logo.svg" alt="" width="auto"></a>
         </div>
         <div class="px-4 pb-6">
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Wallet</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Wallet</h3>
           <ul class="mb-8 text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-4 text-gray-50 hover:bg-gray-900 rounded" href="/wallets"> <span class="inline-block mr-3">
@@ -435,7 +516,7 @@
                 </span></a>
             </li>
           </ul>
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium">Exchange</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300">Exchange</h3>
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/newoffer"> <span class="inline-block mr-3">
@@ -523,7 +604,7 @@
                 </span><span>Bids Sent</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_sent_bids }}</span></a>
             </li>
           </ul>
-          <h3 class="mb-2 text-xs uppercase text-gray-500 font-medium mt-5">Settings</h3>
+          <h3 class="mb-2 text-xs uppercase text-gray-300 font-medium dark:text-gray-300 mt-5">Settings</h3>
           <ul class="text-sm font-medium">
             <li>
               <a class="flex items-center pl-3 py-3 pr-2 text-gray-50 hover:bg-gray-900 rounded" href="/settings"> <span class="inline-block mr-3">
@@ -596,7 +677,7 @@
                     <circle cx="12" cy="12" r="4" stroke="#6b7280"></circle>
                   </g>
                 </svg>
-                </span><span>Wached Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
+                </span><span>Watched Outputs</span> <span class="inline-flex justify-center items-center text-xs font-semibold ml-3 mr-2 px-2.5 py-1 font-small text-white bg-blue-500 rounded-full">{{ summary.num_watched_outputs }}</span></a>
             </li>
             {% if debug_mode == true %}
             <li>
@@ -660,7 +741,7 @@
       let json = JSON.parse(event.data);
       let event_message = 'Unknown event';
       if (json['event'] == 'new_offer') {
-        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" 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></button></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-blue-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round"><circle cx="5" cy="5" r="4"></circle> <circle cx="19" cy="19" r="4"></circle> <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline> <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline> <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline> <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900">New network <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" 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></button></div></div>';
       }
       else
       if (json['event'] == 'new_bid') {
@@ -668,7 +749,7 @@
       }
       else
       if (json['event'] == 'bid_accepted') {
-        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-green-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900 dark:text-white"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" 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></button></div></div>';
+        event_message = '<div id="hide"><div id="toast-success" class="flex items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow" role="alert"><div class="inline-flex flex-shrink-0 justify-center items-center w-10 h-10 bg-violet-500 rounded-lg"><svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24"><g fill="#ffffff"><path d="M8.5,20a1.5,1.5,0,0,1-1.061-.439L.379,12.5,2.5,10.379l6,6,13-13L23.621,5.5,9.561,19.561A1.5,1.5,0,0,1,8.5,20Z" fill="#ffffff"></path></g></svg></div><div class="uppercase w-40 ml-3 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>Bid</a> accepted</div><button type="button" onclick="closeAlert(event)" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-0 focus:outline-none focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><span class="sr-only">Close</span><svg aria-hidden="true" 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></button></div></div>';
       }
       let messages = document.getElementById('ul_updates'),
         message = document.createElement('li');

basicswap/templates/identity.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,140 +14,187 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Identity</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/smsgaddresses">Identity</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/identity/{{ data.identity_address }}">ADDRESS: {{ data.identity_address }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/identity/{{ data.identity_address }}">ADDRESS: {{ data.identity_address }}</a>
+     </li>
     </ul>
    </div>
   </div>
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Identity</h2>
-            <p class="font-semibold text-coolGray-200">Address: {{ data.identity_address }}</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Address: {{ data.identity_address }}</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <form method="post">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden min-height-50">
+    <div class="border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
       <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post" autocomplete="off">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Details</th>
-                        <th scope="col">Settings</th>
+       <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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl  bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </th>
              </tr>
             </thead>
             {% if data.show_edit_form %}
-                    <tr>
-                      <td class="py-4 px-6 bold">Label</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border w-full border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" id="label" name="label" value="{{ data.label }}">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 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="label" name="label" value="{{ data.label }}">
              </td>
             </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Automation Override</td>
-                      <td class="py-4 pr-5">
-                        <select name="automation_override">
-                        <option{% if data.automation_override=="0" %} selected{% endif %} value="0">-- Default --</option>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Automation Override</td>
+             <td class="py-3 px-6">
+              <select name="automation_override" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 monospace">
+               <option{% if data.automation_override=="0" %} selected{% endif %} value="0">Default</option>
                 {% for a in automation_override_options %}
                 <option{% if data.automation_override==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
                 {% endfor %}
               </select>
              </td>
             </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Notes</td>
-                      <td class="py-4 pr-5">
-                      <textarea rows="5" class="w-full" id="note" name="note">{{ data.note }}</textarea>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea rows="5" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="note" name="note">{{ data.note }}</textarea>
              </td>
+            </tr> {% else %} <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Label</td>
+             <td class="py-3 px-6">{{ data.label }}</td>
             </tr>
-                    {% else %}
-                    <tr>
-                      <td class="py-4 px-6 bold">Label</td>
-                      <td class="py-4">{{ data.label }}</td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Automation Override</td>
-                      <td class="py-4">{{ data.str_automation_override }}</td>
-                    </tr>
-                    <tr>
-                      <td class="py-4 px-6 bold">Notes</td>
-                      <td class="py-4">
-                      <textarea rows="5" class="w-full" readonly>{{ data.note }}</textarea></td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Automation Override</td>
+             <td class="py-3 px-6">{{ data.str_automation_override }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Notes</td>
+             <td class="py-3 px-6">
+              <textarea rows="5" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" readonly>{{ data.note }}</textarea>
              </td>
+             </td>
+            </tr>{% endif %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Successful Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_successful }}</td>
             </tr>
-                    {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Successful Sent Bids</td>
-                      <td>{{ data.num_sent_bids_successful }}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Successful Received Bids</td>
-                      <td>{{ data.num_recv_bids_successful }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Successful Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_successful }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Rejected Sent Bids</td>
-                      <td>{{ data.num_sent_bids_rejected }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Rejected Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_rejected }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Rejected Received Bids</td>
-                      <td>{{ data.num_recv_bids_rejected }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Rejected Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_rejected }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Failed Sent Bids</td>
-                      <td>{{ data.num_sent_bids_failed }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Failed Sent Bids</td>
+             <td class="py-3 px-6">{{ data.num_sent_bids_failed }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Failed Received Bids</td>
-                      <td>{{ data.num_recv_bids_failed }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Failed Received Bids</td>
+             <td class="py-3 px-6">{{ data.num_recv_bids_failed }}</td>
             </tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+ </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
           {% if data.show_edit_form %}
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+           <button name="apply" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply </button>
           </div>
           <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="cancel" value="Cancel" type="submit"class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Cancel</button>
+           <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="16" y1="8" x2="8" y2="16" stroke="#ffffff"></line>
+              <line x1="16" y1="16" x2="8" y2="8" stroke="#ffffff"></line>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Cancel </button>
           </div>
           {% else %}
           <div class="w-full md:w-auto p-1.5">
            <button name="edit" value="edit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg>Edit</button>
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <line x1="2" y1="23" x2="22" y2="23" stroke="#ffffff"></line>
+              <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line>
+              <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon>
+             </g>
+            </svg>Edit </button>
+          </div>
+          {% endif %}
+         </div>
         </div>
-                {% endif %}</div>
        </div>
       </div>
-            <input type="hidden" name="formid" value="{{ form_id }}"> </form>
      </div>
     </div>
    </div>
   </div>
  </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
 </div>
-{% include 'footer.html' %} </div>
+{% include 'footer.html' %}
 </body>
 </html>

basicswap/templates/inc_messages.html

@@ -26,26 +26,27 @@
   </div>
 </section>
 {% endfor %}
-{% for m in err_messages %}
-<section class="py-4" id="err_messages_{{ m[0] }}" role="alert">
+{% if err_messages %}
+<section class="py-4" id="err_messages_{{ err_messages[0][0] }}" 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">
-              <svg class="relative top-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.4733 5.52667C10.4114 5.46419 10.3376 5.41459 10.2564 5.38075C10.1751 5.3469 10.088 5.32947 9.99999 5.32947C9.91198 5.32947 9.82485 5.3469 9.74361 5.38075C9.66237 5.41459 9.58863 5.46419 9.52666 5.52667L7.99999 7.06001L6.47333 5.52667C6.34779 5.40114 6.17753 5.33061 5.99999 5.33061C5.82246 5.33061 5.65219 5.40114 5.52666 5.52667C5.40112 5.65221 5.3306 5.82247 5.3306 6.00001C5.3306 6.17754 5.40112 6.3478 5.52666 6.47334L7.05999 8.00001L5.52666 9.52667C5.46417 9.58865 5.41458 9.66238 5.38073 9.74362C5.34689 9.82486 5.32946 9.912 5.32946 10C5.32946 10.088 5.34689 10.1752 5.38073 10.2564C5.41458 10.3376 5.46417 10.4114 5.52666 10.4733C5.58863 10.5358 5.66237 10.5854 5.74361 10.6193C5.82485 10.6531 5.91198 10.6705 5.99999 10.6705C6.088 10.6705 6.17514 10.6531 6.25638 10.6193C6.33762 10.5854 6.41135 10.5358 6.47333 10.4733L7.99999 8.94001L9.52666 10.4733C9.58863 10.5358 9.66237 10.5854 9.74361 10.6193C9.82485 10.6531 9.91198 10.6705 9.99999 10.6705C10.088 10.6705 10.1751 10.6531 10.2564 10.6193C10.3376 10.5854 10.4114 10.5358 10.4733 10.4733C10.5358 10.4114 10.5854 10.3376 10.6193 10.2564C10.6531 10.1752 10.6705 10.088 10.6705 10C10.6705 9.912 10.6531 9.82486 10.6193 9.74362C10.5854 9.66238 10.5358 9.58865 10.4733 9.52667L8.93999 8.00001L10.4733 6.47334C10.5358 6.41137 10.5854 6.33763 10.6193 6.25639C10.6531 6.17515 10.6705 6.08802 10.6705 6.00001C10.6705 5.912 10.6531 5.82486 10.6193 5.74362C10.5854 5.66238 10.5358 5.58865 10.4733 5.52667ZM12.7133 3.28667C12.0983 2.64994 11.3627 2.14206 10.5494 1.79266C9.736 1.44327 8.8612 1.25936 7.976 1.25167C7.0908 1.24398 6.21294 1.41266 5.39363 1.74786C4.57432 2.08307 3.82998 2.57809 3.20403 3.20404C2.57807 3.82999 2.08305 4.57434 1.74785 5.39365C1.41264 6.21296 1.24396 7.09082 1.25166 7.97602C1.25935 8.86121 1.44326 9.73601 1.79265 10.5494C2.14204 11.3627 2.64992 12.0984 3.28666 12.7133C3.90164 13.3501 4.63727 13.858 5.45063 14.2074C6.26399 14.5567 7.13879 14.7407 8.02398 14.7483C8.90918 14.756 9.78704 14.5874 10.6064 14.2522C11.4257 13.9169 12.17 13.4219 12.796 12.796C13.4219 12.17 13.9169 11.4257 14.2521 10.6064C14.5873 9.78706 14.756 8.90919 14.7483 8.024C14.7406 7.1388 14.5567 6.264 14.2073 5.45064C13.8579 4.63728 13.3501 3.90165 12.7133 3.28667ZM11.7733 11.7733C10.9014 12.6463 9.75368 13.1899 8.52585 13.3115C7.29802 13.4332 6.066 13.1254 5.03967 12.4405C4.01335 11.7557 3.25623 10.7361 2.89731 9.55566C2.53838 8.37518 2.59986 7.10677 3.07127 5.96653C3.54267 4.82629 4.39484 3.88477 5.48259 3.30238C6.57033 2.71999 7.82635 2.53276 9.03666 2.77259C10.247 3.01242 11.3367 3.66447 12.1202 4.61765C12.9036 5.57083 13.3324 6.76617 13.3333 8.00001C13.3357 8.70087 13.1991 9.39524 12.9313 10.0429C12.6635 10.6906 12.2699 11.2788 11.7733 11.7733Z" fill="#EF5944"></path>
-              </svg>
-            </div>
+              {% for m in err_messages %}
               <div class="flex-1 p-1">
                 <h3 class="font-medium text-sm text-red-900 error_msg">
                   <p class="error_msg">Error: {{ m[1] }}</p>
-              </h3></div>
+                </h3>
+              </div>
+              {% endfor %}
+            </div>
           </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="#err_messages_{{ m[0] }}" aria-label="Close"> <span class="sr-only">Close</span>
+          <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="#err_messages_{{ err_messages[0][0] }}" aria-label="Close"> 
+            <span class="sr-only">Close</span>
             <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>
@@ -55,4 +56,5 @@
     </div>
   </div>
 </section>
-{% endfor %}
+{% endif %}
+<!-- todo messages colors better for darkmode -->

basicswap/templates/index.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-      <section class="relative py-24 bg-white overflow-hidden" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
+ <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-px px-2 mb-4 text-xs leading-5 text-blue-500 bg-blue-100 font-medium rounded-full shadow-sm">BasicSwap version: {{ version }}</span>
-            <h3 class="mb-6 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Welcome to BasicSwap DEX</h3>
-            <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">Swap cryptocurrencies in <span class="underline">total privacy</span> with no middlemen, fees,<br> or restrictions.</p>
+    <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>
+    <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">
      <div class="w-full md:w-auto mb-6 md:mb-0 md:pr-6">
       <a href="/wallets">
@@ -22,8 +22,8 @@
      </div>
      <div class="w-full md:flex-1 md:pt-3">
       <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Your Wallet</h3>
-                  <p class="text-coolGray-500 font-medium">Manage your cryptocurrency wallets.</p>
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Your Wallet</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Manage your cryptocurrency wallets.</p>
        </a>
       </div>
      </div>
@@ -46,8 +46,8 @@
      </div>
      <div class="w-full md:flex-1 md:pt-3">
       <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Start Trading</h3>
-                  <p class="text-coolGray-500 font-medium">Browse available swap offers placed by others.</p>
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Start Trading</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Browse available swap offers placed by others.</p>
        </a>
       </div>
      </div>
@@ -58,7 +58,8 @@
        <div class="inline-flex h-14 w-14 mx-auto items-center justify-center text-white bg-blue-500 rounded-lg">
         <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                      <line x1="23" y1="11" x2="23" y2="16" stroke="#ffffff"></line> <polygon points="12,13 2,8 12,3 22,8 "></polygon> 
+          <line x1="23" y1="11" x2="23" y2="16" stroke="#ffffff"></line>
+          <polygon points="12,13 2,8 12,3 22,8 "></polygon>
           <path data-cap="butt" d="M5,9.5V18c0,1.657,3.134,3,7,3 s7-1.343,7-3V9.5"></path>
          </g>
         </svg>
@@ -66,8 +67,8 @@
      </div>
      <div class="w-full md:flex-1 md:pt-3">
       <div class="md:max-w-sm">
-                  <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 font-bold">Help / Tutorials</h3>
-                  <p class="text-coolGray-500 font-medium">Learn how to use BasicSwap with the Particl Academy.</p>
+       <h3 class="mb-4 text-xl md:text-2xl leading-tight text-coolGray-900 dark:text-white font-bold">Help / Tutorials</h3>
+       <p class="text-coolGray-500 dark:text-gray-300 font-medium">Learn how to use BasicSwap with the Particl Academy.</p>
       </div>
      </div>
      </a>
@@ -76,8 +77,10 @@
   </div>
   <div class="md:absolute md:top-28 lg:top-1/2 md:-right-96 xl:-right-80 md:-mr-56 lg:-mr-20 xl:-mr-0 md:transform lg:-translate-y-1/2 px-4 mb-16 md:mb-0">
    <div class="relative max-w-max">
-            <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="/static/images/gfx/dashboard.jpg" alt="">
-            <img class="relative z-10" src="/static/images/gfx/macbook.png" alt="">
+    <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20 imageshow light-image" src="/static/images/gfx/dashboard.jpg" alt="">
+    <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20 imageshow dark-image" src="/static/images/gfx/dashboard2.jpg" alt="">
+    <img class="relative z-10 imageshow light-image" src="/static/images/gfx/macbook.png" alt="">
+    <img class="relative z-10 imageshow dark-image" src="/static/images/gfx/macbook2.png" alt="">
     <img class="absolute -top-24 right-0 md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-blue-500" src="/static/images/elements/dots2-red.svg">
     <img class="absolute -bottom-24 left-0 md:left-auto md:mt-px md:right-96 md:mr-52 lg:mr-16 xl:-mr-20 w-28 md:w-auto text-red-500" src="/static/images/elements/dots2-red.svg">
     <img class="absolute left-0 top-1/2 transform -translate-y-1/2 w-28 md:w-auto text-yellow-400" src="/static/images/elements/circle2-violet.svg">

basicswap/templates/offer.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,45 +14,53 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Offer</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Offer</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="{{ offer_id }}">OFFER ID: {{ offer_id }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="{{ offer_id }}">OFFER ID: {{ offer_id }}</a>
+     </li>
     </ul>
    </div>
   </div>
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Offer (normal)</h2>
-            <p class="font-semibold text-coolGray-200">Offer ID: {{ offer_id }}</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Offer ID: {{ offer_id }}</p>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
       {% if refresh %}
-            <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
       {% else %}
-            <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/offer/{{ offer_id }}" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span></a>
+       </svg>
+       <span>Refresh</span>
+      </a>
       {% endif %}
       </div>
     </div>
@@ -73,7 +81,10 @@
         </svg>
        </div>
        <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-green-900"><a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a></h3> </div>
+        <h3 class="font-medium text-sm text-green-900">
+         <a href="/bid/{{ sent_bid_id }}">Sent Bid {{ sent_bid_id }}</a>
+        </h3>
+       </div>
       </div>
      </div>
      <div class="w-auto p-2">
@@ -88,103 +99,124 @@
   </div>
  </section>
  {% endif %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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 px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Details</th>
-                      <th scope="col"></th>
+      <div class="container mt-5 mx-auto">
+       <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+              </div>
+             </th>
             </tr>
            </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Offer State</td>
-                    <td>{{ data.state }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Offer State</td>
+            <td class="py-3 px-6">{{ data.state }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Swap Type</td>
-                    <td>{{ data.swap_type }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Swap Type</td>
+            <td class="py-3 px-6">{{ data.swap_type }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold">{% if data.sent %}You Send{% else %}You Get{% endif %}</td>
-                  <td><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">{% if data.sent %}You Send{% else %}You Get{% endif %}</td>
+            <td class="px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_from }}.png" alt="{{ data.coin_from }}">
-                    </span> {{ data.coin_from }} </td>
+             </span>{{ data.coin_from }}
+            </td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">{% if data.sent %}You Get{% else %}You Send{% endif %}</td>
-                  <td><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">{% if data.sent %}You Get{% else %}You Send{% endif %}</td>
+            <td class="px-6">
+             <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
               <img class="h-7" src="/static/images/coins/{{ data.coin_to }}.png" alt="{{ data.coin_to }}">
-                    </span> {{ data.coin_to }} </td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Amount Offerer Sends</td>
-                    <td class="bold">{{ data.amt_from }} {{ data.tla_from }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Amount Bidder Sends</td>
-                    <td class="bold">{{ data.amt_to }} {{ data.tla_to }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Minimum Bid Amount</td>
-                    <td>{{ data.amt_bid_min }} {{ data.tla_from }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Rate</td>
-                    <td>{{ data.rate }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td>
-                    <td>{{ data.amt_swapped }} {{ data.tla_from }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td>
-                    <td>{{ data.amount_negotiable }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td>
-                    <td>{{ data.rate_negotiable }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Script Lock Type</td>
-                    <td>{{ data.lock_type }}</td>
-                  </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Script Lock Value</td>
-                    <td>{{ data.lock_value }} {{ data.lock_value_hr }}</td>
-                  </tr> {% if data.addr_to == "Public" %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Address To</td>
-                    <td>{{ data.addr_to }}</td>
-                  </tr> {% else %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Address To</td>
-                    <td><a class="monospace bold" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}</td>
-                  </tr> {% endif %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Address From</td>
-                    <td><a class="monospace bold" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}</td>
-                  </tr>
-                   <tr class="bg-white border-t hover:bg-gray-50">
+             </span>{{ data.coin_to }}
+            </td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Amount Offerer Sends</td>
+            <td class="py-3 px-6 bold">{{ data.amt_from }} {{ data.tla_from }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Amount Bidder Sends</td>
+            <td class="py-3 px-6 bold">{{ data.amt_to }} {{ data.tla_to }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Minimum Bid Amount</td>
+            <td class="py-3 px-6">{{ data.amt_bid_min }} {{ data.tla_from }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Rate</td>
+            <td class="py-3 px-6">{{ data.rate }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold" title="Total coin-from value of completed bids, that this node is involved in">Amount Swapped</td>
+            <td class="py-3 px-6">{{ data.amt_swapped }} {{ data.tla_from }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold" title="If bids can be sent with a different amount">Amount Variable</td>
+            <td class="py-3 px-6">{{ data.amount_negotiable }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold" title="If bids can be sent with a different amount">Rate Variable</td>
+            <td class="py-3 px-6">{{ data.rate_negotiable }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Script Lock Type</td>
+            <td class="py-3 px-6">{{ data.lock_type }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Script Lock Value</td>
+            <td class="py-3 px-6">{{ data.lock_value }} {{ data.lock_value_hr }}</td>
+           </tr>
+           {% if data.addr_to == "Public" %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Address To</td>
+            <td class="py-3 px-6">{{ data.addr_to }}</td>
+           </tr>
+           {% else %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Address To</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold" href="/identity/{{ data.addr_to }}">{{ data.addr_to }}</a> {{ data.addr_to_label }}
+            </td>
+           </tr>
+           {% endif %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Address From</td>
+            <td class="py-3 px-6">
+             <a class="monospace bold" href="/identity/{{ data.addr_from }}">{{ data.addr_from }}</a> {{ data.addr_from_label }}
+            </td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
             <td scope="row" class="flex items-center px-46 whitespace-nowrap">
              <svg alt="" class="w-5 h-5 rounded-full ml-5" 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="#6b7280" stroke-linejoin="round">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3B82F6" stroke-linejoin="round">
                <circle cx="12" cy="12" r="11"></circle>
-                          <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+               <polyline points=" 12,6 12,12 18,12 " stroke="#3B82F6"></polyline>
               </g>
              </svg>
              <div class="py-4 pl-2 bold">
               <div>Created At</div>
              </div>
             </td>
-                    <td>{{ data.created_at | formatts }}</td>
+            <td class="py-3 px-6">{{ data.created_at | formatts }}</td>
            </tr>
-                   <tr class="bg-white border-t hover:bg-gray-50">
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
             <td scope="row" class="flex items-center px-46 whitespace-nowrap">
              <svg alt="" class="w-5 h-5 rounded-full  ml-5" 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="#6b7280" stroke-linejoin="round">
@@ -196,134 +228,216 @@
               <div>Expired At</div>
              </div>
             </td>
-                    <td>{{ data.expired_at | formatts }}</td>
+            <td class="py-3 px-6">{{ data.expired_at | formatts }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Sent</td>
-                    <td>{{ data.sent }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Sent</td>
+            <td class="py-3 px-6">{{ data.sent }}</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Revoked</td>
-                    <td>{{ data.was_revoked }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Revoked</td>
+            <td class="py-3 px-6">{{ data.was_revoked }}</td>
            </tr>
            {% if data.sent %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Auto Accept Strategy</td>
-                    <td>
-                      {% if data.automation_strat_id == -1 %} None {% else %}<a class="monospace" href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a>{% endif %}
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Auto Accept Strategy</td>
+            <td class="py-3 px-6">
+            {% if data.automation_strat_id == -1 %} None {% else %}
+            <a href="/automationstrategy/{{ data.automation_strat_id }}">{{ data.automation_strat_label }}</a>
+            {% endif %}
             </td>
            </tr>
            {% endif %}
            {% if data.xmr_type == true %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Chain A offer fee rate</td>
-                    <td>{{ data.a_fee_rate }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Chain A offer fee rate</td>
+            <td class="py-3 px-6">{{ data.a_fee_rate }}</td>
+           </tr>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">Chain A local fee rate</td>
+            <td class="py-3 px-6">{{ data.a_fee_rate_verify }} (Fee source: {{ data.a_fee_rate_verify_src }}{% if data.a_fee_warn == true %} WARNING{% endif %})</td>
            </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold">Chain A local fee rate</td>
-                    <td>{{ data.a_fee_rate_verify }} (Fee source: {{ data.a_fee_rate_verify_src }}{% if data.a_fee_warn == true %} WARNING{% endif %})</td>
-                  </tr> {% endif %} </table>
+           {% endif %}
+          </table>
+         </div>
         </div>
        </div>
-            <section class="bg-white p-6">
+ </section>
+ <section class="p-6 bg-body dark:bg-gray-700">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Bids</h4></div>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Bids</h4>
+   </div>
   </div>
  </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-6 mt-5 h-full overflow-hidden">
    <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Bid ID</th>
-                      <th scope="col" class="py-3 px-6">Bid Amount</th>
-                      <th scope="col" class="py-3 px-6">Bid Rate</th>
-                      <th scope="col" class="py-3 px-6">Bid Status</th>
-                      <th scope="col" class="py-3 px-6">Identity From</th>
+    <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+     <div class="px-6">
+      <div class="w-full mt-6 pb-6 overflow-x-auto">
+       <table class="w-full min-w-max text-sm">
+        <thead class="uppercase">
+         <tr class="text-left">
+          <th class="p-0">
+           <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+           </div>
+          </th>
+          <th class="p-0">
+           <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Amount</span>
+           </div>
+          </th>
+          <th class="p-0">
+           <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Rate</span>
+           </div>
+          </th>
+          <th class="p-0">
+           <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid Status</span>
+           </div>
+          </th>
+          <th class="p-0">
+           <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Identity From</span>
+           </div>
+          </th>
          </tr>
         </thead>
         {% for b in bids %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6"><a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a></td>
-                    <td class="py-4 px-6">{{ b[1] }}</td>
-                    <td class="py-4 px-6">{{ b[3] }}</td>
-                    <td class="py-4 px-6">{{ b[2] }}</td>
-                    <td class="py-4 px-6"><a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a></td>
+        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+         <td class="py-3 px-6">
+          <a class="monospace" href=/bid/{{ b[0] }}>{{ b[0] }}</a>
+         </td>
+         <td class="py-3 px-6">{{ b[1] }}</td>
+         <td class="py-3 px-6">{{ b[3] }}</td>
+         <td class="py-3 px-6">{{ b[2] }}</td>
+         <td class="py-3 px-6">
+          <a class="monospace" href=/identity/{{ b[4] }}>{{ b[4] }}</a>
+         </td>
         </tr>
         {% endfor %}
        </table>
       </div>
      </div>
+    </div>
+   </div>
+  </div>
   <form method="post">
+ </section>
  {% if data.show_edit_form %}
-            <section class="bg-white p-6">
+ <section class="p-6 bg-body dark:bg-gray-700">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Edit Offer</h4> </div>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Edit Offer</h4>
+   </div>
   </div>
  </section>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
    <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <tr>
-                    <td class="pr-2 bold">Auto Accept Strategy:</td>
-                    <td>
-                        <select name="automation_strat_id" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+    <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+     <div class="px-6">
+      <div class="w-full mt-6 pb-6 overflow-x-auto">
+       <table class="w-full min-w-max text-sm">
+        <thead class="uppercase">
+         <tr class="text-left">
+          <th class="p-0">
+           <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+           </div>
+          </th>
+          <th class="p-0">
+           <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+            <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+           </div>
+          </th>
+         </tr>
+        </thead>
+        <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+         <td class="pr-3 px-6 bold">Auto Accept Strategy:</td>
+         <td class="py-3 px-6">
+          <div class="relative">
+           <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
+           </svg>
+           <select name="automation_strat_id" class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
             <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
             {% for a in data.automation_strategies %}
             <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
             {% endfor %}
            </select>
+          </div>
          </td>
         </tr>
        </table>
       </div>
      </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+     <div class="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">
-                          <button name="edit_offer_cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full 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">
-                          <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
+       <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
+        <div class="w-full md:w-auto p-1.5">
+         <button name="edit_offer_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Send Bid</button>
         </div>
         <div class="w-full md:w-auto p-1.5">
-                          <button name="edit_offer_submit" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                          <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" ><line x1="2" y1="23" x2="22" y2="23" stroke="#556987"></line> <line data-cap="butt" x1="13" y1="5" x2="17" y2="9"></line> <polygon points="8 18 3 19 4 14 16 2 20 6 8 18"></polygon></g></svg> Submit Edit </button>
+         <button name="edit_offer_cancel" value="Cancel" type="submit" 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">Cancel</button>
+        </div>
        </div>
       </div>
      </div>
     </div>
+   </div>
+ </section>
  {% elif data.show_bid_form %}
-              <section class="bg-white p-6">
+ <section class="p-6 bg-body dark:bg-gray-700">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">New Bid</h4> </div>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">New Bid</h4>
+   </div>
   </div>
  </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6 w-1/2">Details</th>
-                        <th scope="col" class="w-1/2"></th>
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+   <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+    <div class="px-6">
+     <div class="w-full mt-6 pb-6 overflow-x-auto">
+      <table class="w-full min-w-max text-sm">
+       <thead class="uppercase">
+        <tr class="text-left">
+         <th class="p-0">
+          <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+           <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+          </div>
+         </th>
+         <th class="p-0">
+          <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+           <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+          </div>
+         </th>
         </tr>
        </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 ">Amount you will get <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }} {% if data.xmr_type == true %} (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees). {% else %} (excluding a tx fee). {% endif %}</td>
-                      <td class="">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}</td>
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 h-20">
+        <td class="py-3 px-6">Amount you will get <span class="bold" id="bid_amt_from">{{ data.amt_from }}</span> {{ data.tla_from }}
+        {% if data.xmr_type == true %} (excluding {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }} in tx fees).
+        {% else %} (excluding a tx fee).
+        {% endif %}</td>
+        <td class="py-3 px-6">Amount you will send <span class="bold" id="bid_amt_to">{{ data.amt_to }}</span> {{ data.tla_to }}
+        </td>
        </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold bold">Send From Address</td>
-                      <td class="py-4 pr-5">
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <td class="py-3 px-6 bold">Send From Address</td>
+        <td class="py-3 px-6">
          <div class="w-full md:flex-1">
           <div class="relative">
            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
            </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from"> {% for a in addrs %}
-                          <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option> {% endfor %}
+           <select class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addr_from">
+            {% for a in addrs %}
+            <option value="{{ a[0] }}" {% if data.nb_addr_from==a[0] %} selected{% endif %}>{{ a[0] }} {{ a[1] }}</option>
+            {% endfor %}
             <option value="-1" {% if data.nb_addr_from=="-1" %} selected{% endif %}>New Address</option>
            </select>
           </div>
@@ -331,36 +445,36 @@
         </td>
        </tr>
        {% if data.amount_negotiable == true %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Amount</td>
-                      <td class="py-4 px-6">
-                        <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <td class="py-3 px-6 bold">Amount</td>
+        <td class="py-3 px-6">
+         <input type="text" class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="bid_amount" name="bid_amount" value="{{ data.bid_amount }}" onchange="updateBidParams('amount');">
         </td>
        </tr>
        {% endif %}
        {% if data.rate_negotiable == true %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Rate</td>
-                      <td class="py-4">
-                        <input type="text" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <td class="py-3 px-6 bold">Rate</td>
+        <td class="py-3 px-6"> <input type="text" class="bg-gray-50 text-gray-900 appearance-none pr-10 dark:bg-gray-500 dark:text-white border border-gray-100 dark:border-gray-400 dark:text-gray-50 dark:placeholder-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="bid_rate" name="bid_rate" value="{{ data.bid_rate }}" onchange="updateBidParams('rate');">
         </td>
        </tr>
        {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Minutes valid</td>
-                      <td class="py-4">
-                        <input type="number" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}"> </td>
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <td class="py-3 px-6 bold">Minutes valid</td>
+        <td class="py-3 px-6">
+         <input type="number" class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="validmins" min="10" max="1440" value="{{ data.nb_validmins }}">
+        </td>
        </tr>
        {% if data.debug_ui == true %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Debug Option:</td>
-                      <td class="py-4 pr-5">
+       <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+        <td class="py-3 px-6 bold">Debug Option:</td>
+        <td class="py-3 px-6">
          <div class="w-full md:flex-1">
           <div class="relative">
            <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
            </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="debugind">
+           <select class="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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="debugind">
             <option{% if data.debug_ind=="-1" %} selected{% endif %} value="-1">None</option>
               {% for a in data.debug_options %}
               <option{% if data.debug_ind==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
@@ -374,94 +488,70 @@
       </table>
      </div>
     </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+    <div class="rounded-b-md">
      <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
+      <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
        <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                  <circle cx="5" cy="5" r="4"></circle>
-                  <circle cx="19" cy="19" r="4"></circle>
-                  <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
-                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
-                  <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
-                  <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
-                </g>
-              </svg>Send Bid</button>
+        <button name="sendbid" value="Send Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Send Bid</button>
        </div>
        <div class="w-full md:w-auto p-1.5">
-                          <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Cancel </button>
+        <button name="cancel" value="Cancel" type="submit" 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">Cancel</button>
+       </div>
+      </div>
      </div>
      <!-- TODO:
-       <div class="w-full md:w-auto p-1.5 ml-2">
-        <button name="check_rates" value="Lookup Rates"  type="button" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-          <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-            <g fill="#556987">
-              <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-              <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-            </g>
-          </svg> <span>Lookup Rates</span> </button>
+      <div class="w-full md:w-auto p-1.5 ml-2"><button name="check_rates" value="Lookup Rates"  type="button" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="mr-2"
+      xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g fill="#556987"><path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path><path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg><span>Lookup Rates</span></button></div>
+      -->
+    </div>
    </div>
-      --></div>
   </div>
 </div>
+</section>
 {% else %}
-              <div class="p-6 pt-10 bg-white bg-opacity-60 rounded-b-md">
+<section>
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden">
+  <div class="pt-6 pb-6 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+   <div class="px-6">
+    <div class="w-full overflow-x-auto">
+     <div class="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">
-                          <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
-              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                  <circle cx="5" cy="5" r="4"></circle>
-                  <circle cx="19" cy="19" r="4"></circle>
-                  <polyline data-cap="butt" points="13,5 21,5 21,11 " stroke="#ffffff"></polyline>
-                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#ffffff"></polyline>
-                  <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
-                  <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
-                </g>
-              </svg>New Bid</button>
-                        </div>
-                    {% if data.sent %}
+       <div class="flex flex-wrap justify-end">
         <div class="w-full md:w-auto p-1.5">
-                      <button name="repeat_offer" value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <g fill="#556987">
-                            <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                            <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                          </g>
-                        </svg> <span>Repeat Offer</span></button>
+         <button name="newbid" value="New Bid" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">New Bid</button>
         </div>
-                    {% if data.was_revoked != true %}
+        {% if data.sent %}
         <div class="w-full md:w-auto p-1.5">
-                          <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg> Revoke Offer </button>
+         <button name="repeat_offer" value="Repeat Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Repeat Offer</button>
         </div>
-                    {% endif %}
+        <!-- todo icon -->
         <div class="w-full md:w-auto p-1.5">
-                        <button name="edit_offer" value="Edit Offer" type="submit" class="flex flex-wrap justify-center w-full 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">Edit Offer</button>
+         <button name="edit_offer" value="Edit Offer" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">Edit Offer</button>
         </div>
         <!-- todo
         {% if data.active_ind == 1 %}
+        <div class="w-full md:w-auto p-1.5"><button name="archive_offer" value="Archive Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2"
+        xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round"><polyline data-cap="butt" points="23 15 16 15 16 18 8 18 8 15 1 15"></polyline><line data-cap="butt" x1="12" y1="1" x2="12" y2="11" stroke="#ef5844"></line><path d="M18.558,6a2,2,0,0,1,1.9,1.368L23,15v6a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2V15L3.544,7.368A2,2,0,0,1,5.442,6"></path><polyline points="15 8 12 11 9 8" stroke="#ef5844"></polyline></g></svg>Archive Offer</button></div>
+        {% endif %}
+        -->
+        {% if data.was_revoked != true %}
         <div class="w-full md:w-auto p-1.5">
-                          <button name="archive_offer" value="Archive Offer" type="submit" onclick="return confirmPopup();" class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round"><polyline data-cap="butt" points="23 15 16 15 16 18 8 18 8 15 1 15"></polyline><line data-cap="butt" x1="12" y1="1" x2="12" y2="11" stroke="#ef5844"></line><path d="M18.558,6a2,2,0,0,1,1.9,1.368L23,15v6a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2V15L3.544,7.368A2,2,0,0,1,5.442,6"></path><polyline points="15 8 12 11 9 8" stroke="#ef5844"></polyline></g></svg>Archive Offer</button>
+         <button name="revoke_offer" value="Revoke Offer" type="submit" onclick="return confirmPopup();" 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">Revoke Offer</button>
         </div>
         {% endif %}
-                    -->
         {% endif %}
         <!-- todo
-<div class="w-full md:w-auto p-1.5 ml-2">
-  <button name="check_rates" type="button"  value="Lookup Rates" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-    <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-      <g fill="#556987">
-        <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-        <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-      </g>
-    </svg> <span>Lookup Rates</span> </button>
+        <div class="w-full md:w-auto p-1.5 ml-2"><button name="check_rates" type="button"  value="Lookup Rates" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="mr-2"
+        xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g fill="#556987"><path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path><path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg><span>Lookup Rates</span></button></div>
+        -->
+       </div>
+      </div>
+     </div>
+    </div>
    </div>
---></div>
   </div>
  </div>
+</section>
 {% endif %}
 <input type="hidden" id="coin_from" value="{{ data.coin_from_ind }}">
 <input type="hidden" id="coin_to" value="{{ data.coin_to_ind }}">
@@ -469,13 +559,16 @@
 <input type="hidden" id="rate_var" value="{{ data.rate_negotiable }}">
 <input type="hidden" id="amount_from" value="{{ data.amt_from }}">
 <input type="hidden" id="offer_rate" value="{{ data.rate }}">
-              <input type="hidden" name="formid" value="{{ form_id }}"> </form>
+<input type="hidden" name="formid" value="{{ form_id }}">
+</form>
 <p id="rates_display"></p>
 </div>
 </div>
 </div>
 </div>
 </section>
+</div>
+{% include 'footer.html' %}
 <script>
     const xhr_rates = new XMLHttpRequest();
     xhr_rates.onload = () => {
@@ -538,7 +631,5 @@
       return confirm("Are you sure?");
     }
 </script>
-</div>
-{% include 'footer.html' %}
 </body>
 </html>

basicswap/templates/offer_confirm.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,19 +14,25 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place an new offer</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Setup offers parameters</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Confirm your offer information</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Confirm your offer information</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -38,24 +44,21 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Confirm your offer information</h2>
-            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Place an order on the order book.</p>
      </div>
     </div>
    </div>
   </div>
-  </section <section class="bg-white">
-  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
-    <div class="pb-6 border-coolGray-100">
-      <div class="flex flex-wrap items-center justify-between -m-2">
-        <div class="w-full p-2">
+ </section>
  {% include 'inc_messages.html' %}
+ <section>
   <div class="p-5 mb-10">
    <div class="mx-4 p-4">
     <div class="flex items-center">
@@ -67,39 +70,49 @@
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 1</div>
      </div>
-                <div class="flex-auto border-t-2 border-blue-500"></div>
+     <div class="flex-auto border-t-2 border-blue-500 dark:border-blue-500"></div>
      <div class="flex items-center text-teal-600 relative ">
-                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500 dark:border-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 2</div>
      </div>
-                <div class="flex-auto border-t-2 border-blue-500"></div>
+     <div class="flex-auto border-t-2 border-blue-500 dark:border-blue-500"></div>
      <div class="flex items-center text-gray-500 relative">
-                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500 dark:border-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#3b82f6"></polygon>
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Confirm</div>
      </div>
     </div>
    </div>
   </div>
-          <form method="post">
-            <div class="py-6 border-b border-coolGray-100">
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+    <div class="flex flex-wrap items-center justify-between -mx-4 mb-8 pb-6 border-b border-gray-400 border-opacity-20">
+     <div class="w-full sm:w-auto px-4 mb-6 sm:mb-0">
+      <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">CONFIRM</h4>
+      <!-- todo add subtitle <p class="text-sm text-coolGray-500">Lorem ipsum dolor sit amet</p> -->
+     </div>
+    </div>
+    <form method="post" autocomplete="off" id='form'>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -117,10 +130,10 @@
             </g>
            </svg>
           </div>
-                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_to" disabled>
+          <select class="cursor-not-allowed disabled-select 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-" name="addr_to" disabled>
            <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
             {% for a in addrs_to %}
-                          <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}" class="">{{ a[0] }} {{ a[1] }}</option>
+            <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
             {% endfor %}
           </select>
          </div>
@@ -128,11 +141,11 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -141,7 +154,6 @@
           </svg>
           <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <title>contacts 2</title>
             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round">
              <path data-cap="butt" d="M11.992,11.737,14.2,13.4A2,2,0,0,1,15,15v1H7V15a2,2,0,0,1,.8-1.6l2.208-1.663" stroke="#3b82f6"></path>
              <rect x="9" y="7" width="4" height="5" rx="2" ry="2" stroke="#3b82f6"></rect>
@@ -150,7 +162,7 @@
             </g>
            </svg>
           </div>
-                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="addr_from" disabled>
+          <select class="cursor-not-allowed disabled-select 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" name="addr_from" disabled>
             {% for a in addrs %}
             <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
             {% endfor %}
@@ -161,12 +173,11 @@
        </div>
       </div>
      </div>
-
-              <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Swap Type</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -183,7 +194,7 @@
             </g>
            </svg>
           </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="swap_type" id="swap_type" disabled>
+          <select class="cursor-not-allowed disabled-select 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" name="swap_type" id="swap_type" disabled>
             {% for a in swap_types %}
             <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
             {% endfor %}
@@ -193,25 +204,31 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Send</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
+           <div class="custom-select">
             <div class="relative">
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
-                            <option value="-1"></option>
+             <select class="select cursor-not-allowed disabled-select 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" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
+              <option value="-1">Select coin you send</option>
               {% for c in coins_from %}
               <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
               {% endfor %}
              </select>
+             <div class="select-dropdown">
+              <img class="select-icon" src="" alt="">
+              <img class="select-image" src="" alt="">
+             </div>
+            </div>
            </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
@@ -227,11 +244,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly>
+           </div>
           </div>
           {% if data.swap_style == 'xmr' %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Confirm Target</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -244,10 +262,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly>
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate From</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee Rate From</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -260,9 +279,14 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly> </div><span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.from_fee_src }}</span> </div>
+            <input class="cursor-not-allowed disabled-input 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" name="fee_rate_from" value="{{ data.from_fee_override }}" readonly>
+           </div>
+           <span class="text-sm mt-2 block dark:text-white">
+            <b>Fee Rate Source:</b> {{ data.from_fee_src }}
+           </span>
+          </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Increase By</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -278,38 +302,48 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_from_extra_" disabled>
+            <select class="cursor-not-allowed disabled-select 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" name="fee_from_extra_" disabled>
              <option value="0">None</option>
              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
              <option value="100" {% if data.fee_from_extra==100 %} selected{% endif %}>100%</option>
             </select>
-                        </div> <span class="text-sm mt-2 block"><b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}</span></div>
+           </div>
+           <span class="text-sm mt-2 block dark:text-white">
+            <b>Lock Tx Spend Fee:</b> {{ data.amt_from_lock_spend_tx_fee }} {{ data.tla_from }}
+           </span>
+          </div>
           {% endif %}
          </div>
         </div>
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Get</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
+           <div class="custom-select">
             <div class="relative">
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5 opacity-70" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
+             <select class="cursor-not-allowed disabled-select select 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" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
               <option value="-1"></option>
               {% for c in coins %}
               <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
               {% endfor %}
              </select>
+             <div class="select-dropdown">
+              <img class="select-icon" src="" alt="">
+              <img class="select-image" src="" alt="">
+             </div>
+            </div>
            </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
@@ -325,11 +359,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly>
+           </div>
           </div>
           {% if data.swap_style == 'xmr' %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee To Confirm Target</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -342,10 +377,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_to_conf }}" readonly>
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee Rate To</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee Rate To</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -358,9 +394,14 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly> </div> <span class="text-sm mt-2 block"><b>Fee Rate Source:</b> {{ data.to_fee_src }}</span> </div>
+            <input class="cursor-not-allowed disabled-input 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" name="fee_rate_to" value="{{ data.to_fee_override }}" readonly>
+           </div>
+           <span class="text-sm mt-2 block dark:text-white">
+            <b>Fee Rate Source:</b> {{ data.to_fee_src }}
+           </span>
+          </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee To Increase By</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -376,7 +417,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra_" disabled>
+            <select class="cursor-not-allowed disabled-select 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" name="fee_to_extra_" disabled>
              <option value="0">None</option>
              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
@@ -387,7 +428,7 @@
           {% endif %}
           {% if data.swap_style == 'xmr' and coin_to != '6' %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Confirm Target</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee To Confirm Target</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -400,10 +441,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}" readonly>
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee To Increase By</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee To Increase By</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -419,7 +461,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="fee_to_extra" disabled>
+            <select class="cursor-not-allowed disabled-input disabled-select 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" name="fee_to_extra" disabled>
              <option value="0">None</option>
              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
@@ -433,16 +475,16 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Bid Amount</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Minimum Bid Amount</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -456,10 +498,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly>
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Rate</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -471,23 +514,24 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly></div>
+            <input class="cursor-not-allowed disabled-input 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');" readonly>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
-            <div class="py-6 border-b border-coolGray-100">
+     </div>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Time</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Time</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Offer valid (hrs)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -500,11 +544,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}" readonly>
+           </div>
           </div>
           {% if data.debug_ui == true %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Contract Locked (Mins)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -517,14 +562,15 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}" readonly>
+           </div>
            {% if data.swap_style != 'xmr' %}
-                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+           <div class="text-sm text-gray-500 mt-1.5 dark:text-white">(Participate txn will be locked for half the time.)</div>
            {% endif %}
           </div>
            {% else %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Contract locked (Hours)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -537,9 +583,10 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}" readonly>
+           </div>
            {% if data.swap_style != 'xmr' %}
-                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+           <div class="text-sm text-gray-500 mt-1.5 dark:text-white">(Participate txn will be locked for half the time.)</div>
            {% endif %}
           </div>
            {% endif %}
@@ -548,16 +595,16 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Strategy</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Auto Accept Strategy</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -575,7 +622,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 opacity-70" name="automation_strat_id" disabled>
+            <select class="cursor-not-allowed disabled-select 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" name="automation_strat_id" disabled>
              <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
              {% for a in automation_strategies %}
              <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
@@ -588,32 +635,48 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Options</p>
+         <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="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
-                      <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
+          <input class="cursor-not-allowed disabled-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="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
+          <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
          </div>
-                    <div class="form-check form-check-inline">
-                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer opacity-70" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
-                      <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
+         <div class="form-check form-check-inline mt-2">
+          <input class="cursor-not-allowed disabled-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_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
+          <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
          </div>
         </div>
        </div>
       </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>
+  </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">
-                    <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg class="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="#556987" stroke-linejoin="round"><circle cx="12" cy="12" r="11"></circle><polyline points="13 16 9 12 13 8" stroke="#556987"></polyline></g></svg>
-                      </svg> <span>Back</span> </button>
+           <button name="step2" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">
+            <svg class="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">
+              <circle cx="12" cy="12" r="11"></circle>
+              <polyline points="13 16 9 12 13 8" stroke="#ffffff"></polyline>
+             </g>
+            </svg>
+            </svg>
+            <span>Back</span>
+           </button>
           </div>
           <div class="w-full md:w-auto p-1.5">
            <button name="submit_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -622,11 +685,48 @@
               <circle cx="12" cy="12" r="11"></circle>
               <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
              </g>
-                      </svg> <span>Confirm Offer</span></button>
+            </svg>
+            <span>Confirm Offer</span>
+           </button>
           </div>
          </div>
         </div>
        </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <script>
+      const selects = document.querySelectorAll('select.disabled-select');
+      for (const select of selects) {
+       if (select.disabled) {
+        select.classList.add('disabled-select-enabled');
+       } else {
+        select.classList.remove('disabled-select-enabled');
+       }
+      }
+</script>
+
+<script>
+          const inputs = document.querySelectorAll('input.disabled-input, input[type="checkbox"].disabled-input');
+           for (const input of inputs) {
+            if (input.readOnly) {
+             input.classList.add('disabled-input-enabled');
+            } else {
+             input.classList.remove('disabled-input-enabled');
+            }
+           }
+</script>
+<style>
+.disabled-input-enabled {
+    opacity: 0.50 !important;
+}
+select.disabled-select-enabled {
+    opacity: 0.50 !important;
+}
+ </style> 
  <input type="hidden" name="formid" value="{{ form_id }}">
  <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
  <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
@@ -645,8 +745,10 @@
  <input type="hidden" name="rate_var" value="rv">
  {% endif %}
 </form>
+<!-- ?? -->
 <script src="static/js/new_offer.js"></script>
-        </div>
+<script src="static/js/coin_icons.js"></script>
+<script src="static/js/coin_icons_2.js"></script>
 </div>
 </div>
 </div>

basicswap/templates/offer_new_1.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place an new offer</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,22 +28,21 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden"> <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt=""> <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
+    <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
+    <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Place an new offer</h2>
-            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Place an order on the order book.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-20 h-full overflow-hidden bg-white rounded-t-md">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full p-2">
  {% include 'inc_messages.html' %}
+ <section>
   <div class="p-5 mb-10">
    <div class="mx-4 p-4">
     <div class="flex items-center">
@@ -53,39 +54,49 @@
         </g>
        </svg>
       </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 1</div>
      </div>
-                  <div class="flex-auto border-t-2 border-teal-600"></div>
+     <div class="flex-auto border-t-2 border-teal-600 dark:border-gray-400"></div>
      <div class="flex items-center text-teal-600 relative">
-                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600 dark:border-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#d1d5db"></path>
         </g>
        </svg>
       </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 2</div>
      </div>
-                  <div class="flex-auto border-t-2 border-teal-600"></div>
+     <div class="flex-auto border-t-2 border-teal-600 dark:border-gray-400"></div>
      <div class="flex items-center text-gray-500 relative">
-                    <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600 dark:border-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
         </g>
        </svg>
       </div>
-                    <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Confirm</div>
      </div>
     </div>
    </div>
   </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+    <div class="flex flex-wrap items-center justify-between -mx-4 mb-8 pb-6 border-b border-gray-400 border-opacity-20">
+     <div class="w-full sm:w-auto px-4 mb-6 sm:mb-0">
+      <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">STEP 1</h4>
+      <!-- todo add subtitle <p class="text-sm text-coolGray-500">Lorem ipsum dolor sit amet</p> -->
+     </div>
+    </div>
     <form method="post" autocomplete="off" id='form'>
-              <div class="py-6 border-b border-t border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -103,7 +114,7 @@
             </g>
            </svg>
           </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to">
+          <select 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" name="addr_to">
            <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
             {% for a in addrs_to %}
             <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
@@ -114,11 +125,11 @@
        </div>
       </div>
      </div>
-              <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -135,7 +146,7 @@
             </g>
            </svg>
           </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from">
+          <select 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" name="addr_from">
             {% for a in addrs %}
             <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
             {% endfor %}
@@ -146,12 +157,11 @@
        </div>
       </div>
      </div>
-
-              <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Swap Type</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -168,7 +178,7 @@
             </g>
            </svg>
           </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="swap_type" id="swap_type">
+          <select 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" name="swap_type" id="swap_type">
             {% for a in swap_types %}
             <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
             {% endfor %}
@@ -179,25 +189,31 @@
       </div>
      </div>
 
-              <div class="py-6 border-b border-coolGray-100">
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+  <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Send</p>
    </div>
    <div class="w-full md:flex-1 p-3">
     <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
+      <div class="custom-select">
        <div class="relative">
         <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>
         </svg>
-                            <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
+        <select class="select 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="coin_from" name="coin_from" onchange="set_rate('coin_from');">
          <option value="-1">Select coin you send</option>
          {% for c in coins_from %}
          <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
           {% endfor %}
         </select>
+        <div class="select-dropdown">
+         <img class="select-icon" src="" alt="">
+         <img class="select-image" src="" alt="">
+        </div>
+       </div>
       </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
@@ -213,32 +229,38 @@
          </g>
         </svg>
        </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Amount you send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');"> </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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="Amount you send" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');">
+      </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
-              <div class="py-6 border-b border-coolGray-100">
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+  <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Get</p>
    </div>
    <div class="w-full md:flex-1 p-3">
     <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
+      <div class="custom-select">
        <div class="relative">
         <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>
         </svg>
-                            <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');">
-                              <option value="-1">Select coin you get</option>
+        <select class="select 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0"" id="coin_to" name="coin_to" onchange="set_rate('coin_to');">
+         <option class="no-space" value="-1">Select coin you get</option>
          {% for c in coins %}
-                              <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
-                              {% endfor %}
+         <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>{% endfor %}
         </select>
+        <div class="select-dropdown">
+         <img class="select-icon" src="" alt="">
+         <img class="select-image" src="" alt="">
+        </div>
+       </div>
       </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
@@ -254,23 +276,24 @@
          </g>
         </svg>
        </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Amount you get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');"> </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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="Amount you get" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');">
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
-              <div class="py-6 border-b border-coolGray-100">
+</div>
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+  <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Bid Amount</p>
    </div>
    <div class="w-full md:flex-1 p-3">
     <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 p-3">
-                          <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
+      <p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Minimum Bid Amount</p>
       <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
         <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -284,10 +307,11 @@
          </g>
         </svg>
        </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded"> </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="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded">
+      </div>
      </div>
      <div class="w-full md:w-1/2 p-3">
-                          <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
+      <p class="mb-1.5 font-medium text-base dark:text-white text-coolGray-800">Rate</p>
       <div class="relative">
        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
         <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -299,10 +323,11 @@
          </g>
         </svg>
        </div>
-                            <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');"> </div>
-                            <div class="form-check form-check-inline">
-                            <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_lock" name="rate_lock" value="rl" checked=checked>
-                            <label class="cursor-help form-check-label inline-block text-gray-800" for="inlineCheckbox1">Lock Rate</label>
+       <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>
     </div>
@@ -310,57 +335,55 @@
   </div>
  </div>
 </div>
-              <div class="py-6 border-coolGray-100">
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+  <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Options</p>
+    <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="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %}>
-                        <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
+     <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>
-                      <div class="form-check form-check-inline">
-                        <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %}>
-                        <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
+    <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>
    </div>
   </div>
  </div>
 </div>
-              <div class="py-6 border-b border-t border-coolGray-100">
+<div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
  <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+  <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
    <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Rates</p>
+    <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Rates</p>
    </div>
-                    <div class="w-full md:flex-1 p-3">
+   <div class="w-full md:flex-1 p-3 dark:text-white text-sm monospace">
     <p id="rates_display"></p>
+    <!-- todo adjust font-size -->
    </div>
   </div>
  </div>
 </div>
-              <div class="p-6 pt-10 bg-white bg-opacity-60 mb-10 rounded-b-md mb-20">
-                <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">
-                <button name="show_rates_table" type="button" value="Show Rates Table" onclick='lookup_rates_table();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                  <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                    <g fill="#556987">
-                      <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                      <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                    </g>
-                  </svg> <span>Show Rates Table</span> </button>
-              </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"><button name="show_rates_table" type="button" value="Show Rates Table" onclick='lookup_rates_table();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="mr-2"
+          xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24"><g fill="#556987"><path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path><path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path></g></svg><span>Show Rates Table</span></button></div>-->
          <div class="w-full md:w-auto p-1.5">
-                      <button name="check_rates" type="button" value="Lookup Rates (RAW)" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
-                          <g fill="#556987">
-                            <path fill="#556987" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
-                            <path data-color="#556987" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
-                          </g>
-                        </svg> <span>Check Current Rates</span></button>
+          <button name="check_rates" type="button" value="Lookup Rates (RAW)" onclick='lookup_rates();' class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600"><span>Check Current Rates</span>
+          </button>
          </div>
          <div class="w-full md:w-auto p-1.5">
           <button name="continue" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -369,18 +392,27 @@
              <circle cx="12" cy="12" r="11"></circle>
              <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
             </g>
-                        </svg> <span>Continue</span></button>
+           </svg>
+           <span>Continue</span>
+          </button>
+         </div>
+         <input type="hidden" name="formid" value="{{ form_id }}">
+         <input type="hidden" name="step1" value="a">
+         </form>
         </div>
        </div>
       </div>
      </div>
-              <input type="hidden" name="formid" value="{{ form_id }}">
-              <input type="hidden" name="step1" value="a"> </form>
     </div>
    </div>
   </div>
  </div>
 </section>
+<style>
+select.select-disabled {
+opacity: 0.50 !important;
+}
+</style>
 <script>
     const xhr_rates = new XMLHttpRequest();
     xhr_rates.onload = () => {
@@ -477,13 +509,16 @@
         swap_type.disabled = true;
         swap_type.value = 'xmr_swap';
         make_hidden = true;
+        swap_type.classList.add('select-disabled'); // Add the class to the disabled select
       } else
       if (coin_from == '11' /* PIVX */ || coin_from == '12' /* DASH */ || coin_from == '13' /* FIRO */) {
         swap_type.disabled = true;
         swap_type.value = 'seller_first';
         make_hidden = true;
+        swap_type.classList.add('select-disabled'); // Add the class to the disabled select
       } else {
         swap_type.disabled = false;
+        swap_type.classList.remove('select-disabled'); // Remove the class from the enabled select
       }
       let swap_type_hidden = document.getElementById('swap_type_hidden');
       if (make_hidden) {
@@ -546,6 +581,8 @@
     });
 </script>
 <script src="static/js/new_offer.js"></script>
+<script src="static/js/coin_icons.js"></script>
+<script src="static/js/coin_icons_2.js"></script>
 </div>
 {% include 'footer.html' %}
 </div>

basicswap/templates/offer_new_2.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,13 +14,17 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/newoffer">Place an new offer</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/newoffer">Place an new offer</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">Setup offer parameters</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">Setup offers parameters</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -32,24 +36,21 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
-            <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offer parameters</h2>
-            <p class="font-semibold text-coolGray-200">Place an order on the order book.</p>
+      <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Setup offers parameters</h2>
+      <p class="font-normal text-coolGray-200 dark:text-white">Place an order on the order book.</p>
      </div>
     </div>
    </div>
   </div>
-  </section class="bg-white">
-  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden bg-white rounded-t-md">
-    <div class="pb-6 border-coolGray-100">
-      <div class="flex flex-wrap items-center justify-between -m-2">
-        <div class="w-full p-2">
+ </section>
  {% include 'inc_messages.html' %}
+ <section>
   <div class="p-5 mb-10">
    <div class="mx-4 p-4">
     <div class="flex items-center">
@@ -61,39 +62,49 @@
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 1</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 1</div>
      </div>
-                <div class="flex-auto border-t-2 border-blue-500"></div>
+     <div class="flex-auto border-t-2 border-blue-500 dark:border-blue-500"></div>
      <div class="flex items-center text-teal-600 relative ">
-                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-blue-500 dark:border-blue-500">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <path d="M19.5,23.5H4.5V20.2l.667-.445C9.549,16.828,16.5,10.78,16.5,7c0-2.654-1.682-4-5-4A9.108,9.108,0,0,0,7.333,4.248L6.084,5.08,4.42,2.584l1.247-.832A11.963,11.963,0,0,1,11.5,0c4.935,0,8,2.683,8,7,0,5-6.5,10.662-10.232,13.5H19.5ZM6,21H6Z" fill="#3b82f6"></path>
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Step 2</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Step 2</div>
      </div>
-                <div class="flex-auto border-t-2 border-teal-600"></div>
+     <div class="flex-auto border-t-2 border-teal-600 dark:border-gray-400"></div>
      <div class="flex items-center text-gray-500 relative">
-                  <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600">
+      <div class="rounded-full transition duration-500 ease-in-out h-12 w-12 py-3 border-2 border-teal-600 dark:border-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">
         <g fill="#3b82f6">
          <polygon points="9 21 1 13 4 10 9 15 21 3 24 6 9 21" fill="#d1d5db"></polygon>
         </g>
        </svg>
       </div>
-                  <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase text-gray-500">Confirm</div>
+      <div class="absolute top-0 -ml-10 text-center mt-16 w-32 text-xs font-medium uppercase dark:text-white text-gray-600">Confirm</div>
+     </div>
     </div>
    </div>
   </div>
+ </section>
+ <section class="py-3">
+  <div class="container px-4 mx-auto">
+   <div class="p-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+    <div class="flex flex-wrap items-center justify-between -mx-4 mb-8 pb-6 border-b border-gray-400 border-opacity-20">
+     <div class="w-full sm:w-auto px-4 mb-6 sm:mb-0">
+      <h4 class="text-2xl font-bold tracking-wide dark:text-white mb-1">STEP 2</h4>
+      <!-- todo add subtitle <p class="text-sm text-coolGray-500">Lorem ipsum dolor sit amet</p> -->
      </div>
-          <form method="post">
-            <div class="py-6 border-b border-coolGray-100">
+    </div>
+    <form method="post" autocomplete="off" id='form'>
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Select network</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Network</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -111,7 +122,7 @@
             </g>
            </svg>
           </div>
-                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_to" disabled>
+          <select class="cursor-not-allowed disabled-select 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 disabled:opacity-20" name="addr_to" disabled>
            <option{% if data.addr_to=="-1" %} selected{% endif %} value="-1">Public Network</option>
             {% for a in addrs_to %}
             <option{% if data.addr_to==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
@@ -122,12 +133,11 @@
        </div>
       </div>
      </div>
-
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Select address</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Select Address</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -144,8 +154,10 @@
             </g>
            </svg>
           </div>
-                      <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="addr_from" disabled> {% for a in addrs %}
-                        <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option> {% endfor %}
+          <select class="cursor-not-allowed disabled-select 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" name="addr_from" disabled>
+            {% for a in addrs %}
+            <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
+            {% endfor %}
             <option{% if data.addr_from=="-1" %} selected{% endif %} value="-1">New Address</option>
           </select>
          </div>
@@ -153,12 +165,11 @@
        </div>
       </div>
      </div>
-
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                  <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                      <p class="text-sm text-coolGray-800 font-semibold">Swap Type</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Swap Type</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="relative">
@@ -175,7 +186,7 @@
             </g>
            </svg>
           </div>
-                        <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="swap_type" id="swap_type" disabled>
+          <select class="cursor-not-allowed disabled-select 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" name="swap_type" id="swap_type" disabled>
             {% for a in swap_types %}
             <option{% if data.swap_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
             {% endfor %}
@@ -185,26 +196,31 @@
        </div>
       </div>
      </div>
-
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">You Send</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Send</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
+           <div class="custom-select">
             <div class="relative">
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
-                            <option value="-1"></option>
+             <select class="select cursor-not-allowed disabled-select 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" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
+              <option value="-1">Select coin you send</option>
               {% for c in coins_from %}
               <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
               {% endfor %}
              </select>
+             <div class="select-dropdown">
+              <img class="select-icon" src="" alt="">
+              <img class="select-image" src="" alt="">
+             </div>
+            </div>
            </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
@@ -220,11 +236,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly> </div>
+            <input class="cursor-not-allowed disabled-input appearance-none pl-10 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="amt_from" name="amt_from" value="{{ data.amt_from }}" onchange="set_rate('amt_from');" readonly>
+           </div>
           </div>
           {% if data.swap_style == 'xmr' %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Confirm Target</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -237,10 +254,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}"> </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="number" name="fee_from_conf" min="1" max="32" value="{{ data.fee_from_conf }}">
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Increase By</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -256,7 +274,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_from_extra">
+            <select 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" name="fee_from_extra">
              <option value="0">None</option>
              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
@@ -270,25 +288,31 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">You Get</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">You Get</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
+           <div class="custom-select">
             <div class="relative">
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select is="ms-dropdown" class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-5" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
+             <select class="select cursor-not-allowed disabled-select 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" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
               <option value="-1"></option>
               {% for c in coins %}
               <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}" data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
               {% endfor %}
              </select>
+             <div class="select-dropdown">
+              <img class="select-icon" src="" alt="">
+              <img class="select-image" src="" alt="">
+             </div>
+            </div>
            </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
@@ -304,11 +328,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="amt_to" name="amt_to" value="{{ data.amt_to }}" onchange="set_rate('amt_to');" readonly>
+           </div>
           </div>
           {% if data.swap_style == 'xmr' and coin_to != '6' %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Confirm Target</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Confirm Target</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -321,10 +346,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}"></div>
+            <input class="disabled-input 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="number" name="fee_to_conf" min="1" max="32" value="{{ data.fee_from_conf }}">
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Fee From Increase By</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Fee From Increase By</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -340,7 +366,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_to_extra">
+            <select 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" name="fee_to_extra">
              <option value="0">None</option>
              <option value="10" {% if data.fee_from_extra==10 %} selected{% endif %}>10%</option>
              <option value="50" {% if data.fee_from_extra==50 %} selected{% endif %}>50%</option>
@@ -354,16 +380,16 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Bid amount</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Bid Amount</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Minimum Bid Amount</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Minimum Bid Amount</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -377,10 +403,11 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly> </div>
+            <input class="cursor-not-allowed disabled-input 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="amt_bid_min" name="amt_bid_min" value="{{ data.amt_bid_min }}" title="Bids with an amount below the minimum bid value will be discarded" readonly>
+           </div>
           </div>
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Rate</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Rate</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -392,23 +419,24 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none block w-full p-2.5 opacity-70" type="text" id="rate" name="rate" value="{{ data.rate }}" onchange="set_rate('rate');" readonly></div>
+            <input class="cursor-not-allowed disabled-input 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');" readonly>
+           </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Time</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Time</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Offer valid (hrs)</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Offer valid (hrs)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -421,11 +449,12 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}"></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="number" name="validhrs" min="1" max="48" value="{{ data.validhrs }}">
+           </div>
           </div>
           {% if data.debug_ui == true %}
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract Locked (Mins)</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Contract Locked (Mins)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -438,13 +467,13 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}"> </div> {% if data.swap_style != 'xmr' %}
+            <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="number" name="lockmins" min="10" max="5000" value="{{ data.lockmins }}">
+           </div>
+           {% if data.swap_style != 'xmr' %}
            <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
            {% endif %}
-                    </div>
-                    {% else %}
-                      <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Contract locked (Hours)</p>
+          </div> {% else %} <div class="w-full md:w-1/2 p-3">
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Contract locked (Hours)</p>
            <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
              <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
@@ -457,9 +486,10 @@
               </g>
              </svg>
             </div>
-                          <input class="pl-10 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}"></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="number" name="lockhrs" min="1" max="96" value="{{ data.lockhrs }}">
+           </div>
            {% if data.swap_style != 'xmr' %}
-                        <div class="text-sm text-gray-500 mt-1.5">(Participate txn will be locked for half the time.)</div>
+           <div class="text-sm text-gray-500 mt-1.5 dark:text-white">(Participate txn will be locked for half the time.)</div>
            {% endif %}
           </div>
           {% endif %}
@@ -468,16 +498,16 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-b border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Strategy (BETA)</p>
+         <p class="text-sm text-coolGray-800 dark:text-white font-semibold">Strategy</p>
         </div>
         <div class="w-full md:flex-1 p-3">
          <div class="flex flex-wrap -m-3">
           <div class="w-full md:w-1/2 p-3">
-                        <p class="mb-1.5 font-medium text-base text-coolGray-800">Auto Accept Strategy</p>
+           <p class="mb-1.5 font-medium text-base text-coolGray-800 dark:text-white">Auto Accept Strategy</p>
            <div class="relative">
             <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
@@ -495,7 +525,7 @@
               </g>
              </svg>
             </div>
-                          <select class="pl-10 appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="automation_strat_id">
+            <select 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" name="automation_strat_id">
              <option value="-1" {% if data.automation_strat_id==-1 %} selected{% endif %}>None</option>
              {% for a in automation_strategies %}
              <option value="{{ a[0] }}" {% if data.automation_strat_id==a[0] %} selected{% endif %}>{{ a[1] }}</option>
@@ -508,32 +538,48 @@
        </div>
       </div>
      </div>
-            <div class="py-6 border-coolGray-100">
+     <div class="py-3 border-b items-center justify-between -mx-4 mb-6 pb-6 border-gray-400 border-opacity-20">
       <div class="w-full md:w-10/12">
-                <div class="flex flex-wrap -m-3">
+       <div class="flex flex-wrap -m-3 w-full sm:w-auto px-4 mb-6 sm:mb-0">
         <div class="w-full md:w-1/3 p-3">
-                    <p class="text-sm text-coolGray-800 font-semibold">Options</p>
+         <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="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
-                      <label class="form-check-label inline-block text-gray-800" for="inlineCheckbox2">Amount Variable</label>
+          <input class="cursor-not-allowed disabled-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="amt_var" name="amt_var" value="av" {% if data.amt_var==true %} checked="checked" {% endif %} disabled>
+          <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox2">Amount Variable</label>
          </div>
-                    <div class="form-check form-check-inline">
-                      <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" id="rate_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
-                      <label class="form-check-label bg-gray-50inline-block text-gray-800" for="inlineCheckbox3">Rate Variable</label>
+         <div class="form-check form-check-inline mt-2">
+          <input class="cursor-not-allowed disabled-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_var" name="rate_var" value="rv" {% if data.rate_var==true %} checked="checked" {% endif %} disabled>
+          <label class="form-check-label ml-2 text-sm font-medium text-gray-800 dark:text-white" for="inlineCheckbox3">Rate Variable</label>
          </div>
         </div>
        </div>
       </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>
+  </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">
-                    <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg class="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="#556987" stroke-linejoin="round"><circle cx="12" cy="12" r="11"></circle><polyline points="13 16 9 12 13 8" stroke="#556987"></polyline></g></svg>
-                      </svg><span>Back</span></button>
+           <button name="step1" type="submit" value="Back" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md focus:ring-0 focus:outline-none dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600">
+            <svg class="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">
+              <circle cx="12" cy="12" r="11"></circle>
+              <polyline points="13 16 9 12 13 8" stroke="#ffffff"></polyline>
+             </g>
+            </svg>
+            </svg>
+            <span>Back</span>
+           </button>
           </div>
           <div class="w-full md:w-auto p-1.5">
            <button name="check_offer" value="Continue" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
@@ -542,25 +588,112 @@
               <circle cx="12" cy="12" r="11"></circle>
               <polyline points="11 8 15 12 11 16" stroke="#ffffff"></polyline>
              </g>
-                      </svg><span>Continue</span></button>
+            </svg>
+            <span>Continue</span>
+           </button>
+          </div>
+         </div>
         </div>
        </div>
       </div>
      </div>
+    </div>
+   </div>
+  </div>
+ </section>
  <input type="hidden" name="formid" value="{{ form_id }}">
  <input type="hidden" name="addr_to" value="{{ data.addr_to }}">
  <input type="hidden" name="addr_from" value="{{ data.addr_from }}">
  <input type="hidden" name="swap_type" value="{{ data.swap_type }}">
  <input type="hidden" name="coin_from" value="{{ data.coin_from }}">
-            <input type="hidden" name="coin_to" value="{{ data.coin_to }}"> {% if data.amt_var==true %}
-            <input type="hidden" name="amt_var" value="true"> {% endif %} {% if data.rate_var==true %}
-            <input type="hidden" name="rate_var" value="true"> {% endif %} </form>
+ <input type="hidden" name="coin_to" value="{{ data.coin_to }}">
+ {% if data.amt_var==true %}
+ <input type="hidden" name="amt_var" value="true">
+ {% endif %}
+ {% if data.rate_var==true %}
+ <input type="hidden" name="rate_var" value="true">
+{% endif %}
+</form>
+<script>
+      const selects = document.querySelectorAll('select.disabled-select');
+      for (const select of selects) {
+       if (select.disabled) {
+        select.classList.add('disabled-select-enabled');
+       } else {
+        select.classList.remove('disabled-select-enabled');
+       }
+      }
+</script>
+
+<script>
+          const inputs = document.querySelectorAll('input.disabled-input, input[type="checkbox"].disabled-input');
+           for (const input of inputs) {
+            if (input.readOnly) {
+             input.classList.add('disabled-input-enabled');
+            } else {
+             input.classList.remove('disabled-input-enabled');
+            }
+           }
+</script>
+
+<style>
+.disabled-input-enabled {
+    opacity: 0.50 !important;
+}
+select.disabled-select-enabled {
+    opacity: 0.50 !important;
+}
+ </style>  
+
 <script src="static/js/new_offer.js"></script>
+<style>
+  .custom-select .select {
+   appearance: none;
+   background-position: 10px center;
+   background-repeat: no-repeat;
+   position: relative;
+  }
+
+  .custom-select select::-webkit-scrollbar {
+   width: 0;
+  }
+
+  .custom-select .select option {
+   padding-left: 0;
+   text-indent: 0;
+   background-repeat: no-repeat;
+   background-position: 0 50%;
+  }
+
+  .custom-select .select option.no-space {
+   padding-left: 0;
+  }
+
+  .custom-select .select option[data-image] {
+   background-image: url('');
+  }
+
+  .custom-select .select-icon {
+   position: absolute;
+   top: 50%;
+   left: 10px;
+   transform: translateY(-50%);
+  }
+
+  .custom-select .select-image {
+   display: none;
+   margin-top: 10px;
+  }
+
+  .custom-select .select:focus+.select-dropdown .select-image {
+   display: block;
+  }
+ </style>
+<script src="static/js/coin_icons.js"></script>
+<script src="static/js/coin_icons_2.js"></script>
 </div>
 </div>
 </div>
-  </div>
-</div>
-{% include 'footer.html' %}
+</div>{% include 'footer.html' %}
 </body>
 </html>

basicswap/templates/offers.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -15,7 +15,9 @@
       </svg>
      </li>
      <!-- todo fix link -->
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="#">{{ page_type }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="#">{{ page_type }}</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -27,17 +29,17 @@
  </section>
   <section class="py-4">
     <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
         <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
         <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
         <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
-        <div class="relative z-20 flex flex-wrap items-center">
+        <div class="relative z-20 flex flex-wrap items-center -m-3">
           <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">{{ page_type }}</h2>
-            <p class="font-semibold text-coolGray-200">{{ page_type_description }}</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_description }}</p>
      </div>
      <div class="{{ page_button }} w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            <a id="refresh" href="/newoffer" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/newoffer" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24">
         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
          <circle cx="5" cy="5" r="4"></circle>
@@ -47,190 +49,282 @@
          <polyline points=" 16,2 13,5 16,8 " stroke="#ffffff"></polyline>
          <polyline points=" 8,16 11,19 8,22 " stroke="#ffffff"></polyline>
         </g>
-              </svg><span>Place new Offer</span></a>
+       </svg>
+       <span>Place new Offer</span>
+      </a>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <!-- Chart-->
+
  {% if show_chart %}
-            <div class="mb-10 mt-8">
-              <div id="price-chart"></div>
-              <script src="/static/js/chart.js"></script>
+<section class="py-4 overflow-hidden">
+  <div class="container px-4 mx-auto">
+    <div class="flex flex-wrap -m-3">
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+    <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Bitcoin-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Bitcoin (BTC)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="btc-price-usd"></div>
+        </h3>
+      </div>
+      <div class="w-auto p-1">
+        <div id="btc-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="btc-price-btc"></div>
+        </h3>
+      </div>
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="btc-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Monero-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Monero (XMR)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="xmr-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="xmr-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div class="text-xs" id="xmr-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="xmr-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Particl-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Particl (PART)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="part-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="part-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div class="text-xs" id="part-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs"id="part-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/PIVX-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">PIVX (PIVX)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="pivx-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="pivx-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="text-xs font-semibold">
+          <div id="pivx-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="pivx-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+       <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Firo-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Firo (FIRO)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="firo-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="firo-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="text-xs font-semibold">
+          <div id="firo-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="firo-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Litecoin-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Litecoin (LTC)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="ltc-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="ltc-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="text-xs font-semibold">
+          <div id="ltc-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="ltc-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+<div class="w-full sm:w-1/2 lg:w-1/5 p-3">
+  <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-lg dark:text-white">
+        <div class="flex items-center mb-2.5">
+      <img src="/static/images/coins/Dash-20.png" height="20" width="20" class="mr-2">
+      <p class="text-sm text-neutral-500 font-medium">Dash (DASH)</p>
+    </div>
+    <div class="flex flex-wrap items-center mb-2 -m-1">
+      <div class="w-auto p-1">
+        <h3 class="font-heading text-1xl font-semibold">
+          <div id="dash-price-usd"></div>
+        </h3>
+      </div>
+          <div class="w-auto p-1">
+        <div id="dash-price-change-container" class="w-auto p-1"></div>
+      </div>
+      <div class="w-auto p-1">
+        <h3 class="text-xs font-semibold">
+          <div id="dash-price-btc"></div>
+        </h3>
+      </div>
+
+    </div>
+    <p class="text-xs text-neutral-400 font-medium">
+      Volume 24H:<div class="text-xs" id="dash-volume-24h"></div>
+    </p>
+  </div>
+</div>
+
+</section>
+
 <script>
-                CryptoCharts.roiComparison({
-                  chart_id: "price-chart",
-                  cryptocompare_api_key: "{{chart_api_key}}",
-                  cryptocompare_tickers: ["BTC", "PART", "DASH", "PIVX", "XMR", "LTC", "FIRO"],
-                  last_days: 30,
-                  axes: true,
-                  title: true,
-                  loading_indicator: false,
-                  fontFamily: "Inter,Helvetica, Arial, sans-serif",
-                  options: {
-                    colors: ["#f2a900", "#2ad167", "#1376b5", "#662D91", "#fc6621", "#345D9D", "#9B1C2E"],
-                    chart: {
-                      type: "area",
-                      height: 360
-                    },
-                    dataLabels: {
-                      enabled: false
-                    },
-                    stroke: {
-                      curve: "smooth"
-                    },
-                    xaxis: {
-                      labels: {
-                        style: {
-                          tickAmount: 4,
-                          // colors: colors,
-                          fontSize: "12px"
-                        }
-                      }
-                    },
-                    yaxis: {
-                      min: -100,
-                      max: 200,
-                      tickAmount: 4
-                    },
-                    grid: {
-                      show: true,
-                      borderColor: "#e5e5e5",
-                      strokeDashArray: 0,
-                      position: "back",
-                      xaxis: {
-                        lines: {
-                          show: false
-                        }
-                      },
-                      yaxis: {
-                        lines: {
-                          show: true
-                        }
-                      },
-                      row: {
-                        colors: undefined,
-                        opacity: 0.5
-                      },
-                      column: {
-                        colors: undefined,
-                        opacity: 0.5
-                      },
-                      padding: {
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        left: 0
-                      }
-                    },
-                    legend: {
-                      show: true,
-                      showForSingleSeries: false,
-                      showForNullSeries: true,
-                      showForZeroSeries: true,
-                      position: "right",
-                      horizontalAlign: "right",
-                      floating: false,
-                      fontSize: "14px",
-                      fontFamily: "Inter,Helvetica, Arial, sans-serif",
-                      fontWeight: 400,
-                      formatter: undefined,
-                      inverseOrder: false,
-                      width: undefined,
-                      height: undefined,
-                      tooltipHoverFormatter: undefined,
-                      customLegendItems: [],
-                      offsetX: -20,
-                      offsetY: -20,
-                      labels: {
-                        colors: undefined,
-                        useSeriesColors: false
-                      },
-                      markers: {
-                        width: 14,
-                        height: 14,
-                        strokeWidth: 2,
-                        strokeColor: "#00000",
-                        fillColors: undefined,
-                        radius: 12,
-                        customHTML: undefined,
-                        onClick: undefined,
-                        offsetX: 0,
-                        offsetY: 0
-                      },
-                      itemMargin: {
-                        horizontal: 5,
-                        vertical: 15
-                      },
-                      onItemClick: {
-                        toggleDataSeries: true
-                      },
-                      onItemHover: {
-                        highlightDataSeries: true
-                      }
-                    },
-                    annotations: {
-                      yaxis: [{
-                        y: 8600,
-                        y2: 9000,
-                        borderColor: "#000",
-                        fillColor: "#FEB019",
-                        label: {
-                          text: "Y-axis range"
-                        }
-                      }]
-                    },
-                    markers: {
-                      size: 0,
-                      colors: undefined,
-                      strokeColors: "#fff",
-                      strokeWidth: 2,
-                      strokeOpacity: 0.9,
-                      strokeDashArray: 0,
-                      fillOpacity: 1,
-                      discrete: [],
-                      shape: "circle",
-                      radius: 2,
-                      offsetX: 0,
-                      offsetY: 0,
-                      onClick: undefined,
-                      onDblClick: undefined,
-                      showNullDataPoints: true,
-                      hover: {
-                        size: undefined,
-                        sizeOffset: 3
-                      }
-                    },
-                    title: {
-                      text: '30 Days Moving % - Daily price in USD',
-                      align: 'left',
-                      margin: 10,
-                      offsetX: 10,
-                      offsetY: 0,
-                      floating: false,
-                      style: {
-                        fontSize: '14px',
-                        fontWeight: 'bold',
-                        fontFamily: "Inter,Helvetica, Arial, sans-serif",
-                        color: '#212121'
-                      },
+window.addEventListener('load', function() {
+  const api_key = 'price-chart';
+
+  const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX'];
+
+  coins.forEach(coin => {
+    fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key=${api_key}`)
+      .then(response => response.json())
+      .then(data => {
+        const priceUSD = data.RAW[coin].USD.PRICE;
+        const priceBTC = data.RAW[coin].BTC.PRICE;
+        const priceChange1h = data.RAW[coin].USD.CHANGEPCTHOUR;
+        const volume24h = data.RAW[coin].USD.TOTALVOLUME24HTO;
+
+
+        document.querySelector(`#${coin.toLowerCase()}-price-usd`).textContent = priceUSD.toFixed(2) + ' USD';
+        if (coin !== 'BTC') {
+          document.querySelector(`#${coin.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
         }
+        document.querySelector(`#${coin.toLowerCase()}-price-change-container`).textContent = priceChange1h.toFixed(2) + '%';
+        document.querySelector(`#${coin.toLowerCase()}-volume-24h`).textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
+
+        const priceChangeContainer = document.querySelector(`#${coin.toLowerCase()}-price-change-container`);
+if (priceChange1h >= 0) {
+  priceChangeContainer.innerHTML = `
+    <div class="flex flex-wrap items-center py-px px-1 border border-green-500 rounded-full">
+    <svg class="mr-0.5" width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.16667 0.916748C7.75245 0.916748 7.41667 1.25253 7.41667 1.66675C7.41667 2.08096 7.75245 2.41675 8.16667 2.41675V0.916748ZM13.5 1.66675H14.25C14.25 1.25253 13.9142 0.916748 13.5 0.916748V1.66675ZM12.75 7.00008C12.75 7.41429 13.0858 7.75008 13.5 7.75008C13.9142 7.75008 14.25 7.41429 14.25 7.00008H12.75ZM0.96967 7.80308C0.676777 8.09598 0.676777 8.57085 0.96967 8.86374C1.26256 9.15664 1.73744 9.15664 2.03033 8.86374L0.96967 7.80308ZM5.5 4.33341L6.03033 3.80308C5.73744 3.51019 5.26256 3.51019 4.96967 3.80308L5.5 4.33341ZM8.16667 7.00008L7.63634 7.53041C7.92923 7.8233 8.4041 7.8233 8.697 7.53041L8.16667 7.00008ZM8.16667 2.41675H13.5V0.916748H8.16667V2.41675ZM12.75 1.66675V7.00008H14.25V1.66675H12.75ZM2.03033 8.86374L6.03033 4.86374L4.96967 3.80308L0.96967 7.80308L2.03033 8.86374ZM4.96967 4.86374L7.63634 7.53041L8.697 6.46975L6.03033 3.80308L4.96967 4.86374ZM8.697 7.53041L14.0303 2.19708L12.9697 1.13642L7.63634 6.46975L8.697 7.53041Z" fill="#20C43A"></path>
+    </svg>
+    <span class="text-xs text-green-500 font-medium">${priceChange1h.toFixed(2)}%</span>
+    </div>`;
+} else {
+  priceChangeContainer.innerHTML = `
+    <div class="flex flex-wrap items-center py-px px-1 border border-red-500 rounded-full">
+    <svg class="mr-0.5" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.66667 7.58341C7.25245 7.58341 6.91667 7.9192 6.91667 8.33341C6.91667 8.74763 7.25245 9.08341 7.66667 9.08341V7.58341ZM13 8.33341V9.08341C13.4142 9.08341 13.75 8.74763 13.75 8.33341H13ZM13.75 3.00008C13.75 2.58587 13.4142 2.25008 13 2.25008C12.5858 2.25008 12.25 2.58587 12.25 3.00008H13.75ZM1.53033 1.13642C1.23744 0.843525 0.762563 0.843525 0.46967 1.13642C0.176777 1.42931 0.176777 1.90418 0.46967 2.19708L1.53033 1.13642ZM5 5.66675L4.46967 6.19708C4.76256 6.48997 5.23744 6.48997 5.53033 6.19708L5 5.66675ZM7.66667 3.00008L8.197 2.46975C7.9041 2.17686 7.42923 2.17686 7.13634 2.46975L7.66667 3.00008ZM7.66667 9.08341H13V7.58341H7.66667V9.08341ZM13.75 8.33341V3.00008H12.25V8.33341H13.75ZM0.46967 2.19708L4.46967 6.19708L5.53033 5.13642L1.53033 1.13642L0.46967 2.19708ZM5.53033 6.19708L8.197 3.53041L7.13634 2.46975L4.46967 5.13642L5.53033 6.19708ZM7.13634 3.53041L12.4697 8.86374L13.5303 7.80308L8.197 2.46975L7.13634 3.53041Z" fill="#FF3131"></path>
+    </svg>
+    <span class="text-xs text-red-500 font-medium">${Math.abs(priceChange1h.toFixed(2))}%</span>
+    </div>`;
 }
+
+      })
+      .catch(error => console.error(`Error fetching ${coin} data:`, error));
+  });
 });
 </script>
-            </div>
-            <!-- Chart -->
+
 {% endif %}
+
+
+
+
+
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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">
+
       <form method="post">
-              <div class="flex justify-between items-center pb-4 bg-white">
-                <div class="bg-white bg-opacity-60 rounded-b-md">
+       <div class="flex justify-between items-center pb-4 dark:text-white">
+        <div class="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">
@@ -238,7 +332,8 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 " 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>
              </svg>
-                          <select is="ms-dropdown" name="coin_from" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <!-- is="ms-dropdown" todo -->
+             <select name="coin_from" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="any" {% if filters.coin_from==-1 %} selected{% endif %}>Any</option>
               {% for c in coins_from %}
               <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_from==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
@@ -260,7 +355,8 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select is="ms-dropdown" name="coin_to" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <!-- is="ms-dropdown" todo -->
+             <select name="coin_to" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="any" {% if filters.coin_to==-1 %} selected{% endif %}>Any</option>
               {% for c in coins %}
               <option class="text-sm" value="{{ c[0] }}" {% if filters.coin_to==c[0] %} selected{% endif %} data-image="/static/images/coins/{{ c[1]|replace(" ", "-") }}-20.png">{{ c[1] }}</option>
@@ -278,7 +374,7 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select name="sort_by" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <select name="sort_by" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Time Created</option>
               <option value="rate" {% if filters.sort_by=='rate' %} selected{% endif %}>Rate</option>
              </select>
@@ -289,7 +385,7 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select name="sort_dir" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <select name="sort_dir" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
               <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
              </select>
@@ -305,7 +401,7 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select name="sent_from" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <select name="sent_from" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="any" {% if filters.sent_from=='any' %} selected{% endif %}>Any</option>
               <option value="only" {% if filters.sent_from=='only' %} selected{% endif %}>Only</option>
              </select>
@@ -322,7 +418,7 @@
              <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
              </svg>
-                          <select name="active" class="appearance-none pr-10 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+             <select name="active" class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
               <option value="any" {% if filters.active=='any' %} selected{% endif %}>Any</option>
               <option value="active" {% if filters.active=='active' %} selected{% endif %}>Active</option>
               <option value="expired" {% if filters.active=='expired' %} selected{% endif %}>Expired</option>
@@ -333,61 +429,107 @@
             {% endif %}
           <div class="w-full md:w-auto p-1.5">
             <div class="relative">
-                          <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <button type="submit" name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
               <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
+               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                 <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
                 <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
-                                <line x1="18" y1="15" x2="23" y2="15" stroke="#556987"></line>
-                                <line x1="17" y1="19" x2="23" y2="19" stroke="#556987"></line>
-                                <line x1="19" y1="23" x2="23" y2="23" stroke="#556987"></line>
+                <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+                <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+                <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
                 <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
                 <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
                 <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
                </g>
-                            </svg><span>Clear</span></button>
+              </svg>
+              <span>Clear</span>
+             </button>
             </div>
            </div>
            <div class="w-full md:w-auto p-1.5">
             <div class="relative">
-                          <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
               <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round">
+               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                 <rect x="2" y="2" width="7" height="7"></rect>
                 <rect x="15" y="15" width="7" height="7"></rect>
                 <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
+                <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
                </g>
-                            </svg><span>Apply Filters</span></button>
+              </svg>
+              <span>Apply Filters</span>
+             </button>
+            </div>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
+       <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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Date/Time at</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Network</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Recipient</span>
+               </div>
+              </th>
+              <!--<th>ID</th>-->
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Swap Type</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You get</span>
                </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Amount</span>
                </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">You Send</span>
                </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Amount</span>
                </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Rate</span>
                </div>
+              </th>
+              <!--<th>Amount From Swapped</th>-->
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 rounded-tr-xl">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Trade</span>
                </div>
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6"> TIME AT </th>
-                        <th scope="col" class="py-3 px-6"> Network </th>
-                        <th scope="col" class="py-3 px-6"> Recipient </th>
-                        <!--<th scope="col" class="py-3 px-6">ID</th>-->
-                        <th scope="col" class="py-3">Swap Type</th>
-                        <th scope="col" class="py-3"> You Get</th>
-                        <th scope="col" class="py-3"></th>
-                        <th scope="col" class="py-3"> You Send</th>
-                        <th scope="col" class="py-3"></th>
-                        <th scope="col" class="py-3 px-6"> Rate </th>
-                        <!--Todo: Add swap + id back -->
-                        <!--<th scope="col" class="py-3 px-6">Amount From Swapped </th>-->
-                        <th scope="col" class="py-3 px-6"> Trade </th>
+              </th>
              </tr>
             </thead>
-                    <tbody> {% for o in offers %}
-                      <tr class="bg-white border-t hover:bg-gray-50">
-                        <td scope="row" class="flex items-center py-7 px-46 text-gray-900 whitespace-nowrap">
+            <tbody>
+            {% for o in offers %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+              <td class="flex items-center py-7 px-46 dark:text-white text-gray-900 whitespace-nowrap">
                <svg alt="" class="w-5 h-5 rounded-full ml-5" 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="{% if o[12]==2 %}#AC0000{% elif o[11]==true %}#6b7280{% else %}#3B82F6{% endif %}" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="11"></circle>
@@ -395,57 +537,75 @@
                 </g>
                </svg>
                <div class="pl-3">
-                            <div class="{% if o[11]==true or o[12]==2 %}text-coolGray-500{% else %}font-semibold{% endif %} text-xs">{{ o[0] }}</div>
+                <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} font-semibold {% endif %} text-xs">{{ o[0] }}</div>
                </div>
               </td>
               <!--<td class="py-4 px-6 text-xs"><a class="monospace text-xs" href=/offer/{{ o[1] }}>{{ o[1]|truncate(6, True) }}</a></td>-->
               <!--<td class="py-4 px-6 text-xs monospace">{{ o[8] }}{% if o[9]==true %} <b>Sent</b>{% endif %}</td>-->
-                        <!--Todo: Add link back -->
-                        <td class="py-4 px-6">{{ o[7] }} {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %}</td>
-                        <td class="py-4 px-6 text-xs monospace"><a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a></td>
-                        <td class="py-4 text-xs">{{ o[13] }}</td>
-                        <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                        {% if o[9]==true %}
-                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span> {{ o[3] }}</td>
-                        <td class="py-4 text-xs">{{ o[5] }}</td>
+              <td class="py-3 px-6 text-xs">{{ o[7] }}
+               <!-- {% if o[12]==2 %}(Revoked){% elif o[11]==true %}(Not Active){% else %}(Active){% endif %} -->
+              </td>
+              <td class="py-3 px-6 text-xs monospace">
+               <a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a>
+              </td>
+              <td class="py-3 px-6 text-xs">{{ o[13] }}</td>
+              <td class="py-3 px-6 text-xs">
+               <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+                {% if o[9]==true %} <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="">
+               </span>{{ o[3] }}
+              </td>
+              <td class="py-3 px-6 text-xs">{{ o[5] }}</td>
               {% else %}
-                        <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td>
-                        <td class="py-4 text-xs">{{ o[4] }}</td>
+              <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="">
+              </span>{{ o[2] }}
+              </td>
+              <td class="py-3 px-6 text-xs">{{ o[4]|truncate(8,true,'',0) }}</td>
               {% endif %}
-                        <td class="py-4"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
-                        {% if o[9]==true %}
-                        <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt=""></span> {{ o[2] }}</td>
-                        <td class="py-4 text-xs">{{ o[4] }}</td>
+              <td class="py-4 px-6 text-xs">
+               <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"> {% if o[9]==true %} <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="">
+               </span>{{ o[2] }}
+              </td>
+              <td class="py-3 px-6 text-xs">{{ o[4] }}</td>
               {% else %}
-                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt=""></span> {{ o[3] }}</td>
-                        <td class="py-4 text-xs">{{ o[5] }}</td>
+              <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="">
+              </span>{{ o[3] }}
+              </td>
+              <td class="py-3 px-6 text-xs">{{ o[5]|truncate(8,true,'',0) }}</td>
               {% endif %}
-                        <td class="py-4 text-xs px-6">{{ o[6] }}</td>
+              <td class="py-4 px-6 text-xs">{{ o[6]|truncate(8,true,'',0) }}</td>
               <!--  <td class="py-4 px-6">{{ o[10] }}</td>-->
-                        <td class="py-4 px-6"> <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button {% if o[9]==true %} bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 {% else %} bg-blue-500 text-white {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit{% else %}Swap{% endif %}</a> </td>
+              <td class="py-3 px-6">
+               <a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md {% if o[9]==true %} bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200  {% else %} bg-blue-500 text-white hover:bg-blue-600 transition duration-200 {% endif %}" href="/offer/{{ o[1] }}">{% if o[9]==true %}Edit{% else %}Swap{% endif %}</a>
+              </td>
              </tr>
-                    </tbody>{% endfor %}
+            </tbody>
+            {% endfor %}
            </table>
            <input type="hidden" name="formid" value="{{ form_id }}">
-                  <input type="hidden" name="pageno" value="{{ filters.page_no }}"> </div>
+           <input type="hidden" name="pageno" value="{{ filters.page_no }}">
+          </div>
          </div>
-              <div class="pt-10 bg-white bg-opacity-60 rounded-b-md">
+
+         <div class="rounded-b-md">
           <div class="w-full md:w-0/12">
-                  <div class="flex flex-wrap justify-end -m-1.5">
+           <div class="flex flex-wrap justify-end pt-6 pr-6 border-t border-gray-100 dark:border-gray-400">
             <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                        <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+              <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                        </svg><span>Page Back</span></button>
+              </svg>
+              <span>Page Back</span>
+             </button>
             </div>
             <div class="flex items-center">
              <div class="w-full md:w-auto p-1.5">
-                        <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
+              <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
              </div>
             </div>
             <div class="w-full md:w-auto p-1.5">
-                      <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
-                        <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+             <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+              <span>Page Forwards</span>
+              <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
               </svg>
              </button>

basicswap/templates/rpc.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/rpc">RPC Console</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/rpc">RPC Console</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,42 +28,52 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">RPC Console</h2>
-            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Manage your BasicSwap client and coins settings.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <form method="post" autocomplete="off">
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="border-coolGray-100">
      <div class="flex flex-wrap items-center justify-between -m-2">
       <div class="w-full pt-2">
-            <div class="container px-0 mx-auto mt-2">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <form method="post" autocomplete="off">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Select Option</th>
-                        <th scope="col">RPC Console Input</th>
+       <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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">RPC Console Input</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t">
-                      <td class="py-4 px-6 w-1/3 bold">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
               <div class="relative">
                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                </svg>
-                          <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="coin_type">
+               <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="coin_type">
                 <option value="-1" {% if coin_type==-1 %} selected{% endif %}>Select Coin</option>
                 {% for c in coins %}
                 <option value="{{ c[0] }}" {% if coin_type==c[0] %} selected{% endif %}>{{ c[1] }}</option>
@@ -69,44 +81,86 @@
                </select>
               </div>
              </td>
-                      <td class="py-4 pr-5 w-2/3">
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="cmd">
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 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" name="cmd">
              </td>
             </tr>
-                    <tr>
-                      <td class="py-4 px-6 w-1/3 bold">
-                      <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="call_type">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">
+              <div class="relative">
+               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
+               </svg>
+               <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="call_type">
                 <option value="cli" {% if call_type=="cli" %} selected{% endif %}>CLI</option>
                 <option value="http" {% if call_type=="http" %} selected{% endif %}>HTTP</option>
                </select>
+              </div>
              </td>
-                      <td class="py-4 pr-5 w-2/3">
-                        <input class="w-full aappearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="type_map">
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 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" name="type_map">
              </td>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+ </section>
+ <input type="hidden" name="formid" value="{{ form_id }}">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+   <div class="pb-6 ">
+    <div class="flex flex-wrap items-center justify-between -m-2">
+     <div class="w-full pt-2">
+      <div class="container mx-auto">
+       <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+        <div class="px-6">
+         <div class="flex flex-wrap justify-end">
           <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+           <button name="" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+              <polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline>
+              <circle cx="12" cy="12" r="11"></circle>
+             </g>
+            </svg>Apply </button>
+          </div>
+         </div>
         </div>
        </div>
       </div>
      </div>
-            <input type="hidden" name="formid" value="{{ form_id }}">{% if result %}
-            <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">RPC console output:</th>
+    </div>
+   </div>
+  </div>
+ </section>
+ {% if result %}
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+   <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">RPC Console Output</span>
+              </div>
+             </th>
             </tr>
            </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5">
-                      <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" rows="15">{{ result }}</textarea>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+            <td class="py-3 px-6">
+             <textarea class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" rows="20">{{ result }}</textarea>
             </td>
            </tr>
           </table>

basicswap/templates/settings.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/settings">Settings</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/settings">Settings</a>
+     </li>
      <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
      </svg>
@@ -22,105 +24,134 @@
    </div>
   </div>
  </section>
-  <section class="py-4">
+ <section class="py-3">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Settings</h2>
-            <p class="font-semibold text-coolGray-200">Manage your BasicSwap client and coins settings.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Manage your BasicSwap client and coins settings.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-      <div class="pb-6 border-coolGray-100">
+ <section>
+  <div class="pl-6 pr-6 pt-0 pb-6 mt-5 h-full overflow-hidden">
+   <div class="pb-6">
     <div class="flex flex-wrap items-center justify-between -m-2">
      <div class="w-full pt-2">
-            <div class="mb-10 border-b border-gray-200">
-              <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected={% if active_tab == 'default' %}"true"{% else %}"false"{% endif %}>Coins</a> </li>
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected={% if active_tab == 'general' %}"true"{% else %}"false"{% endif %}>General</a> </li>
-                <li class="mr-2" role="presentation"> <a class="cursor-pointer inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected={% if active_tab == 'tor' %}"true"{% else %}"false"{% endif %}>Tor</a> </li>
+      <div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700">
+       <ul class="flex flex-wrap -mb-px" id="myTab" data-tabs-toggle="#settingstab" role="tablist">
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="profile-tab" data-tabs-target="#coins" role="tab" aria-controls="coins" aria-selected={% if active_tab == 'default' %}"true"{% else %}"false"{% endif %}>Coins</a>
+        </li>
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="general-tab" data-tabs-target="#general" role="tab" aria-controls="general" aria-selected={% if active_tab == 'general' %}"true"{% else %}"false"{% endif %}>General</a>
+        </li>
+        <li class="mr-2" role="presentation">
+         <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="tor-tab" data-tabs-target="#tor" role="tab" aria-controls="tor" aria-selected={% if active_tab == 'tor' %}"true"{% else %}"false"{% endif %}>Tor</a>
+        </li>
        </ul>
       </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
  <div id="settingstab">
   <div class="hidden rounded-lg" id="coins" role="tabpanel" aria-labelledby="coins-tab">
    <form method="post">
     {% for c in chains %}
-                  <section class="bg-white pl-3">
+    <section class="pl-6">
      <div class="flex flex-wrap items-center">
       <div class="w-full">
-                        <h4 class="font-semibold text-black text-2xl align-middle">
+       <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
         <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
          <img class="h-9" src="/static/images/coins/{{ c.name }}.png" alt="">
-             </span>{{ c.display_name }}
-            </h4></div>
+        </span>
+    {{ c.display_name }}
+       </h4>
+      </div>
      </div>
     </section>
-                  <div class="container px-0 mx-auto mt-5">
-                    <div class="overflow-x-auto relative border sm:rounded-lg">
-                      <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                        <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                          <tr>
-                            <th scope="col" class="py-3 px-6">Settings</th>
-                            <th scope="col">Value</th>
+    <section>
+     <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+      <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+             <table class="w-full min-w-max text-sm">
+              <thead class="uppercase">
+               <tr class="text-left">
+                <th class="p-0">
+                 <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                  <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                 </div>
+                </th>
+                <th class="p-0">
+                 <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                  <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+                 </div>
+                </th>
                </tr>
               </thead>
               {% if c.connection_type %}
-                        <tr>
-                          <td class="py-4 px-6 bold w-96 bold">Connection Type</td>
-                          <td class="py-4">{{ c.connection_type }}</td>
-                        </tr> {% endif %}
-                        {% if c.manage_daemon is defined %} {% if c.name == 'monero' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Manage Daemon</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+               <td class="py-3 px-6 bold">Connection Type</td>
+               <td class="py-3 px-6">{{ c.connection_type }}</td>
+              </tr>
+              {% endif %}
+              {% if c.manage_daemon is defined %}
+              {% if c.name == 'monero' %}
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Manage Daemon</td>
+               <td class="py-3 px-6">
                 <div class="relative">
                  <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                  </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="managedaemon_{{ c.name }}">
+                 <select class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="managedaemon_{{ c.name }}">
                   <option value="true" {% if c.manage_daemon==true %} selected{% endif %}>True</option>
                   <option value="false" {% if c.manage_daemon==false %} selected{% endif %}>False</option>
                  </select>
                 </div>
-                            </div>
                </td>
               </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Daemon RPC Host</td>
-                          <td class="py-4 pr-5">
-                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}"> </td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Daemon RPC Host</td>
+               <td class="py-3 px-6">
+                <input type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rpchost_{{ c.name }}" value="{{ c.rpchost }}">
+               </td>
               </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold">Daemon RPC Port</td>
-                          <td class="py-4 pr-5">
-                            <input type="text" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}"> </td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Daemon RPC Port</td>
+               <td class="py-3 px-6">
+                <input type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rpcport_{{ c.name }}" value="{{ c.rpcport }}">
+               </td>
               </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6" colspan=2>
-                            <label for="message" class="block mb-2 text-sm font-medium text-gray-900">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”.
-                              <br /> </label>
-                            <textarea class="outline-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 monospace" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="100">{{ c.remotedaemonurls }}</textarea>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">List trusted public nodes to use if “Automatically Select Daemon” is set as “True”.</td>
+               <td class="py-3 px-6">
+                <textarea class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" placeholder="(Add one entry per line) eg: node.xmr.to:18081" name="remotedaemonurls_{{ c.name }}" rows="4" cols="45">{{ c.remotedaemonurls }}</textarea>
                </td>
               </tr>
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold w-96 bold">Automatically Select Daemon</td>
-                          <td class="py-4 pr-5">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Automatically Select Daemon</td>
+               <td class="py-3 px-6">
                 <div class="w-52 md:flex-1">
                  <div class="relative">
                   <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                   </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="autosetdaemon_{{ c.name }}">
+                  <select class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="autosetdaemon_{{ c.name }}">
                    <option value="true" {% if c.autosetdaemon==true %} selected{% endif %}>True</option>
                    <option value="false" {% if c.autosetdaemon==false %} selected{% endif %}>False</option>
                   </select>
@@ -129,211 +160,277 @@
                </td>
               </tr>
               {% else %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Manage Daemon</td>
-                          <td>{{ c.manage_daemon }}</td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+               <td class="py-3 px-6 bold">Manage Daemon</td>
+               <td class="py-3 px-6">{{ c.manage_daemon }}</td>
               </tr>
               {% endif %}
               {% endif %}
               {% if c.manage_wallet_daemon is defined %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Manage Wallet Daemon</td>
-                          <td>{{ c.manage_wallet_daemon }}</td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+               <td class="py-3 px-6 bold">Manage Wallet Daemon</td>
+               <td class="py-3 px-6">{{ c.manage_wallet_daemon }}</td>
               </tr>
               {% endif %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Chain Lookups</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Chain Lookups</td>
+               <td class="py-3 px-6">
                 <div class="relative">
                  <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                  </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="lookups_{{ c.name }}">
+                 <select class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="lookups_{{ c.name }}">
                   <option value="local" {% if c.lookups=='local' %} selected{% endif %}>Local Node</option>
                   <option value="explorer" {% if c.lookups=='explorer' %} selected{% endif %}>Explorer</option>
                  </select>
                 </div>
-                            </div>
                </td>
               </tr>
               {% if c.name == 'monero' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold w-96 bold">Transaction Fee Priority</td>
-                          <td class="py-4 pr-5">
-                            <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Transaction Fee Priority</td>
+               <td class="py-3 px-6">
                 <div class="relative">
                  <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                  </svg>
-                                <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="fee_priority_{{ c.name }}">
+                 <select class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="fee_priority_{{ c.name }}">
                   <option value="0" {% if c.fee_priority==0 %} selected{% endif %}>Default</option>
                   <option value="1" {% if c.fee_priority==1 %} selected{% endif %}>Low</option>
                   <option value="2" {% if c.fee_priority==2 %} selected{% endif %}>Medium</option>
                   <option value="3" {% if c.fee_priority==3 %} selected{% endif %}>High</option>
                  </select>
                 </div>
-                            </div>
                </td>
               </tr>
               {% else %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Blocks Confirmed Target</td>
-                          <td class="py-4 pr-5">
-                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Blocks Confirmed Target</td>
+               <td class="py-3 px-6">
+                <input type="number" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="conf_target_{{ c.name }}" min="1" max="32" value="{{ c.conf_target }}">
+               </td>
               </tr>
               {% endif %}
               {% if c.name == 'particl' %}
-                        <tr class="bg-white border-t hover:bg-gray-50">
-                          <td class="py-4 px-6 bold bold">Anon Tx Ring Size</td>
-                          <td class="py-4 pr-5">
-                            <input type="number" class="w-52 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+               <td class="py-3 px-6 bold">Anon Tx Ring Size</td>
+               <td class="py-3 px-6">
+                <input type="number" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="rct_ring_size_{{ c.name }}" min="3" max="32" value="{{ c.anon_tx_ring_size }}">
+               </td>
               </tr>
               {% endif %}
              </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>
+         </div>
+    </section>
+    <section>
+     <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+      <div class="pb-6 ">
+       <div class="flex flex-wrap items-center justify-between -m-2">
+        <div class="w-full pt-2">
+         <div class="container mx-auto">
+          <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+           <div class="px-6">
+            <div class="flex flex-wrap justify-end">
              <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+              <button name="apply_{{ c.name }}" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Apply</button>
              </div>
              {% if c.can_disable == true %}
              <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full 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"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ef5844" stroke-linejoin="round" ><line x1="16" y1="8" x2="8" y2="16" stroke="#ef5844"></line> <line x1="16" y1="16" x2="8" y2="8" stroke="#ef5844"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Disable Coin</button>
+              <button name="disable_{{ c.name }}" value="Disable" onclick="return confirmPopup('Disable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 font-medium text-sm text-white border border-red-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Disable Coin</button>
              </div>
              {% endif %}
              {% if c.can_reenable == true %}
              <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-white hover:bg-white font-medium text-sm text-green-500 border border-green-500 hover:text-green-600 hover:border-green-600 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#2ad167" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#2ad167"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Enable</button>
+              <button name="enable_{{ c.name }}" value="Enable" onclick="return confirmPopup('Enable', '{{ c.display_name }}');" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-green-500 hover:bg-green-600 font-medium text-sm text-white border border-green-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Enable</button>
              </div>
              {% endif %}
             </div>
            </div>
           </div>
-                  </table>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </section>
     {% endfor %}
-                  <input type="hidden" name="formid" value="{{ form_id }}"> </div>
+    <input type="hidden" name="formid" value="{{ form_id }}">
+  </div>
   <div class="hidden rounded-lg" id="general" role="tabpanel" aria-labelledby="general-tab">
-                <section class="bg-white">
-                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white">
-                    <div class="pb-6 border-coolGray-100">
-                      <div class="flex flex-wrap items-center justify-between -m-2">
-                        <div class="w-full pt-2">
-                          <section class="bg-white pl-3">
+   <section class="pl-6">
     <div class="flex flex-wrap items-center">
      <div class="w-full">
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-8 h-7 bg-white-50 rounded">
-              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><circle cx="12" cy="12" r="3" stroke="#3b82f6"></circle> <path d="M20,12a8.049,8.049,0,0,0-.188-1.713l2.714-2.055-2-3.464L17.383,6.094a7.987,7.987,0,0,0-2.961-1.719L14,1H10L9.578,4.375A7.987,7.987,0,0,0,6.617,6.094L3.474,4.768l-2,3.464,2.714,2.055a7.9,7.9,0,0,0,0,3.426L1.474,15.768l2,3.464,3.143-1.326a7.987,7.987,0,0,0,2.961,1.719L10,23h4l.422-3.375a7.987,7.987,0,0,0,2.961-1.719l3.143,1.326,2-3.464-2.714-2.055A8.049,8.049,0,0,0,20,12Z"></path></g></svg>
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
        </span>General
-            </h4></div>
+      </h4>
+     </div>
     </div>
    </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </th>
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+                </div>
+               </th>
               </tr>
              </thead>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96 bold">Debug Mode</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96 bold">Debug Mode</td>
+              <td class="py-3 px-6">
                <div class="relative">
                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                 </svg>
-                                        <select name="debugmode" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                <select name="debugmode" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
                  <option {% if general_settings.debug %}selected{% endif %} value="true">True</option>
                  <option {% if not general_settings.debug %}selected{% endif %} value="false">False</option>
                 </select>
                </div>
-                                    </div>
               </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold">Debug Mode UI</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Debug Mode UI</td>
+              <td class="py-3 px-6">
                <div class="relative">
                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                 </svg>
-                                        <select name="debugui" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                <select name="debugui" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
                  <option {% if general_settings.debug_ui %}selected{% endif %} value="true">True</option>
                  <option {% if not general_settings.debug_ui %}selected{% endif %} value="false">False</option>
                 </select>
                </div>
-                                    </div>
               </td>
              </tr>
             </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>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
             <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_general" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+             <button name="apply_general" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Apply</button>
             </div>
            </div>
           </div>
          </div>
-                          <section class="bg-white pl-3">
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section class="pl-6">
     <div class="flex flex-wrap items-center">
      <div class="w-full">
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
-              <svg class="text-gray-500 w-7 h-7" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3b82f6" stroke-linejoin="round" class="nc-icon-wrapper"><rect x="10" y="14" width="4" height="9"></rect> <rect x="1" y="18" width="4" height="5"></rect> <rect x="19" y="10" width="4" height="13"></rect> <polyline data-cap="butt" points="3,10 8,5 12,9 20,1 " stroke="#3b82f6"></polyline> <polyline points=" 15,1 20,1 20,6 " stroke="#3b82f6"></polyline></g></svg>
-             </span>Chart
-            </h4> </div>
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
+       </span>Price Chart
+      </h4>
+     </div>
     </div>
    </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </th>
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+                </div>
+               </th>
               </tr>
              </thead>
-                                <tr>
-                                  <td class="py-4 px-6 bold w-96 bold">Show Chart</td>
-                                  <td class="py-4 pr-5">
-                                    <div class="w-52 md:flex-1">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96 bold">Show Price Chart</td>
+              <td class="py-3 px-6">
                <div class="relative">
                 <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                 </svg>
-                                        <select name="showchart" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                <select name="showchart" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
                  <option {% if chart_settings.show_chart %}selected{% endif %} value="true">True</option>
                  <option {% if not chart_settings.show_chart %}selected{% endif %} value="false">False</option>
                 </select>
                </div>
-                                    </div>
               </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold">Chart API Key</td>
-                                  <td class="py-4 pr-5">
-                                 <label for="message" class="block mb-2 text-sm font-medium text-gray-900">Chart API (free) Key at <a class="inline-block text-coolGray-500 hover:text-coolGray-600 font-medium" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
-                                 <br /> </label>
-                                    <input name="chartapikey" type="text" class="w-full appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{chart_settings.chart_api_key}}"> </td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Chart API Key</td>
+              <td class="py-3 px-6">
+               <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Chart API (free) Key at <a class="inline-block text-blue-500 hover:text-blue-600 hover:underline" href="https://min-api.cryptocompare.com/" target="_blank">CryptoCompare.com</a>
+                <br />
+               </label>
+               <input name="chartapikey" type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{chart_settings.chart_api_key}}">
+              </td>
              </tr>
             </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>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
             <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="apply_chart" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
+             <button name="apply_chart" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Apply</button>
             </div>
            </div>
           </div>
@@ -343,46 +440,52 @@
       </div>
      </div>
     </div>
+   </section>
+  </div>
   <div class="hidden rounded-lg" id="tor" role="tabpanel" aria-labelledby="tor-tab">
-                <section class="bg-white">
-                  <div class="pl-2 pr-2 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-                    <div class="pb-6 border-coolGray-100">
-                      <div class="flex flex-wrap items-center justify-between -m-2">
-                        <div class="w-full pt-2">
-                          <section class="bg-white pl-3">
+   <section class="pl-6">
     <div class="flex flex-wrap items-center">
      <div class="w-full">  
-                                <h4 class="font-semibold text-black text-2xl align-middle">
-             <span class="mr-2 inline-block align-middle items-center justify-center w-9 h-8 bg-white-50 rounded">
-                     <svg class="text-gray-500 w-7 h-7" 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="#AA70E4" stroke-linejoin="round">
-                            <path d="M9,18.8A6.455,6.455,0,0,1,7,14,6.455,6.455,0,0,1,9,9.2" stroke="#AA70E4"></path>
-                            <path d="M15,18.8A6.455,6.455,0,0,0,17,14a6.455,6.455,0,0,0-2-4.8" stroke="#AA70E4"></path>
-                            <path d="M14,2.256V1H10V2.256A3.949,3.949,0,0,1,7.658,5.891,8.979,8.979,0,0,0,2,14c0,4.971,4.477,9,10,9s10-4.029,10-9a8.978,8.978,0,0,0-5.658-8.109A3.95,3.95,0,0,1,14,2.256Z"></path>
-                          </g>
-                        </svg>
+      <h4 class="font-semibold text-black dark:text-white text-2xl align-middle">
+       <span class="mr-2 inline-block align-middle items-center justify-center w-0 h-10 bg-white-50 rounded">
        </span>Tor
-            </h4> </div>
+      </h4>
+     </div>
     </div>
    </section>
-                          <div class="container px-0 mx-auto mt-5">
-                            <div class="overflow-x-auto relative border sm:rounded-lg">
-                              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none">
-                                  <tr>
-                                    <th scope="col" class="py-3 px-6">Settings</th>
-                                    <th scope="col">Value</th>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+     <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+            <table class="w-full min-w-max text-sm">
+             <thead class="uppercase">
+              <tr class="text-left">
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+                </div>
+               </th>
+               <th class="p-0">
+                <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                 <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+                </div>
+               </th>
               </tr>
              </thead>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Use Tor Proxy</td>
-                                  <td class="py-4 pr-5">
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold">Use Tor Proxy</td>
+              <td class="py-3 px-6">
                <div class="w-1/5 md:flex-1">
                 <div class="relative">
                  <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                  </svg>
-                                        <select name="usetorproxy" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+                 <select name="usetorproxy" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0">
                   <option {% if tor_settings.use_tor %}selected{% endif %} value="true">True</option>
                   <option {% if not tor_settings.use_tor %}selected{% endif %} value="false">False</option>
                  </select>
@@ -390,42 +493,51 @@
                </div>
               </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Proxy Host</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="proxyhost" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.proxy_host}}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Proxy Host</td>
+              <td class="py-3 px-6">
+               <input name="proxyhost" type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.proxy_host}}">
+              </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Proxy Port</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="proxyport" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.proxy_port}}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Proxy Port</td>
+              <td class="py-3 px-6">
+               <input name="proxyport" type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.proxy_port}}">
+              </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Control Port</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="controlport" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.control_port}}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Control Port</td>
+              <td class="py-3 px-6">
+               <input name="controlport" type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.control_port}}">
+              </td>
              </tr>
-                                <tr class="bg-white border-t hover:bg-gray-50">
-                                  <td class="py-4 px-6 bold w-96">Tor Control Password</td>
-                                  <td class="py-4 pr-5">
-                                    <input name="controlpwd" type="text" class="w-1/5 appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" name="" min="3" max="32" value="{{tor_settings.control_password}}"></td>
+              <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+              <td class="py-3 px-6 bold w-96">Tor Control Password</td>
+              <td class="py-3 px-6">
+               <input name="controlpwd" type="text" class="hover:border-blue-500 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-gray-400 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="" min="3" max="32" value="{{tor_settings.control_password}}">
+              </td>
              </tr>
             </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">
-                          <button name="apply_tor" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Apply</button>
           </div>
          </div>
         </div>
        </div>
-                          </form>
       </div>
      </div>
     </div>
+   </section>
+   <section>
+    <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+     <div class="pb-6 ">
+      <div class="flex flex-wrap items-center justify-between -m-2">
+       <div class="w-full pt-2">
+        <div class="container mx-auto">
+         <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+          <div class="px-6">
+           <div class="flex flex-wrap justify-end">
+            <div class="w-full md:w-auto p-1.5 ml-2">
+             <button name="apply_tor" value="Apply" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">Apply</button>
             </div>
            </div>
           </div>
@@ -435,6 +547,9 @@
       </div>
      </div>
    </section>
+  </div>
+ </div>
+  </div>
 <script>
   function confirmPopup(action, coin_name) {
    return confirm(action + " " + coin_name + "?\nWill shutdown basicswap.");

basicswap/templates/smsgaddresses.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/smsgaddresses">SMSG Addresses</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/smsgaddresses">SMSG Addresses</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,295 +28,560 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Active SMSG Addresses</h2>
-            <p class="font-semibold text-coolGray-200">Check your SMSG address history and add new addresses.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Check your SMSG address history and add new addresses.</p>
      </div>
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
  <form method="post">
   {% if data.edit_address %}
   <input type="hidden" name="edit_address_id" value="{{ data.addr_data.id }}">
   <input type="hidden" name="edit_address" value="{{ data.addr_data.addr }}">
-              <section class="bg-white p-6">
+  <section class="p-6 bg-body dark:bg-gray-700">
    <div class="flex flex-wrap items-center">
     <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Edit Address: {{ data.addr_data.addr }}</h4></div>
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Edit Address: {{ data.addr_data.addr }}</h4>
+    </div>
    </div>
   </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Value</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 monospace bold">Pubkey</td>
-                      <td class="py-4 pr-5 select-all monospace">{{ data.addr_data.pubkey }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 monospace bold">Pubkey</td>
+             <td class="py-3 px-6 select-all monospace">{{ data.addr_data.pubkey }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">Active</td>
-                      <td class="py-4 pr-5">
-                      <div class="w-52 md:flex-1">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Active</td>
+             <td class="py-3 px-6">
               <div class="relative">
                <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
                </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="active_ind">
+               <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="active_ind">
                 <option value="1" {% if data.addr_data.active_ind==1 %} selected{% endif %}>True</option>
                 <option value="0" {% if data.addr_data.active_ind==0 %} selected{% endif %}>False</option>
                </select>
               </div>
-                    </div>
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30"> </td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addressnote" type="text" value="{{ data.addr_data.note }}" maxlength="30">
+             </td>
             </tr>
-                    <tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Save Address</button>
+            <button name="saveaddr" value="Save Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Save Address </button>
            </div>
            <div class="w-full md:w-auto p-1.5 ml-2">
-                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
+            <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back </button>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
      </div>
     </div>
    </div>
+  </section>
   {% elif data.new_address %}
-              <section class="bg-white p-6">
+  <section class="p-6 bg-body dark:bg-gray-700">
    <div class="flex flex-wrap items-center">
     <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">New Receiving Address</h4></div>
+     <h4 class="font-semibold text-black dark:text-white text-2xl">New Receiving Address</h4>
+    </div>
    </div>
   </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addressnote" type="text" value="" maxlength="30">
              </td>
             </tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
+            <button name="createnewaddr" value="Create Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Create Address</button>
            </div>
            <div class="w-full md:w-auto p-1.5 ml-2">
-                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
+            <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back</button>
+           </div>
           </div>
          </div>
         </div>
        </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
   {% elif data.new_send_address %}
-              <section class="bg-white p-6">
+  <section class="p-6 bg-body dark:bg-gray-700">
    <div class="flex flex-wrap items-center">
     <div class="w-full">
-                    <h4 class="font-semibold text-black text-2xl">Add Sending Address</h4></div>
+     <h4 class="font-semibold text-black dark:text-white text-2xl">Add Sending Address</h4>
+    </div>
    </div>
   </section>
-              <div class="container px-0 mx-auto">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">SETTING</th>
-                        <th scope="col">VALUE</th>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Settings</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Value</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Pubkey</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full monospace" name="addresspubkey" type="text" value="" maxlength="66">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Pubkey</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 monospace" name="addresspubkey" type="text" value="" maxlength="66">
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="addressnote" type="text" value="" maxlength="30">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="addressnote" type="text" value="" maxlength="30">
              </td>
             </tr>
            </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>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
            <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none "><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Create Address</button>
+            <button name="createnewsendaddr" value="Add Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Create Address</button>
            </div>
            <div class="w-full md:w-auto p-1.5 ml-2">
-                   <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-non"><svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#556987"></line> <polyline points=" 11,16 7,12 11,8 " stroke="#5569878"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>Go Back</button>
+            <button name="cancel" value="Cancel" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line data-cap="butt" x1="18" y1="12" x2="7" y2="12" stroke-linecap="butt" stroke="#ffffff"></line>
+               <polyline points=" 11,16 7,12 11,8 " stroke="#ffffff"></polyline>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Go Back</button>
+           </div>
+          </div>
+         </div>
+        </div>
+       </div>
       </div>
      </div>
     </div>
    </div>
+  </section>
   {% else %}
-              <div class="container px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Filter</th>
-                        <th scope="col" class="py-3 px-6"></th>
-                        <th scope="col"></th>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Filters</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold py-3 px-6"></span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96"> Sort by: </td>
-                      <td class="py-4 bold w-96">
-                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_by">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold"> Sort by: </td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="sort_by">
                <option value="created_at" {% if filters.sort_by=='created_at' %} selected{% endif %}>Created At</option>
               </select>
              </td>
-                      <td class="py-4 px-6 pr-5">
-                        <select class="pr-15 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="sort_dir">
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="sort_dir">
                <option value="asc" {% if filters.sort_dir=='asc' %} selected{% endif %}>Ascending</option>
                <option value="desc" {% if filters.sort_dir=='desc' %} selected{% endif %}>Descending</option>
               </select>
              </td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Note</td>
-                      <td class="py-4 pr-5">
-                        <input class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-full" name="filter_addressnote" type="text" value="{{ filters.addressnote }}" maxlength="30"> </td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Note</td>
+             <td class="py-3 px-6">
+              <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="filter_addressnote" type="text" value="{{ filters.addressnote }}" maxlength="30">
+             </td>
+             <td class="py-3 px-6"></td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Type</td>
-                      <td class="py-4 pr-5">
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="filter_addr_type">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6">Type</td>
+             <td class="py-3 px-6">
+              <select class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" name="filter_addr_type">
                <option{% if filters.addr_type=="-1" %} selected{% endif %} value="-1">Any</option>
                 {% for a in page_data.addr_types %}
                 <option{% if filters.addr_type==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[1] }}</option>
                 {% endfor %}
               </select>
+             </td>
+             <td class="py-4 pr-5"></td>
             </tr>
            </table>
+           </table>
           </div>
          </div>
-            <div class="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">
-                    <button type="submit" name='pageback' value="Page Back" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">
-                      <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
-                      </svg> <span>Page Back</span> </button>
-                  </div>
-                  <div class="flex items-center">
-                    <div class="w-full md:w-auto p-1.5">
-                      <p class="text-sm font-heading">Page: {{ filters.page_no }}</p>
         </div>
        </div>
-                  <div class="w-full md:w-auto p-1.5">
-                    <button type="submit" name='pageforwards' value="Page Forwards" class="outline-none flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none"> <span>Page Forwards</span>
-                      <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#556987" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
-                      </svg>
-                    </button>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
+               <line x1="20" y1="2" x2="12.329" y2="11.506"></line>
+               <path d="M11,11a2,2,0,0,1,2,2,3.659,3.659,0,0,1-.2.891A9.958,9.958,0,0,0,13.258,23H1C1,16.373,4.373,11,11,11Z"></path>
+               <line x1="18" y1="15" x2="23" y2="15" stroke="#ffffff"></line>
+               <line x1="17" y1="19" x2="23" y2="19" stroke="#ffffff"></line>
+               <line x1="19" y1="23" x2="23" y2="23" stroke="#ffffff"></line>
+               <path d="M8.059,11.415A3.9,3.9,0,0,0,12,16c.041,0,.079-.011.12-.012" data-cap="butt"></path>
+               <path d="M5,23a13.279,13.279,0,0,1,.208-3.4" data-cap="butt"></path>
+               <path d="M9.042,23c-.688-1.083-.313-3.4-.313-3.4" data-cap="butt"></path>
+              </g>
+             </svg>Clear</button>
            </div>
            <div class="w-full md:w-auto p-1.5 ml-2">
-                    <button name='clearfilters' value="Clear Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300 bg-white rounded-md shadow-button focus:ring-0 focus:outline-none">        <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
-                              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#556987" stroke-linejoin="round" class="nc-icon-wrapper">
+            <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="mr-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
                <rect x="2" y="2" width="7" height="7"></rect>
                <rect x="15" y="15" width="7" height="7"></rect>
                <rect x="2" y="15" width="7" height="7"></rect>
-                                <polyline points="15 6 17 8 22 3" stroke="#556987"></polyline>
+               <polyline points="15 6 17 8 22 3" stroke="#ffffff"></polyline>
               </g>
-                            </svg>  Clear Filters</button>
+             </svg>Apply Filters</button>
            </div>
            <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="" value="Submit" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" ><polyline points=" 6,12 10,16 18,8 " stroke="#ffffff"></polyline> <circle cx="12" cy="12" r="11"></circle></g></svg>  Apply</button>
+            <button name="shownewaddr" value="New Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>New Address</button>
+           </div>
+           <div class="w-full md:w-auto p-1.5 ml-2">
+            <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
+              <g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10">
+               <line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line>
+               <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line>
+               <circle cx="12" cy="12" r="11"></circle>
+              </g>
+             </svg>Add Sending Address</button>
+           </div>
           </div>
          </div>
         </div>
        </div>
-              <div class="container px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Address</th>
-                        <th scope="col">Type</th>
-                        <th scope="col">Active</th>
-                        <th scope="col">Created At</th>
-                        <th scope="col">Note</th>
-                        <th scope="col">Action</th>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden">
+    <div class="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="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Address</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Active</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Created At</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Note</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Action</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-6 px-6"><b class="monospace">{{ page_data.network_addr }}</b></td>
-                      <td class="py-4">Network Address
-                        <td />
-                        <td class="py-4">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+             <td class="py-3 px-6 bold monospace text-blue-500">{{ page_data.network_addr }}</td>
+             <td class="py-3 px-6 bold text-blue-500">NETWORK ADDRESS
               <td />
-                          <td class="py-4">
-                            <td /> </tr>
+            </tr>
             {% for sa in smsgaddresses %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 monospace bold select-all">{{ sa.addr }}</td>
-                      <td class="py-4">{{ sa.type }}</td>
-                      <td>{{ sa.active_ind }}</td>
-                      <td class="py-4">{{ sa.created_at | formatts }}</td>
-                      <td class="py-4">{{ sa.note }}</td>
-                      <td class="py-4">
-                        <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md shadow-button bg-white text-coolGray-500 hover:text-coolGray-600 border border-coolGray-200 hover:border-coolGray-300" type="submit" name="editaddr_{{ sa.id }}" value="Edit">
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 monospace bold select-all">{{ sa.addr }}</td>
+             <td class="py-3 px-6">{{ sa.type }}</td>
+             <td class="py-3 px-6">{{ sa.active_ind }}</td>
+             <td class="py-3 px-6 flex items-center px-46 whitespace-nowrap">
+              <svg alt="" class="w-5 h-5 rounded-full" 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="#6b7280" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="11"></circle>
+                <polyline points=" 12,6 12,12 18,12 " stroke="#6b7280"></polyline>
+               </g>
+              </svg>
+              <div class="py-3 pl-2">
+               {{ sa.created_at | formatts }}
+              </div>
+             </td>
+             <td class="py-3 px-6">{{ sa.note }}</td>
+             <td class="py-3 px-6">
+              <input class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md bg-blue-500 text-white border border-blue-500 hover:bg-blue-600 transition duration-200" type="submit" name="editaddr_{{ sa.id }}" value="Edit">
              </td>
-                    </tr>{% endfor %}
+            </tr>
+            {% endfor %}
            </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">
-                          <button name="shownewaddr" value="New Address" type="submit"  class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>New Address</button>
         </div>
-                 <div class="w-full md:w-auto p-1.5 ml-2">
-                          <button name="showaddaddr" value="Add Sending Address" type="submit" class="flex flex-wrap justify-center w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none"><svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><g stroke-linecap="square" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="miter" class="nc-icon-wrapper" stroke-miterlimit="10"><line x1="12" y1="7" x2="12" y2="17" stroke="#ffffff"></line> <line x1="17" y1="12" x2="7" y2="12" stroke="#ffffff"></line> <circle cx="12" cy="12" r="11"></circle></g></svg>Add Sending Address</button>
        </div>
       </div>
+  </section>
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 h-full overflow-hidden ">
+    <div class="pb-6 ">
+     <div class="flex flex-wrap items-center justify-between -m-2">
+      <div class="w-full pt-2">
+       <div class="container mx-auto">
+        <div class="pt-6 pb-6 bg-coolGray-100 border-t border-gray-100 dark:border-gray-400 dark:bg-gray-500 rounded-bl-xl rounded-br-xl">
+         <div class="px-6">
+          <div class="flex flex-wrap justify-end">
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageback' value="Page Back" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
+             </svg>
+             <span>Page Back</span>
+            </button>
+           </div>
+           <div class="flex items-center">
+            <div class="w-full md:w-auto p-1.5">
+             <p class="text-sm font-heading dark:text-white">Page: {{ filters.page_no }}</p>
+            </div>
+           </div>
+           <div class="w-full md:w-auto p-1.5">
+            <button type="submit" name='pageforwards' value="Page Forwards" class="inline-flex items-center h-9 py-1 px-4 text-xs text-blue-50 font-semibold bg-blue-500 hover:bg-blue-600 rounded-lg transition duration-200 focus:ring-0 focus:outline-none">
+             <span>Page Forwards</span>
+             <svg aria-hidden="true" class="ml-2 w-5 h-5" fill="#ffffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+             </svg>
+            </button>
            </div>
           </div>
+         </div>
+        </div>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </section>
   <input type="hidden" name="pageno" value="{{ filters.page_no }}">
   {% endif %}
-              <input type="hidden" name="formid" value="{{ form_id }}"></form>
+  <input type="hidden" name="formid" value="{{ form_id }}">
+ </form>
 </div>
 </div>
 </div>

basicswap/templates/tor.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/tor">Tor</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/tor">Tor</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,32 +28,36 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Tor</h2>
-            <p class="font-semibold text-coolGray-200">Tor connection information.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Tor connection information.</p>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
       {% if refresh %}
-            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg> <span>Refresh {{ refresh }} seconds</span></a>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
       {% else %}
-            <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/tor" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span></a>
+       </svg>
+       <span>Refresh</span>
+      </a>
     {% endif %}
       </div>
     </div>
@@ -59,35 +65,44 @@
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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 px-0 mx-auto mt-5">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-80">Tor</th>
-                      <th scope="col" class="py-3"></th>
+     <div class="container mt-5 mx-auto">
+      <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Tor</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+             </div>
+            </th>
            </tr>
           </thead>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 w-80 bold">Tor Mode</td>
-                    <td td class="py-4">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">Tor Mode</td>
+           <td td class="py-3 px-6">{% if use_tor_proxy == true %} Active {% if tor_established == true %} & Connected{% endif %} {% endif %}</td>
           </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 w-80 bold">Circuit Established</td>
-                    <td td class="py-4">{{ data.circuit_established }}</td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">Circuit Established</td>
+           <td td class="py-3 px-6">{{ data.circuit_established }}</td>
           </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 bold">Bytes Written</td>
-                    <td td class="py-4">{{ data.bytes_written }}</td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">Bytes Written</td>
+           <td td class="py-3 px-6">{{ data.bytes_written }}</td>
           </tr>
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 pl-5 pr-5 bold">Bytes Read</td>
-                    <td td class="py-4">{{ data.bytes_read }}</td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">Bytes Read</td>
+           <td td class="py-3 px-6">{{ data.bytes_read }}</td>
           </tr>
          </table>
         </div>
@@ -96,8 +111,11 @@
      </div>
     </div>
    </div>
+  </div>
+ </div>
+</div>
 </section>
-  </div>{% include 'footer.html' %}
+{% include 'footer.html' %}
 </div>
 </body>
 </html>

basicswap/templates/unlock.html

@@ -5,23 +5,36 @@
     {% if refresh %}
     <meta http-equiv="refresh" content="{{ refresh }}">
     {% endif %}
+  <link type="text/css" media="all" href="/static/css/libs/flowbite.min.css" rel="stylesheet" />
   <link type="text/css" media="all" href="/static/css/libs/tailwind.min.css" rel="stylesheet">
-    <link type="text/css" media="all" href="/static/css/libs/dd.min.css" rel="stylesheet">
   <link type="text/css" media="all" href="/static/css/style.css" rel="stylesheet">
   <script src="/static/js/main.js"></script>
   <script src="/static/js/libs/flowbite.js"></script>
+<script>
+  const isDarkMode =
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!localStorage.getItem('color-theme') &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches);
+
+  if (!localStorage.getItem('color-theme')) {
+    localStorage.setItem('color-theme', isDarkMode ? 'dark' : 'light');
+  }
+
+  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>
   </head>
-  <body>
-    <section class="py-24 md:py-32 bg-white">
+  <body class="dark:bg-gray-700">
+    <section class="py-24 md:py-32">
       <div class="container px-4 mx-auto">
         <div class="max-w-sm mx-auto">
           <div class="mb-3 text-center">
             <a class="inline-block mb-6" href="#">
-              <img class="h-16" src="/static/images/logos/basicswap-logo-dark.svg" alt="BasicSwap">
+          <img src="/static/images/logos/basicswap-logo.svg" class="h-20 imageshow dark-image">
+          <img src="/static/images/logos/basicswap-logo-dark.svg" class="h-20 imageshow light-image">
             </a>
-            <p class="text-lg text-coolGray-500 font-medium mb-6" contenteditable="false">Unlock your wallets</p>
+            <p class="text-lg text-coolGray-500 font-medium mb-6 dark:text-white" contenteditable="false">Unlock your wallets</p>
             {% for m in messages %}
             <section class="py-4" id="messages_{{ m[0] }}" role="alert">
               <div class="container px-4 mx-auto">
@@ -69,7 +82,7 @@
           </div>
           <form method="post" autocomplete="off">
             <div class="mb-4">
-              <label class="block mb-2 text-coolGray-800 font-medium" for="" contenteditable="false">Your Password</label>
+              <label class="block mb-2 text-coolGray-800 font-medium dark:text-white" for="" contenteditable="false">Your Password</label>
               <div class="relative w-full">
                 <div class="absolute inset-y-0 right-0 flex items-center px-2">
                   <input class="hidden js-password-toggle" id="toggle" type="checkbox" />
@@ -81,12 +94,12 @@
                     </svg>
                   </label>
                 </div>
-                <input class="appearance-none block w-full p-3 leading-5 bg-gray-50 border border-gray-300  text-gray-900 rounded-lg shadow-md placeholder-coolGray-400 focus:ring-0 focus:outline-none focus:border-blue-500 js-password" name="password" id="password" type="password" autocomplete="off" />
+                <input class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0 js-password" name="password" id="password" type="password" autocomplete="off" />
               </div>
             </div>
             <button type="submit" name="unlock" value="Unlock" class="appearance-none focus:outline-none inline-block py-3 px-7 mb-6 w-full text-base text-blue-50 font-medium text-center leading-6 bg-blue-500 hover:bg-blue-600 focus:ring-0 rounded-md shadow-sm">Unlock</button>
             <p class="text-center">
-              <span class="text-xs font-medium" contenteditable="false">Need help?</span>
+              <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>
             <input type="hidden" name="formid" value="{{ form_id }}">
@@ -108,6 +121,67 @@ passwordToggle.addEventListener('change', function() {
   }
   password.focus()
 })
+</script>
+    <script>
+      window.onload = () => {
+        toggleImages();
+      };
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        toggleImages();
+      });
+
+      function toggleImages() {
+        const html = document.querySelector('html');
+        const darkImages = document.querySelectorAll('.dark-image');
+        const lightImages = document.querySelectorAll('.light-image');
+
+        if (html && html.classList.contains('dark')) {
+          toggleImageDisplay(darkImages, 'block');
+          toggleImageDisplay(lightImages, 'none');
+        } else {
+          toggleImageDisplay(darkImages, 'none');
+          toggleImageDisplay(lightImages, 'block');
+        }
+      }
+
+      function toggleImageDisplay(images, display) {
+        images.forEach(img => {
+          img.style.display = display;
+        });
+      }
+    </script>
+<script>
+      var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+      var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          themeToggleLightIcon.classList.remove('hidden');
+      } else {
+          themeToggleDarkIcon.classList.remove('hidden');
+      }
+
+      function setTheme(theme) {
+        if (theme === 'light') {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('color-theme', 'light');
+        } else {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('color-theme', 'dark');
+        }
+      }
+
+      document.getElementById('theme-toggle').addEventListener('click', () => {
+        if (localStorage.getItem('color-theme') === 'dark') {
+          setTheme('light');
+        } else {
+          setTheme('dark');
+        }
+        themeToggleDarkIcon.classList.toggle('hidden');
+        themeToggleLightIcon.classList.toggle('hidden');
+        toggleImages();
+      });
+
 </script>
 </body>
 </html>

basicswap/templates/wallet.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,39 +14,47 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallet/{{ w.ticker }}">{{ w.ticker }}</a>
+     </li>
     </ul>
    </div>
   </div>
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <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="h-20" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
+       <span class="inline-block align-middle">
+        <img class="h-20" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
        </span>{{ w.name }} Wallet
       </h2>
-            <p class="font-semibold text-coolGray-200 pl-2 pt-5">Manage your {{ w.ticker }} wallet. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
+      <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>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
+      <a class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
+       <a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallet/{{ w.ticker }}">
         <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
          <g fill="#ffffff" class="nc-icon-wrapper">
           <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
           <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
          </g>
-              </svg><span>Refresh</span></a>
+        </svg>
+        <span>Refresh</span>
+       </a>
      </div>
     </div>
    </div>
@@ -67,11 +75,13 @@
         </svg>
        </div>
        <div class="flex-1 p-1">
-                <h3 class="font-medium text-sm text-blue-900">Updating...</h3> </div>
+        <h3 class="font-medium text-sm text-blue-900">Updating...</h3>
+       </div>
       </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>
+      <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>
        <svg aria-hidden="true" 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>
@@ -98,7 +108,8 @@
        <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>
+        </h3>
+       </div>
       </div>
      </div>
      <div class="w-auto p-2">
@@ -114,74 +125,90 @@
  </section>
  {% else %}
  <form method="post" autocomplete="off">
-    <section class="bg-white">
-      <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
+  <section>
+   <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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 px-0 mx-auto mt-5">
-                <div class="overflow-x-auto relative border sm:rounded-lg">
-                  <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                    <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                      <tr>
-                        <th scope="col" class="py-3 px-6">Wallet</th>
-                        <th scope="col"></th>
+       <div class="container mt-5 mx-auto">
+        <div class="pt-6 pb-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+         <div class="px-6">
+          <div class="w-full mt-6 pb-6 overflow-x-auto">
+           <table class="w-full min-w-max text-sm">
+            <thead class="uppercase">
+             <tr class="text-left">
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Wallet</span>
+               </div>
+              </th>
+              <th class="p-0">
+               <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
+               </div>
+              </th>
              </tr>
             </thead>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold w-96">Last updated:</td>
-                      <td>{{ w.lastupdated }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold w-96">Last updated:</td>
+             <td class="py-3 px-6">{{ w.lastupdated }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50 ">
-                      <td class="py-4 px-6 bold">{{ w.name }} Version:</td>
-                      <td>{{ w.version }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">{{ w.name }} Version:</td>
+             <td class="py-3 px-6">{{ w.version }}</td>
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}"></span>Balance:</td>
-                      <td class="bold">{{ w.balance }}</td>
-                      {% if w.unconfirmed %}
-                      <td>Unconfirmed:</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }}">
+              </span>Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.balance }}</td>
+             {% if w.unconfirmed %}<td>Unconfirmed:</td>
              <td>{{ w.unconfirmed }}</td>
-                      {% endif %} </tr>
+             {% endif %}
+            </tr>
             {% if w.cid == '1' %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind"></span>Blind Balance:</td>
-                      <td class="bold">{{ w.blind_balance }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Blind">
+              </span>Blind Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.blind_balance }}</td>
              {% if w.blind_unconfirmed %}
              <td>Blind Unconfirmed:</td>
              <td>{{ w.blind_unconfirmed }}</td>
              {% endif %}
             </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-4 bold"><span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded"><img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon"></span>Anon Balance:</td>
-                      <td class="bold">{{ w.anon_balance }}</td>
-                      {% if w.anon_pending %}
-                      <td>Anon Pending:</td>
-                      <td>{{ w.anon_pending }}</td>{% endif %}</tr>
-                      {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Blocks:</td>
-                      <td>{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</td>
-                    </tr>
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Synced:</td>
-                      <td>{{ w.synced }}</td>
-                    </tr> {% if w.bootstrapping %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Bootstrapping:</td>
-                      <td>{{ w.bootstrapping }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">
+              <span class="inline-flex align-middle items-center justify-center w-9 h-10 bg-white-50 rounded">
+               <img class="h-7" src="/static/images/coins/{{ w.name }}.png" alt="{{ w.name }} Anon">
+              </span>Anon Balance:
+             </td>
+             <td class="py-3 px-6 bold">{{ w.anon_balance }}</td> {% if w.anon_pending %} <td>Anon Pending:</td>
+             <td>{{ w.anon_pending }}</td>{% endif %}
+            </tr> {% endif %} <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">Blocks:</td>
+             <td class="py-3 px-6">{{ w.blocks }} {% if w.known_block_count %} / {{ w.known_block_count }} {% endif %}</td>
             </tr>
-                    {% endif %}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">Synced:</td>
+             <td class="py-3 px-6">{{ w.synced }}</td>
+            </tr> {% if w.bootstrapping %} <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">Bootstrapping:</td>
+             <td class="py-3 px-6">{{ w.bootstrapping }}</td>
+            </tr> {% endif %}
             {% if w.encrypted %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Locked:</td>
-                      <td>{{ w.locked }}</td>
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">Locked:</td>
+             <td class="py-3 px-6">{{ w.locked }}</td>
             </tr>
             {% endif %}
-                    <tr class="bg-white border-t hover:bg-gray-50">
-                      <td class="py-4 px-6 bold">Expected Seed:</td>
-                      <td>{{ w.expected_seed }}</td>
-                    {% if block_unknown_seeds and w.expected_seed != true %}  {# Only show addresses if wallet seed is correct #}
+            <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+             <td class="py-3 px-6 bold">Expected Seed:</td>
+             <td class="py-3 px-6">{{ w.expected_seed }}</td> {% if block_unknown_seeds and w.expected_seed != true %} {# Only show addresses if wallet seed is correct #}
             </tr>
            </table>
           </div>
@@ -190,25 +217,26 @@
           <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>
+             <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>
          </div>
      {% else %}
        </tr>
      {% if w.cid == '1' %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">Stealth Address</td>
-                <td colspan=2 class="monospace bold select-all">{{ w.stealth_address }}</td>
+         <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+          <td class="py-3 px-6 bold">Stealth Address</td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.stealth_address }}</td>
          </tr>
          {% endif %}
          {% if w.cid == '6' %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">Main Address</td>
-                <td colspan=2 class="monospace bold select-all">{{ w.main_address }}</td>
+         <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+          <td class="py-3 px-6 bold">Main Address</td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all">{{ w.main_address }}</td>
          </tr>
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">
+         <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+          <td class="py-3 px-6 bold">
            <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Subaddress">
             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
              <g fill="#ffffff" class="nc-icon-wrapper">
@@ -217,11 +245,11 @@
              </g>
             </svg> New Subaddress </button>
           </td>
-                <td colspan=2 class="monospace select-all">{{ w.deposit_address }}</td>
+          <td colspan=2 class="py-3 px-6 monospace select-all">{{ w.deposit_address }}</td>
          </tr>
          {% else %}
-              <tr class="bg-white border-t hover:bg-gray-50">
-                <td class="py-4 px-6 bold">
+         <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+          <td class="py-3 px-6 bold">
            <button type="submit" class="flex flex-wrap justify-center w-52 py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="newaddr_{{ w.cid }}" value="New Deposit Address">
             <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
              <g fill="#ffffff" class="nc-icon-wrapper">
@@ -230,30 +258,56 @@
              </g>
             </svg>New Deposit Address</button>
           </td>
-                <td colspan=2 class="monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
+          <td colspan=2 class="py-3 px-6 monospace bold select-all" id="deposit_address">{{ w.deposit_address }}</td>
          </tr>
          {% endif %}
          </table>
         </div>
        </div>
-          <section class="bg-white p-6">
+      </div>
+     </div>
+    </div>
+   </div>
+</div>
+</div>
+</section>
+<section class="p-6">
  <div class="flex flex-wrap items-center">
   <div class="w-full">
-                <h4 class="font-semibold text-black text-2xl">Withdraw</h4> </div>
+   <h4 class="font-semibold text-black dark:text-white text-2xl">Withdraw</h4>
+  </div>
  </div>
 </section>
-          <div class="container px-0 mx-auto mt-2">
-            <div class="overflow-x-auto relative border sm:rounded-lg">
-              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                  <tr>
-                    <th scope="col" class="py-3 px-6">OPTIONS</th>
-                    <th scope="col"></th>
-                    <th scope="col"></th>
-                    <th scope="col"></th>
+<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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold p-10"></span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold p-10"></span>
+             </div>
+            </th>
            </tr>
           </thead>
-                <tr class="bg-white border-t hover:bg-gray-50">
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
            <td class="py-4 pl-6 bold w-1/4">
             <button type="submit" class="flex flex-wrap justify-center py-2 px-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" name="withdraw_{{ w.cid }}" value="Withdraw" onclick="return confirmWithdrawal();">
              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
@@ -263,27 +317,30 @@
               </g>
              </svg>Withdraw</button>
            </td>
-                  <td class="py-4 pr-5">
-                    <input placeholder="Address" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 w-full block p-2.5" type="text" name="to_{{ w.cid }}" value="{{ w.wd_address }}"> </td>
-                  <td class="py-4 pr-5">
-                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" type="text" name="amt_{{ w.cid }}" value="{{ w.wd_value }}"> </td>
+           <td class="py-3 px-6">
+            <input placeholder="Address" class="hover:border-blue-500 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" name="to_{{ w.cid }}" value="{{ w.wd_address }}">
+           </td>
+           <td class="py-3 px-6">
+            <input placeholder="Amount" class="hover:border-blue-500 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" name="amt_{{ w.cid }}" value="{{ w.wd_value }}">
+           </td>
           </tr>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold"> Subtract Fee: </td>
-                  <td>
-                    <input class="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-gray-50 checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain cursor-pointer" type="checkbox" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}> </td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 bold">Subtract Fee:</td>
+           <td class="py-3 px-6">
+            <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" name="subfee_{{ w.cid }}" {% if w.wd_subfee==true %} checked=checked{% endif %}>
+           </td>
            <td></td>
           </tr>
           {% if w.cid == '1' %} 
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold">Type From -> To:</td>
-                  <td class="py-4 pr-5">
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 bold">Type From -> To:</td>
+           <td class="py-3 px-6">
             <div class="w-full md:flex-1">
              <div class="relative">
               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
               </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_from_{{ w.cid }}">
+              <select class="hover:border-blue-500 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" name="withdraw_type_from_{{ w.cid }}">
                <option value="plain" {% if w.wd_type_from=='plain' %} selected{% endif %}>Plain</option>
                <option value="blind" {% if w.wd_type_from=='blind' %} selected{% endif %}>Blind</option>
                <option value="anon" {% if w.wd_type_from=='anon' %} selected{% endif %}>Anon</option>
@@ -291,13 +348,13 @@
              </div>
             </div>
            </td>
-                  <td class="py-4 pr-5">
+           <td class="py-3 px-6">
             <div class="w-full md:flex-1">
              <div class="relative">
               <svg class="absolute right-4 top-1/2 transform -translate-y-1/2" 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>
               </svg>
-                        <select class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="withdraw_type_to_{{ w.cid }}">
+              <select class="hover:border-blue-500 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" name="withdraw_type_to_{{ w.cid }}">
                <option value="plain" {% if w.wd_type_to=='plain' %} selected{% endif %}>Plain</option>
                <option value="blind" {% if w.wd_type_to=='blind' %} selected{% endif %}>Blind</option>
                <option value="anon" {% if w.wd_type_to=='anon' %} selected{% endif %}>Anon</option>
@@ -305,43 +362,66 @@
              </div>
             </div>
            </td>
-                  <td class="py-4"> </td>
           </tr>
           {% endif %}
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 bold">Fee Rate:</td>
-                  <td>{{ w.fee_rate }}</td>
-                  <td><b>Est Fee:</b> {{ w.est_fee }}</td>
-                  <td></td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">Fee Rate:</td>
+           <td class="py-3 px-6 bold">{{ w.fee_rate }}</td>
+           <td class="py-3 px-6">
+            <b>Est Fee:</b> {{ w.est_fee }}
+           </td>
           </tr>
          </table>
         </div>
        </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
 {% if w.cid != '6' %}
 {% if w.show_utxo_groups %}
-          <section class="bg-white p-6">
+<section class="p-6">
  <div class="flex flex-wrap items-center">
   <div class="w-full">
-                <h4 class="font-semibold text-black text-2xl">UTXO Groups</h4></div>
+   <h4 class="font-semibold text-black dark:text-white text-2xl">UTXO Groups</h4>
+  </div>
  </div>
 </section>
-          <div class="container px-0 mx-auto mt-2">
-            <div class="overflow-x-auto relative border sm:rounded-lg">
-              <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                  <tr>
-                    <th scope="col" class="py-3 px-6">OPTIONS</th>
-                    <th scope="col"></th>
+<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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Options</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold p-10"></span>
+             </div>
+            </th>
            </tr>
           </thead>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6 w-1/4 bold">UTXO Groups:</td>
-                  <td class="py-4 pr-7">
-                    <textarea class="wwhitespace-pre-line outline-none block p-2.5 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 w-full monospace" id="tx_view" rows="6" readonly>{{ w.utxo_groups }}</textarea>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6 w-1/4 bold">UTXO Groups:</td>
+           <td class="py-3 px-6">
+            <textarea class="hover:border-blue-500 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-gray-50 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 focus:ring-0" id="tx_view" rows="10" readonly>{{ w.utxo_groups }}</textarea>
            </td>
           </tr>
-                <tr class="bg-white border-t hover:bg-gray-50">
-                  <td class="py-4 px-6">
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100">
+           <td class="py-3 px-6">
             <button type="submit" class="flex flex-wrap justify-center px-4 py-2 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="create_utxo" name="create_utxo" value="Create UTXO" onclick="return confirmUTXOResize();">
              <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
               <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
@@ -351,16 +431,30 @@
               </g>
              </svg>Create UTXO</button>
            </td>
-                  <td>
-                    <input placeholder="Amount" class="appearance-none bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg outline-none focus:ring-blue-500 focus:border-blue-500 block p-2.5" type="text" name="utxo_value" value="{{ w.utxo_value }}"></td>
+           <td class="py-3 px-6">
+            <input placeholder="Amount" class="hover:border-blue-500 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" name="utxo_value" value="{{ w.utxo_value }}">
+           </td>
           </tr>
          </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">
+      </div>
+     </div>
+    </div>
+   </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">
           <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="closeutxogroups" name="closeutxogroups" value="Close UTXO Groups">
            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
@@ -373,11 +467,23 @@
         </div>
        </div>
       </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
 {% else %}
-          <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">
+<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">
           <button type="submit" class="flex flex-wrap justify-center px-4 py-2.5 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="showutxogroups" name="showutxogroups" value="Show UTXO Groups">
            <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
             <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round" class="nc-icon-wrapper">
@@ -390,13 +496,20 @@
         </div>
        </div>
       </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </div>
+</section>
 {% endif %}
 {% endif %}
 {% endif %}
 {% endif %}
 {% endif %}
 <!-- havedata -->
-          <input type="hidden" name="formid" value="{{ form_id }}"></form>
+<input type="hidden" name="formid" value="{{ form_id }}">
+</form>
 </div>
 <script>
  function confirmReseed() {

basicswap/templates/wallets.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/wallets">Wallets</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/wallets">Wallets</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -24,77 +26,114 @@
    </div>
   </div>
  </section>
-  <section class="py-4">
+ <section class="py-3">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Wallets</h2>
-            <p class="font-semibold text-coolGray-200">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Check your coin balances and manage your wallets. {% if refresh %} (Page Refresh: {{ refresh }} seconds) {% endif %}</p>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
-            <a class="mr-5 flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/changepassword">
+      <a class="mr-5 flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/changepassword">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g stroke-linecap="round" stroke-width="2" fill="none" stroke="#ffffff" stroke-linejoin="round">
-                <rect x="3" y="11" width="18" height="12" rx="2"></rect><circle cx="12" cy="17" r="2" stroke="#ffffff"></circle>
-                <path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#ffffff"></path></g></svg>
-                <span>Change Password</span></a>
-             <a class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
+         <rect x="3" y="11" width="18" height="12" rx="2"></rect>
+         <circle cx="12" cy="17" r="2" stroke="#ffffff"></circle>
+         <path d="M17,7V6a4.951,4.951,0,0,0-4.9-5H12A4.951,4.951,0,0,0,7,5.9V7" stroke="#ffffff"></path>
+        </g>
+       </svg>
+       <span>Change Password</span>
+      </a>
+      <a class="flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:bg-gray-500 dark:hover:bg-gray-700 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none" id="refresh" href="/wallets">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff" class="nc-icon-wrapper">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span></a>             
+       </svg>
+       <span>Refresh</span>
+      </a>
      </div>
-
     </div>
    </div>
   </div>
  </section>
  {% include 'inc_messages.html' %}
-  <section class="bg-white py-4">
+ <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="flex flex-wrap -m-4">
-        {% for w in wallets %}
-        {% if w.havedata %}
-        {% if w.error %}
-        <p>Error: {{ w.error }}</p>
-        {% else %}
-        <div class="w-full lg:w-1/3 p-4">
-          <div class="bg-white shadow rounded overflow-hidden">
-            <div class="pt-6 px-6 mb-10 flex justify-between items-center"> <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
-                <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt=""></span> <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a></div>
+   <div class="flex flex-wrap -m-4"> {% for w in wallets %} {% if w.havedata %} {% if w.error %} <p>Error: {{ w.error }}</p> {% else %} <div class="w-full lg:w-1/3 p-4">
+     <div class="bg-gray-50 shadow rounded overflow-hidden dark:bg-gray-500">
+      <div class="pt-6 px-6 mb-10 flex justify-between items-center">
+       <span class="inline-flex items-center justify-center w-9 h-10 bg-white-50 rounded">
+        <img class="h-9" src="/static/images/coins/{{ w.name }}.png" alt="">
+       </span>
+       <a class="py-2 px-3 bg-blue-500 text-xs text-white rounded-full hover:bg-blue-600" href="/wallet/{{ w.ticker }}">Manage</a>
+      </div>
       <div class="px-6 mb-6">
-              <h4 class="text-xl font-bold">{{ w.name }} <span class="inline-block font-medium text-xs text-gray-500">({{ w.ticker }})</span></h4>
-              <p class="text-xs text-gray-500">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">Updating</span></p>{% endif %}</div>
-            <div class="p-6 bg-gray-50">
-              <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.balance }}</span></div>{% if w.unconfirmed %}
+       <h4 class="text-xl font-bold dark:text-white">{{ w.name }}
+        <span class="inline-block font-medium text-xs text-gray-500 dark:text-white">({{ w.ticker }})</span>
+       </h4>
+       <p class="text-xs text-gray-500 dark:text-gray-200">Version: {{ w.version }} {% if w.updating %} <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-700 dark:hover:bg-gray-700">Updating..</span>
+       </p>{% endif %}
+      </div>
+      <div class="p-6 bg-coolGray-100 dark:bg-gray-600">
+       <!-- bg here -->
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.unconfirmed }}</span></div>{% endif %}{% if w.cid == '1' %}
+        <h4 class="text-xs font-medium dark:text-white">Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.balance }}</span>
+       </div>{% if w.unconfirmed %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_balance }}</span></div>{% if w.blind_unconfirmed %}
+        <h4 class="text-xs font-medium dark:text-white">Unconfirmed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.unconfirmed }}</span>
+       </div>
+       {% endif %}
+       {% if w.cid == '1' %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blind Unconfirmed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blind_unconfirmed }}</span></div>{% endif %}
+        <h4 class="text-xs font-medium dark:text-white">Blind Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blind_balance }}</span>
+       </div>{% if w.blind_unconfirmed %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Balance:</h4> <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_balance }}</span></div>{% if w.anon_pending %}
+        <h4 class="text-xs font-medium dark:text-white">Blind Unconfirmed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blind_unconfirmed }}</span>
+       </div>{% endif %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Anon Pending:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.anon_pending }}</span></div>{% endif %}{% endif %}
+        <h4 class="text-xs font-medium dark:text-white">Anon Balance:</h4>
+        <span class="bold inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.anon_balance }}</span>
+       </div>{% if w.anon_pending %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Blocks:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</span></div>
+        <h4 class="text-xs font-medium dark:text-white">Anon Pending:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.anon_pending }}</span>
+       </div>
+       {% endif %}
+       {% endif %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Last Updated:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.lastupdated }}</span></div>{% if w.bootstrapping %}
+        <h4 class="text-xs font-medium dark:text-white">Blocks:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.blocks }}{% if w.known_block_count %} / {{ w.known_block_count }}{% endif %}</span>
+       </div>
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Bootstrapping:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.bootstrapping }}</span></div>{% endif %}{% if w.encrypted %}
+        <h4 class="text-xs font-medium dark:text-white">Last Updated:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.lastupdated }}</span>
+       </div>{% if w.bootstrapping %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Locked:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.locked }}</span></div>{% endif %}
+        <h4 class="text-xs font-medium dark:text-white">Bootstrapping:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.bootstrapping }}</span>
+       </div>{% endif %}
+       {% if w.encrypted %}
        <div class="flex mb-2 justify-between items-center">
-                <h4 class="text-xs font-medium">Expected Seed:</h4> <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500">{{ w.expected_seed }}</span></div>
-              <div class="flex justify-between mb-1 mt-10"> <span class="text-xs font-medium text-blue-700">Blockchain</span> <span class="text-xs font-medium text-blue-700">{{ w.synced }}%</span></div>
+        <h4 class="text-xs font-medium dark:text-white">Locked:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.locked }}</span>
+       </div>{% endif %} <div class="flex mb-2 justify-between items-center">
+        <h4 class="text-xs font-medium dark:text-white">Expected Seed:</h4>
+        <span class="inline-block py-1 px-2 rounded-full bg-blue-100 text-xs text-black-500 dark:bg-gray-500 dark:text-gray-200">{{ w.expected_seed }}</span>
+       </div>
+       <div class="flex justify-between mb-1 mt-10">
+        <span class="text-xs font-medium text-blue-700 dark:text-gray-200">Blockchain</span>
+        <span class="text-xs font-medium text-blue-700 dark:text-gray-200">{{ w.synced }}%</span>
+       </div>
        <div class="w-full bg-gray-200 rounded-full h-1">
         <div class="bg-blue-500 h-1 rounded-full" style="width: {{ w.synced }}%"></div>
        </div>
@@ -103,12 +142,11 @@
      {% endif %}
      {% endif %}
      <!-- havedata -->
-        </div>
-        {% endfor %}
-        <script>
+    </div> {% endfor %} <script>
      function confirmReseed() {
       return confirm("Are you sure?\nBackup your wallet before and after.\nWon't detect used keys.\nShould only be used for new wallets.");
      }
+
      function confirmWithdrawal() {
       return confirm("Are you sure?");
      }

basicswap/templates/watched.html

@@ -1,11 +1,11 @@
 {% include 'header.html' %}
 <div class="container mx-auto">
-  <section class="bg-white p-5 mt-5">
+ <section class="p-5 mt-5">
   <div class="flex flex-wrap items-center -m-2">
    <div class="w-full md:w-1/2 p-2">
     <ul class="flex flex-wrap items-center gap-x-3 mb-2">
      <li>
-            <a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/">
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/">
        <p>Home</p>
       </a>
      </li>
@@ -14,7 +14,9 @@
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
       </svg>
      </li>
-          <li><a class="flex font-medium text-xs text-coolGray-500 hover:text-coolGray-700" href="/watched">Watched Outputs</a></li>
+     <li>
+      <a class="flex font-medium text-xs text-coolGray-500 dark:text-gray-300 hover:text-coolGray-700" href="/watched">Watched Outputs</a>
+     </li>
      <li>
       <svg width="6" height="15" viewBox="0 0 6 15" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.34 0.671999L2.076 14.1H0.732L3.984 0.671999H5.34Z" fill="#BBC3CF"></path>
@@ -26,87 +28,136 @@
  </section>
  <section class="py-4">
   <div class="container px-4 mx-auto">
-      <div class="relative py-11 px-16 bg-coolGray-900 rounded-md overflow-hidden">
+   <div class="relative py-11 px-16 bg-coolGray-900 dark:bg-blue-500 rounded-md overflow-hidden">
     <img class="absolute z-10 left-4 top-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute z-10 right-4 bottom-4" src="/static/images/elements/dots-red.svg" alt="">
     <img class="absolute h-64 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover" src="/static/images/elements/wave.svg" alt="">
     <div class="relative z-20 flex flex-wrap items-center -m-3">
      <div class="w-full md:w-1/2 p-3">
       <h2 class="mb-6 text-4xl font-bold text-white tracking-tighter">Watched Outputs</h2>
-            <p class="font-semibold text-coolGray-200">Watch when your outputs involved in a swap get spent on the blockchain.</p>
+      <p class="font-normal text-coolGray-200 dark:text-white">Watch when your outputs involved in a swap get spent on the blockchain.</p>
      </div>
      <div class="w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
       {% if refresh %}
-            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border dark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh {{ refresh }} seconds</span></a>
+       </svg>
+       <span>Refresh {{ refresh }} seconds</span>
+      </a>
       {% else %}
-            <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
+      <a id="refresh" href="/watched" class="flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-blue-600 font-medium text-sm text-white borderdark:text-white dark:hover:text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-600 border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
        <svg class="text-gray-500 w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
         <g fill="#ffffff">
          <path fill="#ffffff" d="M12,3c1.989,0,3.873,0.65,5.43,1.833l-3.604,3.393l9.167,0.983L22.562,0l-3.655,3.442 C16.957,1.862,14.545,1,12,1C5.935,1,1,5.935,1,12h2C3,7.037,7.037,3,12,3z"></path>
          <path data-color="color-2" d="M12,21c-1.989,0-3.873-0.65-5.43-1.833l3.604-3.393l-9.167-0.983L1.438,24l3.655-3.442 C7.043,22.138,9.455,23,12,23c6.065,0,11-4.935,11-11h-2C21,16.963,16.963,21,12,21z"></path>
         </g>
-              </svg><span>Refresh</span></a>
+       </svg>
+       <span>Refresh</span>
+      </a>
     {% endif %}
       </div>
     </div>
    </div>
   </div>
  </section>
-  <section class="bg-white">
-    <div class="pl-6 pr-6 pt-0 pb-0 mt-5 h-full overflow-hidden bg-white ">
-      <div class="pb-6 border-coolGray-100">
-        <div class="flex flex-wrap items-center justify-between -m-2">
-          <div class="w-full pt-2">
-            <section class="bg-white p-6">
+ <section class="p-6">
   <div class="flex flex-wrap items-center">
    <div class="w-full">
-                  <h4 class="font-semibold text-black text-2xl">Last Scanned<h4>
+    <h4 class="font-semibold text-black dark:text-white text-2xl">Last Scanned</h4>
    </div>
   </div>
  </section>
-            <div class="container px-0 mx-auto">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6">Coin</th>
-                      <th scope="col">Height</th>
+ <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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+        <div class="px-6">
+         <div class="w-full mt-6 pb-6 overflow-x-auto">
+          <table class="w-full min-w-max text-sm">
+           <thead class="uppercase">
+            <tr class="text-left">
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Coin</span>
+              </div>
+             </th>
+             <th class="p-0">
+              <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+               <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Height</span>
+              </div>
+             </th>
             </tr>
            </thead>
            {% for ls in last_scanned %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96">{{ ls[0] }}</td>
-                    <td class="py-4">{{ ls[1] }}</td>
+           <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+            <td class="py-3 px-6 bold">{{ ls[0] }}</td>
+            <td class="py-3 px-6">{{ ls[1] }}</td>
            </tr>
            {% endfor %}
           </table>
          </div>
         </div>
-            <div class="container px-0 mx-auto mt-10">
-              <div class="overflow-x-auto relative border sm:rounded-lg">
-                <table class="w-full text-sm text-left text-gray-500 outline-none border-gray-300">
-                  <thead class="text-xs text-gray-700 border-b uppercase bg-gray-50 outline-none border-gray-300">
-                    <tr>
-                      <th scope="col" class="py-3 px-6 w-96">Bid ID</th>
-                      <th scope="col">Chain</th>
-                      <th scope="col">Txid</th>
-                      <th scope="col">Index</th>
-                      <th scope="col">Type</th>
+       </div>
+      </div>
+     </div>
+    </div>
+   </div>
+  </div>
+ </section>
+ <div class="pl-6 pr-6 pt-0 pb-0 mt-5 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-8 bg-coolGray-100 dark:bg-gray-500 rounded-xl">
+       <div class="px-6">
+        <div class="w-full mt-6 pb-6 overflow-x-auto">
+         <table class="w-full min-w-max text-sm">
+          <thead class="uppercase">
+           <tr class="text-left">
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Bid ID</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Chain</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Txid</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Index</span>
+             </div>
+            </th>
+            <th class="p-0">
+             <div class="py-3 px-6 rounded-tr-xl bg-coolGray-200 dark:bg-gray-600">
+              <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Type</span>
+             </div>
+            </th>
            </tr>
           </thead>
           {% for wo in watched_outputs %}
-                  <tr class="bg-white border-t hover:bg-gray-50">
-                    <td class="py-4 px-6 bold w-96"><a href=/bid/{{ wo[0] }}>{{ wo[0] }}</a></td>
-                    <td class="py-4">{{ wo[1] }}</td>
-                    <td class="py-4">{{ wo[2] }}</td>
-                    <td class="py-4">{{ wo[3] }}</td>
-                    <td class="py-4">{{ wo[4] }}</td>
+          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
+           <td class="py-3 px-6 bold">
+            <a href=/bid/{{ wo[0] }}>{{ wo[0] }}</a>
+           </td>
+           <td class="py-3 px-6">{{ wo[1] }}</td>
+           <td class="py-3 px-6">{{ wo[2] }}</td>
+           <td class="py-3 px-6">{{ wo[3] }}</td>
+           <td class="py-3 px-6">{{ wo[4] }}</td>
           </tr>
           {% endfor %}
          </table>
@@ -116,6 +167,8 @@
      </div>
     </div>
    </div>
+  </div>
+ </div>
  </section>
 </div>
 {% include 'footer.html' %}

basicswap/ui/page_wallet.py

@@ -51,7 +51,7 @@ def format_wallet_data(swap_client, ci, w):
 
     if ci.coin_type() == Coins.PART:
         wf['stealth_address'] = w.get('stealth_address', '?')
-        wf['blind_balance'] = w.get('blind_balance', '?')
+        wf['blind_balance'] = "{:.8f}".format(float(w['blind_balance']))
         if 'blind_unconfirmed' in w and float(w['blind_unconfirmed']) > 0.0:
             wf['blind_unconfirmed'] = w['blind_unconfirmed']
         wf['anon_balance'] = w.get('anon_balance', '?')

doc/release-notes.md

@@ -2,6 +2,13 @@
 0.0.x
 ==============
 
+
+0.0.61
+==============
+
+- GUI 2.0
+
+
 0.0.60
 ==============