Feedback: update SVG to zilla green

bedrock/base/migrations/0002_auto_20241203_1102.py

@@ -0,0 +1,34 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+from django.db import migrations
+
+from waffle.models import Switch
+
+# The name of the switch must be unique.
+SWITCH_NAME = "M24_HERO_ANIMATION"
+
+
+def create_switch(apps, schema_editor):
+    Switch.objects.get_or_create(
+        name=SWITCH_NAME,
+        defaults={"active": False},  # Set initial state, True or False.
+    )
+
+
+def remove_switch(apps, schema_editor):
+    Switch.objects.filter(name=SWITCH_NAME).delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        (
+            "base",
+            "0001_initial",
+        ),  # Keep whatever the makemigrations command generated here.
+    ]
+
+    operations = [
+        migrations.RunPython(create_switch, remove_switch),
+    ]

bedrock/mozorg/templates/mozorg/home/home-m24.html

@@ -55,6 +55,8 @@
   {% endwith %}
 {% endblock %}
 
-{% block js %}
-  {{ js_bundle('m24-animation') }}
-{% endblock %}
+{% if switch('m24-hero-animation') %}
+  {% block js %}
+    {{ js_bundle('m24-animation') }}
+  {% endblock %}
+{% endif %}

bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html

@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-<div class="m24-t-light-alt m24-t-dark">
+<div class="m24-t-light-alt m24-t-dark" data-m24-hero-animation="{{ switch('m24-hero-animation') | lower }}">
   <section class="m24-c-flag" data-animation-running="false">
     <button class="m24-c-flag-button js-animation-button" aria-live="assertive">
       <span class="m24-c-flag-button-pause"><img src="{{ static('img/m24/icon-pause.svg') }}" alt=""> <span class="m24-c-flag-button-text">{{ ftl('ui-pause-animation') }}</span></span>
@@ -16,7 +16,7 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
       <p class="m24-c-flag-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta m24-t-lg" data-cta-text="Learn about us">{{ ftl('m24-home-learn-about-us') }}</a></p>
     </div>
     <div class="m24-c-flag-media">
-      <svg class="m24-c-flag-media-static" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" style="fill:#fff;fill-opacity:1"/></svg>
+      <svg class="m24-c-flag-media-static" xmlns="http://www.w3.org/2000/svg" width="216" height="243" fill="none" viewBox="0 0 216 243"><path d="M93.573 29v20.734h72.565v5.351l-61.196 22.238v18.728l61.196 22.237v5.352H72.172v20.734h115.367v-37.788l-49.826-17.224v-5.349l49.826-17.222V29H93.573ZM29.034 214.6h23.743V29H29.034v185.6ZM72.172 71.136h21.401V49.734H72.172v21.402Z" /></svg>
       <svg class="m24-c-flag-media-animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19">
         <defs>
             <filter id="dilate" x="-10%" y="-10%" width="120%" height="120%">

media/css/m24/flag.scss

@@ -35,7 +35,7 @@
         transform: translateZ(0);
         width: 100px;
         height: auto;
-        fill: $m24-color-black; // inverts to white in dark theme section
+        fill: $m24-color-green; // zilla green
     }
 }
 
@@ -151,9 +151,10 @@
 // When no JS
 // - hide animation SVG and button
 // - show static SVG
-.no-js {
+.no-js,
+[data-m24-hero-animation="false"] {
     .m24-c-flag-button {
-        display: none;
+        visibility: hidden; // reserve space
     }
 
     .m24-c-flag-media-animation {