increase modal width by 20px, fixes #709

ui/js/modal/modalCreditIntro/view.jsx

@@ -4,8 +4,7 @@ import { CreditAmount, CurrencySymbol } from "component/common";
 import Link from "component/link/index";
 
 const ModalCreditIntro = props => {
-  const { closeModal, currentBalance, totalRewardValue, verifyAccount } = props;
-
+  const { closeModal, totalRewardValue, verifyAccount } = props;
   const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
 
   return (

ui/scss/_vars.scss

@@ -128,6 +128,7 @@ $text-color: #000;
   --card-small-width: $spacing-vertical * 10;
 
   /* Modal */
+  --modal-width: 420px;
   --modal-bg: var(--color-bg);
   --modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
   --modal-border: 1px solid rgb(204, 204, 204);

ui/scss/component/_modal.scss

@@ -29,7 +29,7 @@
   border-radius: 4px;
   padding: $spacing-vertical;
   box-shadow: var(--box-shadow-layer);
-  max-width: 400px;
+  max-width: var(--modal-width);
 
   word-break: break-word;
 }
@@ -70,13 +70,13 @@
 
 .error-modal {
   max-width: none;
-  width: 400px;
+  width: var(--modal-width);
 }
 .error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/
   border: 1px solid var(--input-border-color);
   padding: 8px;
   list-style: none;
   max-height: 400px;
-  max-width: 400px;
+  max-width:  var(--modal-width);
   overflow-y: hidden;
 }