From 69b195e317657af80b587f0234fe1cb8c785c06b Mon Sep 17 00:00:00 2001
From: gerlofvanek <info@gerlofvanek.com>
Date: Thu, 29 Feb 2024 10:28:37 +0100
Subject: [PATCH] ui: Styling / Bug fixes

---
 basicswap/templates/header.html |   7 +-
 basicswap/templates/offers.html | 168 +++++++++++++++++---------------
 basicswap/ui/page_offers.py     |  31 ++++--
 3 files changed, 115 insertions(+), 91 deletions(-)

diff --git a/basicswap/templates/header.html b/basicswap/templates/header.html
index 9e50ea9..a99af43 100644
--- a/basicswap/templates/header.html
+++ b/basicswap/templates/header.html
@@ -528,16 +528,15 @@
       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">
-        {{ notifications_network_offer_svg | safe }}</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>{{ notifications_close_svg | safe }}</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') {
-        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">{{ notifications_new_bid_on_offer_svg | safe }}<</div><div class="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></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-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close">{{ notifications_close_svg | safe }}</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 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="uppercase w-40 ml-3 text-sm font-normal"><span class="mb-1 text-sm font-semibold text-gray-900"><a class="underline" href=/bid/' + json['bid_id'] + '>New bid</a> on <a class="underline" href=/offer/' + json['offer_id'] + '>offer</a></span></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-nonefocus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8" data-dismiss="#toast-success" aria-label="Close"><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'] == '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-violet-500 rounded-lg">{{ notifications_bid_accepted_svg | safe }}<</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>{{ notifications_close_svg | safe }}</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');
diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 3a683eb..fc7076c 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -757,34 +757,34 @@ const chart = new Chart(ctx, {
                 <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 id="myTable" class="w-full min-w-max">
+                      <table class="w-full min-w-max">
 
                         <thead class="uppercase">
-                          <tr class="text-center">
+                          <tr>
                             <th class="p-0">
-                              <div class="py-3 px-6 rounded-tl-xl bg-coolGray-200 dark:bg-gray-600">
+                              <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">
+                              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left">
                                 <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">
+                              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left">
                                 <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">
+                              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left">
                                 <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">Rate</span>
+                              <div class="py-3 px-6 bg-coolGray-200 dark:bg-gray-600 text-left">
+                                <span class="text-xs text-gray-600 dark:text-gray-300 font-semibold">Details</span>
                               </div>
                             </th>
                             <!--<th>Amount From Swapped</th>-->
@@ -798,74 +798,85 @@ const chart = new Chart(ctx, {
 
                         <tbody>
                           {% for o in offers %}
-                          <tr class="text-center opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600 main-row"">
+                          <tr class="opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600">
 
                             <!-- TIME + ACTIVE -->
-                            <td class="flex py-3 px-6 dark:text-white text-gray-900" title="Time">
-                            <svg alt="" class="w-5 h-5 rounded-full mt-5 ml-5 mr-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>
-                                  <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %} #AC0000 {% elif o[11]==true %} #6b7280 {% else %} #3B82F6 {% endif %}"></polyline>
-                                </g>
-                              </svg>
-                              <div class="py-3 px-6 text-xs text-left" data-tooltip-target="tooltip-active" >
-                                  <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Posted:</span> {{ o[0] }} ago</div>
-                                  <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Expires in:</span> {{ o[13] }}</div>
-                              </div>
+                            <td class="py-3 px-6 text-xs">
+                                <div class="flex items-center justify-center">
+                                    <svg alt="" class="w-5 h-5 rounded-full mr-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>
+                                            <polyline points=" 12,6 12,12 18,12 " stroke="{% if o[12]==2 %} #AC0000 {% elif o[11]==true %} #6b7280 {% else %} #3B82F6 {% endif %}"></polyline>
+                                        </g>
+                                    </svg>
+                                    <div class="flex flex-col" data-tooltip-target="tooltip-active{{loop.index}}">
+                                        <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Posted:</span> {{ o[0] }} ago</div>
+                                        <div class="{% if o[11]==true or o[12]==2 %} dark:text-white {% else %} {% endif %} text-xs"><span class="bold">Expires in:</span> {{ o[13] }}</div>
+                                    </div>
+                                </div>
                             </td>
 
-                            <div id="tooltip-active" 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">
+                            <div id="tooltip-active{{loop.index}}" 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">
                               <div class="active-revoked-expired"><span class="bold">{% if o[12]==2 %}Revoked{% elif o[11]==true %}Expired{% else %}Active{% endif %}</div>
                             <div class="tooltip-arrow" data-popper-arrow></div>
                             </div>
-
                             <!-- TIME + ACTIVE -->
 
                             <!--<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>-->
 
                             <!-- RECIPIENT -->
-                            <td class="py-3 text-xs monospace">
-                              <a href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8] }}</a>
+                            <td class="py-3 text-xs monospace text-center">
+                              <a data-tooltip-target="tooltip-recipient{{loop.index}}" href="/identity/{{ o[8] }}{% if o[9]==true %}{% endif %}">{{ o[8]|truncate(20, true, '...', 0) }} </a>
                             </td>
