From 3c442c76c01b37b1ed96d03f59eb67f5149cab63 Mon Sep 17 00:00:00 2001 From: Mithat Akbulut Date: Mon, 13 Mar 2023 16:22:17 +0300 Subject: [PATCH 1/6] fix(pera-onramp-modal.scss): stretch width of pera-onramp-modal to value that tooltip in iframe fits --- src/modal/pera-onramp-modal/_pera-onramp-modal.scss | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal.scss index 38caedc..4d57c16 100644 --- 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); @@ -36,7 +36,7 @@ .pera-onramp-modal__close-button { position: absolute; top: -52px; - right: -52px; + right: 14px; display: flex; align-items: center; @@ -130,10 +130,3 @@ opacity: 1; } } - -@include for-small-screens { - .pera-onramp-modal { - width: 100%; - height: 100%; - } -} From c3249de9b968b7d138284f111332e755702265fe Mon Sep 17 00:00:00 2001 From: Mithat Akbulut Date: Wed, 15 Mar 2023 20:31:31 +0300 Subject: [PATCH 2/6] fix(onramp-modal-wrapper.scss): make min-height 100% for small-screens --- .../pera-onramp-modal/_pera-onramp-modal-wrapper.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss index 8e2ff19..a2b4f8c 100644 --- a/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss +++ b/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss @@ -1,3 +1,5 @@ +@import "../../core/ui/style/media-queries"; + .pera-onramp-modal-wrapper { position: fixed; top: 0; @@ -5,10 +7,17 @@ left: 0; bottom: 0; z-index: 999999; - overflow-y: auto; width: 100vw; min-height: 100vh; background-color: rgba(0, 0, 0, 0.7); } + +@include for-small-screens { + .pera-onramp-modal-wrapper { + overflow-y: hidden; + + min-height: 100%; + } +} From 32919cb7f2b138fadf77c151e4d40dcbff17b734 Mon Sep 17 00:00:00 2001 From: Mithat Akbulut Date: Wed, 15 Mar 2023 20:31:49 +0300 Subject: [PATCH 3/6] fix(pera-onramp-modal.scss): remove bottom border radiuses for small-screens --- src/modal/pera-onramp-modal/_pera-onramp-modal.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal.scss index 38caedc..115632a 100644 --- a/src/modal/pera-onramp-modal/_pera-onramp-modal.scss +++ b/src/modal/pera-onramp-modal/_pera-onramp-modal.scss @@ -25,8 +25,6 @@ width: 100%; height: 100%; - border: none; - border: none; border-radius: inherit; @@ -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; From 32a12e754a702ba193f5e26989898b1afa11c394 Mon Sep 17 00:00:00 2001 From: Mithat Akbulut Date: Thu, 16 Mar 2023 14:58:25 +0300 Subject: [PATCH 4/6] feat(App.ts)use-setDynamicVhValue-on-app --- src/App.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.ts b/src/App.ts index aa18e9c..ad3ee00 100644 --- 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); } From 4255185f77e846eaa96314b547ee0a01d66974f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Thu, 16 Mar 2023 15:22:33 +0300 Subject: [PATCH 5/6] fix: use dynamic vh value --- src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss b/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss index a2b4f8c..a2cabbe 100644 --- a/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss +++ b/src/modal/pera-onramp-modal/_pera-onramp-modal-wrapper.scss @@ -9,7 +9,7 @@ z-index: 999999; width: 100vw; - min-height: 100vh; + min-height: calc(100 * var(--vh)); background-color: rgba(0, 0, 0, 0.7); } From fda502e344c06452b81bfed440b13f67313025f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ahmet=20Bu=C4=9Fra=20Yi=C4=9Fiter?= Date: Thu, 16 Mar 2023 15:38:42 +0300 Subject: [PATCH 6/6] chore: bump up minor version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1658a53..b78729b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@perawallet/onramp", - "version": "1.0.4", + "version": "1.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@perawallet/onramp", - "version": "1.0.4", + "version": "1.1.0", "license": "ISC", "devDependencies": { "@hipo/eslint-config-base": "4.1.1", diff --git a/package.json b/package.json index 032322c..a43365d 100644 --- 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": {