m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Dark Mode : Gas fee (#14005)

Browse Source
This commit is contained in:
Guillaume Roux 2022-03-19 01:43:10 +01:00 committed by GitHub
parent 91a30bc464
commit c3901e4ba8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 108 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/images/curve-high.svg
View File

@ -1 +1 @@
<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M.813.082h161v31h-161z"/><path d="M117.469 8.638h1.03l2.39 5.65 2.4-5.65h1.01l-3.02 7.1h-.78l-3.03-7.1ZM126.795 15.838c-.386 0-.74-.067-1.06-.2a2.436 2.436 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.597.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .033-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.56 1.56 0 0 0-.19-.55c-.086-.16-.2-.297-.34-.41a1.408 1.408 0 0 0-.46-.26 1.636 1.636 0 0 0-.54-.09 1.732 1.732 0 0 0-1.04.35 1.512 1.512 0 0 0-.38.41c-.106.16-.18.343-.22.55h3.17ZM130.406 10.738h.86v.97c.046-.16.12-.303.22-.43s.213-.233.34-.32a1.59 1.59 0 0 1 .4-.2c.146-.047.293-.07.44-.07.133 0 .263.013.39.04v.89a.782.782 0 0 0-.23-.06 1.348 1.348 0 0 0-.24-.02c-.16 0-.32.037-.48.11-.154.067-.294.17-.42.31-.12.14-.22.32-.3.54-.08.213-.12.467-.12.76v2.48h-.86v-5ZM134.438 17.828l1.09-2.35-2.19-4.74h.95l1.72 3.8 1.71-3.8h.96l-3.28 7.09h-.96ZM141.724 15.738v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .537.047.77.14.233.093.43.23.59.41.167.173.297.387.39.64.093.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.327.2-.46.36-.127.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86ZM148.053 9.398a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .316.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.584.584 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM152.283 14.928c.247 0 .473-.043.68-.13.213-.087.393-.207.54-.36a1.7 1.7 0 0 0 .34-.56c.087-.213.13-.447.13-.7a1.81 1.81 0 0 0-.13-.69 1.573 1.573 0 0 0-.34-.56 1.54 1.54 0 0 0-.54-.36 1.632 1.632 0 0 0-.68-.14c-.253 0-.483.047-.69.14a1.554 1.554 0 0 0-.53.36 1.7 1.7 0 0 0-.35.56c-.08.213-.12.443-.12.69 0 .253.04.487.12.7.087.213.203.4.35.56.147.153.323.273.53.36.207.087.437.13.69.13Zm-.05 3c-.54 0-1.013-.1-1.42-.3-.407-.2-.717-.44-.93-.72l.6-.6c.2.253.443.457.73.61.293.153.633.23 1.02.23.213 0 .42-.033.62-.1s.377-.173.53-.32c.16-.14.287-.32.38-.54.093-.213.14-.47.14-.77v-.57a2.015 2.015 0 0 1-.72.63c-.307.167-.647.25-1.02.25-.347 0-.67-.063-.97-.19-.3-.133-.56-.313-.78-.54a2.643 2.643 0 0 1-.52-.81 2.8 2.8 0 0 1-.18-1.01c0-.353.06-.683.18-.99.127-.313.3-.583.52-.81.22-.233.48-.413.78-.54.3-.133.623-.2.97-.2.373 0 .713.083 1.02.25.307.16.547.367.72.62v-.77h.86v4.71c0 .42-.067.783-.2 1.09-.127.313-.303.57-.53.77a2.17 2.17 0 0 1-.8.46c-.307.107-.64.16-1 .16ZM156.382 15.738v-7.5h.86v3.27c.174-.3.4-.52.68-.66s.584-.21.91-.21c.28 0 .537.047.77.14.234.093.43.23.59.41.167.173.297.387.39.64.094.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.496-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.326.2-.46.36-.126.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M118.254-5.209h20.706v39.25h-20.706z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>
<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="none" d="M.813.082h161v31h-161z"/><path d="M117.469 8.638h1.03l2.39 5.65 2.4-5.65h1.01l-3.02 7.1h-.78l-3.03-7.1ZM126.795 15.838c-.386 0-.74-.067-1.06-.2a2.436 2.436 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.597.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .033-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.56 1.56 0 0 0-.19-.55c-.086-.16-.2-.297-.34-.41a1.408 1.408 0 0 0-.46-.26 1.636 1.636 0 0 0-.54-.09 1.732 1.732 0 0 0-1.04.35 1.512 1.512 0 0 0-.38.41c-.106.16-.18.343-.22.55h3.17ZM130.406 10.738h.86v.97c.046-.16.12-.303.22-.43s.213-.233.34-.32a1.59 1.59 0 0 1 .4-.2c.146-.047.293-.07.44-.07.133 0 .263.013.39.04v.89a.782.782 0 0 0-.23-.06 1.348 1.348 0 0 0-.24-.02c-.16 0-.32.037-.48.11-.154.067-.294.17-.42.31-.12.14-.22.32-.3.54-.08.213-.12.467-.12.76v2.48h-.86v-5ZM134.438 17.828l1.09-2.35-2.19-4.74h.95l1.72 3.8 1.71-3.8h.96l-3.28 7.09h-.96ZM141.724 15.738v-7.5h.86v3.27c.173-.3.4-.52.68-.66s.583-.21.91-.21c.28 0 .537.047.77.14.233.093.43.23.59.41.167.173.297.387.39.64.093.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.497-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.327.2-.46.36-.127.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86ZM148.053 9.398a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .316.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.584.584 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM152.283 14.928c.247 0 .473-.043.68-.13.213-.087.393-.207.54-.36a1.7 1.7 0 0 0 .34-.56c.087-.213.13-.447.13-.7a1.81 1.81 0 0 0-.13-.69 1.573 1.573 0 0 0-.34-.56 1.54 1.54 0 0 0-.54-.36 1.632 1.632 0 0 0-.68-.14c-.253 0-.483.047-.69.14a1.554 1.554 0 0 0-.53.36 1.7 1.7 0 0 0-.35.56c-.08.213-.12.443-.12.69 0 .253.04.487.12.7.087.213.203.4.35.56.147.153.323.273.53.36.207.087.437.13.69.13Zm-.05 3c-.54 0-1.013-.1-1.42-.3-.407-.2-.717-.44-.93-.72l.6-.6c.2.253.443.457.73.61.293.153.633.23 1.02.23.213 0 .42-.033.62-.1s.377-.173.53-.32c.16-.14.287-.32.38-.54.093-.213.14-.47.14-.77v-.57a2.015 2.015 0 0 1-.72.63c-.307.167-.647.25-1.02.25-.347 0-.67-.063-.97-.19-.3-.133-.56-.313-.78-.54a2.643 2.643 0 0 1-.52-.81 2.8 2.8 0 0 1-.18-1.01c0-.353.06-.683.18-.99.127-.313.3-.583.52-.81.22-.233.48-.413.78-.54.3-.133.623-.2.97-.2.373 0 .713.083 1.02.25.307.16.547.367.72.62v-.77h.86v4.71c0 .42-.067.783-.2 1.09-.127.313-.303.57-.53.77a2.17 2.17 0 0 1-.8.46c-.307.107-.64.16-1 .16ZM156.382 15.738v-7.5h.86v3.27c.174-.3.4-.52.68-.66s.584-.21.91-.21c.28 0 .537.047.77.14.234.093.43.23.59.41.167.173.297.387.39.64.094.247.14.523.14.83v3.08h-.85v-2.95c0-.42-.11-.75-.33-.99-.213-.247-.496-.37-.85-.37-.2 0-.39.04-.57.12-.173.08-.326.2-.46.36-.126.153-.23.343-.31.57-.073.227-.11.487-.11.78v2.48h-.86Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M118.254-5.209h20.706v39.25h-20.706z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.7 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

2
app/images/curve-low.svg
View File

@ -1 +1 @@
<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="#fff" d="M.813.082h161v31h-161z"/><path d="M26.047 8.638h.93v6.22h3.43v.88h-4.36v-7.1ZM33.46 15.838c-.38 0-.73-.067-1.05-.2a2.573 2.573 0 0 1-1.38-1.38c-.127-.32-.19-.66-.19-1.02s.063-.697.19-1.01c.133-.32.316-.597.55-.83.233-.233.51-.417.83-.55.32-.14.67-.21 1.05-.21.373 0 .72.07 1.04.21.32.133.596.317.83.55.233.233.413.51.54.83.133.313.2.65.2 1.01s-.068.7-.2 1.02a2.438 2.438 0 0 1-.54.82c-.234.233-.51.42-.83.56-.32.133-.667.2-1.04.2Zm0-.8c.26 0 .496-.047.71-.14.212-.093.392-.22.54-.38.152-.167.27-.357.35-.57.086-.22.13-.457.13-.71 0-.247-.044-.48-.13-.7-.08-.22-.198-.41-.35-.57a1.518 1.518 0 0 0-.54-.39 1.752 1.752 0 0 0-.71-.14c-.26 0-.498.047-.71.14a1.62 1.62 0 0 0-.55.39 1.73 1.73 0 0 0-.36.57c-.08.22-.12.453-.12.7 0 .253.04.49.12.71.086.213.206.403.36.57.152.16.336.287.55.38.212.093.45.14.71.14ZM40.284 12.148l-1.23 3.59h-.76l-1.7-5h.9l1.21 3.65 1.25-3.65h.66l1.25 3.65 1.21-3.65h.91l-1.7 5h-.76l-1.24-3.59Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M24.607 16.738h20.706v17.303H24.607z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>
<svg width="162" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path fill="none" d="M.813.082h161v31h-161z"/><path d="M26.047 8.638h.93v6.22h3.43v.88h-4.36v-7.1ZM33.46 15.838c-.38 0-.73-.067-1.05-.2a2.573 2.573 0 0 1-1.38-1.38c-.127-.32-.19-.66-.19-1.02s.063-.697.19-1.01c.133-.32.316-.597.55-.83.233-.233.51-.417.83-.55.32-.14.67-.21 1.05-.21.373 0 .72.07 1.04.21.32.133.596.317.83.55.233.233.413.51.54.83.133.313.2.65.2 1.01s-.068.7-.2 1.02a2.438 2.438 0 0 1-.54.82c-.234.233-.51.42-.83.56-.32.133-.667.2-1.04.2Zm0-.8c.26 0 .496-.047.71-.14.212-.093.392-.22.54-.38.152-.167.27-.357.35-.57.086-.22.13-.457.13-.71 0-.247-.044-.48-.13-.7-.08-.22-.198-.41-.35-.57a1.518 1.518 0 0 0-.54-.39 1.752 1.752 0 0 0-.71-.14c-.26 0-.498.047-.71.14a1.62 1.62 0 0 0-.55.39 1.73 1.73 0 0 0-.36.57c-.08.22-.12.453-.12.7 0 .253.04.49.12.71.086.213.206.403.36.57.152.16.336.287.55.38.212.093.45.14.71.14ZM40.284 12.148l-1.23 3.59h-.76l-1.7-5h.9l1.21 3.65 1.25-3.65h.66l1.25 3.65 1.21-3.65h.91l-1.7 5h-.76l-1.24-3.59Z" fill="#F66A0A"/><path opacity=".3" d="M45.774 22.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="0" width="111" height="31"><path d="M45.774 22.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#b)"><path fill="#F66A0A" stroke="#fff" stroke-width="2" d="M24.607 16.738h20.706v17.303H24.607z"/></g></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.813 .082)" d="M0 0h161v31H0z"/></clipPath></defs></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

2
app/images/curve-medium.svg
View File

@ -1 +1 @@
<svg width="162" height="47" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M.813.082h161v46h-161z"/><path d="m64.268 1.505 2.63 3.54 2.65-3.54h.84v7.1h-.92v-5.52l-2.56 3.44-2.56-3.44v5.52h-.93v-7.1h.85ZM74.257 8.705a2.73 2.73 0 0 1-1.06-.2 2.432 2.432 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.596.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .034-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.58 1.58 0 0 0-.19-.55c-.086-.16-.2-.296-.34-.41a1.42 1.42 0 0 0-.46-.26 1.639 1.639 0 0 0-.54-.09 1.728 1.728 0 0 0-1.04.35 1.498 1.498 0 0 0-.38.41 1.49 1.49 0 0 0-.22.55h3.17ZM79.928 8.705c-.353 0-.68-.066-.98-.2a2.57 2.57 0 0 1-.77-.56 2.732 2.732 0 0 1-.52-.83 2.8 2.8 0 0 1-.18-1.01c0-.36.06-.697.18-1.01.127-.313.3-.587.52-.82a2.36 2.36 0 0 1 1.75-.77c.38 0 .727.087 1.04.26.313.167.553.37.72.61v-3.27h.86v7.5h-.86v-.77c-.167.24-.407.447-.72.62a2.18 2.18 0 0 1-1.04.25Zm.13-.79a1.606 1.606 0 0 0 1.22-.52c.153-.167.27-.36.35-.58.087-.22.13-.457.13-.71 0-.253-.043-.49-.13-.71-.08-.22-.197-.41-.35-.57a1.542 1.542 0 0 0-.53-.39 1.657 1.657 0 0 0-.69-.14c-.253 0-.487.047-.7.14a1.65 1.65 0 0 0-.54.39c-.147.16-.263.35-.35.57-.08.22-.12.457-.12.71 0 .253.04.49.12.71.087.22.203.413.35.58.153.16.333.287.54.38.213.093.447.14.7.14ZM84.607 2.265a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .317.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.583.583 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM88.427 8.705c-.273 0-.523-.046-.75-.14-.227-.1-.42-.236-.58-.41a1.916 1.916 0 0 1-.38-.63 2.614 2.614 0 0 1-.13-.85v-3.07h.86v2.94c0 .42.1.753.3 1 .207.247.483.37.83.37.193 0 .373-.04.54-.12.173-.087.32-.207.44-.36.127-.16.227-.353.3-.58.073-.227.11-.483.11-.77v-2.48h.86v5h-.86v-.77a1.654 1.654 0 0 1-.66.66c-.267.14-.56.21-.88.21ZM98.888 5.665c0-.407-.083-.737-.25-.99-.166-.253-.413-.38-.74-.38-.4 0-.727.157-.98.47-.247.314-.377.74-.39 1.28v2.56h-.86v-2.94c0-.407-.083-.737-.25-.99-.16-.253-.403-.38-.73-.38-.407 0-.74.163-1 .49-.253.327-.38.774-.38 1.34v2.48h-.86v-5h.86v.77a1.63 1.63 0 0 1 .61-.63c.26-.16.56-.24.9-.24.374 0 .69.097.95.29.267.187.463.447.59.78.133-.327.343-.587.63-.78.293-.193.63-.29 1.01-.29.273 0 .517.05.73.15.22.094.404.23.55.41.153.173.27.387.35.64.08.247.12.524.12.83v3.07h-.86v-2.94Z" fill="#037DD6"/><path opacity=".3" d="M45.774 37.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="15" width="111" height="31"><path d="M45.774 37.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#037DD6" stroke="#fff" stroke-width="2" d="M62.313 9.791h37.343v39.25H62.313z"/></g></svg>
<svg width="162" height="47" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M.813.082h161v46h-161z"/><path d="m64.268 1.505 2.63 3.54 2.65-3.54h.84v7.1h-.92v-5.52l-2.56 3.44-2.56-3.44v5.52h-.93v-7.1h.85ZM74.257 8.705a2.73 2.73 0 0 1-1.06-.2 2.432 2.432 0 0 1-1.35-1.37 2.91 2.91 0 0 1-.18-1.03c0-.367.064-.707.19-1.02.127-.32.304-.596.53-.83.234-.233.51-.417.83-.55.32-.133.67-.2 1.05-.2.327 0 .634.057.92.17.287.107.537.27.75.49.22.213.394.477.52.79.127.307.19.66.19 1.06v.13c0 .034-.003.077-.01.13h-4.1c.007.233.054.45.14.65.094.2.214.373.36.52.154.147.334.263.54.35.214.08.444.12.69.12.387 0 .704-.077.95-.23.254-.16.457-.373.61-.64l.68.47c-.226.367-.53.657-.91.87-.373.213-.82.32-1.34.32Zm1.51-3.13a1.58 1.58 0 0 0-.19-.55c-.086-.16-.2-.296-.34-.41a1.42 1.42 0 0 0-.46-.26 1.639 1.639 0 0 0-.54-.09 1.728 1.728 0 0 0-1.04.35 1.498 1.498 0 0 0-.38.41 1.49 1.49 0 0 0-.22.55h3.17ZM79.928 8.705c-.353 0-.68-.066-.98-.2a2.57 2.57 0 0 1-.77-.56 2.732 2.732 0 0 1-.52-.83 2.8 2.8 0 0 1-.18-1.01c0-.36.06-.697.18-1.01.127-.313.3-.587.52-.82a2.36 2.36 0 0 1 1.75-.77c.38 0 .727.087 1.04.26.313.167.553.37.72.61v-3.27h.86v7.5h-.86v-.77c-.167.24-.407.447-.72.62a2.18 2.18 0 0 1-1.04.25Zm.13-.79a1.606 1.606 0 0 0 1.22-.52c.153-.167.27-.36.35-.58.087-.22.13-.457.13-.71 0-.253-.043-.49-.13-.71-.08-.22-.197-.41-.35-.57a1.542 1.542 0 0 0-.53-.39 1.657 1.657 0 0 0-.69-.14c-.253 0-.487.047-.7.14a1.65 1.65 0 0 0-.54.39c-.147.16-.263.35-.35.57-.08.22-.12.457-.12.71 0 .253.04.49.12.71.087.22.203.413.35.58.153.16.333.287.54.38.213.093.447.14.7.14ZM84.607 2.265a.599.599 0 0 1-.62-.61c0-.167.06-.31.18-.43s.266-.18.44-.18c.173 0 .317.06.43.18.113.12.17.263.17.43 0 .173-.057.32-.17.44a.583.583 0 0 1-.43.17Zm-.44 1.34h.86v5h-.86v-5ZM88.427 8.705c-.273 0-.523-.046-.75-.14-.227-.1-.42-.236-.58-.41a1.916 1.916 0 0 1-.38-.63 2.614 2.614 0 0 1-.13-.85v-3.07h.86v2.94c0 .42.1.753.3 1 .207.247.483.37.83.37.193 0 .373-.04.54-.12.173-.087.32-.207.44-.36.127-.16.227-.353.3-.58.073-.227.11-.483.11-.77v-2.48h.86v5h-.86v-.77a1.654 1.654 0 0 1-.66.66c-.267.14-.56.21-.88.21ZM98.888 5.665c0-.407-.083-.737-.25-.99-.166-.253-.413-.38-.74-.38-.4 0-.727.157-.98.47-.247.314-.377.74-.39 1.28v2.56h-.86v-2.94c0-.407-.083-.737-.25-.99-.16-.253-.403-.38-.73-.38-.407 0-.74.163-1 .49-.253.327-.38.774-.38 1.34v2.48h-.86v-5h.86v.77a1.63 1.63 0 0 1 .61-.63c.26-.16.56-.24.9-.24.374 0 .69.097.95.29.267.187.463.447.59.78.133-.327.343-.587.63-.78.293-.193.63-.29 1.01-.29.273 0 .517.05.73.15.22.094.404.23.55.41.153.173.27.387.35.64.08.247.12.524.12.83v3.07h-.86v-2.94Z" fill="#037DD6"/><path opacity=".3" d="M45.774 37.738c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#037DD6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="26" y="15" width="111" height="31"><path d="M45.774 37.605c-10.764 7.42-19.417 8-19.417 8h110.251s-8.653-.58-19.417-8c-10.764-7.42-23.364-22-35.709-22-12.344 0-24.944 14.58-35.708 22Z" fill="#EAF6FF"/></mask><g mask="url(#a)"><path fill="#037DD6" stroke="#fff" stroke-width="2" d="M62.313 9.791h37.343v39.25H62.313z"/></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

2
ui/components/app/edit-gas-display-education/index.scss
View File

@ -1,5 +1,5 @@
.edit-gas-display-education {
a {
color: var(--primary-1);
color: var(--color-primary-default);
}
}

8
ui/components/app/edit-gas-display/index.scss
View File

@ -28,8 +28,8 @@
button.edit-gas-display__dapp-acknowledgement-button {
margin: 40px auto 0 auto;
display: block;
color: var(--secondary-1);
border: 1px solid var(--secondary-1);
color: var(--color-secondary-default);
border: 1px solid var(--color-secondary-default);
text-transform: unset;
width: auto;
background: transparent;
@ -43,7 +43,7 @@
display: block;
margin: 0 auto;
background: transparent;
color: var(--primary-1);
color: var(--color-primary-default);
font-weight: bold;
}
@ -58,7 +58,7 @@
display: block;
margin: 0 auto;
background: transparent;
color: var(--primary-1);
color: var(--color-primary-default);
}
}