+
+                            <div id="tooltip-recipient{{loop.index}}" 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">
+                              <div class="active-revoked-expired"><span class="bold">{{ o[8] }}</div>
+                            <div class="tooltip-arrow" data-popper-arrow></div>
+                            </div>
                             <!-- RECIPIENT -->
 
-                            <!-- YOU GET ICON -->
+                            <!-- YOU GET YOUR OFFERR -->
                             {% if o[9] == true %}
                             <td class="py-3 px-6 text-xs">
-                              <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span>
+                              <div class="flex items-left">
+                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded mr-3"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span>
                                 <div class="flex flex-col ml-2">
                                   <div class="coinname-value bold" data-coinname="{{ o[3] }}">
                                     {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }}
                                   </div>
                                   <div class="usd-value"></div>
-                                  <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div>
+                                  <div class="usd-value-converted-in-the-cryptocurrency"></div>
+                                  <div class="coin-coin hidden">{{ o[3] }}/{{ o[2] }}</div>
+                                  <div class="coin-coin">{{ o[17] }}/{{ o[16] }}</div>
                                 </div>
                               </div>
                             </td>
-                            <!-- YOU GET ICON -->
+                            <!-- YOU GET YOUR OFFERS -->
 
-                            <!-- YOU GET ICON OFFERS -->
+                            <!-- YOU GET NETWORK OFFERS -->
                             {% else %}
                             <td class="py-3 px-6 text-xs">
-                              <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}"></span>
-                                <div class="flex flex-col ml-2">
-                                  <div class="coinname-value bold" data-coinname="{{ o[2] }}">
-                                    {{ o[4]|truncate(8, true, '', 0) }} {{ o[2] }}
-                                  </div>
-
-                                  <div class="usd-value"></div>
-                                  <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div>
+                                <div class="flex items-center">
+                                    <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded">
+                                        <img class="h-7" src="/static/images/coins/{{ o[2]|replace(" ", "-") }}.png" alt="{{ o[2] }}">
+                                    </span>
+                                    <div class="flex flex-col ml-5">
+                                      <div class="coinname bold" data-coinname="{{ o[2] }}">
+                                          {{ o[2] }}
+                                      </div>
+                                        <div class="coinname-value" data-coinname="{{ o[2] }}">
+                                            {{ o[4]|truncate(8, true, '', 0) }}  {{ o[16] }}/{{ o[17] }}
+                                        </div>
+                                        <div class="usd-value"></div>
+                                        <div class="usd-value-in-coin-value"></div>
+                                    </div>
                                 </div>
-                              </div>
                             </td>
                             {% endif %}
+                            <!-- YOU GET NETWORK OFFERS -->
 
-                            <!-- YOU GET ICON OFFERS -->
-
-                            <!-- YOU SEND ICON -->
+                            <!-- YOU SEND ICON  YOUR OFFERS -->
                             {% if o[9] == true %}
                             <td class="py-3 px-6 text-xs">
                               <div class="flex items-center">
