design(tour): polish illustrations, fix svgs for safari

This commit is contained in:
Jason Dreyzehner 2016-10-06 14:55:29 -04:00
parent ca778d1d00
commit 5141dd109b
5 changed files with 154 additions and 212 deletions

View File

@ -64,7 +64,7 @@
"scripts": { "scripts": {
"preinstall": "bower install && npm i fs-extra", "preinstall": "bower install && npm i fs-extra",
"postinstall": "npm run apply:bitpay && cordova prepare", "postinstall": "npm run apply:bitpay && cordova prepare",
"start": "npm run build:www && ionic serve --nolivereload --nogulp", "start": "npm run build:www && ionic serve --nolivereload --nogulp -s",
"start:ios": "npm run build:www && npm run build:ios && npm run open:ios", "start:ios": "npm run build:www && npm run build:ios && npm run open:ios",
"start:android": "npm run build:www && npm run build:android && npm run open:android", "start:android": "npm run build:www && npm run build:android && npm run open:android",
"watch": "grunt watch", "watch": "grunt watch",

View File

@ -29,12 +29,12 @@
border-radius: $button-border-radius; border-radius: $button-border-radius;
box-shadow: $subtle-box-shadow; box-shadow: $subtle-box-shadow;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: normal;
height: 40px; height: 40px;
line-height: 38px; line-height: 38px;
margin: 10px auto 0; margin: 10px auto 0;
position: relative; position: relative;
width: 120px; width: 140px;
z-index: 1; z-index: 1;
} }
} }

View File

