Skip to content
Permalink
Browse files

Implement zero state

  • Loading branch information...
willhay committed Jul 6, 2018
1 parent a804dee commit d47e1ac1250aab0849e936bb9082998f5e5b7a71
@@ -6,4 +6,4 @@
"editor.detectIndentation": false
// "typescript.implementationsCodeLens.enabled": true
// "typescript.referencesCodeLens.enabled": true
}
}
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="142px" height="88px" viewBox="0 0 142 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Ghost - Straight Face</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Send" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Send---Initial-(No-funds)" transform="translate(-119.000000, -163.000000)">
<g id="Ghost---Straight-Face" transform="translate(119.000000, 163.000000)">
<path d="M142,71.5979797 C142,49.7286194 110.212217,32 71,32 C31.7877828,32 0,49.7286194 0,71.5979797 C0,93.4673401 142,93.4673401 142,71.5979797 Z" id="Oval-2" fill="#E7E7E7" opacity="0.378571429"></path>
<g id="ghost" transform="translate(44.000000, 0.000000)" fill-rule="nonzero">
<path d="M46.0610653,72 L36.4247017,66.3421657 L27.5592472,72 L17.3447017,66.3421657 L8.09379261,72 C7.11730295,72 0,65.6971035 0,64.8999447 L0,21.6333149 C0,9.70470507 11.887052,0 26.5,0 C41.112948,0 53,9.70470507 53,21.6333149 L53,64.8999447 C53,65.4313839 50.6870218,67.798069 46.0610653,72 Z" id="Shape" fill="#E7E7E7"></path>
<path d="M36.6970046,47.1428571 L15.4481567,47.1428571 C14.469417,47.1428571 13.6774194,46.1844214 13.6774194,45 C13.6774194,43.8155786 14.469417,42.8571429 15.4481567,42.8571429 L36.6970046,42.8571429 C37.6757443,42.8571429 38.4677419,43.8155786 38.4677419,45 C38.4677419,46.1844214 37.675762,47.1428571 36.6970046,47.1428571 Z" id="Shape" fill="#444444"></path>
<ellipse id="Oval" fill="#444444" cx="13.6774194" cy="26.5714286" rx="5.12903226" ry="5.14285714"></ellipse>
<ellipse id="Oval" fill="#444444" cx="37.6129032" cy="26.5714286" rx="5.12903226" ry="5.14285714"></ellipse>
</g>
</g>
</g>
</g>
</svg>
@@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="124px" height="77px" viewBox="0 0 124 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>ghost</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Activity" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Wallet---Activity-(Empty-State)" transform="translate(-126.000000, -270.000000)">
<g id="ghost" transform="translate(126.000000, 270.000000)">
<path d="M124,62.6482323 C124,43.512542 96.2416545,28 62,28 C27.7583455,28 0,43.512542 0,62.6482323 C0,81.7839226 124,81.7839226 124,62.6482323 Z" id="Oval-2" fill="#E7E7E7" opacity="0.378571429"></path>
<g transform="translate(38.000000, 0.000000)" fill-rule="nonzero">
<path d="M39.9775284,63 L31.613892,58.049395 L23.9193466,63 L15.053892,58.049395 L7.02480114,63 C6.1772818,63 0,57.4849656 0,56.7874516 L0,18.9291505 C0,8.49161693 10.317064,0 23,0 C35.682936,0 46,8.49161693 46,18.9291505 L46,56.7874516 C46,57.2524609 43.9925095,59.3233104 39.9775284,63 Z" id="Shape" fill="#E7E7E7"></path>
<path d="M16.3225806,39 L16.3225806,45.375 C16.3225806,48.8957691 19.1460263,51.75 22.6290323,51.75 C26.1120382,51.75 28.9354839,48.8957691 28.9354839,45.375 L28.9354839,39 L16.3225806,39 Z" id="Shape" fill="#FA645A"></path>
<path d="M31.8502304,41.25 L13.4078341,41.25 C12.558362,41.25 11.8709677,40.4113688 11.8709677,39.375 C11.8709677,38.3386313 12.558362,37.5 13.4078341,37.5 L31.8502304,37.5 C32.6997026,37.5 33.3870968,38.3386313 33.3870968,39.375 C33.3870968,40.4113688 32.6997179,41.25 31.8502304,41.25 Z" id="Shape" fill="#444444"></path>
<ellipse id="Oval" fill="#444444" cx="11.8709677" cy="23.25" rx="4.4516129" ry="4.5"></ellipse>
<ellipse id="Oval" fill="#444444" cx="32.6451613" cy="23.25" rx="4.4516129" ry="4.5"></ellipse>
</g>
</g>
</g>
</g>
</svg>
@@ -44,4 +44,4 @@ action-sheet {
transition: transform $transition-duration cubic-bezier(0.4, 0, 1, 1);
transform: translateY(calc(100% + 8px));
}
}
}
@@ -83,4 +83,4 @@ editable-item {
.no-border.item-block .item-inner {
border-bottom-color: transparent;
}
}
}
@@ -1,4 +1,4 @@
expandable-header {
display: block;
overflow: hidden;
}
}
@@ -32,4 +32,4 @@ info-sheet {
}
}
}
}
}
@@ -26,4 +26,4 @@
font-size: 20px;
font-weight: 400;
}
}
}
@@ -27,7 +27,7 @@
</div>
</div>

