Merge pull request #358 from OasisDEX/fix-ui-myallowance-modal

- removed confusing disable allowance  paragraph and fixed styling

frontend/client/style/style.scss

@@ -1100,10 +1100,6 @@ table {
   }
 }
 
-.allowance-input-table {
-  margin-bottom: 20px;
-}
-
 .allowance-current {
   display: inline-block;
   vertical-align: middle;
@@ -1265,6 +1261,11 @@ table {
       padding-left: 13px;
     }
   }
+
+  .input-section.allowance {
+    margin-top: 10px;
+    margin-bottom: 25px;
+  }
 }
 
 .bordered {
@@ -2603,16 +2604,46 @@ span.right {
   text-transform: uppercase;
 }
 
+
 .modal-body {
   .my-allowance-instructions {
-    background: #FBFAF9;
+    margin-top: 20px;
+    margin-bottom: 15px;
+    border: 1px solid #E5E9EB;
     border-radius: 8px;
-    padding: 20px;
+    padding: 20px 30px 20px 30px;
     div.my-allowance {
-      p {
-        color: rgba(34, 34, 40, 0.68);
+
+      div.allowance-text {
+        text-align: start;
+        color: rgba(34, 34, 40, 0.50);
+        font-weight: 400;
+      }
+
+      img.allowance-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
       }
+
     }
+
+
+    div.my-allowance.row {
+      display: flex;
+      flex-flow: row wrap;
+
+      &::before {
+        display: block;
+      }
+    }
+
+
+    div.my-allowance.row.grant {
+      margin-bottom: 10px;
+    }
+
   }
   th {
     text-transform: uppercase;

frontend/imports/ui/client/widgets/newallowance.html

@@ -11,17 +11,19 @@ <h4 class="modal-title">
         </div>
         <div class="modal-body">
           <div class="my-allowance-instructions">
-            <div class="my-allowance row">
-              <div class="col-xs-1 nplr"><img src="myallowance-personal.svg"></div>
-              <div class="col-xs-11 npr"><p>You need to first grant access to withdraw from your personal account by
-                setting the allowance</p></div>
-
-              <div class="col-xs-1 nplr"><img src="myallowance-maximum.svg"></div>
-              <div class="col-xs-11 npr"><p>Specify the maximum that can be withdrawn. It will decrease each time you
-                place {{#if not isMatchingEnabled}} or fill {{/if}} an order</p></div>
-
-              <div class="col-xs-1 nplr"><img src="myallowance-disable.svg"></div>
-              <div class="col-xs-11 npr"><p>Disable it by setting the allowance to 0</p></div>
+            <div class="my-allowance row text-center grant">
+              <div class="col-xs-1 nplr"><img class="allowance-icon" src="myallowance-personal.svg"></div>
+              <div class="col-xs-11 npr">
+                <div class="allowance-text">You need to first grant access to withdraw from your personal account by
+                  setting the allowance</div>
+              </div>
+            </div>
+            <div class="my-allowance row text-center">
+              <div class="col-xs-1 nplr"><img class="allowance-icon" src="myallowance-maximum.svg"></div>
+              <div class="col-xs-11 npr">
+                <div class="allowance-text">Specify the maximum that can be withdrawn. It will decrease each time you
+                  place {{#if not isMatchingEnabled}} or fill {{/if}} an order</div>
+              </div>
             </div>
           </div>
           <form>
@@ -52,7 +54,7 @@ <h4 class="modal-title">
               </table>
             </div>
           </form>
-          <section class="input-section">
+          <section class="input-section allowance">
             <table class="allowance-input-table bordered">
               <tbody>
               <tr class="row-input-line set-allowance">