@ -1,46 +1,50 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 20.1.0, 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" <svg version="1.1" id="onboarding-market-illustration"
viewBox="0 0 375 257" style="enable-background:new 0 0 375 257;" xml:space="preserve"> xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 375 257"
style="enable-background:new 0 0 375 257;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{opacity:6.325793e-02;fill:url(#Line-Copy_1_);enable-background:new ;} .st0{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
.st1{fill:none;stroke:#13E5B6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .st1{opacity:0.3;fill:url(#SVGID_2_);enable-background:new ;}
.st2{opacity:0.3;}
.st2{opacity:0.3335;fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-linecap:square;stroke-dasharray:4;enable-background:new ;} .st3{fill:#13E5B6;}
.st3{opacity:0.3;fill:url(#Oval-2_1_);enable-background:new ;}
.st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;} .st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;}
.st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;} .st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;}
</style> </style>
<g id="Onboarding"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-234.5445" y1="11.6925" x2="-234.5445" y2="12.5871" gradientTransform="matrix(247 0 0 247 58120 -2878.0242)">
<g id="_x30_.2.2---Tour-2" transform="translate(0.000000, -200.000000)"> <stop offset="0" style="stop-color:#3950B5"/>
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)"> <stop offset="1" style="stop-color:#162360"/>
<g id="bg-2" transform="translate(0.000000, 3.530453)"> </linearGradient>
<path class="st0" d="M187.5,257c68.2,0,123.5-55.3,123.5-123.5S255.7,10,187.5,10S64,65.3,64,133.5S119.3,257,187.5,257z"/>
<linearGradient id="Line-Copy_1_" gradientUnits="userSpaceOnUse" x1="-117.185" y1="513.6823" x2="-117.185" y2="512.8358" gradientTransform="matrix(374.5743 0 0 -148.6105 44082.1914 76374.0547)"> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="187.5" y1="195.0305" x2="187.5" y2="45.0305">
<stop offset="0" style="stop-color:#CDE7FF"/> <stop offset="0" style="stop-color:#3950B5"/>
<stop offset="1" style="stop-color:#FFFFFF"/> <stop offset="1" style="stop-color:#202F77"/>
</linearGradient> </linearGradient>
<polygon id="Line-Copy" class="st0" points="54.3,126.6 98.8,99.6 139.1,120.4 185.5,82.4 222.9,82.4 246.7,49.3 278.8,65.2 <polygon class="st1" points="54.3,137.3 97.7,107.8 140.1,129.9 184.6,90.7 222.9,90.7 247.7,57.5 280.8,77.2 321.2,66.1 375,45
324.3,56.6 375,35.5 375,185.5 150.1,185.5 0.4,185.5 0.4,135.2 "/> 375,195 150.1,195 0.4,195 0,143.5 "/>
<polyline id="Line" class="st1" points="0,134 54.3,127.8 97.7,98.3 140.1,120.4 184.6,81.2 222.9,81.2 247.7,48 280.8,67.7 <g class="st2">
321.2,56.6 375,35.5 "/> <path class="st3" d="M300.2,195h-0.5v-4h0.5V195z M300.2,187h-0.5v-4h0.5V187z M300.2,179h-0.5v-4h0.5V179z M300.2,171h-0.5v-4h0.5
<path id="Line-Copy-2" class="st2" d="M137.2,120.5v63"/> V171z M300.2,163h-0.5v-4h0.5V163z M300.2,155h-0.5v-4h0.5V155z M300.2,147h-0.5v-4h0.5V147z M300.2,139h-0.5v-4h0.5V139z
<path id="Line-Copy-3" class="st2" d="M77.2,110.5v73.8"/> M300.2,131h-0.5v-4h0.5V131z M300.2,123h-0.5v-4h0.5V123z M300.2,115h-0.5v-4h0.5V115z M300.2,107h-0.5v-4h0.5V107z M300.2,99
<path id="Line-Copy-4" class="st2" d="M264.2,64.5v119.4"/> h-0.5v-4h0.5V99z M300.2,91h-0.5v-4h0.5V91z M300.2,83h-0.5v-4h0.5V83z M300.2,75h-0.5v-4h0.5V75z"/>
<path id="Line-Copy-5" class="st2" d="M330.2,57.5v126"/> <path class="st3" d="M225.2,195h-0.5v-4h0.5V195z M225.2,187h-0.5v-4h0.5V187z M225.2,179h-0.5v-4h0.5V179z M225.2,171h-0.5v-4h0.5
V171z M225.2,163h-0.5v-4h0.5V163z M225.2,155h-0.5v-4h0.5V155z M225.2,147h-0.5v-4h0.5V147z M225.2,139h-0.5v-4h0.5V139z
<linearGradient id="Oval-2_1_" gradientUnits="userSpaceOnUse" x1="-117.0223" y1="514.3885" x2="-117.0223" y2="513.4939" gradientTransform="matrix(247 0 0 -247 29092 127054.4453)"> M225.2,131h-0.5v-4h0.5V131z M225.2,123h-0.5v-4h0.5V123z M225.2,115h-0.5v-4h0.5V115z M225.2,107h-0.5v-4h0.5V107z M225.2,99
<stop offset="0" style="stop-color:#3950B5"/> h-0.5v-4h0.5V99z M225.2,91h-0.5v-3.2h0.5V91z"/>
<stop offset="1" style="stop-color:#162360"/> <path class="st3" d="M150.2,195h-0.5v-4h0.5V195z M150.2,187h-0.5v-4h0.5V187z M150.2,179h-0.5v-4h0.5V179z M150.2,171h-0.5v-4h0.5
</linearGradient> V171z M150.2,163h-0.5v-4h0.5V163z M150.2,155h-0.5v-4h0.5V155z M150.2,147h-0.5v-4h0.5V147z M150.2,139h-0.5v-4h0.5V139z
<path id="Oval-2" class="st3" d="M187.5,247.5c68.2,0,123.5-55.3,123.5-123.5S255.7,0.5,187.5,0.5S64,55.8,64,124 M150.2,131h-0.5v-4h0.5V131z M150.2,123h-0.5v-2h0.5V123z"/>
S119.3,247.5,187.5,247.5z"/> <path class="st3" d="M75.2,195h-0.5v-4h0.5V195z M75.2,187h-0.5v-4h0.5V187z M75.2,179h-0.5v-4h0.5V179z M75.2,171h-0.5v-4h0.5V171
</g> z M75.2,163h-0.5v-4h0.5V163z M75.2,155h-0.5v-4h0.5V155z M75.2,147h-0.5v-4h0.5V147z M75.2,139h-0.5v-4h0.5V139z M75.2,131h-0.5
<g id="price-" transform="translate(122.000000, 0.000000)"> v-4h0.5V131z"/>
<path id="Line_1_" class="st4" d="M67,42.5v146"/> </g>
<circle id="Oval-5" class="st5" cx="67.5" cy="83.5" r="4.5"/> <path class="st3" d="M0,144.5c-0.5,0-0.9-0.4-1-0.9c-0.1-0.5,0.3-1,0.9-1.1l54.1-6.2L97.1,107c0.3-0.2,0.7-0.2,1-0.1l41.8,21.8
</g> l44-38.7c0.2-0.2,0.4-0.2,0.7-0.2h37.8l24.5-32.8c0.3-0.4,0.9-0.5,1.3-0.3l32.7,19.5l39.9-11l53.8-21.1c0.5-0.2,1.1,0.1,1.3,0.6
</g> c0.2,0.5-0.1,1.1-0.6,1.3l-53.8,21.1c0,0-0.1,0-0.1,0l-40.4,11.1c-0.3,0.1-0.5,0-0.8-0.1L248,58.9l-24.3,32.5
</g> c-0.2,0.3-0.5,0.4-0.8,0.4H185l-44.2,39c-0.3,0.3-0.8,0.3-1.1,0.1L97.8,109l-42.9,29.2c-0.1,0.1-0.3,0.1-0.4,0.2l-54.3,6.2
C0.1,144.5,0,144.5,0,144.5z"/>
<g>
<path id="Line_1_" class="st4" d="M187.5,48.5v146"/>
<circle id="dot" class="st5" cx="187.5" cy="89.5" r="4.5"/>
</g> </g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,167 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<svg width="375px" height="247px" viewBox="0 0 375 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> <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"
<title>digital-money</title> viewBox="0 0 375 247" style="enable-background:new 0 0 375 247;" xml:space="preserve">
<desc>Created with Sketch.</desc> <style type="text/css">
<defs> .st0{opacity:0.15;}
<linearGradient x1="50%" y1="0%" x2="50%" y2="75.2641068%" id="linearGradient-1"> .st1{fill:none;stroke:#FFFFFF;stroke-width:2;}
<stop stop-color="#3950B5" offset="0%"></stop> .st2{opacity:0.3;fill:url(#SVGID_1_);enable-background:new ;}
<stop stop-color="#162360" offset="100%"></stop> .st3{fill:#293881;fill-opacity:0.6548;stroke:#6778BA;stroke-width:2;}
</linearGradient> .st4{fill:none;stroke:#6778BA;stroke-width:2;stroke-linecap:square;}
<path d="M31.8181818,0 L0,0 L0,31.8181818 L31.8181818,31.8181818 L31.8181818,0 L31.8181818,0 Z M27.2727273,27.2727273 L4.54545455,27.2727273 L4.54545455,4.54545455 L27.2727273,4.54545455 L27.2727273,27.2727273 L27.2727273,27.2727273 Z" id="path-2"></path> .st5{fill:#5BC2A7;}
<mask id="mask-3" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white"> </style>
<use xlink:href="#path-2"></use> <g transform="translate(0.000000, 54.000000)" class="st0">
</mask> <g>
<polygon id="path-4" points="65.9090909 90.9090909 61.3636364 90.9090909 61.3636364 100 100 100 100 95.4545455 65.9090909 95.4545455"></polygon> <polyline id="Shape" class="st1" points="13,123.7 0,123.7 0,90 13,90 "/>
<mask id="mask-5" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="38.6363636" height="9.09090909" fill="white"> <polyline id="Shape_1_" class="st1" points="58.3,123.7 71.3,123.7 71.3,90 58.3,90 "/>
<use xlink:href="#path-4"></use> <rect id="Rectangle-path" x="13" y="41.2" class="st1" width="45.4" height="82.5"/>
</mask> <path id="Shape_2_" class="st1" d="M25.9,56.2h3.2"/>
<rect id="path-6" x="9.09090909" y="9.09090909" width="13.6363636" height="13.6363636"></rect> <path id="Shape_3_" class="st1" d="M42.1,56.2h3.2"/>
<mask id="mask-7" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white"> <path id="Shape_4_" class="st1" d="M25.9,71.2h3.2"/>
<use xlink:href="#path-6"></use> <path id="Shape_5_" class="st1" d="M42.1,71.2h3.2"/>
</mask> <path id="Shape_6_" class="st1" d="M25.9,86.2h3.2"/>
<path d="M0,100 L31.8181818,100 L31.8181818,68.1818182 L0,68.1818182 L0,100 L0,100 Z M4.54545455,72.7272727 L27.2727273,72.7272727 L27.2727273,95.4545455 L4.54545455,95.4545455 L4.54545455,72.7272727 L4.54545455,72.7272727 Z" id="path-8"></path> <path id="Shape_7_" class="st1" d="M42.1,86.2h3.2"/>
<mask id="mask-9" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white"> <path id="Shape_8_" class="st1" d="M25.9,101.2h3.2"/>
<use xlink:href="#path-8"></use> <path id="Shape_9_" class="st1" d="M42.1,101.2h3.2"/>
</mask> <path id="Shape_10_" class="st1" d="M35.7,123.7v-7.5"/>
<rect id="path-10" x="9.09090909" y="77.2727273" width="13.6363636" height="13.6363636"></rect> </g>
<mask id="mask-11" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white"> <g>
<use xlink:href="#path-10"></use> <polyline id="Shape_11_" class="st1" points="142.8,67 142.8,37.5 132.6,37.5 132.6,19.7 112.2,19.7 112.2,37.5 102,37.5
</mask> 102,84.8 "/>
<path d="M68.1818182,0 L68.1818182,31.8181818 L100,31.8181818 L100,0 L68.1818182,0 L68.1818182,0 Z M95.4545455,27.2727273 L72.7272727,27.2727273 L72.7272727,4.54545455 L95.4545455,4.54545455 L95.4545455,27.2727273 L95.4545455,27.2727273 Z" id="path-12"></path> <path id="Shape_12_" class="st1" d="M112.2,138h20.4"/>
<mask id="mask-13" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="31.8181818" height="31.8181818" fill="white"> <path id="Shape_13_" class="st1" d="M122.4,7.9v11.8"/>
<use xlink:href="#path-12"></use> <rect id="Rectangle-path_1_" x="71.3" y="84.8" class="st1" width="40.9" height="53.2"/>
</mask> <rect id="Rectangle-path_2_" x="132.6" y="67" class="st1" width="40.9" height="71"/>
<rect id="path-14" x="77.2727273" y="9.09090909" width="13.6363636" height="13.6363636"></rect> <path id="Shape_14_" class="st1" d="M147.9,84.8h10.2"/>
<mask id="mask-15" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13.6363636" height="13.6363636" fill="white"> <path id="Shape_15_" class="st1" d="M147.9,102.5h10.2"/>
<use xlink:href="#path-14"></use> <path id="Shape_16_" class="st1" d="M147.9,120.2h10.2"/>
</mask> <path id="Shape_17_" class="st1" d="M86.6,102.5h10.2"/>
<rect id="path-16" x="90.9090909" y="36.3636364" width="9.09090909" height="9.09090909"></rect> <path id="Shape_18_" class="st1" d="M86.6,120.2h10.2"/>
<mask id="mask-17" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white"> </g>
<use xlink:href="#path-16"></use> <g>
</mask> <polyline id="Shape_19_" class="st1" points="237.5,135.4 224.5,135.4 224.5,101.6 237.5,101.6 "/>
<rect id="path-18" x="0" y="54.5454545" width="9.09090909" height="9.09090909"></rect> <polyline id="Shape_20_" class="st1" points="282.9,135.4 295.8,135.4 295.8,101.6 282.9,101.6 "/>
<mask id="mask-19" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="9.09090909" height="9.09090909" fill="white"> <rect id="Rectangle-path_3_" x="237.5" y="52.9" class="st1" width="45.4" height="82.5"/>
<use xlink:href="#path-18"></use> <path id="Shape_21_" class="st1" d="M250.5,67.9h3.2"/>
</mask> <path id="Shape_22_" class="st1" d="M266.7,67.9h3.2"/>
<polygon id="path-20" points="47.7272727 36.3636364 29.5454545 36.3636364 29.5454545 40.9090909 52.2727273 40.9090909 52.2727273 31.8181818 52.2727273 27.2727273 56.8181818 27.2727273 56.8181818 18.1818182 52.2727273 18.1818182 47.7272727 18.1818182 43.1818182 18.1818182 43.1818182 9.09090909 47.7272727 9.09090909 47.7272727 13.6363636 63.6363636 13.6363636 63.6363636 0 59.0909091 0 59.0909091 9.09090909 52.2727273 9.09090909 52.2727273 0 50 0 40.9090909 0 38.6363636 0 38.6363636 22.7272727 47.7272727 22.7272727 47.7272727 27.2727273 38.6363636 27.2727273 38.6363636 31.8181818 47.7272727 31.8181818"></polygon> <path id="Shape_23_" class="st1" d="M250.5,82.9h3.2"/>
<mask id="mask-21" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="34.0909091" height="40.9090909" fill="white"> <path id="Shape_24_" class="st1" d="M266.7,82.9h3.2"/>
<use xlink:href="#path-20"></use> <path id="Shape_25_" class="st1" d="M250.5,97.9h3.2"/>
</mask> <path id="Shape_26_" class="st1" d="M266.7,97.9h3.2"/>
<polygon id="path-22" points="6.81818182 50 15.9090909 50 20.4545455 50 22.7272727 50 22.7272727 54.5454545 13.6363636 54.5454545 13.6363636 59.0909091 22.7272727 59.0909091 22.7272727 63.6363636 40.9090909 63.6363636 40.9090909 59.0909091 27.2727273 59.0909091 27.2727273 54.5454545 27.2727273 45.4545455 20.4545455 45.4545455 20.4545455 38.6363636 15.9090909 38.6363636 15.9090909 45.4545455 11.3636364 45.4545455 11.3636364 36.3636364 0 36.3636364 0 40.9090909 6.81818182 40.9090909"></polygon> <path id="Shape_27_" class="st1" d="M250.5,112.9h3.2"/>
<mask id="mask-23" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="40.9090909" height="27.2727273" fill="white"> <path id="Shape_28_" class="st1" d="M266.7,112.9h3.2"/>
<use xlink:href="#path-22"></use> <path id="Shape_29_" class="st1" d="M260.2,135.4v-7.5"/>
</mask> </g>
<polygon id="path-24" points="50 90.9090909 50 79.5454545 40.9090909 79.5454545 40.9090909 70.4545455 36.3636364 70.4545455 36.3636364 84.0909091 45.4545455 84.0909091 45.4545455 90.9090909 36.3636364 90.9090909 36.3636364 95.4545455 45.4545455 95.4545455 45.4545455 100 56.8181818 100 56.8181818 95.4545455 50 95.4545455"></polygon> <g>
<mask id="mask-25" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="20.4545455" height="29.5454545" fill="white"> <polyline id="Shape_30_" class="st1" points="367.4,56 367.4,26.4 357.1,26.4 357.1,8.7 336.7,8.7 336.7,26.4 326.5,26.4
<use xlink:href="#path-24"></use> 326.5,73.8 "/>
</mask> <path id="Shape_31_" class="st1" d="M336.7,127.1h20.4"/>
<polygon id="path-26" points="72.7272727 45.4545455 63.6363636 45.4545455 63.6363636 34.0909091 59.0909091 34.0909091 59.0909091 50 81.8181818 50 81.8181818 45.4545455 77.2727273 45.4545455 77.2727273 40.9090909 84.0909091 40.9090909 84.0909091 36.3636364 77.2727273 36.3636364 72.7272727 36.3636364 68.1818182 36.3636364 68.1818182 40.9090909 72.7272727 40.9090909"></polygon> <path id="Shape_32_" class="st1" d="M346.9-3.1V8.7"/>
<mask id="mask-27" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="25" height="15.9090909" fill="white"> <rect id="Rectangle-path_4_" x="295.8" y="73.8" class="st1" width="40.9" height="53.2"/>
<use xlink:href="#path-26"></use> <rect id="Rectangle-path_5_" x="357.1" y="56" class="st1" width="40.9" height="71"/>
</mask> <path id="Shape_33_" class="st1" d="M372.5,73.8h10.2"/>
<polygon id="path-28" points="68.1818182 86.3636364 75 86.3636364 75 90.9090909 84.0909091 90.9090909 84.0909091 86.3636364 84.0909091 81.8181818 84.0909091 75 75 75 75 81.8181818 68.1818182 81.8181818 68.1818182 75 63.6363636 75 63.6363636 81.8181818 59.0909091 81.8181818 59.0909091 63.6363636 54.5454545 63.6363636 54.5454545 59.0909091 50 59.0909091 50 45.4545455 34.0909091 45.4545455 34.0909091 54.5454545 38.6363636 54.5454545 38.6363636 50 45.4545455 50 45.4545455 59.0909091 45.4545455 68.1818182 54.5454545 68.1818182 54.5454545 81.8181818 54.5454545 86.3636364 59.0909091 86.3636364 63.6363636 86.3636364"></polygon> <path id="Shape_34_" class="st1" d="M372.5,91.5h10.2"/>
<mask id="mask-29" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="50" height="45.4545455" fill="white"> <path id="Shape_35_" class="st1" d="M372.5,109.2h10.2"/>
<use xlink:href="#path-28"></use> <path id="Shape_36_" class="st1" d="M311.2,91.5h10.2"/>
</mask> <path id="Shape_37_" class="st1" d="M311.2,109.2h10.2"/>
<polygon id="path-30" points="95.4545455 56.8181818 88.6363636 56.8181818 84.0909091 56.8181818 72.7272727 56.8181818 72.7272727 65.9090909 68.1818182 65.9090909 68.1818182 56.8181818 63.6363636 56.8181818 63.6363636 70.4545455 77.2727273 70.4545455 77.2727273 61.3636364 84.0909091 61.3636364 84.0909091 68.1818182 88.6363636 68.1818182 88.6363636 61.3636364 95.4545455 61.3636364 95.4545455 75 88.6363636 75 88.6363636 88.6363636 100 88.6363636 100 84.0909091 93.1818182 84.0909091 93.1818182 79.5454545 100 79.5454545 100 61.3636364 100 56.8181818 100 50 95.4545455 50"></polygon> </g>
<mask id="mask-31" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="36.3636364" height="38.6363636" fill="white"> </g>
<use xlink:href="#path-30"></use> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-234.5445" y1="2.2024" x2="-234.5445" y2="2.9551" gradientTransform="matrix(247 0 0 247 58120 -544)">
</mask> <stop offset="0" style="stop-color:#4054A5"/>
</defs> <stop offset="1" style="stop-color:#24285E"/>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> </linearGradient>
<g id="0.2.1---Tour-1" transform="translate(0.000000, -210.000000)"> <path class="st2" d="M187.5,247c68.2,0,123.5-55.3,123.5-123.5S255.7,0,187.5,0S64,55.3,64,123.5S119.3,247,187.5,247z"/>
<g id="digital-money" transform="translate(0.000000, 210.000000)"> <g>
<g id="bg-1"> <path class="st3" d="M141,32h83.8c4.4,0,8,3.6,8,8v167.9c0,4.4-3.6,8-8,8H141c-4.4,0-8-3.6-8-8V40C133,35.6,136.6,32,141,32z"/>
<g id="cityscape" opacity="0.15" transform="translate(0.000000, 54.000000)" stroke-width="2" stroke="#FFFFFF"> <path class="st4" d="M133.5,188h98.8"/>
<g id="travel-24px-outline_hotel" transform="translate(0.000000, 47.163934)"> <path class="st4" d="M177.1,202.3h18.7"/>
<g id="Group"> </g>
<polyline id="Shape" points="12.9658816 82.4918033 0 82.4918033 0 48.7451565 12.9658816 48.7451565"></polyline> <g>
<polyline id="Shape" points="58.3464671 82.4918033 71.3123487 82.4918033 71.3123487 48.7451565 58.3464671 48.7451565"></polyline> <path class="st5" d="M197.8,66H166v31.8h31.8V66L197.8,66z M193.3,93.3h-22.7V70.5h22.7V93.3L193.3,93.3z"/>
<rect id="Rectangle-path" x="12.9658816" y="0" width="45.3805855" height="82.4918033"></rect> <polygon class="st5" points="231.9,156.9 227.4,156.9 227.4,166 266,166 266,161.5 231.9,161.5 "/>
<path d="M25.9317632,14.9985097 L29.1732335,14.9985097" id="Shape"></path> <rect x="175.1" y="75.1" class="st5" width="13.6" height="13.6"/>
<path d="M42.1391151,14.9985097 L45.3805855,14.9985097" id="Shape"></path> <path class="st5" d="M166,166h31.8v-31.8H166V166L166,166z M170.5,138.7h22.7v22.7h-22.7V138.7L170.5,138.7z"/>
<path d="M25.9317632,29.9970194 L29.1732335,29.9970194" id="Shape"></path> <rect x="175.1" y="143.3" class="st5" width="13.6" height="13.6"/>
<path d="M42.1391151,29.9970194 L45.3805855,29.9970194" id="Shape"></path> <path class="st5" d="M234.2,66v31.8H266V66H234.2L234.2,66z M261.5,93.3h-22.7V70.5h22.7V93.3L261.5,93.3z"/>
<path d="M25.9317632,44.9955291 L29.1732335,44.9955291" id="Shape"></path> <rect x="243.3" y="75.1" class="st5" width="13.6" height="13.6"/>
<path d="M42.1391151,44.9955291 L45.3805855,44.9955291" id="Shape"></path> <rect x="256.9" y="102.4" class="st5" width="9.1" height="9.1"/>
<path d="M25.9317632,59.9940387 L29.1732335,59.9940387" id="Shape"></path> <rect x="166" y="120.5" class="st5" width="9.1" height="9.1"/>
<path d="M42.1391151,59.9940387 L45.3805855,59.9940387" id="Shape"></path> <polygon class="st5" points="213.7,102.4 195.5,102.4 195.5,106.9 218.3,106.9 218.3,97.8 218.3,93.3 222.8,93.3 222.8,84.2
<path d="M35.6561743,82.4918033 L35.6561743,74.9925484" id="Shape"></path> 218.3,84.2 213.7,84.2 209.2,84.2 209.2,75.1 213.7,75.1 213.7,79.6 229.6,79.6 229.6,66 225.1,66 225.1,75.1 218.3,75.1 218.3,66
</g> 216,66 206.9,66 204.6,66 204.6,88.7 213.7,88.7 213.7,93.3 204.6,93.3 204.6,97.8 213.7,97.8 "/>
</g> <polygon class="st5" points="172.8,116 181.9,116 186.5,116 188.7,116 188.7,120.5 179.6,120.5 179.6,125.1 188.7,125.1
<g id="business-24px-outline_building" transform="translate(71.312349, 0.000000)"> 188.7,129.6 206.9,129.6 206.9,125.1 193.3,125.1 193.3,120.5 193.3,111.5 186.5,111.5 186.5,104.6 181.9,104.6 181.9,111.5
<g id="Group"> 177.4,111.5 177.4,102.4 166,102.4 166,106.9 172.8,106.9 "/>
<polyline id="Shape" points="71.5050847 59.1304348 71.5050847 29.5652174 61.2900726 29.5652174 61.2900726 11.826087 40.8600484 11.826087 40.8600484 29.5652174 30.6450363 29.5652174 30.6450363 76.8695652"></polyline> <polygon class="st5" points="216,156.9 216,145.5 206.9,145.5 206.9,136.5 202.4,136.5 202.4,150.1 211.5,150.1 211.5,156.9
<path d="M40.8600484,130.086957 L61.2900726,130.086957" id="Shape"></path> 202.4,156.9 202.4,161.5 211.5,161.5 211.5,166 222.8,166 222.8,161.5 216,161.5 "/>
<path d="M51.0750605,0 L51.0750605,11.826087" id="Shape"></path> <polygon class="st5" points="238.7,111.5 229.6,111.5 229.6,100.1 225.1,100.1 225.1,116 247.8,116 247.8,111.5 243.3,111.5
<rect id="Rectangle-path" x="0" y="76.8695652" width="40.8600484" height="53.2173913"></rect> 243.3,106.9 250.1,106.9 250.1,102.4 243.3,102.4 238.7,102.4 234.2,102.4 234.2,106.9 238.7,106.9 "/>
<rect id="Rectangle-path" x="61.2900726" y="59.1304348" width="40.8600484" height="70.9565217"></rect> <polygon class="st5" points="234.2,152.4 241,152.4 241,156.9 250.1,156.9 250.1,152.4 250.1,147.8 250.1,141 241,141 241,147.8
<path d="M76.6125908,76.8695652 L86.8276029,76.8695652" id="Shape"></path> 234.2,147.8 234.2,141 229.6,141 229.6,147.8 225.1,147.8 225.1,129.6 220.5,129.6 220.5,125.1 216,125.1 216,111.5 200.1,111.5
<path d="M76.6125908,94.6086957 L86.8276029,94.6086957" id="Shape"></path> 200.1,120.5 204.6,120.5 204.6,116 211.5,116 211.5,125.1 211.5,134.2 220.5,134.2 220.5,147.8 220.5,152.4 225.1,152.4
<path d="M76.6125908,112.347826 L86.8276029,112.347826" id="Shape"></path> 229.6,152.4 "/>
<path d="M15.3225182,94.6086957 L25.5375303,94.6086957" id="Shape"></path> <polygon class="st5" points="261.5,122.8 254.6,122.8 250.1,122.8 238.7,122.8 238.7,131.9 234.2,131.9 234.2,122.8 229.6,122.8
<path d="M15.3225182,112.347826 L25.5375303,112.347826" id="Shape"></path> 229.6,136.5 243.3,136.5 243.3,127.4 250.1,127.4 250.1,134.2 254.6,134.2 254.6,127.4 261.5,127.4 261.5,141 254.6,141
</g> 254.6,154.6 266,154.6 266,150.1 259.2,150.1 259.2,145.5 266,145.5 266,127.4 266,122.8 266,116 261.5,116 "/>
</g> </g>
<g id="travel-24px-outline_hotel-copy" transform="translate(224.537530, 50.163934)"> </svg>
<g id="Group">
<polyline id="Shape" points="12.9658816 82.4918033 0 82.4918033 0 48.7451565 12.9658816 48.7451565"></polyline>
<polyline id="Shape" points="58.3464671 82.4918033 71.3123487 82.4918033 71.3123487 48.7451565 58.3464671 48.7451565"></polyline>
<rect id="Rectangle-path" x="12.9658816" y="0" width="45.3805855" height="82.4918033"></rect>
<path d="M25.9317632,14.9985097 L29.1732335,14.9985097" id="Shape"></path>
<path d="M42.1391151,14.9985097 L45.3805855,14.9985097" id="Shape"></path>
<path d="M25.9317632,29.9970194 L29.1732335,29.9970194" id="Shape"></path>
<path d="M42.1391151,29.9970194 L45.3805855,29.9970194" id="Shape"></path>
<path d="M25.9317632,44.9955291 L29.1732335,44.9955291" id="Shape"></path>
<path d="M42.1391151,44.9955291 L45.3805855,44.9955291" id="Shape"></path>
<path d="M25.9317632,59.9940387 L29.1732335,59.9940387" id="Shape"></path>
<path d="M42.1391151,59.9940387 L45.3805855,59.9940387" id="Shape"></path>
<path d="M35.6561743,82.4918033 L35.6561743,74.9925484" id="Shape"></path>
</g>
</g>
<g id="business-24px-outline_building-copy" transform="translate(295.849879, 3.000000)">
<g id="Group">
<polyline id="Shape" points="71.5050847 59.1304348 71.5050847 29.5652174 61.2900726 29.5652174 61.2900726 11.826087 40.8600484 11.826087 40.8600484 29.5652174 30.6450363 29.5652174 30.6450363 76.8695652"></polyline>
<path d="M40.8600484,130.086957 L61.2900726,130.086957" id="Shape"></path>
<path d="M51.0750605,0 L51.0750605,11.826087" id="Shape"></path>
<rect id="Rectangle-path" x="0" y="76.8695652" width="40.8600484" height="53.2173913"></rect>
<rect id="Rectangle-path" x="61.2900726" y="59.1304348" width="40.8600484" height="70.9565217"></rect>
<path d="M76.6125908,76.8695652 L86.8276029,76.8695652" id="Shape"></path>
<path d="M76.6125908,94.6086957 L86.8276029,94.6086957" id="Shape"></path>
<path d="M76.6125908,112.347826 L86.8276029,112.347826" id="Shape"></path>
<path d="M15.3225182,94.6086957 L25.5375303,94.6086957" id="Shape"></path>
<path d="M15.3225182,112.347826 L25.5375303,112.347826" id="Shape"></path>
</g>
</g>
</g>
<path d="M187.5,247 C255.707167,247 311,191.707167 311,123.5 C311,55.2928334 255.707167,1.42108547e-14 187.5,1.42108547e-14 C119.292833,1.42108547e-14 64,55.2928334 64,123.5 C64,191.707167 119.292833,247 187.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
</g>
<g id="phone" transform="translate(133.000000, 32.000000)" stroke-width="2">
<rect id="Combined-Shape" stroke="#647CE8" fill-opacity="0.65477808" fill="#223483" x="0" y="0" width="99.8310062" height="183.875349" rx="8"></rect>
<path d="M0.519953157,155.972885 L99.311053,155.972885" id="Line" stroke="#647CE8" stroke-linecap="square"></path>
<path d="M44.0762994,170.254952 L62.7946131,170.254952" id="Line" stroke="#647CE8" stroke-linecap="square"></path>
<g id="qr-code" transform="translate(33.000000, 34.000000)" stroke="#1E307E" fill="#12E5B6">
<g id="Group">
<use id="Shape" mask="url(#mask-3)" xlink:href="#path-2"></use>
<use id="Shape" mask="url(#mask-5)" xlink:href="#path-4"></use>
<use id="Rectangle-path" mask="url(#mask-7)" xlink:href="#path-6"></use>
<use id="Shape" mask="url(#mask-9)" xlink:href="#path-8"></use>
<use id="Rectangle-path" mask="url(#mask-11)" xlink:href="#path-10"></use>
<use id="Shape" mask="url(#mask-13)" xlink:href="#path-12"></use>
<use id="Rectangle-path" mask="url(#mask-15)" xlink:href="#path-14"></use>
<use id="Rectangle-path" mask="url(#mask-17)" xlink:href="#path-16"></use>
<use id="Rectangle-path" mask="url(#mask-19)" xlink:href="#path-18"></use>
<use id="Shape" mask="url(#mask-21)" xlink:href="#path-20"></use>
<use id="Shape" mask="url(#mask-23)" xlink:href="#path-22"></use>
<use id="Shape" mask="url(#mask-25)" xlink:href="#path-24"></use>
<use id="Shape" mask="url(#mask-27)" xlink:href="#path-26"></use>
<use id="Shape" mask="url(#mask-29)" xlink:href="#path-28"></use>
<use id="Shape" mask="url(#mask-31)" xlink:href="#path-30"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

View File

@ -19,8 +19,7 @@
<div class="cta-buttons"> <div class="cta-buttons">
<p class="onboarding-tldr" translate>Just scan the code to pay.</p> <p class="onboarding-tldr" translate>Just scan the code to pay.</p>
<button class="button button-block button-secondary" ng-click="slideNext()"> <button class="button button-block button-secondary" ng-click="slideNext()">
Got it Got it &rarr;
<i class="icon ion-ios-arrow-thin-right"></i>
</button> </button>
</div> </div>
</ion-content> </ion-content>
@ -35,8 +34,7 @@
<div class="cta-buttons"> <div class="cta-buttons">
<p class="onboarding-tldr" translate>The exchange rate changes with the market.</p> <p class="onboarding-tldr" translate>The exchange rate changes with the market.</p>
<button class="button button-block button-secondary" ng-click="slideNext()"> <button class="button button-block button-secondary" ng-click="slideNext()">
Makes sense Makes sense &rarr;
<i class="icon ion-ios-arrow-thin-right"></i>
</button> </button>
</div> </div>
</ion-content> </ion-content>