Merge pull request #9 from perawallet/release/1.1.0

v1.1.0
perawallet · Mar 16, 2023 · a69b306 · a69b306
2 parents f985ee1 + fda502e
commit a69b306
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@perawallet/onramp",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Pera Onramp lets users top up in just a few clicks, offering the best rates for ALGO and stablecoins. Easily integrate it into your dApp with JavaScript SDK.",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/App.ts b/src/App.ts
@@ -1,5 +1,7 @@
 import PeraOnrampModal from "./modal/pera-onramp-modal/PeraOnrampModal";
 
+import "./core/util/screen/setDynamicVhValue";
+
 function defineCustomElements() {
   customElements.define("pera-onramp-modal", PeraOnrampModal);
 }

diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss
@@ -1,14 +1,23 @@
+@import "../../core/ui/style/media-queries";
+
 .pera-onramp-modal-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 999999;
-  overflow-y: auto;
 
   width: 100vw;
-  min-height: 100vh;
+  min-height: calc(100 * var(--vh));
 
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+@include for-small-screens {
+  .pera-onramp-modal-wrapper {
+    overflow-y: hidden;
+
+    min-height: 100%;
+  }
+}
diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal.scss
@@ -5,12 +5,12 @@
   top: 0;
   left: 50%;
 
-  width: 706px;
+  width: 838px;
   height: 703px;
 
   border-radius: 24px;
 
-  background-color: #ffffff;
+  background-color: transparent;
 
   transform: translate(-50%, 80px);
 
@@ -25,8 +25,6 @@
   width: 100%;
   height: 100%;
 
-  border: none;
-
   border: none;
   border-radius: inherit;
 
@@ -36,7 +34,7 @@
 .pera-onramp-modal__close-button {
   position: absolute;
   top: -52px;
-  right: -52px;
+  right: 14px;
 
   display: flex;
   align-items: center;
@@ -48,8 +46,6 @@
 
   padding: 8px;
 
-  padding: 8px;
-
   background: (var(--gray-800));
   border: none;
   border-radius: 8px;
@@ -76,6 +72,13 @@
     animation: 0.5s PeraOnrampModalMobileSlideIn ease-out;
   }
 
+  .pera-onramp-modal__onramp-iframe {
+    height: calc(100% - 40px);
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
   .pera-onramp-modal__close-button {
     top: 18px;
     right: 18px;
@@ -130,10 +133,3 @@
     opacity: 1;
   }
 }
-
-@include for-small-screens {
-  .pera-onramp-modal {
-    width: 100%;
-    height: 100%;
-  }
-}