changed style for donation banner

_includes/layout/base/pagetop-donation.html

@@ -5,12 +5,17 @@ http://opensource.org/licenses/MIT.
 
 <div class="donation-container">
   <div class="donation-text">
-    <p>
-      {% translate donation-banner-text layout %}
-    </p>
-    <button type="button" class="donation-btn" onclick="openDonationModal()">
-      {% translate donation-banner-donate-button layout %}
-    </button>
+    <div class="donation-text-container">
+      <button onclick="closeDonationBanner()" class="donation-modal-close">
+        <img src="/img/icons/ico_close.svg" alt="Close">
+      </button>
+      <p>
+        {% translate donation-banner-text layout %}
+      </p>
+      <button type="button" class="donation-btn" onclick="openDonationModal()">
+        {% translate donation-banner-donate-button layout %}
+      </button>
+    </div>
   </div>
   <button type="button" class="donation-visibility-toggle" onclick="toggleDonationBanner()">
     {% translate donation-banner-toggle-button layout %}

_sass/_donation-banner.scss

@@ -12,48 +12,65 @@ $dark-green: #318f20;
 }
 
 .donation-btn {
-    background-color: #4CAF50;
-    @include gradient($green, $dark-green);
     border: none;
-    border-radius: 10px;
-    padding: 10px 20px;
+    border-radius: 1px;
     color: white;
-    font-weight: bold;
+    text-transform: uppercase;
+    font-weight: 600;
+    background: #F7931A;
+    width: 170px;
+    height: 35px;
+    box-sizing: border-box;
 }
 
 .donation-container {
     text-align: center;
 
+    .donation-text-container {
+        position: relative;
+        max-width: 1230px;
+        margin: 0 auto;
+    }
     .donation-text {
-        background-color: #ef9e5b;
-        color: #ffffff;
-        font-weight: bold;
+        background-color: #FEF4E8;
+        color: #000000;
         transition: margin-top .2s ease-in;
-        height: 90px;
-        margin-top: -110px;
-        padding: 10px;
+        height: 204px;
+        box-sizing: border-box;
+        margin-top: -204px;
+        padding: 35px 0 45px;
 
+        p {
+            margin-bottom: 28px;
+            line-height: 42px;
+        }
+        
         &.expanded {
             margin-top: 0;
-            border-bottom: 4px solid #ef9e5b;
-            box-shadow: 0 7px 10px rgba(0, 0, 0, 0.22);
         }
     }
-
+    .donation-modal-close {
+        position: absolute;
+        top: 0;
+        right: 30px;
+        border: none;
+        background: transparent;
+    }
     .donation-visibility-toggle {
         cursor: pointer;
         display: inline-block;
-        background-color: #ef9e5b;
-        color: #fefefe;
-        font-weight: bold;
-        border: 4px solid #ef9e5b;
-        border-top: 0;
-        padding: 10px 50px;
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
+        background-color: #F7931A;
+        width: 370px;
+        box-sizing: border-box;
+        height: 55px;
+        color: #FFFFFF;
+        font-weight: 600;
+        border: none;
+        text-transform: uppercase;
+        font-size: 16px;
 
         &.active {
+            display: none;
             margin-top: -4px;
         }
     }

js/main.js

@@ -560,10 +560,17 @@ function closeDonationModal() {
 
 function toggleDonationBanner() {
     var banner = $('.donation-text');
-    var toggle = $('.donation-visibility-toggle');
+    var open = $('.donation-visibility-toggle');
 
-    toggle.toggleClass('active');
-    banner.toggleClass('expanded');
+    open.addClass("active");
+    banner.addClass("expanded");
+}
+function closeDonationBanner() {
+  var banner = $(".donation-text");
+  var open = $(".donation-visibility-toggle");
+
+  open.removeClass("active");
+  banner.removeClass("expanded"); 
 }
 function loadBtcExchangeRate() {