feat(jar): show sum of selected utxos (#514)

* refactor(utxo): disable refresh button while loading * fix(utxos): reset select state when switching jars * refactor(utxo-list): store utxos/selectedUtxos in distinct vars * fix(utxo-list): improve padding across all screens * refactor(utxo-list): externalize UtxoDetailModal * feat(utxo-list): show sum of selected utxos * ui(utxo-list): change order of sum/button elements on mobile * ui(utxo-list): align selected utxo sum to the right * fix(utxo-list): wording Co-authored-by: Gigi <[email protected]>
joinmarket-webui · Sep 26, 2022 · 85d131c · 85d131c
1 parent 13496a0
commit 85d131c
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 180 deletions.
diff --git a/src/components/jar_details/JarDetailsOverlay.module.css b/src/components/jar_details/JarDetailsOverlay.module.css
@@ -1,38 +1,3 @@
-.utxoDetailModalBackdrop {
-  z-index: 1300 !important;
-}
-
-.utxoDetailModal {
-  z-index: 1400 !important;
-}
-
-.modalHeader {
-  display: flex !important;
-  justify-content: flex-start !important;
-  background-color: transparent !important;
-  padding: 1.25rem !important;
-}
-
-.modalTitle {
-  width: 100%;
-  font-size: 1rem !important;
-  font-weight: 400 !important;
-  color: var(--bs-body-color) !important;
-}
-
-.modalTitle > div:first-child {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modalTitle .cancelButton {
-  padding: 0 0 0 1rem;
-  color: var(--bs-body-color);
-  background-color: transparent !important;
-  border: none;
-}
-
 .overlayContainer .accountStepperTitle {
   display: inline-flex;
   justify-content: center;
@@ -76,18 +41,19 @@
 .overlayContainer .tabContainer {
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 0.5rem;
   background-color: var(--bs-body-bg);
 }
 
 @media only screen and (min-width: 992px) {
   .overlayContainer .tabContainer {
+    gap: 1.5rem;
     padding: 2rem;
     border-radius: 0.5rem;
   }
 }
 
-.overlayContainer .tabContainer > .utxoListTitleBar {
+.overlayContainer .tabContainer .utxoListTitleBar {
   min-height: 3.6rem;
   display: flex;
   justify-content: space-between;
@@ -99,66 +65,84 @@
 }
 
 @media only screen and (min-width: 992px) {
-  .overlayContainer .tabContainer > .utxoListTitleBar {
-    flex-direction: row;
-    align-items: center;
+  .overlayContainer .tabContainer .utxoListTitleBar {
     padding: 0.8rem 1rem;
     border-radius: 0.6rem;
   }
 }
 
-:root[data-theme='dark'] .overlayContainer .tabContainer > .utxoListTitleBar {
+:root[data-theme='dark'] .overlayContainer .tabContainer .utxoListTitleBar {
   background-color: var(--bs-gray-800);
 }
 
-.overlayContainer .tabContainer > .utxoListTitleBar .freezeUnfreezeButtonsContainer {
+.overlayContainer .tabContainer .utxoListTitleBar .operationsContainer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.selectedUtxosSumContainer {
+  align-self: end;
+}
+
+@media only screen and (min-width: 576px) {
+  .overlayContainer .tabContainer .utxoListTitleBar .operationsContainer {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
 }
 
-.overlayContainer .tabContainer > .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
+.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
   width: 8rem;
   font-size: 0.6rem;
   padding: 0.3rem 0.5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.3rem;
-  background-color: white;
+  background-color: var(--bs-white);
   border: 1px solid var(--bs-gray-200);
   color: var(--bs-body-color);
   border-radius: 0.35rem;
 }
 
-.overlayContainer .tabContainer > .utxoListTitleBar .freezeUnfreezeButtonsContainer > button:hover {
+.overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button:hover {
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
 }
 
 @media only screen and (min-width: 768px) {
-  .overlayContainer .tabContainer > .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
+  .overlayContainer .tabContainer .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
     width: 10rem;
     font-size: 0.8rem;
   }
 }
 
-:root[data-theme='dark'] .overlayContainer .tabContainer > .utxoListTitleBar .freezeUnfreezeButtonsContainer > button {
+: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']
   .overlayContainer
   .tabContainer
-  > .utxoListTitleBar
+  .utxoListTitleBar
   .freezeUnfreezeButtonsContainer
   > button:hover {
   background-color: var(--bs-gray-700) !important;
   border-color: var(--bs-gray-700);
 }
 
-.overlayContainer .tabContainer > .utxoListTitleBar .refreshButton {
+.overlayContainer .tabContainer .utxoListTitleBar .refreshButton {
   display: flex;
   justify-content: center;
   align-items: center;