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 diff is collapsed.
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