Change Currency button appearance.

This commit is contained in:
Brendon Duncan 2018-07-26 13:09:16 -07:00
commit 8fd0b76a44
3 changed files with 52 additions and 14 deletions

View file

@ -251,7 +251,7 @@
.warning { .warning {
color: #b7664d; color: #b7664d;
font-family: 'ProximaNova-Semibold'; font-family: 'ProximaNova-Semibold';
font-size: 12pt; font-size: 12px;
padding: 0 6px 6px 6px; padding: 0 6px 6px 6px;
text-align: center; text-align: center;
} }
@ -371,24 +371,38 @@
.send-amount-extras { .send-amount-extras {
display: flex; display: flex;
flex: 0 0 auto; flex: 0 0 auto;
/* So that if only one item is present, it appears on the right. */
flex-direction: row-reverse; flex-direction: row-reverse;
font-size: 12px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 14px; margin: 0 14px;
.extra { .extra,
display: inline-block; button.extra {
color: #000;
display: flex;
flex: 0 1 auto; flex: 0 1 auto;
font-size: 12pt;
} }
.button { button.extra {
flex: 0 1 auto; background: none;
line-height: 1.2em; border: none;
font-family: 'ProximaNova';
font-size: 14px;
line-height: normal;
min-height: auto;
min-width: auto;
padding: 0;
}
+ .button { .button .icon:before {
margin-left: 10px; font-size: 14px;
} line-height: normal;
}
.button {
span { span {
display: flex; display: flex;

View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
<title>3A719124-019D-470F-908A-5D61F117A295</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons" transform="translate(-324.000000, -770.000000)" stroke="#000000" stroke-width="0.7">
<g id="icons/list-items/sync" transform="translate(324.000000, 770.000000)">
<g id="Group" transform="translate(0.365217, 0.365217)">
<polyline id="Shape" points="10.5913043 11.6869565 0 11.6869565 0 0 16.0695652 0 16.0695652 7.96173913"></polyline>
<ellipse id="Oval" cx="8.03478261" cy="5.84347826" rx="1.46086957" ry="1.46086957"></ellipse>
<path d="M13.8782609,6.57391304 L13.8782609,4.3826087 C12.6365217,4.3826087 11.6869565,3.43304348 11.6869565,2.19130435 L4.3826087,2.19130435 C4.3826087,3.43304348 3.43304348,4.3826087 2.19130435,4.3826087 L2.19130435,7.30434783 C3.43304348,7.30434783 4.3826087,8.25391304 4.3826087,9.49565217 L10.5913043,9.49565217" id="Shape"></path>
<path d="M15.0469565,13.5130435 C15.6313043,13.8052174 16.0695652,14.1704348 16.0695652,14.6086957 C16.0695652,15.4121739 14.7547826,16.0695652 13.1478261,16.0695652 C11.5408696,16.0695652 10.226087,15.4121739 10.226087,14.6086957 C10.226087,14.1704348 10.5913043,13.8052174 11.2486957,13.5130435" id="Shape"></path>
<path d="M15.0469565,11.3217391 C15.6313043,11.613913 16.0695652,11.9791304 16.0695652,12.4173913 C16.0695652,13.2208696 14.7547826,13.8782609 13.1478261,13.8782609 C11.5408696,13.8782609 10.226087,13.2208696 10.226087,12.4173913 C10.226087,11.9791304 10.5913043,11.613913 11.1756522,11.3217391" id="Shape"></path>
<path d="M15.0469565,9.13043478 C15.6313043,9.4226087 16.0695652,9.78782609 16.0695652,10.226087 C16.0695652,11.0295652 14.7547826,11.6869565 13.1478261,11.6869565 C11.5408696,11.6869565 10.226087,11.0295652 10.226087,10.226087 C10.226087,9.78782609 10.5913043,9.4226087 11.1756522,9.13043478" id="Shape"></path>
<ellipse id="Oval" cx="13.1478261" cy="8.03478261" rx="2.92173913" ry="1.46086957"></ellipse>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

@ -35,18 +35,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="send-amount-extras text-center"> <div class="send-amount-extras text-center">
<button class="extra button button-sendmax" ng-click="vm.openPopup()"> <button class="extra button" ng-click="vm.openPopup()">
<span> <span>
<i class="icon ion-social-usd"></i>&emsp; <img src="img/icon-alternative-currency-black.svg"/>
&ensp;
<span translate>Change currency</span> <span translate>Change currency</span>
</span> </span>
</button> </button>
<div class="extra"> <div class="extra">
Available Funds: <span>{{vm.availableFunds}}</span> Available Funds: <span>{{vm.availableFunds}}</span>
</div> </div>
</div> </div>
<button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()"> <button class="button button-sendmax" ng-if="!vm.isRequestingSpecificAmount" ng-click="vm.sendMax()">
<span> <span>
<i class="icon ion-ios-speedometer-outline"></i>&emsp; <i class="icon ion-ios-speedometer-outline"></i>&emsp;