8
ui/components/app/edit-gas-fee-button/index.scss
View File

@ -8,7 +8,7 @@
display: flex;
align-items: baseline;
color: var(--primary-1);
color: var(--color-primary-default);
background: transparent;
border: 0;
padding-inline-end: 0;
@ -16,7 +16,7 @@
}
i {
color: var(--primary-1);
color: var(--color-primary-default);
margin-right: 2px;
}
@ -37,11 +37,11 @@
&__tooltip {
p {
color: var(--Grey-500);
color: var(--color-text-alternative);
}
b {
color: var(--neutral-black);
color: var(--color-text-default);
display: inline-block;
min-width: 60%;
}

4
ui/components/app/edit-gas-fee-popover/edit-gas-item/index.scss
View File

@ -12,7 +12,7 @@
width: 100%;
&:hover:not([disabled]) {
background-color: var(--primary-2);
background-color: var(--color-primary-muted);
}
&--selected {
@ -83,6 +83,6 @@
&__time-estimate-medium,
&__time-estimate-high {
color: var(--success-3);
color: var(--color-success-muted);
}
}

2
ui/components/app/edit-gas-fee-popover/edit-gas-tooltip/index.scss
View File

@ -17,7 +17,7 @@
}
&__dialog {
background-color: var(--Orange-500);
background-color: var(--color-secondary-default);
border-radius: 30px;
margin: 4px 0;
text-align: center;

8
ui/components/app/edit-gas-fee-popover/index.scss
View File

@ -2,7 +2,7 @@
height: 500px;
&__wrapper {
border-top: 1px solid var(--ui-grey);
border-top: 1px solid var(--color-border-default);
height: 100%;
}
@ -19,7 +19,7 @@
}
&__header {
color: var(--ui-4);
color: var(--color-text-alternative);
font-size: 10px;
font-weight: 700;
margin: 0 12px;
@ -41,7 +41,7 @@
}
&__separator {
border-top: 1px solid var(--ui-grey);
border-top: 1px solid var(--color-border-default);
margin: 8px 12px;
}
}
@ -51,6 +51,6 @@
}
&__know-more a {
color: var(--primary-1);
color: var(--color-primary-default);
}
}