<div *ngIf="wallet && wallet.isComplete() && wallet.needsBackup" class="message-container">
<div class="prompt-user" *ngIf="wallet && wallet.isComplete() && wallet.needsBackup">
<div class="title-icon">
<img src="assets/img/single-folded-content.svg" />
</div>
@@ -47,7 +47,7 @@ page-receive {
@media (min-height: 525px) {
font-size: 12px;
}
>img {
> img {
vertical-align: middle;
margin-right: 5px;
width: 16px;
@@ -57,7 +57,7 @@ page-receive {
.aclass {
@include center;
}
.aclass>img {
.aclass > img {
filter: grayscale(100%);
width: 180px;
@media (max-height: 500px) {
@@ -103,7 +103,7 @@ page-receive {
.wallet-text {
padding-left: 24px;
font-size: 1.7rem;
>span {
> span {
font-size: 12.5px;
font-weight: 300;
}
@@ -186,26 +186,6 @@ page-receive {
transform: rotate(-360deg);
}
}
.title-info {
font-weight: 600;
color: black;
font-size: 21px;
margin: 30px;
}
.subtitle-info {
color: rgb(74, 74, 74);
width: 77%;
max-width: 310px;
font-size: 17px;
margin-bottom: 55px;
}
.title-icon {
img {
width: 100%;
}
width: 25%;
max-width: 100px;
}
.wallet-details {
background: linear-gradient(#ececec, white);
height: 100%;
@@ -287,4 +267,4 @@ page-receive {
content: '\f1c8';
}
}
}
}
@@ -14,7 +14,23 @@

<ion-content no-bounce>

<div class="amount-wrapper">
<div class="prompt-user" *ngIf="!wallet.status.balance.availableBalance">
<div class="title-icon larger-icon">
<img src="assets/img/ghost-straight-face.svg" />
</div>
<div class="title-info">
<span translate>Mmm...</span>
</div>
<div class="subtitle-info">
<span translate>It appears that you do not have any money to spend.</span>
</div>
<button ion-button class="button-standard" (click)="goToBackup()">
{{'Add funds' | translate}}
</button>
</div>


<div *ngIf="wallet.status.balance.availableBalance" class="amount-wrapper">

<div class="amount-header-margin">
<div class="amount-header">
@@ -112,4 +112,4 @@ page-amount {
}
}
}
}
}
@@ -128,8 +128,17 @@

<!-- Transactions -->

<div class="middle-message" *ngIf="showNoTransactionsYetMsg && !updateStatusError" translate>
No transactions yet

<div class="prompt-user activity-fix" *ngIf="showNoTransactionsYetMsg && !updateStatusError">
<div class="title-icon larger-icon">
<img src="assets/img/ghost-tongue-out.svg" />
</div>
<div class="title-info">
<span translate>It's a ghost town in here</span>
</div>
<div class="subtitle-info">
<span translate>If you have funds stored on a website then you should move them into a secure wallet... like this one!</span>
</div>
</div>

<div class="middle-message" *ngIf="txHistory && !txHistory[0] && updateTxHistoryError" translate>
@@ -1,30 +1,25 @@
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: '../assets/fonts';
$font-family-base: 'Roboto';

// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;

@import 'ionic.globals';

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/theming/overriding-ionic-variables/

// Override - Homogenized ionic component styles
@import 'overrides';
@import 'mixins';
@import 'modals';

@import 'zero-state';
// Colors
$colors: (
primary: $color-primary,
@@ -38,31 +33,23 @@ $colors: (
grey: #667,
light-grey: #9b9bab
);

// App background color
$background-color: #f5f5f5;

// Item list background color
$list-background-color: #ffffff;

// Refresh color
$refresher-icon-color: color($colors, primary);
$refresher-icon-font-size: 14px;
$refresher-height: 140px;

// Toolbar
$toolbar-text-color: color($colors, light);

// Main color
$text-color: color($colors, dark);

// Border light
$list-border-color: color($colors, light);

// Toolbar
$toolbar-ios-title-text-color: color($colors, light);
$toolbar-md-title-text-color: color($colors, light);

// Onboarding colors
$onboarding-gradient-top-color: $toolbar-background;
$onboarding-gradient-bottom-color: $color-secondary-dark;
@@ -71,94 +58,73 @@ $onboarding-background-image: linear-gradient(
$onboarding-gradient-top-color 0%,
$onboarding-gradient-bottom-color 100%
);

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$tabs-ios-background: color($colors, blank);
$tabs-ios-border-color: rgba(0, 0, 0, 0.1);

$item-ios-divider-background: $background-color;
$item-ios-divider-color: color($colors, grey);
$item-ios-padding-top: 16px;
$item-ios-padding-bottom: 16px;
$label-ios-margin-top: 14px;
$label-ios-margin-bottom: 14px;

$list-ios-border-color: color($colors, light);
$list-ios-margin-bottom: 0;
$list-ios-header-font-weight: 700;
$list-ios-header-color: color($colors, dark);

$searchbar-ios-background-color: color($colors, blank);
$searchbar-ios-padding-vertical: 16px;
$searchbar-ios-padding-horizontal: 8px;

$note-ios-color: color($colors, light-grey);

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$item-md-divider-background: $background-color;
$item-md-divider-color: color($colors, grey);
$item-md-padding-top: 16px;
$item-md-padding-bottom: 16px;
$label-md-margin-top: 14px;
$label-md-margin-bottom: 14px;

$searchbar-md-padding-start: 8px;
$searchbar-md-padding-end: 8px;
$searchbar-md-padding-top: 16px;

$list-md-border-color: color($colors, light);
$list-md-header-margin-bottom: 0;
$list-md-margin-bottom: 0;
$list-md-header-color: color($colors, dark);

$note-md-color: color($colors, light-grey);

$alert-md-title-font-size: 16px;
$alert-md-sub-title-font-size: 12.5px;
$alert-md-message-font-size: 12.5px;

$button-md-text-transform: none;

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import 'ionic.theme.default';

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/ionicons/

@import 'ionic.ionicons';

// Fonts
// --------------------------------------------------

@import 'roboto';
@import 'noto-sans';

@font-face {
font-family: 'AmazonEmberDisplay';
src: url(../assets/fonts/AmazonEmberDisplay_Rg.ttf) format('truetype');
}

/* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround.

// Please include a description of the problem solved by the workaround.
// Hide scrollbars on platforms which don't match iOS, Android, or Windows
// (So scroll bars are not visible in Chrome, NW.js, or Electron.)
.platform-core .scroll-content {
@@ -174,6 +140,7 @@ $button-md-text-transform: none;
}

/* Fix iPhone X screen */

ion-footer {
.toolbar {
padding-top: 0rem !important;
Oops, something went wrong.

0 comments on commit d47e1ac

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.