BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

design(home): new icons and design improvements for the home tab

This commit is contained in:
Jason Dreyzehner 2016-09-30 21:28:25 -04:00
parent 15836bb817
commit ceac7c2c2b
6 changed files with 48 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/img/icon-card.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Card" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#647CE8;}
.st1{fill:none;stroke:#B2C1F7;}
</style>
<path id="card" class="st0" d="M11.6,28C10.2,28,9,26.8,9,25.5V14.5c0-1.4,1.2-2.5,2.6-2.5h16.5c1.5,0,2.6,1.1,2.6,2.5v10.9
C30.6,26.8,29.5,28,28,28H11.6z"/>
<path id="stripe-bottom" class="st0" d="M9,18.1h22"/>
<path id="stripe-top" class="st0" d="M9,15.6h22"/>
<path id="bottom-line" class="st1" d="M11.3,23.8h4.3"/>
<path id="top-line" class="st1" d="M11.3,21.3h8.4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 818 B

38
public/img/icon-wallet.svg
View File

@ -1,28 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="44px" height="38px" viewBox="0 0 44 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Wallet Copy</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M12.2206319,33.5295725 C12.2206319,35.1887012 13.5540503,36.5336907 15.221911,36.5336908 L35.3827914,36.5336913 C37.040352,36.5336913 38.3840705,35.1979548 38.3840705,33.529573 L38.3840709,19.5110705 L12.2206319,19.5110706 L12.2206319,33.5295725 Z M31.7761235,19.4691743 L31.776124,16.3165791 L12.2255864,16.3165791 C12.2255864,16.3165791 12.2255864,19.5085877 12.2255864,19.5085877 L31.7761235,19.4691743 Z M33.423217,30.9126651 C34.3328814,30.9126651 35.07031,30.1815053 35.07031,29.279574 C35.07031,28.3776426 34.3328814,27.6464828 33.423217,27.6464828 C32.5135527,27.6464828 31.776124,28.3776426 31.776124,29.279574 C31.776124,30.1815053 32.5135527,30.9126651 33.423217,30.9126651 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="0.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feMorphology radius="1" operator="erode" in="SourceAlpha" result="shadowInner"></feMorphology>
<feOffset dx="0" dy="2" in="shadowInner" result="shadowInner"></feOffset>
<feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"></feComposite>
<feGaussianBlur stdDeviation="4" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.307518116 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Wallet/Icon/Blue" transform="translate(-3.000000, -10.000000)">
<g id="Oval-87-+-bitpay-logo-grayscale" transform="translate(0.000000, 1.000000)">
<g id="Wallet-Copy">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use stroke="#FFFFFF" stroke-width="1" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Wallet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;}
</style>
<path id="Icon" class="st0" d="M9,25.6c0,1.3,1.1,2.4,2.5,2.4h17c1.4,0,2.5-1,2.5-2.4V14.5H9V25.6L9,25.6z M25.5,14.5V12H9v2.5H25.5
z M26.9,23.5c0.7,0,1.4-0.6,1.4-1.3s-0.6-1.3-1.4-1.3s-1.4,0.6-1.4,1.3S26.1,23.5,26.9,23.5z"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 640 B

6
public/views/tab-home.html
View File

@ -135,7 +135,7 @@
<i class="icon big-icon-svg">
<div class="bg icon-bitpay-card"></div>
</i>
<span translate>Add BitPay Card</span>
<span translate>Add BitPay Visa&reg; Card</span>
<i class="icon nav-item-arrow-right"></i>
</a>
<a ng-show="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell" class="item item-icon-left item-big-icon-left item-icon-right next-step">
@ -155,9 +155,5 @@
</div>
</div>
<p class="padding" style="text-align:center; color:#999">
{{name}} v{{version}}
</p>
</ion-content>
</ion-view>

22
src/sass/ionic.scss
View File

@ -1,12 +1,22 @@
/* Set ionic variables */
$font-family-sans-serif: "Roboto", sans-serif;
$font-family-light-sans-serif: "Roboto-Light", sans-serif-light;
/* constants */
$royal: #1e3186;
$soft-blue: rgb(100,124,232);
$base-background-color: #f5f5f5;
$soft-blue: #647ce8;
$subtle-gray: #f5f5f5;
$roboto: "Roboto", sans-serif;
$roboto-light: "Roboto-Light", sans-serif-light;
/* Ionic Workaround */
/* Set ionic variables */
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;
$ios-transition-duration: 200ms;
/* Ionic Workarounds */
// Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
ion-nav-bar.hide { display: block !important; }

358
src/sass/main.scss
View File

