mirror of
https://github.com/joinmarket-webui/jam.git
synced 2026-08-17 13:07:34 +02:00
7a6b920fd2
* Add `AccordionInfo` component * Add fee breakdown UI * Wrap `loadFeeConfigValues` in hook I'm not sure about the correctness of using useEffect inside the useFeeConfigValues hook, in particular regarding the effectiveness of the cleanup function (including `abortCtrl.abort()`) * Wrap mining fee text function in hook * Wrap estimated max collaborator fee in hook * Get real fee values * Fix TS error "TFunction is not generic" * Improve clarity * Fix popover header visibility in dark mode * Use passive voice in "cannot estimate mining fee" text Co-authored-by: Thebora Kompanioni <theborakompanioni@users.noreply.github.com> * Fix past usage in "cannot estimate mining fee" text * Fix popover dark mode colors * Align UI to the new proposal from editwentyone * ui: de-emphasize non-effective fee card content * chore: fix browser warning for fee breakdown subtitle validateDOMNesting(...): <a> cannot appear as a descendant of <a>. * chore(wording): Fee Estimation -> Maximum collaborator fee limit * chore: use css class text-small for fee breakdown labels * chore: use useMemo in FeeBreakdown component * feat(FeeBreakdown): open fee modal on click * ui(FeeBreakdown): add less-or-equal sign * ui(FeeBreakdown): show max collaborator fee value in title * ui(FeeBreakdown): open cj fee section by default * ui(FeeSettings): switch position of mining and collaborator fees * ui(FeeBreakdown): now works with sweep transactions * ui(FeeBreakdown): market maker fees -> collaborator fees * fix(actions): temporarily print linter debug messages * build(deps): update to prettier v2.8.7 * ui(FeeBreakdown): emphasize collaborator fee note * fix(FeeBreakdown): improve handling of missing config values * chore(FeeBreakdown): Remove unused `AccordionInfo` * revert: temporarily print linter debug messages --------- Co-authored-by: Thebora Kompanioni <theborakompanioni@users.noreply.github.com> Co-authored-by: theborakompanioni <theborakompanioni+github@gmail.com>
132 lines
3.4 KiB
CSS
132 lines
3.4 KiB
CSS
.schedule-progress {
|
|
--progress-bar-height: 0.3rem;
|
|
--progress-upcoming-step-size: 0.8rem;
|
|
--progress-completed-step-size: 1.4rem;
|
|
|
|
--progress-track-color: var(--bs-gray-300);
|
|
--progress-step-upcoming-color: var(--bs-gray-300);
|
|
--progress-step-completed-color: rgba(39, 174, 96, 1);
|
|
--progress-step-active-color: rgba(39, 174, 96, 1);
|
|
|
|
--progress-bar-corner-radius: calc(
|
|
var(--progress-upcoming-step-size) + ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2)
|
|
);
|
|
|
|
position: relative;
|
|
}
|
|
|
|
.progress-container {
|
|
display: flex;
|
|
position: relative;
|
|
min-height: var(--progress-completed-step-size);
|
|
top: calc((var(--progress-completed-step-size) - var(--progress-bar-height)) / 2);
|
|
}
|
|
|
|
/* progress bar background */
|
|
.progress-track {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: var(--progress-bar-height);
|
|
background-color: var(--progress-track-color);
|
|
border-radius: var(--progress-bar-corner-radius);
|
|
z-index: -1;
|
|
top: 0rem;
|
|
}
|
|
|
|
/* step marker container */
|
|
.progress-step {
|
|
position: relative;
|
|
display: flex;
|
|
}
|
|
|
|
/* step marker future */
|
|
.progress-step:before {
|
|
content: '';
|
|
position: relative;
|
|
top: calc((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2);
|
|
left: calc(0rem - ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2));
|
|
width: var(--progress-upcoming-step-size);
|
|
height: var(--progress-upcoming-step-size);
|
|
background: var(--progress-step-upcoming-color);
|
|
border-radius: 100%;
|
|
margin: 0 0 0 auto;
|
|
}
|
|
|
|
/* step marker active */
|
|
.progress-step.is-active:before {
|
|
background: var(--progress-step-active-color);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* step marker complete */
|
|
.progress-step.is-complete:before {
|
|
content: '\2713';
|
|
top: calc(0rem - ((var(--progress-completed-step-size) - var(--progress-bar-height)) / 2));
|
|
left: calc(
|
|
(0rem - ((var(--progress-bar-height) - var(--progress-upcoming-step-size)) / 2)) +
|
|
((var(--progress-completed-step-size) - var(--progress-upcoming-step-size)) / 2)
|
|
);
|
|
color: var(--progress-step-upcoming-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--progress-completed-step-size);
|
|
height: var(--progress-completed-step-size);
|
|
background: var(--progress-step-completed-color);
|
|
}
|
|
|
|
/* progress bar */
|
|
.progress-step.is-complete:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: var(--progress-bar-height);
|
|
background: rgba(39, 174, 96, 0.4);
|
|
z-index: -1;
|
|
}
|
|
|
|
/* progress bar left end */
|
|
.progress-step.is-complete.is-first:after {
|
|
border-radius: var(--progress-bar-corner-radius) 0 0 var(--progress-bar-corner-radius);
|
|
}
|
|
|
|
.progress-step.is-active.is-first:after {
|
|
border-radius: var(--progress-bar-corner-radius);
|
|
}
|
|
|
|
/* progress bar tip */
|
|
.progress-step.is-active:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
|
|
height: var(--progress-bar-height);
|
|
background: rgba(39, 174, 96, 0.4);
|
|
z-index: -1;
|
|
animation: nextStep 1s;
|
|
}
|
|
|
|
.progress-step.is-last.is-complete:after {
|
|
border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes nextStep {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|