anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #138 from Bitcoin-com/wallet/task/347

Browse source 
Updated Explore, Services and Community icon styles
This commit is contained in:
Jean-Baptiste Dominguez 2018-05-23 14:41:58 +09:00 • committed by GitHub
commit 2906179632
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 97 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/js/services/communityService.js
View file

@ -38,14 +38,14 @@ angular.module('copayApp.services').factory('communityService', function(configS
var bchRedditItem = {
name: 'bchreddit',
title: 'Bitcoin Cash Reddit',
icon: 'icon-reddit',
icon: 'icon-reddit-white',
href: 'http://reddit.com/r/btc'
};
var bitcoincomTwitterItem = {
name: 'bitcoincomTwitter',
title: 'Bitcoin.com Twitter',
icon: 'icon-twitter',
icon: 'icon-twitter-white',
href: 'https://twitter.com/BTCTN'
};

49
src/sass/icons.scss
View file

@ -48,6 +48,55 @@
background: rgb(1, 209, 162);
}
}
&.theme-circle {
> .bg {
border-radius: 50%;
background-size: 85%;
background-position: 50%;
background-color: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
border: 1px solid #faba13;
text-align: center;
font-size: 30px;
&:before {
vertical-align: middle;
}
&.icon-shapeshift {
background-color: #263e5c;
}
&.icon-buy-bitcoin2 {
background-color: #494949;
}
&.icon-reddit-white {
background-image: url('../img/icon-reddit-white.svg');
background-color: #ff4500;
background-size: 60%;
}
&.icon-twitter-white {
background-image: url('../img/icon-twitter-white.svg');
background-color: #1da1f2;
background-size: 60%;
}
}
}
&.theme-circle-services {
> .bg {
border: 1px solid #191919;
}
}
&.theme-circle-community {
> .bg {
border: 1px solid #FFFFFF;
}
}
}

42
www/css/main.css
View file

