mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Dark mode: Adding wyre, transak and deposit eth logo (#13953)
This commit is contained in:
George Marshall
GitHub
parent
cbaedf55e1
commit
7be1cfe9e4
@ -1,12 +0,0 @@
|
||||
<svg height="78" width="80" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<circle cx="34" cy="34" fill="#fff" r="34"/>
|
||||
<circle cx="34" cy="34" r="32.5" stroke="#38393a" stroke-width="3"/>
|
||||
<path d="M34.407 44.95L22 37.7 34.407 55 46.82 37.7l-12.417 7.25zM34.593 15L22.187 35.37l12.406 7.258L47 35.378z" fill="#38393a"/>
|
||||
<g transform="translate(46 44)">
|
||||
<circle cx="17" cy="17" fill="#fff" r="17"/>
|
||||
<circle cx="17" cy="17" r="15.5" stroke="#38393a" stroke-width="3"/>
|
||||
<path d="M19.077 15.423H25.5v4.154h-6.423V26h-4.154v-6.423H8.5v-4.154h6.423V9h4.154z" fill="#38393a"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 696 B |
@ -1,112 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 2066.8 800" style="enable-background:new 0 0 2066.8 800;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:#2970E2;}
|
||||
.st2{fill:#D1D9E6;}
|
||||
.st3{fill:#FFFFFF;}
|
||||
.st4{fill:url(#SVGID_2_);}
|
||||
</style>
|
||||
<g id="transparent_1_">
|
||||
<g id="logo_4_">
|
||||
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="119.932" y1="155.9459" x2="624.022" y2="547.843" gradientTransform="matrix(1 0 0 1 0 50)">
|
||||
<stop offset="0.1304" style="stop-color:#3495F7"/>
|
||||
<stop offset="0.3063" style="stop-color:#2B87F2"/>
|
||||
<stop offset="0.6392" style="stop-color:#1461E5"/>
|
||||
<stop offset="0.7232" style="stop-color:#0E57E1"/>
|
||||
</linearGradient>
|
||||
<path class="st0" d="M566.4,640.4H175.3c-22,0-39.8-17.8-39.8-39.8V201.5c0-22,17.8-39.8,39.8-39.8h391.2
|
||||
c22,0,39.8,17.8,39.8,39.8v399.1C606.3,622.5,588.5,640.4,566.4,640.4z"/>
|
||||
<path class="st1" d="M606.3,451.6v148.9c0,22-17.8,39.8-39.8,39.8H417.6L606.3,451.6z"/>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st2" d="M293.4,449.7l138.9-144.4c10.6-10.6,27.2-9.8,38.3,1.2l80.3,77.4c8.5,8.2,8.3,24.4,0.4,33.1
|
||||
c-10.3,10.3-21.9,11-37.5,0.4l-58.2-63L309.3,493.5c-9.8,7.6-19.8,14-35.2,4.1c-5.3-7.1,5.2-21,1.1-25.1L293.4,449.7z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st2" d="M287.1,498.2c-11.9-0.4-21.2-8.1-21.2-17.3l0.7-165.1c0-9.1,8.5-20.2,20.4-20.6
|
||||
c15.8,0,22.7,12.8,22.7,22.3v163.8C309.8,490.8,299.5,498.5,287.1,498.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st2" d="M449.1,502.7c-14.7,0-20.9-10.9-20.9-19.5V331.8c0-8.5,9.1-18.9,20.9-19.3c12.3-0.4,22.5,10,22.5,18.9
|
||||
v149.7C471.6,491.7,464.3,502.7,449.1,502.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st3" d="M282.1,500c-9.1-0.4-16.2-8.1-16.2-17.3V317.6c0-9.1,7.1-20.2,16.2-20.6c9.5-0.4,17.5,10.6,17.5,20.2v166
|
||||
C299.6,492.7,291.7,500.4,282.1,500z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st3" d="M444.5,501.7c-9.3,0-16.9-10.8-16.9-20.2V318.9c0-9.3,7.6-16.9,16.9-16.9c9.3,0,16.9,7.6,16.9,16.9v162.7
|
||||
C461.3,490.8,453.8,501.7,444.5,501.7z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st3" d="M282.8,498.4c-5.5,0-11-2.1-15.1-6.3l-76.5-76.7c-8.3-8.4-8.3-21.9,0.1-30.3c8.4-8.3,21.9-8.3,30.3,0.1
|
||||
l61.6,62l147.4-140.3c8.3-7.9,21.3-7.9,29.6,0.1l80.2,77.4c8.5,8.2,8.7,21.7,0.6,30.3c-8.1,8.5-21.7,8.7-30.3,0.6l-65.5-63.1
|
||||
L297.5,492.5C293.4,496.4,288.1,498.4,282.8,498.4z"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="st3" d="M429.7,378.8l-9.3,8.8c0,0,2.6-14.7-4.9-7.6c-7.6,7.2,11.6-18.2,11.6-18.2l3.9,4.9L429.7,378.8z"/>
|
||||
<path class="st3" d="M461.3,376.6c0,0,0.5-9,10.3,6.4v-12.1l-10.6-5.5L461.3,376.6z"/>
|
||||
<path class="st3" d="M299.7,419.2c0,0,1.4,10,10.2-2.9v12.1l-10.6,5.5L299.7,419.2z"/>
|
||||
</g>
|
||||
</g>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="712.4824" y1="419.8029" x2="1947.4551" y2="419.8029">
|
||||
<stop offset="0" style="stop-color:#3495F7"/>
|
||||
<stop offset="0.4939" style="stop-color:#1461E5"/>
|
||||
<stop offset="1" style="stop-color:#0E57E1"/>
|
||||
</linearGradient>
|
||||
<path class="st4" d="M809.3,337.3l2.1,0.7c0.3,5.7,0.5,16.4,0.5,32.1c0,1-1.5,1.4-4.5,1.4h-20.7c-1.9,0-2.9,1.5-2.9,4.5v122.8
|
||||
c0,0.2-0.4,0.5-1.2,1.1c-0.8,0.6-1.3,0.8-1.7,0.8h-37.4l-1.7-1.4c-0.5-0.5-0.7-37.8-0.7-111.9v-14.8c-19.2,0-28.8-1.2-28.8-3.6
|
||||
v-30.5c0-0.2,0.6-0.6,1.9-1.4h42.8c2.2,0.3,3.6,0.6,4,0.7c0.5,0,0.7-0.2,0.7-0.7H809.3z M868.1,336.9h65.9
|
||||
c15.1,0,28.4,5.5,39.9,16.5c11.5,11,17.3,24.2,17.3,39.4c0,11.9-3.4,22.2-10.1,30.9c-6.7,8.7-15.8,15.5-27.3,20.2
|
||||
c-0.5,0-0.7,0.4-0.7,1.2v0.2c0.2,0.2,0.2,0.3,0.2,0.5l40.7,49.7c0.5,0.8,1,1.7,1.4,2.6s0.8,1.6,1.1,2c0.2,0.4,0.4,0.7,0.4,0.8
|
||||
c0,0.5-2.6,0.9-7.9,1.3c-5.2,0.4-8.7,0.6-10.5,0.6c-1.3,0-2.1-0.2-2.6-0.7h-25.5c-1.6-0.2-2.9-1-4-2.6l-33.1-39
|
||||
c-0.2-0.2-0.5-0.6-1-1.2c-0.5-0.6-1-1.1-1.4-1.4c-0.5-0.3-1-0.5-1.4-0.5c-0.3,0-0.7,1-1.2,3.1v38.6c0,1.3-0.5,1.9-1.4,1.9h-32.4
|
||||
c-2.9,0-4.8-0.6-5.7-1.9c-1-1.3-1.6-3.4-1.9-6.4c0-14.1,0.1-32,0.4-53.7c0.2-21.7,0.4-38,0.4-48.9c0-1.7-0.1-8.1-0.2-19l-0.5-16.4
|
||||
C867.4,343.1,867.8,337.2,868.1,336.9z M948.3,392.3c0-4.4-1-8.3-3.1-11.7c-4-6.2-12.2-9.3-24.8-9.3c-2.2,0-5.6,0.2-10,0.5
|
||||
l-2.1,2.4c0,2.1-0.1,5.3-0.2,9.6c-0.2,4.4-0.3,8.1-0.4,11.1c-0.1,3-0.1,5.2-0.1,6.4c0,10.6,1,16.6,2.9,17.9h2.6
|
||||
c13.2-0.3,22.3-2.1,27.5-5.5C945.8,410.4,948.3,403.3,948.3,392.3z M1102.8,335h28.3c0.8,0,3.1,4.4,6.8,13.1
|
||||
c3.7,8.7,5.6,13.6,5.6,14.5c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2
|
||||
c-8.1-0.2-14.2-0.2-18.3-0.2c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2
|
||||
c-1.1,0-3.3-0.2-6.7-0.6c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2
|
||||
c-2.9,0-5.3,3.7-7.4,11.2c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9
|
||||
c0-0.3,0-0.7,0.1-1.2c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2
|
||||
c3.2-8.2,8.6-22,16.3-41.2c7.7-19.2,13.5-34,17.5-44.5C1096.8,335.6,1098.8,335,1102.8,335z M1105.2,446.1h6.2
|
||||
c11.4-0.3,17.1-1,17.1-1.9c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4
|
||||
c-4.5,10.9-6.8,17.4-6.8,19.3C1099.9,445.1,1101.7,446.1,1105.2,446.1z M1388.2,426.3c0,0.3-0.1,1-0.2,2.1
|
||||
c-0.2,1.1-0.3,2.2-0.5,3.3l-0.2,1.4c0,6.8,0.2,17.1,0.5,30.7c0.3,13.6,0.5,23.8,0.5,30.5c0,4.6-1,6.9-2.9,6.9h-30.9
|
||||
c-2.5,0-4.4-0.9-5.5-2.6l-29.3-43.8c-0.2-0.6-0.9-1.7-2.1-3.1c-1.3-1.4-1.9-2.2-1.9-2.4l-24-34.7l-2.9-3.1l-0.5,1
|
||||
c0,58.9-0.7,88.3-2.1,88.3h-37.6l-1.4-0.7c0-12.2,0.2-33.2,0.5-63c0.3-29.8,0.5-51.8,0.5-66.3c0-10.9-0.2-19.2-0.5-24.8l1-6.9
|
||||
l4.8-1l30,1c0.8,0,1.7,0.8,2.9,2.4c1.1,1.6,1.8,2.9,2.1,3.8l22.4,32.4c0.3,0.6,0.9,1.5,1.8,2.7c0.9,1.2,1.5,2.1,1.8,2.7l30.7,42.1
|
||||
c0.5,1.1,1.1,1.7,1.9,1.7c0.5,0,0.7-0.2,0.7-0.7v-85.9l1.4-1.2c0.2-0.2,3.6-0.2,10.2-0.2c18.7,0,28.1,0.3,28.1,1l1,1.4V426.3z
|
||||
M1513.3,448.5c-2.4-2.4-5.4-4.8-9.2-7.3c-3.7-2.5-8-5.1-12.9-7.9c-4.8-2.8-7.8-4.6-8.9-5.4c-20.5-13-30.7-28.7-30.7-47.1
|
||||
c0-15.4,5.4-26.9,16.2-34.5c10.8-7.6,24.8-11.4,41.9-11.4c9.4,0,18.8,1.9,28.3,5.7c1.7,0.6,4.6,1.9,8.4,3.8c3.9,1.9,5.8,3.3,5.8,4
|
||||
l-0.2,1.2c0,0.2-0.2,0.4-0.5,0.8c-0.3,0.4-0.5,0.8-0.5,1.1c-4.9,10.2-9.7,18.4-14.3,24.8c-0.2,0.5-0.6,0.7-1.2,0.7
|
||||
c-0.6,0-4.3-1.3-10.9-3.9c-6.7-2.6-11.8-3.9-15.5-3.9c-3.5,0-6.7,1-9.8,2.9c-3,1.9-4.5,4.5-4.5,7.9c0,4.3,2.4,8.3,7.1,12.1
|
||||
c3.2,2.4,9.5,6.6,19,12.6c2.1,1.4,4.8,3.3,8.1,5.6c3.3,2.3,5.9,4.1,7.9,5.5c1.9,1.3,4,3,6.4,5c2.4,2,4.4,3.9,5.9,5.8
|
||||
c3.8,4.9,6.4,9.4,7.7,13.3c1.3,4,2,8.8,2,14.5c0,14.9-5.6,27.2-16.9,36.8c-11.3,9.6-24.7,14.4-40.2,14.4c-17,0-32.9-4.1-47.8-12.4
|
||||
c-6.7-4.1-10-6.6-10-7.4v-1c7-12.7,12.8-22.5,17.4-29.5c2.2,0,4.8,1.1,7.7,3.3c2.9,2.2,4.6,3.4,5.1,3.6c8.4,4.3,18,6.4,28.8,6.4
|
||||
c9.4,0,14-3.5,14-10.5C1517.4,455.2,1516,452,1513.3,448.5z M1671.1,335h28.3c0.8,0,3.1,4.4,6.8,13.1c3.7,8.7,5.6,13.6,5.6,14.5
|
||||
c3.3,8.7,21.3,53.1,54,133c0,2.2-1,3.6-2.9,4.2c-1.9,0.6-5.4,0.8-10.5,0.8l-12.1-0.2c-8.1-0.2-14.2-0.2-18.3-0.2
|
||||
c-0.3-1-1-2.6-1.9-5c-1-2.4-1.7-4.2-2.3-5.5c-0.6-1.3-1.4-2.9-2.5-4.8c-1.1-1.9-2.3-3.6-3.6-5.2c-1.1,0-3.3-0.2-6.7-0.6
|
||||
c-3.3-0.4-6.3-0.6-9-0.6l-29.8,0.5c-0.5,0-1.9-0.1-4.3-0.2c-2.4-0.2-3.7-0.2-3.8-0.2c-2.9,0-5.3,3.7-7.4,11.2
|
||||
c-2.1,7.5-3.8,11.7-5.2,12.6c-4.3,0.2-9.6,0-15.8-0.4c-6.3-0.4-11.5-0.6-15.8-0.6c-6.7,0-10-1-10-2.9c0-0.3,0-0.7,0.1-1.2
|
||||
c0.1-0.5,0.1-0.8,0.1-1l13.8-40c2.1-4.1,4.6-10.3,7.5-18.6c2.9-8.2,4.8-13.3,5.6-15.2c3.2-8.2,8.6-22,16.3-41.2
|
||||
c7.7-19.2,13.5-34,17.5-44.5C1665.1,335.6,1667.2,335,1671.1,335z M1673.5,446.1h6.2c11.4-0.3,17.1-1,17.1-1.9
|
||||
c0-2.9-2.5-10.1-7.4-21.7c-1.9-4.6-3-7.1-3.3-7.6l-3.1-7.4c-0.8,0-3.5,5.5-8,16.4s-6.8,17.4-6.8,19.3
|
||||
C1668.3,445.1,1670,446.1,1673.5,446.1z M1851.1,334c4.9,0,7.4,0.9,7.4,2.6v48.6c0,1.6,0.2,2.4,0.5,2.4c1.1,0,2.5-1,4.2-3.1
|
||||
c1.7-2.1,3.4-4.4,5.1-7c1.7-2.6,3.1-4.3,4-5.1l26.7-36.2c0.8-1,1.9-1.4,3.3-1.4h35.2l5.7,1c0.3,0,0.5,0.3,0.5,1
|
||||
c0,1.1-0.2,1.8-0.5,2.1l-10.2,16.2l-1.4,1l-30.5,40.7c-0.5,0.5-0.7,1.1-0.7,1.9c0,1.1,0.2,2.1,0.7,2.9l46.2,95.4c0,0.2,0,0.4,0,0.7
|
||||
l0.2,0.7c0,2.7-4.8,4-14.3,4c-5.6,0-12-0.2-19.4-0.7c-7.4-0.5-11.5-0.7-12.3-0.7l-1.7-1.2c-1-1-9.8-19.3-26.7-55
|
||||
c-0.2-1.3-1.3-3.8-3.3-7.6c-0.5,0-2.3,2.2-5.6,6.7c-3.3,4.4-5,7.1-5.4,7.9c0,2.9,0,7.5,0.1,13.8c0.1,6.3,0.1,12.3,0.1,17.8
|
||||
c0,11.3-1.3,17.1-3.8,17.6c-3.2,0-7.1,0.1-11.9,0.4c-4.8,0.2-8,0.4-9.8,0.4c-2.7,0-6.3-0.3-10.9-1c-4.6-0.6-6.9-1.2-6.9-1.7v-81.9
|
||||
c1-7.6,1.4-12,1.4-13.1c0-7.1-0.3-17.8-1-32.1c-0.6-14.3-1-24.9-1-31.9c0-2.9,0.6-4.6,1.9-5.2C1825.4,334.2,1836.6,334,1851.1,334z
|
||||
"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.4 KiB |
@ -1,7 +0,0 @@
|
||||
<svg height="24" width="72" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill-rule="evenodd">
|
||||
<path d="M40.245 20.496c2.207.307 3.55-.093 4.592-1.123.653-.646 1.15-1.403 1.588-2.199 1.776-3.219 6.049-10.995 6.049-10.995h-3.078l-3.2 6.37-1-6.37h-3.27v.148l1.675 8.82c.085.446.173 1.592-.64 2.334-.456.414-1.113.759-2.245.575zM37.793 6.179l-2.976 6.689-.08-.007-.403-6.516h-3.241l-3.159 6.524-.081-.027-.135-6.663h-3.101l.617 10.685h3.356l3.252-6.972.076.013.516 6.959h3.378l4.886-10.685zM55.73 16.864h-3.256c.725-3.603 1.418-7.085 2.143-10.685h2.525v1.966c.338-.812.8-1.569 1.582-1.9.767-.326 1.953-.31 3.163.059-.477.913-.84 1.726-1.356 2.715-.465-.09-.883-.207-1.31-.25-.956-.093-1.652.285-1.978 1.184-.228.627-.37 1.292-.508 1.948-.346 1.643-.666 3.29-1.005 4.963M66.142 8.72c.466-.56 1.304-.87 1.927-.677.759.235 1.008 1.069.469 1.65a1.856 1.856 0 01-.693.456c-.784.292-1.594.283-2.447.137.144-.62.372-1.118.744-1.566zm4.168 5.488h-.109c-1.247.474-2.63.598-3.584.33-1.054-.296-1.661-1.204-1.47-2.23 3.14.262 4.473-.33 5.189-.754 1.938-1.148 2.431-4.222-.098-5.132-2.222-.8-5.318-.42-6.78 1.336-1.333 1.599-1.724 3.357-1.52 5.315.153 1.472 1.173 3.583 4.504 3.913 2.015.199 3.304-.314 3.398-.352zM4.977 23.996h7.405c1.46 0 2.776-.875 3.33-2.213l3.994-9.666-4.483 5.648c-.68.896-1.708 1.48-2.918 1.48H6.941z"/>
|
||||
<path d="M2.522 18.055h7.405c1.46 0 2.776-.875 3.33-2.213l3.994-9.665-4.483 5.647c-.68.896-1.708 1.48-2.918 1.48H4.486z"/>
|
||||
<path d="M7.391.229h7.406L10.8 9.895a3.597 3.597 0 01-3.329 2.213H.067l3.995-9.666A3.597 3.597 0 017.392.229"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -6,6 +6,9 @@ import {
|
||||
} from '../../../../../shared/constants/network';
|
||||
import Button from '../../../ui/button';
|
||||
import LogoMoonPay from '../../../ui/logo/logo-moonpay';
|
||||
import LogoWyre from '../../../ui/logo/logo-wyre';
|
||||
import LogoTransak from '../../../ui/logo/logo-transak';
|
||||
import LogoDepositEth from '../../../ui/logo/logo-deposit-eth';
|
||||
|
||||
export default class DepositEtherModal extends Component {
|
||||
static contextTypes = {
|
||||
@ -128,15 +131,7 @@ export default class DepositEtherModal extends Component {
|
||||
<div className="page-container__content">
|
||||
<div className="deposit-ether-modal__buy-rows">
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<div
|
||||
className="deposit-ether-modal__logo"
|
||||
style={{
|
||||
backgroundImage: "url('./images/transak.svg')",
|
||||
height: '60px',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
logo: <LogoTransak className="deposit-ether-modal__logo" />,
|
||||
title: t('buyCryptoWithTransak', [symbol]),
|
||||
text: t('buyCryptoWithTransakDescription', [symbol]),
|
||||
buttonLabel: t('continueToTransak'),
|
||||
@ -153,9 +148,7 @@ export default class DepositEtherModal extends Component {
|
||||
hide: !isBuyableTransakChain,
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<LogoMoonPay className="deposit-ether-modal__logo--moonpay" />
|
||||
),
|
||||
logo: <LogoMoonPay className="deposit-ether-modal__logo" />,
|
||||
title: t('buyCryptoWithMoonPay', [symbol]),
|
||||
text: t('buyCryptoWithMoonPayDescription', [symbol]),
|
||||
buttonLabel: t('continueToMoonPay'),
|
||||
@ -172,15 +165,7 @@ export default class DepositEtherModal extends Component {
|
||||
hide: !isBuyableMoonPayChain,
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<div
|
||||
className="deposit-ether-modal__logo"
|
||||
style={{
|
||||
backgroundImage: "url('./images/wyre.svg')",
|
||||
height: '40px',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
logo: <LogoWyre className="deposit-ether-modal__logo" />,
|
||||
title: t('buyWithWyre'),
|
||||
text: t('buyWithWyreDescription'),
|
||||
buttonLabel: t('continueToWyre'),
|
||||
@ -198,15 +183,7 @@ export default class DepositEtherModal extends Component {
|
||||
})}
|
||||
{this.renderRow({
|
||||
logo: (
|
||||
<img
|
||||
alt=""
|
||||
className="deposit-ether-modal__logo"
|
||||
src="./images/deposit-eth.svg"
|
||||
style={{
|
||||
height: '75px',
|
||||
width: '75px',
|
||||
}}
|
||||
/>
|
||||
<LogoDepositEth className="deposit-ether-modal__logo--lg" />
|
||||
),
|
||||
title: t('directDepositCrypto', [symbol]),
|
||||
text: t('directDepositCryptoExplainer', [symbol]),
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 60px;
|
||||
max-height: 40px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
@ -27,8 +27,12 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&--moonpay {
|
||||
height: 30px;
|
||||
&--lg {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: $break-large) {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
15
ui/components/ui/logo/README.mdx
Normal file
15
ui/components/ui/logo/README.mdx
Normal file
@ -0,0 +1,15 @@
|
||||
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
import LogoWyre from './logo-wyre';
|
||||
|
||||
# Logo
|
||||
|
||||
Logo components that are theme compatible
|
||||
|
||||
<Canvas>
|
||||
<Story id="ui-components-ui-logo-logo-stories-js--default-story" />
|
||||
</Canvas>
|
||||
|
||||
## Component API
|
||||
|
||||
<ArgsTable of={LogoWyre} />
|
||||
48
ui/components/ui/logo/logo-deposit-eth.js
Normal file
48
ui/components/ui/logo/logo-deposit-eth.js
Normal file
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const LogoDepositEth = ({
|
||||
width = '100%',
|
||||
color = 'var(--color-text-default)',
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
fill={color}
|
||||
className={className}
|
||||
viewBox="0 0 80 78"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M46.82 37.7L34.405 44.9489L22 37.7L34.407 55L46.82 37.7ZM34.405 44.9489L34.407 44.95H34.403L34.405 44.9489Z"
|
||||
/>
|
||||
<path d="M22.187 35.37L34.593 15L47 35.378L34.593 42.628L22.187 35.37Z" />
|
||||
<path d="M71.5 59.423H65.077V53H60.923V59.423H54.5V63.577H60.923V70H65.077V63.577H71.5V59.423Z" />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M34 68C38.4608 68 42.7208 67.141 46.6239 65.5793C48.6231 72.7439 55.1978 78 63 78C72.3889 78 80 70.3889 80 61C80 52.7752 74.1592 45.9147 66.3992 44.3399C67.4389 41.0794 68 37.6052 68 34C68 15.2223 52.7777 0 34 0C15.2223 0 0 15.2223 0 34C0 52.7777 15.2223 68 34 68ZM34 3C16.8792 3 3 16.8792 3 34C3 51.1208 16.8792 65 34 65C38.2818 65 42.3609 64.1319 46.0708 62.5621C46.0239 62.0477 46 61.5266 46 61C46 51.6111 53.6111 44 63 44C63.1171 44 63.2339 44.0012 63.3505 44.0035C64.4199 40.8651 65 37.5003 65 34C65 16.8792 51.1208 3 34 3ZM63 47C55.268 47 49 53.268 49 61C49 68.732 55.268 75 63 75C70.732 75 77 68.732 77 61C77 53.268 70.732 47 63 47Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
LogoDepositEth.propTypes = {
|
||||
/**
|
||||
* The width of the logo. Defaults to 100%
|
||||
*/
|
||||
width: PropTypes.string,
|
||||
/**
|
||||
* The color of the logo defaults to var(--color-text-default)
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* Additional className to add to the root svg
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LogoDepositEth;
|
||||
102
ui/components/ui/logo/logo-transak.js
Normal file
102
ui/components/ui/logo/logo-transak.js
Normal file
File diff suppressed because one or more lines are too long
43
ui/components/ui/logo/logo-wyre.js
Normal file
43
ui/components/ui/logo/logo-wyre.js
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const LogoWyre = ({
|
||||
width = '100%',
|
||||
color = 'var(--color-text-default)',
|
||||
className,
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
fill={color}
|
||||
className={className}
|
||||
viewBox="0 0 72 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M14.797 0.229002L10.8 9.895C10.5262 10.5518 10.0638 11.1126 9.47122 11.5065C8.87863 11.9004 8.18256 12.1098 7.47098 12.108H0.0669861L4.06198 2.442C4.33585 1.78506 4.7984 1.22413 5.39117 0.830201C5.98395 0.436268 6.68027 0.227042 7.392 0.229002H14.797Z" />
|
||||
<path d="M40.245 20.496C42.452 20.803 43.795 20.403 44.837 19.373C45.49 18.727 45.987 17.97 46.425 17.174C48.201 13.955 52.474 6.179 52.474 6.179H49.396L46.196 12.549L45.196 6.179H41.926V6.327L43.601 15.147C43.686 15.593 43.774 16.739 42.961 17.481C42.505 17.895 41.848 18.24 40.716 18.056L40.245 20.496Z" />
|
||||
<path d="M37.793 6.179L34.817 12.868L34.737 12.861L34.334 6.345H31.093L27.934 12.869L27.853 12.842L27.718 6.179H24.617L25.234 16.864H28.59L31.842 9.892L31.918 9.905L32.434 16.864H35.812L40.698 6.179H37.793Z" />
|
||||
<path d="M55.73 16.864H52.474C52.8223 15.1331 53.1632 13.4302 53.5038 11.7287C53.8722 9.8883 54.2403 8.04958 54.617 6.179H57.142V8.145C57.48 7.333 57.942 6.576 58.724 6.245C59.491 5.919 60.677 5.935 61.887 6.304C61.6525 6.75282 61.4456 7.17747 61.2344 7.61075L61.2333 7.61303L61.2325 7.61467C61.0148 8.06153 60.7925 8.51765 60.531 9.019C60.3778 8.98937 60.2298 8.9568 60.0849 8.92492C59.7898 8.85999 59.5073 8.79783 59.221 8.769C58.265 8.676 57.569 9.054 57.243 9.953C57.015 10.58 56.873 11.245 56.735 11.901C56.5068 12.9847 56.2899 14.0701 56.0714 15.1636L56.0711 15.165C55.9584 15.7289 55.8453 16.2949 55.73 16.864Z" />
|
||||
<path d="M70.31 14.208H70.201C68.954 14.682 67.571 14.806 66.617 14.538C65.563 14.242 64.956 13.334 65.147 12.308C68.287 12.57 69.62 11.978 70.336 11.554C72.274 10.406 72.767 7.332 70.238 6.422C68.016 5.622 64.92 6.002 63.458 7.758C62.125 9.357 61.734 11.115 61.938 13.073C62.091 14.545 63.111 16.656 66.442 16.986C68.457 17.185 69.746 16.672 69.84 16.634L70.31 14.208ZM66.142 8.72C66.608 8.16 67.446 7.85 68.069 8.043C68.828 8.278 69.077 9.112 68.538 9.693C68.3444 9.89534 68.1074 10.0512 67.845 10.149C67.061 10.441 66.251 10.432 65.398 10.286C65.542 9.666 65.77 9.168 66.142 8.72Z" />
|
||||
<path d="M4.97699 23.996H12.382C13.842 23.996 15.158 23.121 15.712 21.783L19.706 12.117L15.223 17.765C14.543 18.661 13.515 19.245 12.305 19.245H6.94098L4.97699 23.996Z" />
|
||||
<path d="M2.52197 18.055H9.92697C11.387 18.055 12.703 17.18 13.257 15.842L17.251 6.177L12.768 11.824C12.088 12.72 11.06 13.304 9.84998 13.304H4.48596L2.52197 18.055Z" />
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
LogoWyre.propTypes = {
|
||||
/**
|
||||
* The width of the logo. Defaults to 100%
|
||||
*/
|
||||
width: PropTypes.string,
|
||||
/**
|
||||
* The color of the logo defaults to var(--color-text-default)
|
||||
*/
|
||||
color: PropTypes.string,
|
||||
/**
|
||||
* Additional className to add to the root svg
|
||||
*/
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
export default LogoWyre;
|
||||
70
ui/components/ui/logo/logo.stories.js
Normal file
70
ui/components/ui/logo/logo.stories.js
Normal file
@ -0,0 +1,70 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
||||
import { COLORS } from '../../../helpers/constants/design-system';
|
||||
|
||||
import Card from '../card';
|
||||
import Box from '../box';
|
||||
|
||||
import LogoMoonPay from './logo-moonpay';
|
||||
import LogoWyre from './logo-wyre';
|
||||
import LogoTransak from './logo-transak';
|
||||
import LogoDepositEth from './logo-deposit-eth';
|
||||
|
||||
import README from './README.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Components/UI/Logo',
|
||||
id: __filename,
|
||||
parameters: {
|
||||
docs: {
|
||||
page: README,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
color: {
|
||||
control: 'text',
|
||||
},
|
||||
size: {
|
||||
control: 'text',
|
||||
},
|
||||
className: {
|
||||
control: 'text',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const LogoItem = ({ Component }) => {
|
||||
return (
|
||||
<Card
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
textAlign="center"
|
||||
backgroundColor={COLORS.BACKGROUND_DEFAULT}
|
||||
>
|
||||
<Box marginBottom={2}>{Component}</Box>
|
||||
<code>{`${Component.type.__docgenInfo.displayName}`}</code>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
LogoItem.propTypes = {
|
||||
Component: PropTypes.node,
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => (
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridGap: '16px',
|
||||
gridTemplateColumns: 'repeat(auto-fill, 176px)',
|
||||
}}
|
||||
>
|
||||
<LogoItem Component={<LogoWyre {...args} />} />
|
||||
<LogoItem Component={<LogoTransak {...args} />} />
|
||||
<LogoItem Component={<LogoDepositEth {...args} />} />
|
||||
<LogoItem Component={<LogoMoonPay {...args} />} />
|
||||
</div>
|
||||
);
|
||||
|
||||
DefaultStory.args = {};
|
||||
Loading…
Reference in New Issue
Block a user