modalSend

fix the paddings
fix the fee buttons
remove estimation fee button
add opacity:0 to disabled state

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

@@ -40,16 +40,31 @@
           </div> -->
           <div class="form-group clearfix">
             <label for="feeSlider">Fee</label>
-            <input class="form-control col text-center" formControlName="fee" type="range" min="1" max="3" value="2">
+            <!-- fee buttons -->
+              <div class="radioButtons" data-toggle="buttons">
+                <label class="btn btn-outline-danger">
+                  <input type="radio" name="options" id="option1" autocomplete="off"> Slow
+                </label>
+                <label class="btn btn-outline-warning">
+                  <input type="radio" name="options" id="option2" autocomplete="off" checked> Medium
+                </label>
+                <label class="btn btn-outline-success">
+                  <input type="radio" name="options" id="option3" autocomplete="off"> Fast
+                </label>
+              </div>
+              <p>Here is the line to put the fee estimation.</p>
+            <!-- /fee buttons -->
           </div>
             <div class="form-group clearfix">
             <label for="walletPassword">Wallet Password</label>
             <input type="password" class="form-control form-control-success" formControlName="password" id="walletPassword" placeholder="Please enter your wallet password.">
             <div *ngIf="formErrors.password" class="form-control-feedback">{{formErrors.password}}</div>
           </div>
+          <!--
           <button type="button" class="btn btn-link" (click)="buildTransaction()" [disabled]="!sendForm.valid">Estimate Fee</button>
           <label *ngIf="estimatedFee">Estimated Fee: </label>
           <label *ngIf="estimatedFee">{{ estimatedFee | coinNotation }} {{ coinUnit }}</label>
+          -->
         </form>
         <!-- /form-->
       </div>

Breeze.UI/src/scss/_buttons.scss

@@ -30,7 +30,7 @@
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
-    opacity: 1;
+    opacity: 0;
     @include box-shadow(none);
   }
 

Breeze.UI/src/scss/_custom.scss

@@ -253,20 +253,24 @@ em {
   }
 }
 #modalSend {
-  label {
+  label {font-size: .825em;}
+  .float-right {a {text-decoration: underline; &:hover {text-decoration: none;}}}
+  // Fee Buttons
+  .radioButtons {
+    .btn {
+      border-radius: 50px;
+    }
+  }
+  p {
     color: $blue;
-    text-transform: uppercase;
     font-size: .825em;
+    font-style: italic;
   }
-  .float-right {a {text-decoration: underline; &:hover {text-decoration: none;}}}
+  .btn-link {padding: 0 !important;}
 }
 #modalReceive {
   .modal-body {padding: 0 3em;}
-  label {
-    color: $blue;
-    text-transform: uppercase;
-    font-size: .825em;
-  }
+  label {font-size: .825em;}
 }
 #modalDetail, #modalCheck, #modalSettings {
   .blockLabel {

Breeze.UI/src/scss/_modal.scss

@@ -91,7 +91,7 @@
 .modal-title {
   text-align: center;
   line-height: $modal-title-line-height;
-  margin-bottom: 2em;
+  margin-bottom: 1em;
   color: $blue;
   font-size: 1em;
 }

Breeze.UI/src/scss/_variables.scss

@@ -798,8 +798,8 @@ $badge-pill-border-radius:    10rem !default;
 // Padding applied to the modal body
 $modal-inner-padding:         3em !default;
 
-$modal-dialog-margin:         30px !default;
-$modal-dialog-sm-up-margin-y: 30px !default;
+$modal-dialog-margin:         20px !default;
+$modal-dialog-sm-up-margin-y: 20px !default;
 
 $modal-title-line-height:     $line-height-base !default;
 

Breeze.UI/src/styles.css

@@ -185,7 +185,7 @@ em.display-4 {
 }
 
 .jumbotron .lead small {
-  font-size: .75em;
+  font-size: .5em;
   padding-left: .5em;
   font-weight: 400;
 }
@@ -297,8 +297,6 @@ em.display-4 {
 }
 
 #modalSend label {
-  color: #7385A0;
-  text-transform: uppercase;
   font-size: .825em;
 }
 
@@ -310,13 +308,25 @@ em.display-4 {
   text-decoration: none;
 }
 
+#modalSend .radioButtons .btn {
+  border-radius: 50px;
+}
+
+#modalSend p {
+  color: #7385A0;
+  font-size: .825em;
+  font-style: italic;
+}
+
+#modalSend .btn-link {
+  padding: 0 !important;
+}
+
 #modalReceive .modal-body {
   padding: 0 3em;
 }
 
 #modalReceive label {
-  color: #7385A0;
-  text-transform: uppercase;
   font-size: .825em;
 }
 
@@ -3256,7 +3266,7 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
 
 .btn.disabled, .btn:disabled {
   cursor: not-allowed;
-  opacity: 1;
+  opacity: 0;
 }
 
 .btn:active, .btn.active {
@@ -5757,7 +5767,7 @@ button.close {
 .modal-dialog {
   position: relative;
   width: auto;
-  margin: 30px;
+  margin: 20px;
 }
 
 .modalBg {
@@ -5802,7 +5812,7 @@ button.close {
 .modal-title {
   text-align: center;
   line-height: 1.5;
-  margin-bottom: 2em;
+  margin-bottom: 1em;
   color: #7385A0;
   font-size: 1em;
 }
@@ -5839,7 +5849,7 @@ button.close {
 @media (min-width: 576px) {
   .modal-dialog {
     max-width: 500px;
-    margin: 30px auto;
+    margin: 20px auto;
   }
   .modal-sm {
     max-width: 360px;