6
ui/components/app/edit-gas-fee-popover/network-statistics/index.scss
View File

@ -2,8 +2,8 @@
margin: 24px 12px 12px;
&__info {
border-top: 1px solid var(--ui-2);
border-bottom: 1px solid var(--ui-2);
border-top: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
height: 56px;
display: flex;
align-items: center;
@ -18,7 +18,7 @@
flex: 1;
&:not(:last-child) {
border-right: 1px solid var(--ui-2);
border-right: 1px solid var(--color-border-muted);
}
}

24
ui/components/app/gas-customization/advanced-gas-inputs/index.scss
View File

@ -23,12 +23,12 @@
}
.fa-info-circle {
color: var(--silver);
color: var(--color-icon-default);
cursor: pointer;
}
.fa-info-circle:hover {
color: var(--mid-gray);
color: var(--color-icon-muted);
}
}
@ -53,9 +53,9 @@
@include Paragraph;
direction: ltr;
border: 1px solid var(--dusty-gray);
border: 1px solid var(--color-border-muted);
border-radius: 4px;
color: var(--mid-gray);
color: var(--color-text-alternative);
height: 24px;
width: 100%;
padding-left: 8px;
@ -64,11 +64,11 @@
}
&__input--error {
border: 1px solid var(--red);
border: 1px solid var(--color-error-default);
}
&__input--warning {
border: 1px solid var(--orange);
border: 1px solid var(--color-warning-default);
}
&__input-arrows {
@ -98,12 +98,12 @@
}
&__i-wrap:hover {
background: #4eade7;
color: var(--white);
background: var(--color-primary-default);
color: var(--color-primary-inverse);
}
i:hover {
background: #4eade7;
background: var(--color-primary-muted);
}
i {
@ -116,11 +116,11 @@
}
&__input-arrows--error {
border: 1px solid var(--red);
border: 1px solid var(--color-error-default);
}
&__input-arrows--warning {
border: 1px solid var(--orange);
border: 1px solid var(--color-warning-default);
}
input[type="number"] {
@ -145,7 +145,7 @@
position: absolute;
top: 8px;
right: 10px;
color: var(--dusty-gray);
color: var(--color-text-muted);
}
&__custom-text {

18
ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/index.scss
View File

@ -10,7 +10,7 @@
&__transaction-data-summary {
display: flex;
flex-flow: column;
color: var(--mid-gray);
color: var(--color-text-alternative);
margin-top: 12px;
padding-left: 18px;
padding-right: 18px;
@ -22,7 +22,7 @@
display: flex;
flex-flow: row;
justify-content: space-between;
color: #888ea3;
color: var(--color-text-muted);
}
&__container {
@ -34,7 +34,7 @@
&__fee {
@include Paragraph;
color: #313a5e;
color: var(--color-text-alternative);
}
&__time-remaining {
@ -42,7 +42,7 @@
/*rtl:ignore*/
direction: ltr;
color: #313a5e;
color: var(--color-text-alternative);
.minutes-num,
.seconds-num {
@ -65,15 +65,15 @@
&__fee-chart {
margin-top: 8px;
height: 265px;
background: #f8f9fb;
border-bottom: 1px solid #d2d8dd;
border-top: 1px solid #d2d8dd;
background: var(--color-background-alternative);
border-bottom: 1px solid var(--color-border-muted);
border-top: 1px solid var(--color-border-muted);
position: relative;
&__title {
@include H7;
color: #313a5e;
color: var(--color-text-alternative);
margin-left: 22px;
}
@ -87,7 +87,7 @@
padding-left: 20px;
padding-right: 19px;
width: 100%;
color: #888ea3;
color: var(--color-text-alternative);
}
.loading-overlay {

6
ui/components/app/gas-customization/gas-modal-page-container/basic-tab-content/index.scss
View File

@ -11,14 +11,14 @@
@include Paragraph;
margin-top: 19px;
color: var(--black);
color: var(--color-text-default);
}
&__blurb {
@include H7;
width: 95%;
color: var(--black);
color: var(--color-text-default);
margin-top: 5px;
margin-bottom: 15px;
}
@ -27,7 +27,7 @@
@include H7;
width: 95%;
color: #979797;
color: var(--color-text-alternative);
margin-top: 15px;
}
}

16
ui/components/app/gas-customization/gas-modal-page-container/index.scss
View File

@ -33,7 +33,7 @@
&__header-close-text {
@include H6;
color: #4eade7;
color: var(--color-primary-default);
position: absolute;
font-size: 0.75rem;
top: 8px;
@ -46,7 +46,7 @@
&__title {
@include H5;
color: var(--black);
color: var(--color-text-default);
font-weight: 500;
display: flex;
justify-content: center;
@ -80,7 +80,7 @@
}
&.tab--active button {
color: var(--primary-blue);
color: var(--color-primary-default);
}
}
}
@ -101,11 +101,11 @@
@include H7;
width: 100%;
background: var(--polar);
background: var(--color-background-alternative);
padding: 15px 21px;
display: flex;
flex-flow: column;
color: var(--scorpion);
color: var(--color-text-alternative);
&__send-info,
&__transaction-info,
@ -153,8 +153,8 @@
}
&__info-row--fade {
background: white;
color: var(--dusty-gray);
border-top: 1px solid var(--mischka);
background: var(--color-background-default);
color: var(--color-text-muted);
border-top: 1px solid var(--color-border-muted);
}
}

