Commit b7a3ae54 authored by dev0tion's avatar dev0tion

Add pre alpha styling

parent c6aa2b69
<div class="container"> <div class="container col-md-8 offset-md-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Welcome to Breeze</h1> <h1>Welcome to Breeze</h1>
...@@ -13,9 +13,8 @@ ...@@ -13,9 +13,8 @@
<option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option> <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
</select> </select>
</div> </div>
<p>Please enter your password to decrypt your wallet</p>
<div class="form-group"> <div class="form-group">
<label>Your password: </label> <label>Please enter your password to decrypt your wallet</label>
<input class="form-control" type="password" formControlName="password" placeholder="Enter password here"> <input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
<div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div> <div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
</div> </div>
......
<div class="container"> <div class="container col-md-8 offset-md-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Please create a new wallet.</h1> <h1>Please create a new wallet</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
...@@ -25,20 +25,16 @@ ...@@ -25,20 +25,16 @@
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
<button type="submit" [disabled]="!createWalletForm.valid" class="btn">Create Wallet</button> <button type="submit" [disabled]="!createWalletForm.valid" class="btn">Create Wallet</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col" id="mnemonic">
<label>Mnemonic:</label> <label>Mnemonic:</label>
<label>{{responseMessage}}</label> <label>{{responseMessage}}</label>
</div> </div>
</div> </div>
<div class="row">
<div class="col">
<button type="button" class="btn" (click)="onBackClicked()">Back</button>
</div>
</div>
</div> </div>
<div class="container"> <div class="container col-md-8 offset-md-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Recover your wallet</h1> <h1>Recover your wallet</h1>
...@@ -38,11 +38,9 @@ ...@@ -38,11 +38,9 @@
<label>Creation date:</label> <label>Creation date:</label>
<material-datepicker [(date)]="creationDate"></material-datepicker> <material-datepicker [(date)]="creationDate"></material-datepicker>
</div> </div>
<div class="form-group"> <div class="form-group" id="buttons">
<button type="submit" [disabled]="!recoverWalletForm.valid" class="btn">Recover Wallet</button> <button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
</div> <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button>
<div class="form-group">
<button type="button" class="btn" (click)="onBackClicked()">Back</button>
</div> </div>
</form> </form>
</div> </div>
......
#backButton {
margin-top: 50px;
margin-bottom: 100px;
}
<div class="container"> <div class="container col-md-8 offset-md-2">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1>Welcome to Breeze.</h1> <h1>Welcome to Breeze</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div vlass="col"> <div vlass="col">
<p> <p>
If you haven't used Breeze before, please create a new wallet. If you haven't used Breeze before, please create a new wallet.
<br>
<button (click)="onCreateClicked()" class="btn">Create</button>
</p> </p>
<p> <p style="margin-top: 30px;">
Users who have previously used Breeze, can choose to recover their wallet. Users who have previously used Breeze, can choose to recover their wallet.
<br>
<button (click)="onRecoverClicked()" class="btn">Recover</button>
</p> </p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<button (click)="onBackClicked()" class="btn btn-outline-secondary" id="backButton">Back</button>
</div>
<!--<div class="col">
<button (click)="onCreateClicked()" class="btn">Create</button> <button (click)="onCreateClicked()" class="btn">Create</button>
</div> </div>
<div class="col"> <div class="col">
<button (click)="onRecoverClicked()" class="btn">Recover</button> <button (click)="onRecoverClicked()" class="btn">Recover</button>
</div> </div>-->
<div class="col">
<button (click)="onBackClicked()" class="btn">Back</button>
</div>
</div> </div>
</div> </div>
......
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
} }
#dashboard { #dashboard {
padding-top: 50px !important; /*padding-top: 50px !important;*/
padding-left: 100px !important; padding-left: 100px !important;
padding-right: 100px !important;
border: 2px solid; border: 2px solid;
border-color: #D5E3F0; border-color: #D5E3F0;
background-color: #DAE6F2; background-color: #DAE6F2;
......
<div class="container nopadding"> <div class="container nopadding">
<div class="row nopadding" id="dashboard"> <div class="d-flex flex-row align-items-center nopadding" id="dashboard">
<div class="col"> <div class="d-flex flex-column">
<div>Active Balance</div> <div class="p">Active Balance</div>
<div>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div> <div class="p">Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div>
<div>Unconfirmed Balance: {{unconfirmedBalance | coinNotation | coinAbbreviation}}</div> <div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation | coinAbbreviation}}</div>
</div> </div>
<div class="col"> <div class="d-flex flex-column">
<div>Current Value</div> <!--<div>Current Value</div>
<div>Over 9000</div> <div>Over 9000</div>-->
</div> </div>
<div class="col"> <div class="d-flex flex-column ml-auto">
<div> <div>
<button (click)="openSendDialog()" class="btn" id="sendButton">Send</button> <button (click)="openSendDialog()" class="btn" id="sendButton">Send</button>
<button (click)="openReceiveDialog()" class="btn" id="receiveButton">Receive</button> <button (click)="openReceiveDialog()" class="btn ml-2" id="receiveButton">Receive</button>
</div> </div>
</div> </div>
</div> </div>
......
#transactions {
margin-top: 10px;
}
.transactionsTable {
border-collapse: separate;
border-spacing: 10px;
}
.transactionsTable tr {
border: 1px solid #D5E3F0;
text-align: left;
border-spacing: 10px;
}
.transactionsTable th {
text-align: left;
border-spacing: 10px;
}
.transactionsTable td {
height: 50px;
vertical-align: center;
}
<div class="container"> <div class="container">
<div class="row"> <div class="row" id="transactions">
<div class="col"> <div class="col">
<table *ngIf="transactions; else noTransactions"> <table class="transactionsTable" *ngIf="transactions; else noTransactions">
<thead> <thead>
<th>Type</th> <th>Type</th>
<th>Amount</th> <th>Amount</th>
......
.navbar { .navbar {
height: 60px; height: 60px;
width: 100%; width: 100%;
margin: 0; padding-left: 85px;
padding: 0;
} }
.nav-link { .nav-link {
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</thead> </thead>
<tr> <tr>
<td>{{ address }}</td> <td>{{ address }}</td>
<td><button class="btn" type="button" ngxClipboard [cbContent]="address" (cbOnSuccess)="isCopied1=true" [class.btn]= "isCopied1">Copy</button> <td><button class="btn btn-outline-primary" type="button" ngxClipboard [cbContent]="address" (cbOnSuccess)="isCopied1=true" [class.btn-outline-primary]="isCopied1">Copy</button>
</tr> </tr>
</table> </table>
</div> </div>
......
...@@ -6,7 +6,29 @@ ...@@ -6,7 +6,29 @@
/* Temporary min td with */ /* Temporary min td with */
td { td {
min-width: 150px; min-width: 100px;
}
h1 {
padding-top: 15px;
padding-bottom: 15px;
color: #444444;
}
button {
font-family: "Lato Black";
color: white;
background-color: #20B9FF;
border-radius: 25px;
}
label {
color: #666666;
}
.form-control::-webkit-input-placeholder
{
color: #BBBBBB;
} }
.content-wrapper { .content-wrapper {
...@@ -25,13 +47,6 @@ td { ...@@ -25,13 +47,6 @@ td {
float: none; float: none;
} }
.btn {
font-family: "Lato Black";
color: white;
background-color: #20B9FF;
border-radius: 25px;
}
.row { .row {
padding: 0; padding: 0;
margin: 0; margin: 0;
......
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