Commit 57e7842a authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub

Merge pull request #174 from bokobza/master

Merge Design branch
parents a45f6281 eceb78a5
<div *ngIf="loading">Loading...</div>
<div *ngIf="loading">
<div class="login d-flex align-items-center text-center">
<div class="container">
<div class="mb-4">
<svg version="1.1" id="loading" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7
c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="-360 50 50" repeatCount="indefinite"></animateTransform>
</path>
<path d="M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5
L82,35.7z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<!-- /row-->
<div>
<em class="display-4 text-center">Loading the future... </em>
</div>
<!-- /row-->
</div>
<!-- /container-->
</div>
<!-- /login-->
</div>
<router-outlet *ngIf="!loading"></router-outlet>
......@@ -5,7 +5,7 @@
<div *ngIf="hasWallet">
<p class="lead">Please choose the wallet you would like to open</p>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm">
<form class="col-md-6 col-xs-12 text-left" [formGroup]="openWalletForm">
<div class="form-group">
<label class="col-12 row" for="Select">Wallet</label>
<select class="form-control custom-select col-12" formControlName="selectWallet">
......@@ -32,7 +32,7 @@
<p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p>
</ng-template>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-link btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
<button type="button" class="btn btn-linkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
</div>
</div>
<!-- /container-->
......@@ -40,4 +40,3 @@
<!-- /login-->
</section>
<!-- /breeze-->
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
<p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
<form class="col-md-6 col-xs-12 text-left" [formGroup]="createWalletForm">
<!--<div class="form-group has-success">-->
<div class="form-group">
<label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
<div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
<div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
......
<section id="breeze">
<div class="login d-flex align-items-center text-center">
<div class="container">
<p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
<p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3>
<div class="row d-flex justify-content-center">
<form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<form class="col-md-6 col-xs-12 text-left" [formGroup]="recoverWalletForm">
<!--<div class="form-group has-success">-->
<div class="form-group">
<label class="col-12 row" for="walletName">Name</label>
<input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
<div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
<div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
</div>
<div class="form-group">
<label class="col-12 row" for="creationDate">Creation Date (optional)</label>
<material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
<material-datepicker class="form-control col-7" [(date)]="creationDate"></material-datepicker>
</div>
<div class="form-group">
<label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
<input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
<div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
<div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletPassword">Password</label>
<input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
<div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
<div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
</div>
<div class="form-group">
<label class="text-left" for="walletNetwork">Network</label>
......
......@@ -4,15 +4,15 @@
<!--<p class="text-back text-left mb-5 col-6 row">
<button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
</p>-->
<p class="text-back text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
<p class="text-back text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
<h3 class="display-5">Welcome</h3>
<p class="lead">
<p class="lead mb-6">
If you would like to create a new wallet, please click Create. <br/>
When you have used Breeze before, you can click Restore to recover your wallet.
</p>
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
<button type="button" class="btn btn-linkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
<button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
</div>
</div>
<!-- /container-->
......
......@@ -63,7 +63,7 @@
<!-- /card-->
</div>
</div>
<ng-template #noTransactions class="text-muted">Looks like you haven't made any transactions yet</ng-template>
<ng-template #noTransactions><em class="muted">Looks like you haven't made any transactions yet.</em></ng-template>
</section>
<!-- /TRANSACTIONS -->
<status-bar></status-bar>
......
......@@ -37,7 +37,7 @@
</div>
<!-- /card-->
<div>
<ng-template #noTransactions class="text-muted">Looks like you haven't made any transactions yet.</ng-template>
<ng-template #noTransactions><em class="muted">Looks like you haven't made any transactions yet.</em></ng-template>
</div>
</section>
<!-- /TRANSACTIONS -->
......
<div id="modalLogout" tabindex="-1" role="dialog" aria-labelledby="modal_logout" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modalBg" role="document">
<div>
<div class="modal-header">
<div class="bubble"><i class="icon-download"></i></div>
......@@ -8,11 +8,11 @@
<h5 class="modal-title text-uppercase" id="modalReceive">Logout</h5>
<form>
<div class="form-group clearfix">
<label class="float-left">Are you sure you want to logout?</label>
<p class="text-muted text-center">Are you sure you want to logout?</p>
</div>
<div>
<button type="button" class="btn btn-lg btn-primary float-left" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
<button type="button" class="btn btn-lg btn-primary float-right" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
<div class="text-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
<button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
</div>
<br>
</form>
......
<div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modalBg" role="document">
<div>
<div class="modal-header">
<div class="bubble"><i class="icon-download"></i></div>
......
<div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modalBg" role="document">
<div>
<div class="modal-header">
<div class="bubble"><i class="icon-upload"></i></div>
......
<div class="status">
<ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
<li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li>
<li class="list-inline-item"><i class="icon-syncr text-success"></i></li>
<li class="list-inline-item">{{ percentSynced }}</li>
<li class="list-inline-item"><i class="icon-earth text-success"></i></li>
<li class="list-inline-item ml-2"><i class="icon-earth text-info"></i></li>
<li class="list-inline-item">{{ connectedNodes }}</li>
</ul>
</div>
<div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modalBg" role="document">
<div>
<div class="modal-header">
<div class="bubble"><i class="icon-block"></i></div>
......@@ -8,11 +8,11 @@
<h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Type</li>
<li class="list-inline-item col-9 blockText">{{ transaction.type }}</li>
<li class="list-inline-item col-9 blockText text-capitalize">{{ transaction.type }}</li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Amount</li>
<li class="list-inline-item col-9 blockText"><strong class="text-success">{{transaction.amount | coinNotation }}</strong></li>
<li class="list-inline-item col-9 blockText text-success">{{transaction.amount | coinNotation }}</li>
</ul>
<!--<ul class="list-inline row">
<li class="list-inline-item col blockLabel">From</li>
......@@ -20,15 +20,15 @@
</ul>-->
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Date</li>
<li class="list-inline-item col-9 blockText"><small>{{ transaction.timestamp * 1000 | date:'medium' }}</small></li>
<li class="list-inline-item col-9 blockText">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Block</li>
<li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li>
</ul>
<ul class="list-inline row">
<li class="list-inline-item col blockLabel">Transaction ID</li>
<li class="list-inline-item col-9 blockText blockID"><code>{{ transaction.id }}</code></li>
<li class="list-inline-item col blockLabel my-3">Transaction ID</li>
<li class="list-inline-item col-10 blockID"><code>{{ transaction.id }}</code></li>
<span class="float-right"><a ngxClipboard [cbContent]="transaction.id" (click)="onCopiedClick()">copy</a></span>
<span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
</ul>
......
......@@ -8,9 +8,7 @@ a, button {&:hover {cursor: pointer !important;}}
code {color: $spacegray !important;}
.form-control::-webkit-input-placeholder { color: $input-color-placeholder; } /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: $input-color-placeholder; } /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: $input-color-placeholder; } /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: $input-color-placeholder; } /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: $input-color-placeholder; } /* Microsoft Edge */
// button
.twitter {
......@@ -30,16 +28,47 @@ code {color: $spacegray !important;}
}
}
// loading
#loading {
width: 150px;
height: 150px;
display:inline-block;
fill: $darkgray !important;
}
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
em {
&.display-4 {
font-size: 1.6em;
color: $darkgray;
font-weight: 400;
padding-right: 5px;
border-right: .1em solid $blue;
white-space: nowrap;
-webkit-animation: blink-caret .5s step-end infinite alternate;
}
}
// datepicker
.datepicker__input {
border-color: transparent !important;
padding: 0 !important;
text-align: left;
color: $input-color !important;
width: 100%;
text-align: center;
&::-webkit-input-placeholder { color: $input-color-placeholder; } /* WebKit, Blink, Edge */
}
// container
#content {
width: 100%;
position: relative;
padding-left: 70px;
padding: 0 0 70px 70px;
}
// sidebar
#sidebar {
z-index: 1000;
z-index: 1035;
position: fixed;
width: 70px;
height: 100%;
......@@ -65,6 +94,7 @@ code {color: $spacegray !important;}
}
&:hover {
opacity: .8;
cursor: pointer !important;
.bar {opacity: 0;}
}
img {width: 42px;}
......@@ -91,6 +121,9 @@ code {color: $spacegray !important;}
}
}
// NAVBAR
#navbarBreeze {}
// jumbotron
.jumbotron {
h5 {
......@@ -116,6 +149,8 @@ code {color: $spacegray !important;}
// transactions
#transaction {
padding-top: 2em;
.muted {opacity: .5;}
h5 {
font-size: .85em;
color: $gray-dark;
......@@ -144,7 +179,7 @@ code {color: $spacegray !important;}
// status box
.status {
background: $white;
width: 80px;
width: auto;
height: 40px;
border: 1px solid #DBDBDB;
box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
......@@ -153,29 +188,33 @@ code {color: $spacegray !important;}
bottom: 2%;
right: 2%;
text-align: center;
ul {transform: translateY(50%) translateX(15%);}
ul {
transform: translateY(50%) translateX(0);
display: inline-block;
position: relative;
padding: 0 2em;
}
li {
font-size: .9em;
position: relative;
padding: 0 8px;
float: left;
margin-right: 4px;
.text-info {color: $gray-dark !important;}
&.pending {
i {
font-size: 1.3em;
position: absolute;
font-size: .9em;
color: $brand-warning;
animation: spin 4s linear infinite;
}
}
&.statusOK {
i {
color: $brand-success;
font-size: 1.3em;
font-size: .9em;
position: absolute;
}
}
}
}
@keyframes spin {100%{transform:rotate(360deg);}}
// modal
.modal-header {
......@@ -439,8 +478,9 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
text-transform: uppercase;
}
.lead {
font-size: 1.25em;
font-size: 1.15em;
color: $blue;
font-weight: 400;
line-height: 1.25em;
margin: 2em 0;
}
......@@ -453,7 +493,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
text-decoration: underline;
&:hover {
text-decoration: none;
color: lighten($darkgray,20%);
color: lighten($darkgray,10%);
}
}
form {margin-bottom: 4em;}
......
......@@ -40,19 +40,17 @@
src: url("./assets/fonts/Lato-Black.ttf") format("truetype")
}
// icons
@font-face {
font-family: 'icon';
src: url('./assets/fonts/icon.eot?uu062v');
src: url('./assets/fonts/icon.eot?uu062v#iefix') format('embedded-opentype'),
url('./assets/fonts/icon.ttf?uu062v') format('truetype'),
url('./assets/fonts/icon.woff?uu062v') format('woff'),
url('./assets/fonts/icon.svg?uu062v#icomoon') format('svg');
src: url('./assets/fonts/icon.eot?qz0v16');
src: url('./assets/fonts/icon.eot?qz0v16#iefix') format('embedded-opentype'),
url('./assets/fonts/icon.ttf?qz0v16') format('truetype'),
url('./assets/fonts/icon.woff?qz0v16') format('woff'),
url('./assets/fonts/icon.svg?qz0v16#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icon' !important;
......@@ -68,19 +66,6 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-stratis:before {
content: "\e900";
}
.icon-syncr:before {
content: "\e902";
}
.icon-bitcoin:before {
content: "\e904";
}
.icon-block:before {
content: "\e92e";
}
.icon-coin-dollar:before {
content: "\e93b";
}
......@@ -90,23 +75,80 @@
.icon-coin-pound:before {
content: "\e93d";
}
.icon-database:before {
.icon-coin-yen:before {
content: "\e93e";
}
.icon-bell:before {
content: "\e951";
}
.icon-download:before {
content: "\e960";
}
.icon-upload:before {
content: "\e961";
}
.icon-coin:before {
content: "\e964";
}
.icon-settings:before {
.icon-lock:before {
content: "\e98f";
}
.icon-unlocked:before {
content: "\e990";
}
.icon-cog:before {
content: "\e994";
}
.icon-download:before {
.icon-bin:before {
content: "\e9ac";
}
.icon-switch:before {
content: "\e9b6";
}
.icon-cloud:before {
content: "\e9c1";
}
.icon-cloud-download:before {
content: "\e9c2";
}
.icon-upload:before {
.icon-cloud-upload:before {
content: "\e9c3";
}
.icon-cancel-circle:before {
content: "\ea0d";
.icon-cloud-check:before {
content: "\e9c4";
}
.icon-download2:before {
content: "\e9c5";
}
.icon-upload2:before {
content: "\e9c6";
}
.icon-download3:before {
content: "\e9c7";
}
.icon-upload3:before {
content: "\e9c8";
}
.icon-sphere:before {
content: "\e9c9";
}
.icon-earth:before {
content: "\e9ca";
}
.icon-link:before {
content: "\e9cb";
}
.icon-circle-up:before {
content: "\ea41";
}
.icon-circle-right:before {
content: "\ea42";
}
.icon-checkmark2:before {
content: "\ea11";
.icon-circle-down:before {
content: "\ea43";
}
.icon-circle-left:before {
content: "\ea44";
}
.icon-checkbox-checked:before {
content: "\ea52";
......@@ -120,3 +162,15 @@
.icon-radio-unchecked:before {
content: "\ea56";
}
.icon-block:before {
content: "\eae8";
}
.icon-stratis:before {
content: "\e900";
}
.icon-syncr:before {
content: "\e1";
}
.icon-bitcoin:before {
content: "\e2";
}
.jumbotron {
padding: $jumbotron-padding;
margin-bottom: $jumbotron-padding;
background-color: $jumbotron-bg;
border-top: 1px solid $gray-light;
border-bottom: 1px solid $gray-light;
@include border-radius($border-radius-lg);
......
......@@ -45,14 +45,18 @@
margin: $modal-dialog-margin;
}
// Custom
.modalBg {
background-color: $modal-content-bg;
border: $modal-content-border-width solid $modal-content-border-color;
}
// Actual modal
.modal-content {
position: relative;
display: flex;
flex-direction: column;
background-color: $modal-content-bg;
background-clip: padding-box;
border: $modal-content-border-width solid $modal-content-border-color;
@include border-radius($border-radius-lg);
@include box-shadow($modal-content-xs-box-shadow);
// Remove focus outline from opened modal
......
......@@ -19,8 +19,11 @@
position: relative;
display: flex;
flex-direction: column;
padding: $navbar-padding-y $navbar-padding-x 0 $navbar-padding-x;
padding: 0 $navbar-padding-x 0 70px;
box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.08);
background: $white;
border-bottom: 1px solid $gray-light;
height: auto;
}
......@@ -60,7 +63,7 @@
font-size: .96rem;
letter-spacing: 0.53px;
font-weight: 500;
padding-bottom: 1.25rem;
padding: 1.5rem 0 1.25rem;
}
}
......
......@@ -223,7 +223,7 @@ $container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
xl: 1080px
) !default;
@include _assert-ascending($container-max-widths, "$container-max-widths");
......@@ -619,7 +619,7 @@ $navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-inverse-color: $brand-primary !default;
$navbar-inverse-color: $gray-dark !default;
$navbar-inverse-hover-color: darken($brand-primary, 20%) !default;
$navbar-inverse-active-color: $brand-primary !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default;
......
......@@ -30,22 +30,25 @@ $btn-secondary-border: $gray-light !default;
//
/////////////////////////////
#content {
&.bitcoin {
// NAVBAR
.navbar {
.nav-item {
.nav-link {
color: $gray-dark;
&:hover {color: lighten($brand-primary,20%);}
// NAVBAR
#navbarBreeze {
.navbar-nav {
.nav-item {
.nav-link {
color: $gray-dark;
&:hover {color: lighten($brand-primary,20%);}
&.is-active {
border-bottom: 2px solid $brand-primary !important;
color: $brand-primary !important;
}
&.active {
border-bottom: 2px solid $brand-primary;
.nav-link {color: $brand-primary;}
}
}
}
}
}
}
#content {
&.bitcoin {
// JUMBOTRON
.jumbotron {
......@@ -88,6 +91,9 @@ $btn-secondary-border: $gray-light !default;
i {color: $brand-primary;}
}
}
.modal-dialog {
.badge {margin: 1em 0;}
}
#modalDetail {
a {
color: $link-color;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment