8332 - cleanup donate-banner.scss

network-api/networkapi/templates/partials/banner.html

@@ -1,8 +1,16 @@
 {% load settings_value i18n static %}
 
-{% with wrapper_class="tw-py-7" %}
-<div class="donate-banner tw-bg-black {{wrapper_class}} print:tw-hidden tw-w-full tw-hidden">
-    <a href="#" class="p-4 tw-box-content banner-close tw-cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-group" aria-label="{% trans "Close Banner" %}">
+{% with wrapper_class="tw-py-7" background_class="tw-bg-cover tw-bg-center" btn_class="tw-text-white tw-border-black tw-bg-blue-40 hover:tw-bg-blue-80 tw-shadow-black"%}
+<div class="donate-banner {{background_class}} tw-bg-[url(../_images/mozilla-donate-dear-internet-mobile.png)] large:tw-bg-[url(../_images/mozilla-donate-dear-internet.png)] {{wrapper_class}} print:tw-hidden tw-w-full tw-hidden">
+    <a href="#" 
+       class="p-4
+              tw-box-content
+              banner-close
+              tw-cursor-pointer
+              tw-absolute
+              tw-right-0
+              tw-top-0
+              tw-group" aria-label="{% trans "Close Banner" %}">
         <img src="{% static "_images/x.svg" %}" alt="{% trans "Close Banner" %}" class="tw-w-4 tw-h-4 tw-transition-transform tw-duration-100 tw-ease-in-out tw-transform group-hover:tw-scale-110 tw-filter tw-invert">
     </a>
 
@@ -35,7 +43,7 @@
                 </div>
                 <div class="tw-row">
                     <div class="tw-w-full tw-px-4">
-                        <a class="btn btn-banner tw-w-full tw-text-base active:tw-text-white active:tw-bg-[#0a0c8f] active:tw-border-black" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=2021_EOY_bannner_MoFo" target="_blank" rel="noopener noreferrer">
+                        <a class="tw-btn-pop {{btn_class}} tw-shadow-[4px_4px]" tw-w-full tw-text-base active:tw-text-white active:tw-bg-[#0a0c8f] active:tw-border-black" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=2021_EOY_bannner_MoFo" target="_blank" rel="noopener noreferrer">
                             {% trans "Support Mozilla" %}
                         </a>
                     </div>

source/sass/components/donate-banner.scss

@@ -1,28 +0,0 @@
-// Contains rules for shared nav elements.
-// For component/section specifc rules: add them to their corresponding SCSS files instead of here (e.g., primary-nav.scss, multipage-nav.scss, multipage-nav-mobile.scss etc)
-
-.donate-banner {
-  background-color: $white;
-  background-image: url(../_images/mozilla-donate-dear-internet-mobile.png);
-  background-size: cover;
-  background-position: center center;
-
-  @media (min-width: $bp-lg) {
-    background-image: url(../_images/mozilla-donate-dear-internet.png);
-  }
-}
-
-.btn-banner {
-  @extend .btn-pop;
-
-  color: $white;
-  background: $blue;
-  box-shadow: 4px 4px $black;
-  border-color: $black;
-
-  &:hover {
-    color: $white;
-    background: $dark-blue;
-    border-color: $black;
-  }
-}

source/sass/main.scss

@@ -25,7 +25,6 @@
 
 // Non-React Components
 
-@import "./components/donate-banner";
 @import "./components/nav";
 @import "./components/primary-nav";
 @import "./components/multipage-nav";