40
ui/components/app/gas-customization/gas-price-button-group/index.scss
View File

@ -15,7 +15,7 @@
&__time-estimate {
margin-top: 5.5px;
color: var(--silver-chalice);
color: var(--color-text-alternative);
height: 15.4px;
}
@ -34,9 +34,9 @@
display: flex;
padding-top: 17px;
border-radius: 4px;
border-color: var(--spindle);
background: var(--white);
color: var(--scorpion);
border-color: var(--color-primary-muted);
background: var(--color-background-default);
color: var(--color-text-alternative);
div {
display: flex;
@ -52,13 +52,13 @@
}
.button-group__button--active {
border-color: var(--primary-blue);
color: var(--scorpion);
border-color: var(--color-primary-default);
color: var(--color-text-alternative);
i {
&:last-child {
display: flex;
color: var(--primary-blue);
color: var(--color-primary-default);
margin-top: 8px;
}
}
@ -114,8 +114,8 @@
.button-group__button,
.button-group__button--active {
background: white;
color: var(--scorpion);
background: var(--color-background-default);
color: var(--color-text-alternative);
padding: 4px;
div {
@ -133,13 +133,13 @@
}
.button-group__button--active {
color: var(--white);
background: var(--dodger-blue);
color: var(--color-background-default);
background: var(--color-primary-muted);
i {
&:last-child {
display: flex;
color: var(--primary-blue);
color: var(--color-primary-default);
margin-top: 10px;
}
}
@ -185,14 +185,14 @@
font-weight: 500;
margin-top: 4px;
color: var(--black);
color: var(--color-text-default);
}
.button-group__button,
.button-group__button--active {
height: 78px;
background: white;
color: #2a4055;
background: var(--color-background-default);
color: var(--color-text-default);
width: 108px;
height: 97px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.151579);
@ -221,11 +221,11 @@
}
.button-group__button--active {
background: #f7fcff;
border-color: #2c8bdc;
background: var(--color-background-alternative);
border-color: var(--color-primary-default);
&:first-child {
border-color: #2c8bdc;
border-color: var(--color-primary-default);
}
.button-check-wrapper {
@ -235,7 +235,7 @@
position: absolute;
top: -11px;
right: -10px;
background: #d5ecfa;
background: var(--color-background-alternative);
display: flex;
flex-flow: row;
justify-content: center;
@ -244,7 +244,7 @@
i {
display: flex;
color: var(--primary-blue);
color: var(--color-primary-default);
font-weight: 900;
}
}

8
ui/components/app/gas-customization/gas-slider/index.scss
View File

@ -16,7 +16,7 @@
-webkit-appearance: none !important;
height: 34px;
width: 34px;
background-color: var(--primary-blue);
background-color: var(--color-primary-default);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
border-radius: 50%;
position: relative;
@ -26,7 +26,7 @@
&__bar {
height: 6px;
width: 322px;
background: var(--alto);
background: var(--color-background-alternative);
display: flex;
justify-content: space-between;
position: absolute;
@ -41,7 +41,7 @@
margin-left: 102px;
width: 322px;
z-index: 1;
background-color: var(--blizzard-blue);
background-color: var(--color-primary-muted);
}
&__labels {
@ -50,6 +50,6 @@
display: flex;
justify-content: space-between;
margin-top: -6px;
color: var(--mid-gray);
color: var(--color-text-alternative);
}
}

2
ui/components/app/gas-details-item/gas-details-item-title/index.scss
View File

@ -3,7 +3,7 @@
font-weight: 400;
font-style: italic;
font-size: 12px;
color: var(--Grey-500);
color: var(--color-text-alternative);
line-height: inherit;
}
}

