From 58c9006a014e3b7a0d17b660b8b00823ef2bab67 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Wed, 12 Oct 2022 19:57:55 +0200
Subject: [PATCH 1/2] ui: Fix disabled / opacity on inputs (offer_confirm)

---
 basicswap/templates/offer_confirm.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/basicswap/templates/offer_confirm.html b/basicswap/templates/offer_confirm.html
index f5c5a21..e16aeab 100644
--- a/basicswap/templates/offer_confirm.html
+++ b/basicswap/templates/offer_confirm.html
@@ -144,7 +144,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="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>
             <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>
@@ -178,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="addr_from" disabled>
+           <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>
             {% for a in addrs %}
             <option{% if data.addr_from==a[0] %} selected{% endif %} value="{{ a[0] }}">{{ a[0] }} {{ a[1] }}</option>
              {% endfor %}
@@ -217,7 +217,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" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
+             <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" id="coin_from" name="coin_from" onchange="set_rate('coin_from');" disabled>
               <option value="-1">Coin From</option>
               {% for c in coins_from %}
               <option{% if data.coin_from==c[0] %} selected{% endif %} value="{{ c[0] }}">{{ c[1] }}</option>
@@ -299,7 +299,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_" disabled>
+             <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>
               <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>
@@ -345,7 +345,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" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
+             <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" id="coin_to" name="coin_to" onchange="set_rate('coin_to');" disabled>
               <option value="-1">Coin To</option>
               {% for c in coins %}
               <option{% if data.coin_to==c[0] %} selected{% endif %} value="{{ c[0] }}">{{ c[1] }}</option>
@@ -427,7 +427,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_" disabled>
+             <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>
               <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>
@@ -475,7 +475,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" disabled>
+             <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>
               <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>
@@ -651,7 +651,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" disabled>
+             <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>
               <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>
@@ -674,11 +674,11 @@
          </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>
+           <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>
           </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>
+           <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>
          </div>

From 9d8fe87fc3374284fa2d9d0c75f4181ad7f0a7b4 Mon Sep 17 00:00:00 2001
From: gerlofvanek <gerlof@particl.io>
Date: Wed, 12 Oct 2022 20:14:19 +0200
Subject: [PATCH 2/2] ui: Better visibility of create an offer

---
 basicswap/templates/header.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
index 71b7af9..adf1e62 100644
--- a/basicswap/templates/header.html
+++ b/basicswap/templates/header.html
@@ -18,11 +18,11 @@
 
   <section>
     <nav class="relative bg-gray-800">
-      <div class="p-6 container flex flex-wrap items-center justify-between items-center mx-auto">
+      <div class="p-6 container flex flex-wrap items-center py-2.5justify-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">
           <li>
-            <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
+            <a class="flex mr-10 items-center py-2.5 text-gray-50 hover:text-gray-100 text-sm" href="/wallets">
               <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">
                   <path d="M6,3H3C1.895,3,1,3.895,1,5 v0c0,1.105,0.895,2,2,2"></path>
@@ -33,15 +33,15 @@
               </svg> <span>Wallets</span> </a>
           </li>
           <li>
-            <a class="flex mr-10 items-center text-gray-50 hover:text-gray-100 text-sm" href="/newoffer">
+            <a 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" href="/newoffer">
               <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">
+                <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="#6b7280"></polyline>
-                  <polyline data-cap="butt" points="11,19 3,19 3,13 " stroke="#6b7280"></polyline>
-                  <polyline points=" 16,2 13,5 16,8 " stroke="#6b7280"></polyline>
-                  <polyline points=" 8,16 11,19 8,22 " stroke="#6b7280"></polyline>
+                  <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> <span>New Offer</span> </a>
           </li>