diff --git a/app/javascript/packs/brave_rewards_banner.jsx b/app/javascript/packs/brave_rewards_banner.jsx
index 98e3124909..80ea00207a 100644
--- a/app/javascript/packs/brave_rewards_banner.jsx
+++ b/app/javascript/packs/brave_rewards_banner.jsx
@@ -39,8 +39,11 @@ export default class BraveRewardsBanner extends React.Component {
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
- componentDidMount(){
+ componentWillMount(){
this.modalize();
+ }
+
+ componentDidMount(){
this.fetchSiteBanner();
document.getElementsByClassName('brave-rewards-banner-control-bar-save-button')[0].addEventListener("click", this.handleSave);
window.addEventListener('resize', this.updateWindowDimensions);
@@ -62,6 +65,9 @@ export default class BraveRewardsBanner extends React.Component {
}
close(){
+ document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
+ document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
+ document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
document.getElementsByClassName("modal-panel--close js-deny")[0].click();
}
diff --git a/app/javascript/packs/brave_rewards_banner_container.jsx b/app/javascript/packs/brave_rewards_banner_container.jsx
index 8b56631217..c67794cdfe 100644
--- a/app/javascript/packs/brave_rewards_banner_container.jsx
+++ b/app/javascript/packs/brave_rewards_banner_container.jsx
@@ -14,13 +14,13 @@ export default class BraveRewardsBannerContainer extends React.Component {
this.state = {
mode: 'Edit',
- isIntro: true,
+ isIntro: false,
}
this.setMode = this.setMode.bind(this)
}
- componentDidMount(){
+ componentWillMount(){
this.modalize();
}
@@ -116,14 +116,9 @@ export default class BraveRewardsBannerContainer extends React.Component {
export function renderBraveRewardsBannerContainer(headline, intro) {
- let props = {
- headline: headline,
- intro: intro
- }
-
ReactDOM.render(
- ,
- document.getElementById("react-container").parentElement.parentElement
+ ,
+ document.getElementById("rewards-banner-container").parentElement.parentElement
)
}
diff --git a/app/javascript/publishers/home.js b/app/javascript/publishers/home.js
index 1aa6eda027..be18e01051 100644
--- a/app/javascript/publishers/home.js
+++ b/app/javascript/publishers/home.js
@@ -403,11 +403,16 @@ document.addEventListener('DOMContentLoaded', function() {
}, false);
instantDonationButton.addEventListener("click", function(event) {
- document.getElementsByClassName('container')[0].style.padding = 0;
- document.getElementsByClassName('container')[0].style.width = '840px';
- let headline = document.getElementsByClassName('translations')[0].getAttribute('headline')
- let intro = document.getElementsByClassName('translations')[0].getAttribute('intro')
- renderBraveRewardsBannerContainer(headline, intro);
+
+ document.getElementById("open-banner-button").onclick = function() {
+ renderBraveRewardsBannerContainer();
+ };
+
+ document.getElementsByClassName("modal-panel--close js-deny")[0].onclick = function(e) {
+ document.getElementsByClassName("modal-panel")[0].style.maxWidth = '40rem';
+ document.getElementsByClassName("modal-panel")[0].style.padding = '2rem 2rem';
+ document.getElementsByClassName("modal-panel--content")[0].style.padding = '1rem 1rem 0 1rem';
+ };
}, false);
updateContactForm.addEventListener('submit', function(event) {
diff --git a/app/views/publishers/_instant_donation_modal.html.slim b/app/views/publishers/_instant_donation_modal.html.slim
index 5d376201b1..91fdd409de 100644
--- a/app/views/publishers/_instant_donation_modal.html.slim
+++ b/app/views/publishers/_instant_donation_modal.html.slim
@@ -1,4 +1,11 @@
-.instant-donation-container id="instant-donation-container"
- .container id=current_publisher.id
- .translations headline=t(".headline") intro=t(".intro")
- .react-container id="react-container"
+.modal id="rewards_banner_intro_modal" role="dialog" tabindex="-1"
+ .modal-dialog
+ .modal-header id="instant-donation-modal-selection"
+ center
+ = image_tag "icn-donation-jar@1x.png", id: 'icn-donation-jar'
+ h2.modal-title = t ".headline"
+ p = t ".intro"
+ = link_to(t(".continue"), "#", class: 'btn btn-primary', id: "open-banner-button")
+ center
+ .modal-header style="display: none;" id="rewards-banner-container"
+ = hidden_field_tag 'publisher_id', current_publisher.id