Skip to content

Commit

Permalink
feat(jar): show sum of selected utxos (#514)
Browse files Browse the repository at this point in the history
* 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 <109058+dergigi@users.noreply.github.com>
  • Loading branch information
theborakompanioni and dergigi authored Sep 26, 2022
1 parent 13496a0 commit 85d131c
Show file tree
Hide file tree
Showing 6 changed files with 233 additions and 180 deletions.
82 changes: 33 additions & 49 deletions src/components/jar_details/JarDetailsOverlay.module.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 85d131c

Please sign in to comment.