Merge pull request #70 from stratisproject/ui

Add pre alpha styling

Breeze.UI/src/app/login/login.component.html

-<div class="container">
+<div class="container col-md-8 offset-md-2">
   <div class="row">
     <div class="col">
       <h1>Welcome to Breeze</h1>
@@ -13,9 +13,8 @@
             <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
           </select>
         </div>
-        <p>Please enter your password to decrypt your wallet</p>
         <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">
           <div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
         </div>

Breeze.UI/src/app/setup/create/create.component.css

+#mnemonic {
+  margin-top: 30px;
+}

Breeze.UI/src/app/setup/create/create.component.html

-<div class="container">
+<div class="container col-md-8 offset-md-2">
   <div class="row">
     <div class="col">
-      <h1>Please create a new wallet.</h1>
+      <h1>Please create a new wallet</h1>
     </div>
   </div>
   <div class="row">
@@ -25,20 +25,16 @@
           </select>
         </div>
         <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>
         </div>
       </form>
     </div>
   </div>
   <div class="row">
-    <div class="col">
+    <div class="col" id="mnemonic">
       <label>Mnemonic:</label>
       <label>{{responseMessage}}</label>
     </div>
   </div>
-  <div class="row">
-    <div class="col">
-      <button type="button" class="btn" (click)="onBackClicked()">Back</button>
-    </div>
-  </div>
 </div>

Breeze.UI/src/app/setup/recover/recover.component.css

+#buttons {
+  margin-top: 30px;
+}

Breeze.UI/src/app/setup/recover/recover.component.html

-<div class="container">
+<div class="container col-md-8 offset-md-2">
   <div class="row">
     <div class="col">
       <h1>Recover your wallet</h1>
@@ -38,11 +38,9 @@
           <label>Creation date:</label>
           <material-datepicker [(date)]="creationDate"></material-datepicker>
         </div>
-        <div class="form-group">
-          <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn">Recover Wallet</button>
-        </div>
-        <div class="form-group">
-          <button type="button" class="btn" (click)="onBackClicked()">Back</button>
+        <div class="form-group" id="buttons">
+          <button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
+          <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button>
         </div>
       </form>
     </div>

Breeze.UI/src/app/setup/setup.component.css

+#backButton {
+  margin-top: 50px;
+  margin-bottom: 100px;
+}

Breeze.UI/src/app/setup/setup.component.html

-<div class="container">
+<div class="container col-md-8 offset-md-2">
   <div class="row">
     <div class="col">
-      <h1>Welcome to Breeze.</h1>
+      <h1>Welcome to Breeze</h1>
     </div>
   </div>
   <div class="row">
     <div vlass="col">
       <p>
         If you haven't used Breeze before, please create a new wallet.
+      <br>
+      <button (click)="onCreateClicked()" class="btn">Create</button>
       </p>
-      <p>
+      <p style="margin-top: 30px;">
         Users who have previously used Breeze, can choose to recover their wallet.
+      <br>
+      <button (click)="onRecoverClicked()" class="btn">Recover</button>
       </p>
     </div>
   </div>
   <div class="row">
     <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>
     </div>
     <div class="col">
       <button (click)="onRecoverClicked()" class="btn">Recover</button>
-    </div>
-    <div class="col">
-      <button (click)="onBackClicked()" class="btn">Back</button>
-    </div>
+    </div>-->
   </div>
 </div>
 

Breeze.UI/src/app/wallet/dashboard/dashboard.component.css

@@ -3,8 +3,9 @@
 }
 
 #dashboard {
-  padding-top: 50px !important;
+  /*padding-top: 50px !important;*/
   padding-left: 100px !important;
+  padding-right: 100px !important;
   border: 2px solid;
   border-color: #D5E3F0;
   background-color: #DAE6F2;

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

 <div class="container nopadding">
-  <div class="row nopadding" id="dashboard">
-    <div class="col">
-      <div>Active Balance</div>
-      <div>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div>
-      <div>Unconfirmed Balance: {{unconfirmedBalance | coinNotation | coinAbbreviation}}</div>
+  <div class="d-flex flex-row align-items-center nopadding" id="dashboard">
+    <div class="d-flex flex-column">
+      <div class="p">Active Balance</div>
+      <div class="p">Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div>
+      <div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation | coinAbbreviation}}</div>
     </div>
-    <div class="col">
-      <div>Current Value</div>
-      <div>Over 9000</div>
+    <div class="d-flex flex-column">
+      <!--<div>Current Value</div>
+      <div>Over 9000</div>-->
     </div>
-    <div class="col">
+    <div class="d-flex flex-column ml-auto">
       <div>
         <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>

Breeze.UI/src/app/wallet/history/history.component.css

+#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;
+}

Breeze.UI/src/app/wallet/history/history.component.html

 <div class="container">
-  <div class="row">
+  <div class="row" id="transactions">
     <div class="col">
-      <table *ngIf="transactions; else noTransactions">
+      <table class="transactionsTable" *ngIf="transactions; else noTransactions">
         <thead>
           <th>Type</th>
           <th>Amount</th>

Breeze.UI/src/app/wallet/menu/menu.component.css

 .navbar {
   height: 60px;
   width: 100%;
-  margin: 0;
-  padding: 0;
+  padding-left: 85px;
 }
 
 .nav-link {

Breeze.UI/src/app/wallet/receive/receive.component.html

@@ -12,7 +12,7 @@
         </thead>
         <tr>
           <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>
       </table>
     </div>

Breeze.UI/src/styles.css

@@ -6,7 +6,29 @@
 
 /* Temporary min td with */
 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 {
@@ -25,13 +47,6 @@ td {
     float: none;
 }
 
-.btn {
-  font-family: "Lato Black";
-  color: white;
-  background-color: #20B9FF;
-  border-radius: 25px;
-}
-
 .row {
   padding: 0;
   margin: 0;