feat: quick freeze/unfreeze utxos (#591)

* refactor(UtxoList): prevent re-rendering of list items

* ui(UtxoList): highlight frozen UTXOs

* ui(UtxoList): font and bg color for tags

* ui(UtxoList): remove redundant frozen tag

* feat(UtxoList): sort UTXOs by tags

* ui(UtxoList): shorten address on smaller screens

* ui(UtxoList): shorten fb tag by moving locktime to toolip

* ui(UtxoList): increase font-weight for balance

* ui(UtxoDetailsOverlay): fixed min-width for header title

* refactor: prevent re-render confirmations node

* feat: ability to quickly freeze/unfreeze single UTXO

wip: still work-in-progress; icons needs to be updated

* ui(UtxoList): display freeze buttons only on UTXO selection

* ui: move quick freeze toggle column to front

* ui(UtxoList): use sun icon for unfreezing

* ui: use header loading indicator when freezing/unfreezing

* ui(UtxoList): hide hover actions on small screens

* ui(UtxoList): gray-out fidelity bond utxo

* chore: rename UtxoDetailModule -> UtxoDetailModal

* fix: disable quick actions if maker/taker is running

* fix: proper freeze/unfreeze icons

* fix: gray-out not only locked but all fidelity bond utxos

* fix: freeze/unfreeze icons from figma

* fix: pass AbortSignal to freeze calls

src/components/jar_details/JarDetailsOverlay.module.css

@@ -5,6 +5,7 @@
   margin: 0 1rem;
   gap: 0.2rem;
   color: var(--bs-gray-800);
+  min-width: 12ch;
 }
 
 :root[data-theme='dark'] .overlayContainer .accountStepperTitle {
@@ -68,6 +69,10 @@
   background-color: var(--bs-gray-100);
 }
 
+.overlayContainer .tabContainer .utxoListTitleBar :global .balance-value {
+  font-weight: 600;
+}
+
 @media only screen and (min-width: 992px) {
   .overlayContainer .tabContainer .utxoListTitleBar {
     padding: 0.8rem 1rem;
@@ -79,14 +84,14 @@
   background-color: var(--bs-gray-800);
 }
 
-.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer {
+.utxoListTitleBar .freezeUnfreezeButtonsContainer {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
 }
 
-.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
-  width: 8rem;
+.freezeUnfreezeButtonsContainer button {
+  min-width: 6rem;
   font-size: 0.6rem;
   padding: 0.3rem 0.5rem;
   display: flex;
@@ -99,33 +104,36 @@
   border-radius: 0.35rem;
 }
 
-.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button:hover {
-  background-color: var(--bs-btn-hover-bg);
-  border-color: var(--bs-btn-hover-border-color);
+.freezeBtn {
+  color: var(--bs-blue) !important;
+  border-color: var(--bs-blue) !important;
 }
-
-@media only screen and (min-width: 768px) {
-  .overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
-    width: 10rem;
-    font-size: 0.8rem;
-  }
+.freezeBtn:hover {
+  background-color: rgba(13, 110, 253, 0.07) !important;
+}
+.unfreezeBtn {
+  color: var(--bs-red) !important;
+  border-color: var(--bs-red) !important;
+}
+.unfreezeBtn:hover {
+  background-color: rgba(220, 53, 69, 0.07) !important;
 }
 
-:root[data-theme='dark'] .overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
-  background-color: var(--bs-gray-600) !important;
-  border-color: var(--bs-gray-600);
+:root[data-theme='dark'] .freezeUnfreezeButtonsContainer button {
+  background-color: var(--bs-gray-800) !important;
 }
 
-:root[data-theme='dark']
-  .overlayContainer
-  .tabContainer
-  .utxoListTitleBar
-  .freezeUnfreezeButtonsContainer
-  > button:hover {
-  background-color: var(--bs-gray-700) !important;
-  border-color: var(--bs-gray-700);
+:root[data-theme='dark'] .freezeUnfreezeButtonsContainer button:hover {
+  background-color: var(--bs-gray-900) !important;
+  border-color: var(--bs-gray-900) !important;
 }
 
+@media only screen and (min-width: 768px) {
+  .overlayContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer button {
+    min-width: 8rem;
+    font-size: 0.8rem;
+  }
+}
 .overlayContainer .tabContainer .utxoListTitleBar .refreshButton {
   display: flex;
   justify-content: center;