@@ -875,58 +886,60 @@ const chart = new Chart(ctx, {
                                     {{ o[4]|truncate(8,true,'',0) }} {{ o[2] }}
                                   </div>
                                   <div class="usd-value"></div>
+                                  <div class="coin-value"></div>
                                     <div class="coin-coin">{{ o[2] }}/{{ o[3] }}</div>
                                 </div>
                               </div>
                             </td>
-                            <!-- YOU SEND ICON -->
+                            <!-- YOU SEND YOUR OFFERS ICON -->
 
-                            <!-- YOU SEND ICON OFFERS -->
+                            <!-- YOU SEND NETWORK OFFERS -->
                             {% else %}
                             <td class="py-3 px-6 text-xs">
-                              <div class="flex items-center">
-                                <span class="inline-flex align-middle items-center justify-center w-9 h-10 rounded"><img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}"></span>
-                                <div class="flex flex-col ml-2">
-                                  <div class="coinname-value bold" data-coinname="{{ o[3] }}">
-                                    {{ o[5]|truncate(8, true, '', 0) }} {{ o[3] }}
-                                  </div>
-                                  <div class="usd-value"></div>
-                                    <div class="coin-coin">{{ o[3] }}/{{ o[2] }}</div>
+                                <div class="flex items-center">
+                                    <span class=" inline-flex align-middle items-center justify-center w-9 h-10 rounded">
+                                        <img class="h-7" src="/static/images/coins/{{ o[3]|replace(" ", "-") }}.png" alt="{{ o[3] }}">
+                                    </span>
+                                    <div class="flex flex-col ml-5">
+                                      <div class="coinname bold" data-coinname="{{ o[3] }}">
+                                          {{ o[3] }}
+                                      </div>
+                                        <div class="coinname-value" data-coinname="{{ o[3] }}">
+                                            {{ o[5]|truncate(8, true, '', 0) }}  {{ o[17] }}/{{ o[16] }}
+                                        </div>
+                                        <div class="usd-value"></div>
+                                        <div class="usd-value-in-coin-value"></div>
+                                    </div>
                                 </div>
-                              </div>
                             </td>
                             {% endif %}
-                            <!-- YOU SEND ICON OFFERS -->
+                            <!-- YOU SEND NETWORK OFFERS -->
 
                             <!-- RATE -->
-                            <td class="py-3 px-6 text-xs">
-                              <div class="coinname-value hidden" data-coinname="{{ o[3] }}">{{ o[6]|truncate(8,true,'',0) }}</div>
-                              <div class="usd-value hidden"></div>
-                              <div class="profit-value hidden "></div>
-                              <div class="profit-loss"></div>
+                            <td class="py-3 px-6 text-xs rate-table-info">
+
+                                <div class="ratetype pt-1"><span class="bold">Rate:</span><span class="echange-rates" data-coinname="{{ o[3] }}"> {{ o[6]|truncate(8,true,'',0) }}</span>
+                                <div class="profit-name hidden">Profit Value:</div>
+                                <span class="profit-value hidden"></span>
+                                <div class="profittype pt-1"><span class="bold">Profit/Loss:</span><span class="pl-1 profit-loss"></span>
+                                <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[14] }}</div>
+                                <div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[15] }}</div>
+                                <div class="network pt-1"><span class="bold">Network:</span> {{ o[7] }}</div>
                             </td>
                             <!-- RATE -->
 
-                            <!--  <td class="py-4 px-6">{{ o[10] }}</td>-->
-
                             <!-- SWAP OR EDIT -->
-                            <td class="py-3 px-6">
-                              <a data-tooltip-target="tooltip-swaps" 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 hover:bg-blue-600 dark:border-gray-700 bg-gray-700 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 class="py-3 px-6 text-center">
+                                <div class="flex justify-center items-center h-full">
+                                    <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 hover:bg-blue-600 dark:border-gray-700 bg-gray-700 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>
+                                </div>
                             </td>
-
-                            <div id="tooltip-swaps hidden" 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">
-                              <div class="network"><span class="bold">Network:</span> {{ o[7] }}</div>
-                              <div class="swaptype pt-1"><span class="bold">Swap Type:</span> {{ o[14] }}</div><!-- fix - not showing the correct swap type -->
-                              <div class="partial pt-1"><span class="bold">Amount Variable:</span> {{ o[15] }}</div>
-                            <!-- todo <div class="partial pt-1"><span class="bold">Auto Accept/;</span> Yes</div> -->
-                            <div class="tooltip-arrow" data-popper-arrow></div>
-                            </div>
                             <!-- SWAP OR EDIT -->
                           </tr>
 