2
ui/components/app/gas-details-item/index.scss
View File

@ -1,6 +1,6 @@
.gas-details-item {
&__gas-fee-warning {
color: var(--secondary-1);
color: var(--color-secondary-default); //@TODO: revisit when warning color tokens are revisited
}
&__currency-container,

14
ui/components/app/gas-timing/index.scss
View File

@ -1,26 +1,26 @@
.typography.gas-timing {
color: var(--ui-4);
color: var(--color-text-alternative);
&--positive {
color: var(--success-3);
color: var(--color-success-default);
}
&--positive-V2 {
color: var(--success-3);
color: var(--color-success-default);
font-weight: bold;
}
&--warning {
color: var(--alert-3);
color: var(--color-warning-default);
}
&--negative {
color: var(--error-1);
color: var(--color-error-default);
font-weight: bold;
}
&--negative-V2 {
color: var(--secondary-1);
color: var(--color-secondary-default);
font-weight: bold;
}
@ -29,7 +29,7 @@
margin-inline-start: 4px;
path {
fill: var(--error-1);
fill: var(--color-error-default);
}
}
}

16
ui/components/ui/info-tooltip/index.scss
View File

@ -13,29 +13,29 @@
.tippy-popper[x-placement^=top] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=top] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-top-color: var(--white);
border-top-color: var(--color-background-default);
}
.tippy-popper[x-placement^=right] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=right] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-right-color: var(--white);
border-right-color: var(--color-background-default);
}
.tippy-popper[x-placement^=left] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=left] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-left-color: var(--white);
border-left-color: var(--color-background-default);
}
.tippy-popper[x-placement^=bottom] .tippy-tooltip-info-theme [x-arrow],
.tippy-popper[x-placement^=bottom] .tippy-tooltip-wideInfo-theme [x-arrow] {
border-bottom-color: var(--white);
border-bottom-color: var(--color-background-default);
}
.tippy-tooltip {
&#{&}-info-theme,
&#{&}-wideInfo-theme {
background: white;
color: black;
background: var(--color-background-default);
color: var(--color-text-default);
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
border-radius: 8px;
max-width: 203px;
@ -46,10 +46,10 @@
@include H7;
text-align: left;
color: var(--Grey-500);
color: var(--color-text-alternative);
a {
color: var(--primary-1);
color: var(--color-primary-default);
}
p {

12
ui/components/ui/radio-group/index.scss
View File

@ -36,28 +36,28 @@
&__column-start-connector {
width: calc(50% + 0.5px);
height: 6px;
border-left: 1px solid var(--ui-2);
border-bottom: 1px solid var(--ui-2);
border-left: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
align-self: flex-end;
}
&__column-end-connector {
width: calc(50% + 0.5px);
height: 6px;
border-right: 1px solid var(--ui-2);
border-bottom: 1px solid var(--ui-2);
border-right: 1px solid var(--color-border-muted);
border-bottom: 1px solid var(--color-border-muted);
align-self: flex-start;
}
&__column-vertical-line {
width: 1px;
height: 5px;
border-left: 1px solid var(--ui-2);
border-left: 1px solid var(--color-border-muted);
}
&__column-horizontal-line {
height: 1px;
border-bottom: 1px solid var(--ui-2);
border-bottom: 1px solid var(--color-border-muted);
width: 100%;
}

2
ui/components/ui/radio-group/radio-group.component.js
View File

@ -69,7 +69,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
isLast={index === options.length - 1}
/>
<Typography
color={checked ? COLORS.BLACK : COLORS.UI4}
color={checked ? COLORS.TEXT_DEFAULT : COLORS.TEXT_MUTED}
fontWeight={FONT_WEIGHT.BOLD}
variant={TYPOGRAPHY.H7}
className="radio-group__column-label"

12
ui/components/ui/tooltip/index.scss
View File

@ -1,5 +1,5 @@
.tippy-tooltip.white-theme {
background: white;
background: var(--color-background-default);
color: black;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.18);
padding: 12px 16px;
@ -9,22 +9,22 @@
@include H7;
text-align: left;
color: var(--Grey-500);
color: var(--color-text-alternative);
}
}
.tippy-popper[x-placement^=top] .white-theme [x-arrow] {
border-top-color: var(--white);
border-top-color: var(--color-background-default);
}
.tippy-popper[x-placement^=right] .white-theme [x-arrow] {
border-right-color: var(--white);
border-right-color: var(--color-background-default);
}
.tippy-popper[x-placement^=left] .white-theme [x-arrow] {
border-left-color: var(--white);
border-left-color: var(--color-background-default);
}
.tippy-popper[x-placement^=bottom] .white-theme [x-arrow] {
border-bottom-color: var(--white);
border-bottom-color: var(--color-background-default);
}