diff --git a/.changelog/1915.bugfix.md b/.changelog/1915.bugfix.md new file mode 100644 index 0000000000..a4a18eb65f --- /dev/null +++ b/.changelog/1915.bugfix.md @@ -0,0 +1 @@ +Show debondable amount next to debonding input diff --git a/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap index 0133361382..24e939c10a 100644 --- a/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap +++ b/src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap @@ -15,7 +15,26 @@ exports[` should match snapshot 1`] = ` flex-direction: column; } -.c8 { +.c7 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + box-sizing: border-box; + max-width: 100%; + margin-top: 6px; + -webkit-align-items: flex-end; + -webkit-box-align: flex-end; + -ms-flex-align: flex-end; + align-items: flex-end; + min-width: 0; + min-height: 0; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -27,6 +46,7 @@ exports[` should match snapshot 1`] = ` -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; + height: 50px; } .c1 { @@ -44,7 +64,7 @@ exports[` should match snapshot 1`] = ` padding-top: 12px; } -.c9 { +.c11 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -60,7 +80,7 @@ exports[` should match snapshot 1`] = ` height: 100%; } -.c11 { +.c13 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -70,7 +90,7 @@ exports[` should match snapshot 1`] = ` width: 24px; } -.c7 { +.c9 { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; @@ -87,7 +107,13 @@ exports[` should match snapshot 1`] = ` font-weight: 600; } -.c10 { +.c8 { + font-size: 14px; + line-height: 20px; + font-weight: bolder; +} + +.c12 { display: inline-block; box-sizing: border-box; cursor: pointer; @@ -122,51 +148,51 @@ exports[` should match snapshot 1`] = ` font-weight: bold; } -.c10:hover { +.c12:hover { box-shadow: 0px 0px 0px 2px #0500e2; } -.c10:focus { +.c12:focus { outline: none; box-shadow: 0 0 2px 2px #00A9FF; } -.c10:focus > circle, -.c10:focus > ellipse, -.c10:focus > line, -.c10:focus > path, -.c10:focus > polygon, -.c10:focus > polyline, -.c10:focus > rect { +.c12:focus > circle, +.c12:focus > ellipse, +.c12:focus > line, +.c12:focus > path, +.c12:focus > polygon, +.c12:focus > polyline, +.c12:focus > rect { outline: none; box-shadow: 0 0 2px 2px #00A9FF; } -.c10:focus::-moz-focus-inner { +.c12:focus::-moz-focus-inner { border: 0; } -.c10:focus:not(:focus-visible) { +.c12:focus:not(:focus-visible) { outline: none; box-shadow: none; } -.c10:focus:not(:focus-visible) > circle, -.c10:focus:not(:focus-visible) > ellipse, -.c10:focus:not(:focus-visible) > line, -.c10:focus:not(:focus-visible) > path, -.c10:focus:not(:focus-visible) > polygon, -.c10:focus:not(:focus-visible) > polyline, -.c10:focus:not(:focus-visible) > rect { +.c12:focus:not(:focus-visible) > circle, +.c12:focus:not(:focus-visible) > ellipse, +.c12:focus:not(:focus-visible) > line, +.c12:focus:not(:focus-visible) > path, +.c12:focus:not(:focus-visible) > polygon, +.c12:focus:not(:focus-visible) > polyline, +.c12:focus:not(:focus-visible) > rect { outline: none; box-shadow: none; } -.c10:focus:not(:focus-visible)::-moz-focus-inner { +.c12:focus:not(:focus-visible)::-moz-focus-inner { border: 0; } -.c12 { +.c14 { display: inline-block; box-sizing: border-box; cursor: pointer; @@ -198,47 +224,47 @@ exports[` should match snapshot 1`] = ` font-weight: bold; } -.c12:hover { +.c14:hover { box-shadow: 0px 0px 0px 2px #0500e2; } -.c12:focus { +.c14:focus { outline: none; box-shadow: 0 0 2px 2px #00A9FF; } -.c12:focus > circle, -.c12:focus > ellipse, -.c12:focus > line, -.c12:focus > path, -.c12:focus > polygon, -.c12:focus > polyline, -.c12:focus > rect { +.c14:focus > circle, +.c14:focus > ellipse, +.c14:focus > line, +.c14:focus > path, +.c14:focus > polygon, +.c14:focus > polyline, +.c14:focus > rect { outline: none; box-shadow: 0 0 2px 2px #00A9FF; } -.c12:focus::-moz-focus-inner { +.c14:focus::-moz-focus-inner { border: 0; } -.c12:focus:not(:focus-visible) { +.c14:focus:not(:focus-visible) { outline: none; box-shadow: none; } -.c12:focus:not(:focus-visible) > circle, -.c12:focus:not(:focus-visible) > ellipse, -.c12:focus:not(:focus-visible) > line, -.c12:focus:not(:focus-visible) > path, -.c12:focus:not(:focus-visible) > polygon, -.c12:focus:not(:focus-visible) > polyline, -.c12:focus:not(:focus-visible) > rect { +.c14:focus:not(:focus-visible) > circle, +.c14:focus:not(:focus-visible) > ellipse, +.c14:focus:not(:focus-visible) > line, +.c14:focus:not(:focus-visible) > path, +.c14:focus:not(:focus-visible) > polygon, +.c14:focus:not(:focus-visible) > polyline, +.c14:focus:not(:focus-visible) > rect { outline: none; box-shadow: none; } -.c12:focus:not(:focus-visible)::-moz-focus-inner { +.c14:focus:not(:focus-visible)::-moz-focus-inner { border: 0; } @@ -366,6 +392,12 @@ exports[` should match snapshot 1`] = ` } +@media only screen and (max-width:768px) { + .c7 { + margin-top: 3px; + } +} + @media only screen and (max-width:768px) { .c1 { padding-top: 6px; @@ -373,13 +405,13 @@ exports[` should match snapshot 1`] = ` } @media only screen and (max-width:768px) { - .c11 { + .c13 { width: 12px; } } @media only screen and (max-width:768px) { - .c7 { + .c9 { height: 12px; } } @@ -420,31 +452,61 @@ exports[` should match snapshot 1`] = ` value="" /> +
+ + + account.reclaimEscrow.reclaimableAmount + + + +
+ 0.000001 +
+ + + + + +
+
+