-                        </tbody>
+                      </tbody>
                         {% endfor %}
                       </table>
 
@@ -969,9 +982,9 @@ const chart = new Chart(ctx, {
     </div>
   </section>
 </div>
-{% include 'footer.html' %}
+
 <script>
-    const coinNameToSymbol = {
+  const coinNameToSymbol = {
     'Bitcoin': 'BTC',
     'Particl': 'PART',
     'Particl Blind': 'PART',
@@ -1101,5 +1114,6 @@ function updateProfitLoss(row) {
     }
   });
 </script>
+{% include 'footer.html' %}
 </body>
 </html>
diff --git a/basicswap/ui/page_offers.py b/basicswap/ui/page_offers.py
index d6521c0..76dc1e2 100644
--- a/basicswap/ui/page_offers.py
+++ b/basicswap/ui/page_offers.py
@@ -661,25 +661,31 @@ def page_offer(self, url_split, post_string):
         'summary': summary,
     })
 
-def format_timestamp(timestamp):
+def format_timestamp(timestamp, is_expired=False):
     current_time = int(time.time())
-    time_diff = current_time - timestamp
 
-    if time_diff <= 172800:  # Within the last 48 hours
+    if is_expired:
+        time_diff = timestamp - current_time
+        if time_diff <= 0:
+            return "Expired"
+    else:
+        time_diff = current_time - timestamp
+
+    if time_diff <= 172800:
         hours_ago = time_diff // 3600
         minutes_ago = (time_diff % 3600) // 60
 
-        if hours_ago == 0:  # Less than an hour ago
+        if hours_ago == 0:
             if minutes_ago == 1:
                 return "1 min"
             else:
                 return f"{minutes_ago} mins"
-        elif hours_ago == 1:  # Within the last hour
+        elif hours_ago == 1:
             if minutes_ago == 0:
                 return "1h ago"
             else:
                 return f"1h {minutes_ago}min"
-        else:  # More than 1 hour ago
+        else:
             if minutes_ago == 0:
                 return f"{int(hours_ago)}h"
             else:
@@ -687,7 +693,6 @@ def format_timestamp(timestamp):
     else:
         return time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(timestamp))
 
-
 def page_offers(self, url_split, post_string, sent=False):
     server = self.server
     swap_client = server.swap_client
@@ -755,7 +760,9 @@ def page_offers(self, url_split, post_string, sent=False):
         is_expired = o.expire_at <= now
         amount_negotiable = "Yes" if o.amount_negotiable else "No"
         formatted_created_at = format_timestamp(o.created_at)
-        formatted_expired_at = format_timestamp(o.expire_at)
+        formatted_expired_at = format_timestamp(o.expire_at, is_expired=True)
+        tla_from = ci_from.ticker()
+        tla_to = ci_to.ticker()
         formatted_offers.append((
             formatted_created_at,
             o.offer_id.hex(),
@@ -772,7 +779,9 @@ def page_offers(self, url_split, post_string, sent=False):
             o.active_ind,
             formatted_expired_at,
             strSwapDesc(o.swap_type),
-            amount_negotiable))
+            amount_negotiable,
+            tla_from,
+            tla_to))
 
     coins_from, coins_to = listAvailableCoins(swap_client, split_from=True)
 
@@ -786,7 +795,7 @@ def page_offers(self, url_split, post_string, sent=False):
     template = server.env.get_template('offers.html')
     return self.render_template(template, {
         'page_type': 'Your Offers' if sent else 'Network Order Book',
-        'page_button': 'hidden' if sent or offers_count <= 30 else '',  # Conditionally hide the button
+        'page_button': 'hidden' if sent or offers_count <= 30 else '',
         'page_type_description': 'Your entire offer history.' if sent else 'Consult available offers in the order book and initiate a coin swap.',
         'messages': messages,
         'show_chart': False if sent else swap_client.settings.get('show_chart', True),
@@ -799,4 +808,6 @@ def page_offers(self, url_split, post_string, sent=False):
         'summary': summary,
         'sent_offers': sent,
         'offers_count': offers_count,
+        'tla_from': tla_from,
+        'tla_to': tla_to,
     })