@ -10011,6 +10011,33 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
background-size: 103%; }
.big-icon-svg > .bg.green {
background: #01d1a2; }
.big-icon-svg.theme-circle > .bg {
border-radius: 50%;
background-size: 85%;
background-position: 50%;
background-color: #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
border: 1px solid #faba13;
text-align: center;
font-size: 30px; }
.big-icon-svg.theme-circle > .bg:before {
vertical-align: middle; }
.big-icon-svg.theme-circle > .bg.icon-shapeshift {
background-color: #263e5c; }
.big-icon-svg.theme-circle > .bg.icon-buy-bitcoin2 {
background-color: #494949; }
.big-icon-svg.theme-circle > .bg.icon-reddit-white {
background-image: url("../img/icon-reddit-white.svg");
background-color: #ff4500;
background-size: 60%; }
.big-icon-svg.theme-circle > .bg.icon-twitter-white {
background-image: url("../img/icon-twitter-white.svg");
background-color: #1da1f2;
background-size: 60%; }
.big-icon-svg.theme-circle-services > .bg {
border: 1px solid #191919; }
.big-icon-svg.theme-circle-community > .bg {
border: 1px solid #FFFFFF; }
.wallet-item {
padding: 1rem 0 2rem 0; }
@ -10439,6 +10466,11 @@ textarea.d-block {
text-align: center;
position: relative;
padding: 10px 30px; }
#view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .text-selectable {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text; }
#view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount input, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .unit, #view-amount .scroll-content .send-amount .send-amount-tool .send-amount-tool-input .primary-amount .primary-amount-display {
font-size: 1.8em; }
@media (min-width: 375px) {
@ -10709,15 +10741,13 @@ textarea.d-block {
#tab-home .homeTip {
text-align: center; }
#tab-home .homeTip > .item-heading {
margin-top: 10px;
background: 0 none; }
#tab-home .homeTip .item {
border-style: none; }
#tab-home .homeTip > .title {
#tab-home .homeTip .title {
font-size: 20px;
font-weight: bold;
color: #445;
margin: 20px 10px; }
color: #445; }
#tab-home .homeTip > .subtitle {
font-size: 1rem;
line-height: 1.5em;
@ -10730,7 +10760,9 @@ textarea.d-block {
#tab-home .icon.close-home-tip {
color: #666;
font-size: 38px; }
font-size: 38px;
height: auto;
top: 8px; }
#tab-home .tab-home__logo {
height: 18px;

1
www/img/icon-reddit-white.svg Normal file
View file

@ -0,0 +1 @@
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 242.73"><title>icon-reddit-white</title><polygon points="69.23 153.18 69.23 153.21 85.17 153.21 69.23 153.18" style="fill:#fab915"/><polygon points="228.54 153.18 228.54 153.21 244.47 153.21 228.54 153.18" style="fill:#fab915"/><path d="M350,190.7a37.37,37.37,0,0,0-37.35-37.34,36.67,36.67,0,0,0-22.43,7.53C269.36,146.45,242,137.83,213,135.64l15.7-36.77,45.52,10.68a28.05,28.05,0,1,0,4.41-18.17L225.34,78.93a9.3,9.3,0,0,0-10.71,5.44L193,135.11c-31.34,1.11-61.2,9.9-83.75,25.28a36.67,36.67,0,0,0-21.92-7A37.26,37.26,0,0,0,68.86,223c-.16,1.62-.19,3.24-.19,5,0,51.53,58.6,93.39,130.67,93.39S330,279.53,330,228c0-1.47-.06-2.93-.06-4.37A37,37,0,0,0,350,190.7ZM302.07,97.33a9.34,9.34,0,1,1-9.34,9.31A9.27,9.27,0,0,1,302.07,97.33ZM134,218.62a18.68,18.68,0,1,1,18.66,18.75A18.66,18.66,0,0,1,134,218.62Zm108.42,62a73.58,73.58,0,0,1-86.16,0,9.32,9.32,0,1,1,10.91-15.12,54.77,54.77,0,0,0,64.31,0,9.46,9.46,0,0,1,13.06,2.06A9.32,9.32,0,0,1,242.43,280.61Zm3.6-43.24a18.69,18.69,0,1,1,18.61-18.75A18.68,18.68,0,0,1,246,237.37Z" transform="translate(-50 -78.65)" style="fill:#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
www/img/icon-twitter-white.svg Normal file
View file

@ -0,0 +1 @@
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 243.69"><title>icon-twitter-white</title><path d="M350,107a122.92,122.92,0,0,1-35.34,9.69,61.78,61.78,0,0,0,27-34,124.13,124.13,0,0,1-39.1,14.94,61.6,61.6,0,0,0-104.87,56.11A174.71,174.71,0,0,1,70.9,89.4a61.62,61.62,0,0,0,19,82.15,61.62,61.62,0,0,1-27.88-7.72v.77a61.6,61.6,0,0,0,49.36,60.34,62.17,62.17,0,0,1-16.21,2.16A59.09,59.09,0,0,1,83.63,226a61.59,61.59,0,0,0,57.48,42.75A123.52,123.52,0,0,1,64.68,295,131.69,131.69,0,0,1,50,294.16a174,174,0,0,0,94.33,27.68c113.21,0,175.1-93.77,175.1-175.09l-.21-8A122.91,122.91,0,0,0,350,107Z" transform="translate(-50 -78.16)" style="fill:#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 683 B

6
www/views/includes/community.html
View file

@ -7,14 +7,14 @@
<div ng-show="!hide">
<div ng-repeat="service in services track by $index">
<a ng-if="service.sref" ui-sref="{{service.sref}}" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle theme-circle-community">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ng-if="!service.sref" ng-click="open('{{service.href}}')" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle theme-circle-community">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>
@ -23,7 +23,7 @@
</div>
<div>
<a ng-if="isCordova" ng-click="share()" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle theme-circle-community">
<div class="bg icon-share"></div>
</i>
<span>Share the Wallet App</span>

2
www/views/includes/homeIntegrations.html
View file

@ -7,7 +7,7 @@
<div ng-show="!hide">
<div ng-repeat="service in services track by $index">
<a ui-sref="{{service.sref}}" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>

4
www/views/includes/nextSteps.html
View file

@ -7,14 +7,14 @@
<div ng-show="!hide">
<div ng-repeat="service in services track by $index">
<a ng-if="service.sref" ui-sref="{{service.sref}}" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>
<i class="icon bp-arrow-right"></i>
</a>
<a ng-if="!service.sref" ng-click="open('{{service.href}}')" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>

2
www/views/includes/services.html
View file

@ -7,7 +7,7 @@
<div ng-show="!hide">
<div ng-repeat="service in services track by $index">
<a ui-sref="{{service.sref}}" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
<i class="icon big-icon-svg">
<i class="icon big-icon-svg theme-circle theme-circle-services">
<div class="bg {{service.icon}}"></div>
</i>
<span>{{service.title || service.name}}</span>