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>
65 lines
1.3 KiB
CSS
65 lines
1.3 KiB
CSS
/* Adapted from https://medium.com/front-end-weekly/build-a-css-only-toggle-switch-using-tailwindcss-d2739882934 */
|
|
|
|
.toggle-switch-label {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
}
|
|
|
|
.toggle-switch-input {
|
|
appearance: none;
|
|
position: absolute;
|
|
border-radius: 0.375rem;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.toggle-switch {
|
|
width: 2.75rem;
|
|
height: 1.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: 0.25rem;
|
|
margin-right: 1rem;
|
|
background-color: rgba(222, 222, 222, 1);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.toggle-switch:after {
|
|
content: '';
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
background-color: white;
|
|
border-radius: 9999px;
|
|
box-shadow: 0 3px 5px rgb(0, 0, 0, 0.25);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.peer ~ .toggle-switch {
|
|
transition-duration: 300ms;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.peer:checked:not(:disabled) ~ .toggle-switch {
|
|
background-color: rgba(39, 174, 96, 1);
|
|
}
|
|
|
|
.peer:checked:disabled ~ .toggle-switch {
|
|
background-color: rgba(39, 174, 96, 0.25);
|
|
}
|
|
|
|
.peer:not(:checked):disabled ~ .toggle-switch {
|
|
background-color: rgba(222, 222, 222, 0.5);
|
|
}
|
|
|
|
.peer:checked ~ .toggle-switch:after {
|
|
transform: translateX(1rem);
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 0.875rem;
|
|
}
|