Change to em's

Author: lnbc1QWFyb24

src/components/Modal.svelte

@@ -8,21 +8,27 @@
 
 <style>
   /* === TARGET BY ELEMENT TO ALLOW CUSTOM OVERRIDES TO HAVE ADEQUATE SPECIFICITY ===*/
-
   /* .bn-onboard-modal */
   aside {
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
-    z-index: 10;
+    font-size: 16px;
+    z-index: 99999999;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.3);
   }
 
+  @media screen and (max-width: 420px) {
+    aside {
+      font-size: 14px;
+    }
+  }
+
   /* .bn-onboard-modal-content  */
   section {
     display: block;
@@ -31,20 +37,20 @@
     border-radius: 10px;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
     font-family: "Helvetica Neue";
-    padding: 1.33rem;
+    padding: 1.33em;
     position: relative;
     overflow: hidden;
-    max-width: 36rem;
+    max-width: 36em;
     color: #4a4a4a;
   }
 
   /* .bn-onboard-modal-content-close  */
   div {
-    height: 0.66rem;
+    height: 0.66em;
     position: absolute;
-    padding: 0.8rem;
-    top: 1.33rem;
-    right: 1.33rem;
+    padding: 0.8em;
+    top: 1.33em;
+    right: 1.33em;
     border-radius: 5px;
     transition: background 200ms ease-in-out;
     display: flex;

src/components/ModalHeader.svelte

@@ -9,15 +9,15 @@
   header {
     display: flex;
     align-items: center;
-    margin-bottom: 0.66rem;
+    margin-bottom: 0.66em;
   }
 
   /* .bn-onboard-modal-content-header-icon */
   div {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0.6rem;
+    padding: 0.6em;
     border-radius: 30px;
     background: #eeeeee;
   }
@@ -26,8 +26,8 @@
   h3 {
     font-family: "Helvetica Neue";
     font-weight: bold;
-    font-size: 1.33rem;
-    margin: 0 0 0 0.5rem;
+    font-size: 1.33em;
+    margin: 0 0 0 0.5em;
   }
 </style>
 

src/components/Wallets.svelte

@@ -16,7 +16,9 @@
     flex-flow: row wrap;
     align-items: center;
     list-style-type: none;
-    margin: 1rem 0 0.66rem 0;
+    margin: 1em 0 0.66em 0;
+    max-height: 66vh;
+    overflow-y: scroll;
     padding: 0;
     font-family: "Helvetica Neue";
     line-height: 1.15;

src/elements/Button.svelte

@@ -7,11 +7,11 @@
 <style>
   button {
     background: inherit;
-    font-size: 0.889rem;
+    font-size: 0.889em;
     border: 1px solid #4a90e2;
     border-radius: 40px;
-    padding: 0.55rem 1.4rem;
-    margin-top: 0.33rem;
+    padding: 0.55em 1.4em;
+    margin-top: 0.33em;
     cursor: pointer;
     color: #4a90e2;
     font-family: "Helvetica Neue";

src/elements/IconButton.svelte

@@ -13,10 +13,10 @@
     display: flex;
     align-items: center;
     border: none;
-    margin: 0.33rem 0;
+    margin: 0.33em 0;
     background: inherit;
-    width: 18rem;
-    padding: 0.625rem 1.25rem;
+    width: 18em;
+    padding: 0.625em 1.25em;
     transition: box-shadow 150ms ease-in-out, background 200ms ease-in-out;
     border-radius: 40px;
     cursor: pointer;
@@ -49,9 +49,8 @@
   }
 
   span {
-    margin-left: 0.66rem;
+    margin-left: 0.66em;
     font-weight: bold;
-    font-size: 1rem;
     text-align: left;
   }
 

src/elements/IconDisplay.svelte

@@ -13,21 +13,20 @@
     margin: 0;
     background: inherit;
     padding: 0;
-    width: 18rem;
+    width: 18em;
     border-radius: 40px;
     color: inherit;
   }
 
   img {
     width: auto;
-    height: 3rem;
+    height: 3em;
   }
 
   span {
-    margin-left: 0.66rem;
+    margin-left: 0.66em;
     font-weight: bold;
     opacity: 0.7;
-    font-size: 1rem;
     text-align: left;
   }
 </style>

src/elements/Spinner.svelte

@@ -2,15 +2,15 @@
   .bn-onboard-loading {
     display: inline-block;
     position: relative;
-    width: 2rem;
-    height: 2rem;
+    width: 2em;
+    height: 2em;
   }
   .bn-onboard-loading div {
     box-sizing: border-box;
     display: block;
     position: absolute;
-    width: 2rem;
-    height: 2rem;
+    width: 2em;
+    height: 2em;
     border: 3px solid #4a90e2;
     border-radius: 50%;
     animation: bn-onboard-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

src/views/WalletReady.svelte

@@ -195,18 +195,18 @@
 <style>
   /* .bn-onboard-prepare-description */
   p {
-    font-size: 0.889rem;
+    font-size: 0.889em;
     font-family: "Helvetica Neue";
     margin: 1em 0;
   }
 
   /* .bn-onboard-prepare-error */
   span {
     color: #e2504a;
-    font-size: 0.889rem;
+    font-size: 0.889em;
     display: block;
-    margin-bottom: 0.75rem;
-    padding: 0.5rem;
+    margin-bottom: 0.75em;
+    padding: 0.5em;
     border: 1px solid #e2504a;
     border-radius: 5px;
   }

src/views/WalletSelect.svelte

@@ -161,8 +161,8 @@
 <style>
   /* .bn-onboard-select-description, .bn-onboard-select-wallet-definition */
   p {
-    font-size: 0.889rem;
-    margin: 1rem 0 0 0;
+    font-size: 0.889em;
+    margin: 1em 0 0 0;
     font-family: "Helvetica Neue";
   }
 
@@ -175,7 +175,7 @@
   /* .bn-onboard-select-wallet-info */
   div span {
     color: #4a90e2;
-    margin-top: 0.66rem;
+    margin-top: 0.66em;
     cursor: pointer;
   }
 </style>