@ -438,363 +438,6 @@ ul.wallet-selection.wallets {
}
// General purpose
.dn {
display: none;
}
.dni {
display: none !important;
}
.pr {
position: relative;
}
.pa {
position: absolute;
}
.m0 {
margin: 0;
}
.p0i {
padding: 0 !important;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.size-10 {
font-size: 10px;
}
.size-12 {
font-size: 12px;
}
.size-14 {
font-size: 14px;
}
.size-16 {
font-size: 16px;
}
.size-18 {
font-size: 18px;
}
.size-21 {
font-size: 21px;
}
.size-24 {
font-size: 24px;
}
.size-28 {
font-size: 28px;
}
.size-32 {
font-size: 32px;
}
.size-36 {
font-size: 36px;
}
.size-42 {
font-size: 42px;
}
.size-48 {
font-size: 48px;
}
.size-60 {
font-size: 60px;
}
.size-72 {
font-size: 72px;
}
.m5 {
margin: 5px;
}
.m5t {
margin-top: 5px;
}
.m8t {
margin-top: 8px;
}
.m5b {
margin-bottom: 5px;
}
.m5r {
margin-right: 5px;
}
.m10 {
margin: 10px;
}
.m10b {
margin-bottom: 10px;
}
.m3t {
margin-top: 3px;
}
.m10t {
margin-top: 10px;
}
.m15b {
margin-bottom: 15px;
}
.m15r {
margin-right: 15px;
}
.m20b {
margin-bottom: 20px;
}
.m30b {
margin-bottom: 30px;
}
.m40b {
margin-bottom: 40px;
}
.m50b {
margin-bottom: 50px;
}
.m10r {
margin-right: 10px;
}
.m40r {
margin-right: 40px;
}
.m55r {
margin-right: 55px;
}
.m25r {
margin-right: 25px;
}
.m10l {
margin-left: 10px;
}
.m5l {
margin-left: 5px;
}
.m15l {
margin-left: 15px;
}
.m15t {
margin-top: 15px;
}
.m20r {
margin-right: 20px;
}
.m20t {
margin-top: 20px;
}
.m20ti {
margin-top: 20px !important;
}
.m20tp {
margin-top: 20%;
}
.m30tp {
margin-top: 30%;
}
.m15 {
margin: 15px;
}
.m15h {
margin: 0 15px;
}
.p10t {
padding-top: 10px;
}
.p10h {
padding-right: 10px;
padding-left: 10px;
}
.p15h {
padding: 0 15px;
}
.p0r {
padding-right: 0;
}
.p70r {
padding-right: 70px;
}
.p70l {
padding-left: 70px;
}
.p5h {
padding: 0 5px;
}
.p20h {
padding: 0 20px;
}
.p20v {
padding: 20px 0;
}
.p20b {
padding-bottom: 20px;
}
.p25b {
padding-bottom: 25px;
}
.p25l {
padding-left: 25px;
}
.p15l {
padding-left: 15px;
}
.p15 {
padding: 15px;
}
.p20 {
padding: 20px;
}
.p15t {
padding-top: 15px;
}
.p20t {
padding-top: 20px;
}
.p50t {
padding-top: 50px;
}
.p10 {
padding: 10px;
}
.p10i {
padding: 10px !important;
}
.p10b {
padding-bottom: 10px;
}
.p45t {
padding-top: 45px;
}
.p60t {
padding-top: 60px;
}
.p60b {
padding-bottom: 60px;
}
.m60t {
margin-top: 60px;
}
.p45li {
padding-left: 45px !important;
}
.m30v {
margin: 30px 0;
}
.m15v {
margin: 15px 0;
}
.m10h {
margin: 0 10px;
}
.m10v {
margin: 10px 0;
}
.m20v {
margin: 20px 0;
}
.m30v {
margin: 30px 0;
}
.m30a {
margin: 30px auto;
}
.m-negative-l {
margin-left: -0.9375rem;
}
.br100 {
border-radius: 100% !important;
}
.lh {
line-height: 0;
}
.lh140 {
line-height: 140%;
}
.oh {
overflow: hidden;
}
@ -993,6 +636,7 @@ input[type=number] {
@import "views/confirm";
@import "views/tab-home";
@import "views/tab-receive";
@import "views/tab-scan";
@import "views/tab-send";
@import "views/tab-settings";
@import "views/walletDetails";

8
src/sass/views/tab-home.scss
View File

@ -1,12 +1,14 @@
#tab-home {
.icon-create-wallet {
background-image: url("../img/icon-bitcoin.svg");
background-image: url("../img/icon-wallet.svg");
background-color: #4A90E2; // default wallet color
}
.icon-buy-bitcoin {
background-image: url("../img/icon-gift.svg");
background-image: url("../img/icon-bitcoin.svg");
}
.icon-bitpay-card {
background-image: url("../img/icon-bitpay.svg");
background-image: url("../img/icon-card.svg");
background-color: #1e3186;
}
.icon-gift {
background-image: url("../img/icon-gift.svg");