mirror of
https://github.com/joinmarket-webui/jam.git
synced 2026-08-18 13:09:10 +02:00
ui: small ui fixes (#201)
* ui: adapt info alert color to match figma more closely * ui: adapt connection indicator icon to match figma more closely * ui: better visibility of disabled input fields in dark-mode * ui: reorder form fields on send page to match figma * ui: default to sending as collaborative transaction * ui: add icons to receive/withdraw buttons in CurrentWalletMagic * review: use Send/Receive instead of Deposit/Withdraw * fix: spacing on send screen * fix: make collapsed accordion buttons visible in dark mode Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com>
This commit is contained in:
Thebora Kompanioni
GitHub
parent
69fcbaff42
commit
fa131ca596
9 changed files with 85 additions and 51 deletions
|
|
@ -10,10 +10,10 @@
|
|||
<symbol id="gear" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M17.3 10.453l1.927.315a.326.326 0 01.273.322v1.793a.326.326 0 01-.27.321l-1.93.339c-.111.387-.265.76-.459 1.111l1.141 1.584a.326.326 0 01-.034.422l-1.268 1.268a.326.326 0 01-.418.037l-1.6-1.123a5.482 5.482 0 01-1.118.468l-.34 1.921a.326.326 0 01-.322.269H11.09a.325.325 0 01-.321-.272l-.319-1.911a5.5 5.5 0 01-1.123-.465l-1.588 1.113a.326.326 0 01-.418-.037L6.052 16.66a.327.327 0 01-.035-.42l1.123-1.57a5.497 5.497 0 01-.47-1.129l-1.901-.337a.326.326 0 01-.269-.321V11.09c0-.16.115-.296.273-.322l1.901-.317c.115-.393.272-.77.47-1.128l-1.11-1.586a.326.326 0 01.037-.417L7.34 6.052a.326.326 0 01.42-.034l1.575 1.125c.354-.194.73-.348 1.121-.46l.312-1.91a.326.326 0 01.322-.273h1.793c.159 0 .294.114.322.27l.336 1.92c.389.112.764.268 1.12.465l1.578-1.135a.326.326 0 01.422.033l1.268 1.268a.326.326 0 01.036.418L16.84 9.342c.193.352.348.724.46 1.11zM9.716 12a2.283 2.283 0 104.566 0 2.283 2.283 0 00-4.566 0z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="grid" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.5 9.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM13.5 9.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM13.5 17.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1zM5.5 17.5v-3a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1z"></path></symbol>
|
||||
<symbol id="joining" fill="currentColor" viewBox="0 0 16 16"><path d="M8 9.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" /><path d="M9.5 2c-.9 0-1.75.216-2.501.6A5 5 0 0 1 13 7.5a6.5 6.5 0 1 1-13 0 .5.5 0 0 1 1 0 5.5 5.5 0 0 0 8.001 4.9A5 5 0 0 1 3 7.5a6.5 6.5 0 0 1 13 0 .5.5 0 0 1-1 0A5.5 5.5 0 0 0 9.5 2zM8 3.5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" /></symbol>
|
||||
<symbol id='welcome' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="door-open" class="svg-inline--fa fa-door-open fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></symbol>
|
||||
<symbol id='collab' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress-arrows-alt" class="svg-inline--fa fa-compress-arrows-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></symbol>
|
||||
<symbol id='key' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" data-v-4fa90e7f=""><path fill-rule="evenodd" d="M18.865 7.374c.74 2.968-1.163 5.998-4.25 6.767a6.01 6.01 0 01-1.155.172l-3.435 5.471a2 2 0 01-1.21.877l-1.974.492a1 1 0 01-1.212-.728l-.445-1.786a2 2 0 01.246-1.547l3.157-5.028a5.338 5.338 0 01-.9-1.903c-.74-2.968 1.162-5.998 4.249-6.768 3.087-.77 6.189 1.013 6.929 3.98zm-4.627 1.324c.685-.171 1.108-.844.944-1.504-.165-.66-.854-1.055-1.54-.884-.686.17-1.109.844-.944 1.503.164.66.854 1.056 1.54.885z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id='handshake' aria-hidden="true" focusable="false" data-prefix="fas" data-icon="handshake-slash" class="svg-inline--fa fa-handshake-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M0,128.21V384H64a32,32,0,0,0,32-32V184L23.83,128.21ZM48,320.1a16,16,0,1,1-16,16A16,16,0,0,1,48,320.1Zm80,31.81h18.3l90.5,81.89a64,64,0,0,0,90-9.3l.2-.2,17.91,15.5a37.16,37.16,0,0,0,52.29-5.39l8.8-10.82L128,208.72Zm416-223.7V352.1a32,32,0,0,0,32,32h64V128.21ZM592,352.1a16,16,0,1,1,16-16A16,16,0,0,1,592,352.1ZM303.33,202.67l59.58-54.57a16,16,0,0,1,21.59,23.61L358.41,195.6,504,313.8a73.08,73.08,0,0,1,7.91,7.7V128L457.3,73.41A31.76,31.76,0,0,0,434.7,64H348.8a31.93,31.93,0,0,0-21.6,8.41l-88.07,80.64-25.64-19.81L289.09,64H205.3a32,32,0,0,0-22.6,9.41L162.36,93.72,45.47,3.38A16,16,0,0,0,23,6.19L3.38,31.46A16,16,0,0,0,6.19,53.91L594.53,508.63A16,16,0,0,0,617,505.82l19.65-25.27a16,16,0,0,0-2.82-22.45Z"></path></symbol>
|
||||
<symbol id="welcome" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="door-open" class="svg-inline--fa fa-door-open fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"></path></symbol>
|
||||
<symbol id="collab" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="compress-arrows-alt" class="svg-inline--fa fa-compress-arrows-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"></path></symbol>
|
||||
<symbol id="key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" data-v-4fa90e7f=""><path fill-rule="evenodd" d="M18.865 7.374c.74 2.968-1.163 5.998-4.25 6.767a6.01 6.01 0 01-1.155.172l-3.435 5.471a2 2 0 01-1.21.877l-1.974.492a1 1 0 01-1.212-.728l-.445-1.786a2 2 0 01.246-1.547l3.157-5.028a5.338 5.338 0 01-.9-1.903c-.74-2.968 1.162-5.998 4.249-6.768 3.087-.77 6.189 1.013 6.929 3.98zm-4.627 1.324c.685-.171 1.108-.844.944-1.504-.165-.66-.854-1.055-1.54-.884-.686.17-1.109.844-.944 1.503.164.66.854 1.056 1.54.885z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="handshake" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="handshake-slash" class="svg-inline--fa fa-handshake-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M0,128.21V384H64a32,32,0,0,0,32-32V184L23.83,128.21ZM48,320.1a16,16,0,1,1-16,16A16,16,0,0,1,48,320.1Zm80,31.81h18.3l90.5,81.89a64,64,0,0,0,90-9.3l.2-.2,17.91,15.5a37.16,37.16,0,0,0,52.29-5.39l8.8-10.82L128,208.72Zm416-223.7V352.1a32,32,0,0,0,32,32h64V128.21ZM592,352.1a16,16,0,1,1,16-16A16,16,0,0,1,592,352.1ZM303.33,202.67l59.58-54.57a16,16,0,0,1,21.59,23.61L358.41,195.6,504,313.8a73.08,73.08,0,0,1,7.91,7.7V128L457.3,73.41A31.76,31.76,0,0,0,434.7,64H348.8a31.93,31.93,0,0,0-21.6,8.41l-88.07,80.64-25.64-19.81L289.09,64H205.3a32,32,0,0,0-22.6,9.41L162.36,93.72,45.47,3.38A16,16,0,0,0,23,6.19L3.38,31.46A16,16,0,0,0,6.19,53.91L594.53,508.63A16,16,0,0,0,617,505.82l19.65-25.27a16,16,0,0,0-2.82-22.45Z"></path></symbol>
|
||||
<symbol id="shield-outline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linejoin="round" d="M5.5 7c2 0 6.5-3 6.5-3s4.5 3 6.5 3v4.5C18.5 18 12 20 12 20s-6.5-2-6.5-8.5V7z"></path></symbol>
|
||||
<symbol id="shield-filled" viewBox="0 0 24 24" fill="currentColor"><path d="M5 7c0-.276.225-.499.498-.535 2.149-.28 5.282-2.186 6.224-2.785a.516.516 0 01.556 0c.942.599 4.075 2.504 6.224 2.785.273.036.498.259.498.535v4.75c0 6.5-7 8.75-7 8.75s-7-2.25-7-8.75V7z"></path></symbol>
|
||||
<symbol id="wand" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.999 20l7-7.003a2.822 2.822 0 00-3.99-3.993l-7.007 6.997a2.827 2.827 0 103.997 4zM11 11l2 2 1-1a1.414 1.414 0 10-2-2l-1 1z" clip-rule="evenodd"></path><path d="M6.759 4.897c.066-.247.416-.247.482 0L7.6 6.225a.25.25 0 00.176.176l1.328.358c.247.066.247.416 0 .482L7.775 7.6a.25.25 0 00-.176.176L7.24 9.103c-.066.247-.416.247-.482 0L6.4 7.775a.25.25 0 00-.176-.176l-1.329-.358c-.246-.066-.246-.416 0-.482L6.225 6.4a.25.25 0 00.176-.176l.358-1.328zM16.759 3.897c.066-.247.416-.247.482 0l.358 1.328a.25.25 0 00.176.176l1.328.358c.247.066.247.416 0 .482l-1.328.358a.25.25 0 00-.176.176l-.358 1.328c-.066.247-.416.247-.482 0L16.4 6.775a.25.25 0 00-.177-.176l-1.328-.358c-.246-.066-.246-.416 0-.482l1.328-.358a.25.25 0 00.177-.176l.358-1.328zM17.759 12.897c.066-.247.416-.247.482 0l.358 1.328a.25.25 0 00.176.176l1.328.358c.247.066.247.416 0 .482l-1.328.358a.25.25 0 00-.176.176l-.358 1.328c-.066.247-.416.247-.482 0l-.358-1.328a.25.25 0 00-.177-.176l-1.328-.358c-.246-.066-.246-.416 0-.482l1.328-.358a.25.25 0 00.177-.176l.358-1.328z"></path></symbol>
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
<symbol id="checkmark" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M18.381 5.354a.75.75 0 01.265 1.027l-7.087 12a.75.75 0 01-1.164.16L5.48 13.838a.75.75 0 011.038-1.084l4.23 4.051 6.605-11.185a.75.75 0 011.027-.265z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="caret-up" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12.248 8.237a.25.25 0 00-.354 0L5.53 14.601a.75.75 0 11-1.06-1.06l6.363-6.364a1.75 1.75 0 012.475 0l6.364 6.364a.75.75 0 01-1.06 1.06l-6.364-6.364z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="caret-down" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.47 9.4a.75.75 0 011.06 0l6.364 6.364a.25.25 0 00.354 0L18.612 9.4a.75.75 0 011.06 1.06l-6.364 6.364a1.75 1.75 0 01-2.475 0L4.47 10.46a.75.75 0 010-1.06z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id='mnemonic' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M5 6.5A1.5 1.5 0 016.5 5h11A1.5 1.5 0 0119 6.5v11a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 015 17.5v-11zm1.5 0H9V8H6.5V6.5zM9 9.667H6.5v1.5H9v-1.5zm-2.5 3.166H9v1.5H6.5v-1.5zM9 16H6.5v1.5H9V16zm1.75-9.5h2.5V8h-2.5V6.5zm2.5 3.167h-2.5v1.5h2.5v-1.5zm-2.5 3.166h2.5v1.5h-2.5v-1.5zM13.25 16h-2.5v1.5h2.5V16zM15 6.5h2.5V8H15V6.5zm2.5 3.167H15v1.5h2.5v-1.5zM15 12.833h2.5v1.5H15v-1.5zM17.5 16H15v1.5h2.5V16z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="mnemonic" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M5 6.5A1.5 1.5 0 016.5 5h11A1.5 1.5 0 0119 6.5v11a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 015 17.5v-11zm1.5 0H9V8H6.5V6.5zM9 9.667H6.5v1.5H9v-1.5zm-2.5 3.166H9v1.5H6.5v-1.5zM9 16H6.5v1.5H9V16zm1.75-9.5h2.5V8h-2.5V6.5zm2.5 3.167h-2.5v1.5h2.5v-1.5zm-2.5 3.166h2.5v1.5h-2.5v-1.5zM13.25 16h-2.5v1.5h2.5V16zM15 6.5h2.5V8H15V6.5zm2.5 3.167H15v1.5h2.5v-1.5zM15 12.833h2.5v1.5H15v-1.5zM17.5 16H15v1.5h2.5V16z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="globe" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M10.51 6.617c-.518 1.341-.855 3.245-.855 5.385 0 2.14.337 4.044.856 5.385.26.673.552 1.166.838 1.478.285.312.506.385.651.385.145 0 .366-.073.652-.385.285-.312.577-.805.837-1.478.52-1.341.856-3.245.856-5.385 0-2.14-.337-4.044-.856-5.385-.26-.673-.552-1.166-.838-1.478-.285-.312-.506-.385-.651-.385-.145 0-.366.073-.651.385-.286.312-.578.805-.838 1.478zm-.268-2.49c.455-.499 1.048-.873 1.758-.873s1.303.374 1.758.872c.455.497.83 1.175 1.13 1.95.601 1.553.957 3.649.957 5.926s-.356 4.373-.957 5.926c-.3.774-.675 1.453-1.13 1.95-.455.497-1.048.872-1.758.872s-1.303-.375-1.758-.872c-.455-.497-.83-1.175-1.13-1.95-.601-1.553-.957-3.649-.957-5.926s.356-4.373.957-5.926c.3-.775.675-1.453 1.13-1.95z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12 4.746a7.25 7.25 0 100 14.5 7.25 7.25 0 000-14.5zm-8.75 7.25a8.75 8.75 0 1117.5 0 8.75 8.75 0 01-17.5 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M3.25 11.99a.75.75 0 01.75-.75l16 .012a.75.75 0 110 1.5l-16-.011a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="sweep" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M5.5 19.5L18.5 19.5L18.5 12.5C18.5 11.9696 18.2893 11.4609 17.9142 11.0858C17.5391 10.7107 17.0304 10.5 16.5 10.5L13.5 10.5L13.5 7C13.5 6.60217 13.342 6.22064 13.0607 5.93934C12.7794 5.65804 12.3978 5.5 12 5.5C11.6022 5.5 11.2206 5.65804 10.9393 5.93934C10.658 6.22064 10.5 6.60217 10.5 7L10.5 10.5L7.5 10.5C6.96957 10.5 6.46086 10.7107 6.08579 11.0858C5.71071 11.4609 5.5 11.9696 5.5 12.5L5.5 19.5Z" stroke="currentColor"/>
|
||||
<path d="M16 19L16 18M18 13.5L6 13.5L18 13.5ZM8 19L8 17L8 19ZM10.5 19L10.5 15.5L10.5 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</symbol>
|
||||
<symbol id="sweep" viewBox="0 0 24 24" fill="none"><path d="M5.5 19.5L18.5 19.5L18.5 12.5C18.5 11.9696 18.2893 11.4609 17.9142 11.0858C17.5391 10.7107 17.0304 10.5 16.5 10.5L13.5 10.5L13.5 7C13.5 6.60217 13.342 6.22064 13.0607 5.93934C12.7794 5.65804 12.3978 5.5 12 5.5C11.6022 5.5 11.2206 5.65804 10.9393 5.93934C10.658 6.22064 10.5 6.60217 10.5 7L10.5 10.5L7.5 10.5C6.96957 10.5 6.46086 10.7107 6.08579 11.0858C5.71071 11.4609 5.5 11.9696 5.5 12.5L5.5 19.5Z" stroke="currentColor"/><path d="M16 19L16 18M18 13.5L6 13.5L18 13.5ZM8 19L8 17L8 19ZM10.5 19L10.5 15.5L10.5 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></symbol>
|
||||
<symbol id="node" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" d="M13.5 7l3.5 3.5M7 13.5l3.5 3.5M10.5 7L7 10.5M17 13.5L13.5 17"></path><circle cx="12" cy="5.5" r="2"></circle><circle cx="12" cy="18.5" r="2"></circle><circle cx="5.5" cy="12" r="2"></circle><circle cx="18.5" cy="12" r="2"></circle><circle cx="12" cy="5.5" r=".5"></circle><circle cx="12" cy="18.5" r=".5"></circle><circle cx="5.5" cy="12" r=".5"></circle><circle cx="18.5" cy="12" r=".5"></circle></symbol>
|
||||
<symbol id="receive" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15.747V18a1 1 0 001 1h12a1 1 0 001-1v-2.253M12.202 13.5V5M15.546 11.15l-3.344 3.266-3.344-3.266"></path></symbol>
|
||||
<symbol id="send" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15.747V18a1 1 0 001 1h12a1 1 0 001-1v-2.253M12.202 5.917v8.5M15.546 8.267L12.202 5 8.858 8.267"></path></symbol>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 39 KiB |
|
|
@ -18,6 +18,7 @@ import { useCurrentWallet, useSetCurrentWallet, useSetCurrentWalletInfo } from '
|
|||
import { useSessionConnectionError } from '../context/ServiceInfoContext'
|
||||
import { setSession, clearSession } from '../session'
|
||||
import Onboarding from './Onboarding'
|
||||
import Sprite from './Sprite'
|
||||
import { routes } from '../constants/routes'
|
||||
|
||||
export default function App() {
|
||||
|
|
@ -188,7 +189,12 @@ export default function App() {
|
|||
</rb.Nav.Item>
|
||||
</div>
|
||||
<div className="d-flex order-0 order-md-2 flex-1 justify-content-center justify-content-md-end align-items-center">
|
||||
<span className={`mx-1 ${websocketConnected ? 'text-success' : 'text-danger'}`}>•</span>
|
||||
<span
|
||||
className={`mx-1 ${websocketConnected ? 'text-success' : 'text-danger'}`}
|
||||
data-testid="connection-indicator-icon"
|
||||
>
|
||||
<Sprite symbol="node" width="24px" height="24px" />
|
||||
</span>
|
||||
<span className="text-secondary">
|
||||
{websocketConnected ? t('footer.connected') : t('footer.disconnected')}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -68,8 +68,8 @@ describe('<App />', () => {
|
|||
render(<App />)
|
||||
})
|
||||
|
||||
expect(screen.getByText('•').classList.contains('text-danger')).toBe(true)
|
||||
expect(screen.getByText('•').classList.contains('text-success')).toBe(false)
|
||||
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(true)
|
||||
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
|
||||
expect(screen.getByText('footer.disconnected')).toBeInTheDocument()
|
||||
expect(screen.queryByText('footer.connected')).not.toBeInTheDocument()
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ describe('<App />', () => {
|
|||
|
||||
expect(screen.queryByText('footer.disconnected')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('footer.connected')).toBeInTheDocument()
|
||||
expect(screen.getByText('•').classList.contains('text-success')).toBe(true)
|
||||
expect(screen.getByText('•').classList.contains('text-danger')).toBe(false)
|
||||
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true)
|
||||
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(false)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -124,17 +124,23 @@ export default function CurrentWalletMagic() {
|
|||
/>
|
||||
</rb.Row>
|
||||
<rb.Row className="mt-4">
|
||||
<rb.Col>
|
||||
{/* Always receive on first mixdepth. */}
|
||||
<Link to={routes.receive} state={{ account: 0 }} className="btn btn-outline-dark w-100">
|
||||
{t('current_wallet.button_deposit')}
|
||||
</Link>
|
||||
</rb.Col>
|
||||
<rb.Col>
|
||||
{/* Todo: Withdrawing needs to factor in the privacy levels as well.
|
||||
Depending on the mixdepth/account there will be different amounts available. */}
|
||||
<Link to={routes.send} className="btn btn-outline-dark w-100">
|
||||
{t('current_wallet.button_withdraw')}
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<Sprite symbol="send" width="24" height="24" />
|
||||
<div className="ps-1">{t('current_wallet.button_withdraw')}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</rb.Col>
|
||||
<rb.Col>
|
||||
{/* Always receive on first mixdepth. */}
|
||||
<Link to={routes.receive} state={{ account: 0 }} className="btn btn-outline-dark w-100">
|
||||
<div className="d-flex justify-content-center align-items-center">
|
||||
<Sprite symbol="receive" width="24" height="24" />
|
||||
<div className="ps-1">{t('current_wallet.button_deposit')}</div>
|
||||
</div>
|
||||
</Link>
|
||||
</rb.Col>
|
||||
</rb.Row>
|
||||
|
|
|
|||
|
|
@ -254,9 +254,9 @@ export default function Earn() {
|
|||
<PageTitle title={t('earn.title')} subtitle={t('earn.subtitle')} />
|
||||
|
||||
<rb.Fade in={serviceInfo?.coinjoinInProgress} mountOnEnter={true} unmountOnExit={true}>
|
||||
<div className="mb-4 p-3 border border-1 rounded">
|
||||
<small className="text-secondary">{t('earn.alert_coinjoin_in_progress')}</small>
|
||||
</div>
|
||||
<rb.Alert variant="info" className="mb-4">
|
||||
{t('earn.alert_coinjoin_in_progress')}
|
||||
</rb.Alert>
|
||||
</rb.Fade>
|
||||
|
||||
{alert && <rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ input::-webkit-inner-spin-button {
|
|||
color: var(--bs-black);
|
||||
font-size: 0.8rem;
|
||||
height: 1rem;
|
||||
padding-right: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -167,10 +167,10 @@ export default function Send() {
|
|||
const [alert, setAlert] = useState(null)
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [isSending, setIsSending] = useState(false)
|
||||
const [isCoinjoin, setIsCoinjoin] = useState(false)
|
||||
const [isCoinjoinOptionEnabled, setIsCoinjoinOptionEnabled] = useState(
|
||||
serviceInfo && !serviceInfo.makerRunning && !serviceInfo.coinjoinInProgress
|
||||
)
|
||||
const [isCoinjoin, setIsCoinjoin] = useState(isCoinjoinOptionEnabled)
|
||||
const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL)
|
||||
const [utxos, setUtxos] = useState(null)
|
||||
const [isSweep, setIsSweep] = useState(false)
|
||||
|
|
@ -418,7 +418,7 @@ export default function Send() {
|
|||
if (!breakdown) return null
|
||||
|
||||
return (
|
||||
<div className="sweep-breakdown mt-1">
|
||||
<div className="sweep-breakdown mt-2">
|
||||
<rb.Accordion flush>
|
||||
<rb.Accordion.Item eventKey="0">
|
||||
<rb.Accordion.Header>
|
||||
|
|
@ -426,7 +426,7 @@ export default function Send() {
|
|||
{t('send.button_sweep_amount_breakdown')}
|
||||
</div>
|
||||
</rb.Accordion.Header>
|
||||
<rb.Accordion.Body className="px-0">
|
||||
<rb.Accordion.Body className="my-4 p-0">
|
||||
<table className="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -509,12 +509,10 @@ export default function Send() {
|
|||
<PageTitle title={t('send.title')} subtitle={t('send.subtitle')} />
|
||||
|
||||
<rb.Fade in={!isCoinjoinOptionEnabled} mountOnEnter={true} unmountOnExit={true}>
|
||||
<div className="mb-4 p-3 border border-1 rounded">
|
||||
<small className="text-secondary">
|
||||
{serviceInfo?.makerRunning && t('send.text_maker_running')}
|
||||
{serviceInfo?.coinjoinInProgress && t('send.text_coinjoin_already_running')}
|
||||
</small>
|
||||
</div>
|
||||
<rb.Alert variant="info" className="mb-4">
|
||||
{serviceInfo?.makerRunning && t('send.text_maker_running')}
|
||||
{serviceInfo?.coinjoinInProgress && t('send.text_coinjoin_already_running')}
|
||||
</rb.Alert>
|
||||
</rb.Fade>
|
||||
|
||||
{alert && (
|
||||
|
|
@ -524,19 +522,6 @@ export default function Send() {
|
|||
)}
|
||||
|
||||
<rb.Form onSubmit={onSubmit} noValidate id="send-form">
|
||||
<rb.Form.Group className="mb-4" controlId="destination">
|
||||
<rb.Form.Label>{t('send.label_recipient')}</rb.Form.Label>
|
||||
<rb.Form.Control
|
||||
name="destination"
|
||||
placeholder={t('send.placeholder_recipient')}
|
||||
className="slashed-zeroes"
|
||||
value={destination || ''}
|
||||
required
|
||||
onChange={(e) => setDestination(e.target.value)}
|
||||
isInvalid={destination !== null && !isValidAddress(destination)}
|
||||
/>
|
||||
<rb.Form.Control.Feedback type="invalid">{t('send.feedback_invalid_recipient')}</rb.Form.Control.Feedback>
|
||||
</rb.Form.Group>
|
||||
<rb.Form.Group className="mb-4 flex-grow-1" controlId="account">
|
||||
<rb.Form.Label>
|
||||
{settings.useAdvancedWalletMode ? t('send.label_account_dev_mode') : t('send.label_account')}
|
||||
|
|
@ -561,7 +546,7 @@ export default function Send() {
|
|||
))}
|
||||
</rb.Form.Select>
|
||||
</rb.Form.Group>
|
||||
<rb.Form.Group className="mb-4" controlId="amount">
|
||||
<rb.Form.Group className={isSweep ? 'mb-0' : 'mb-4'} controlId="amount">
|
||||
<rb.Form.Label form="send-form">{t('send.label_amount')}</rb.Form.Label>
|
||||
<div className="position-relative">
|
||||
<rb.Form.Control
|
||||
|
|
@ -596,9 +581,26 @@ export default function Send() {
|
|||
</rb.Form.Control.Feedback>
|
||||
{isSweep && frozenOrLockedWarning()}
|
||||
</rb.Form.Group>
|
||||
<rb.Form.Group className="mb-4" controlId="destination">
|
||||
<rb.Form.Label>{t('send.label_recipient')}</rb.Form.Label>
|
||||
<rb.Form.Control
|
||||
name="destination"
|
||||
placeholder={t('send.placeholder_recipient')}
|
||||
className="slashed-zeroes"
|
||||
value={destination || ''}
|
||||
required
|
||||
onChange={(e) => setDestination(e.target.value)}
|
||||
isInvalid={destination !== null && !isValidAddress(destination)}
|
||||
/>
|
||||
<rb.Form.Control.Feedback type="invalid">{t('send.feedback_invalid_recipient')}</rb.Form.Control.Feedback>
|
||||
</rb.Form.Group>
|
||||
{isCoinjoinOptionEnabled && (
|
||||
<rb.Form.Group controlId="isCoinjoin" className={`${isCoinjoin ? 'mb-3' : ''}`}>
|
||||
<ToggleSwitch label={t('send.toggle_coinjoin')} onToggle={(isToggled) => setIsCoinjoin(isToggled)} />
|
||||
<ToggleSwitch
|
||||
label={t('send.toggle_coinjoin')}
|
||||
initialValue={isCoinjoin}
|
||||
onToggle={(isToggled) => setIsCoinjoin(isToggled)}
|
||||
/>
|
||||
</rb.Form.Group>
|
||||
)}
|
||||
</rb.Form>
|
||||
|
|
|
|||
|
|
@ -109,8 +109,8 @@
|
|||
},
|
||||
"current_wallet": {
|
||||
"text_loading": "Loading",
|
||||
"button_deposit": "Deposit",
|
||||
"button_withdraw": "Withdraw",
|
||||
"button_deposit": "Receive",
|
||||
"button_withdraw": "Send",
|
||||
"button_switch_wallet": "Switch wallet",
|
||||
"error_loading_failed": "Loading wallet failed."
|
||||
},
|
||||
|
|
|
|||
|
|
@ -428,6 +428,12 @@ h2 {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: var(--bs-white);
|
||||
background-color: var(--bs-gray-800);
|
||||
border-color: var(--bs-gray-900);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--bs-gray-800);
|
||||
color: var(--bs-white);
|
||||
|
|
@ -438,6 +444,7 @@ h2 {
|
|||
url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/%3e%3c/svg%3e')
|
||||
center/1em auto no-repeat;
|
||||
}
|
||||
|
||||
/* Privacy Level Styles */
|
||||
|
||||
.privacy-level-4 {
|
||||
|
|
@ -577,6 +584,10 @@ h2 {
|
|||
border-color: var(--bs-gray-800);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .accordion-button.collapsed::after {
|
||||
background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e');
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .btn-outline-dark:hover {
|
||||
background-color: var(--bs-gray-dark) !important;
|
||||
border-color: var(--bs-gray-dark) !important;
|
||||
|
|
@ -602,3 +613,12 @@ h2 {
|
|||
:root[data-theme='dark'] .modal-header .btn-close {
|
||||
background-color: var(--bs-gray-900) !important;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background-color: var(--bs-gray-500);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .form-control:disabled::placeholder {
|
||||
color: var(--bs-gray-600);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue