Fix #876 - Add new onboarding flow to replace previous

privaterelay/locales/en-US/app.ftl

@@ -212,8 +212,8 @@ banner-choose-subdomain-label = Your domain is:
 banner-choose-subdomain-label = You can make up any address @{ $subdomain }
 
 remaining-aliases-cta = Buy unlimited aliases
-onboarding-headline = Three ways to create an alias
-onboarding-tip-1 = Right here - just select the button in the upper right corner
+onboarding-headline = Create your first alias, you have three ways…
+onboarding-tip-1 = Just click the button “Generate New Alias” to create your first alias
 onboarding-tip-2 = By selecting the { -brand-name-firefox-relay } icon when it appears in email fields
 onboarding-tip-3 = Via the context menu, just right-click (Windows) or Control-click (macOS) on form fields to access the menu and generate an alias
 modal-rename-alias-saved = Label saved!

privaterelay/templates/includes/dashboard-filter.html

@@ -4,20 +4,18 @@
 
 <div class="c-filter js-filter-container">
     <div class="c-filter-search">
-        {% if relay_addresses %}
-            <div class="c-filter-icon c-filter-icon-search js-filter-mobile-search-toggle"></div>
-            <form class="js-filter-search-form c-filter-search-form" action="">
-                <input class="c-filter-search-input js-filter-search-input " type="search" name="search" id="search">
-                <div class="c-filter-case-count">
-                    <span class="js-filter-case-visible"></span>
-                    /
-                    <span class="js-filter-case-total"></span>
-                </div>
-                <button class="c-filter-reset js-filter-reset">
-                    <img alt="" src="{% static '/images/x-close.svg' %}"/>
-                </button>
-            </form>
-        {% endif %}
+        <div class="c-filter-icon c-filter-icon-search js-filter-mobile-search-toggle"></div>
+        <form class="js-filter-search-form c-filter-search-form" action="">
+            <input class="c-filter-search-input js-filter-search-input " type="search" name="search" id="search">
+            <div class="c-filter-case-count">
+                <span class="js-filter-case-visible"></span>
+                /
+                <span class="js-filter-case-total"></span>
+            </div>
+            <button class="c-filter-reset js-filter-reset">
+                <img alt="" src="{% static '/images/x-close.svg' %}"/>
+            </button>
+        </form>
     </div>
     <div class="c-filter-date hidden">
         <div class="c-filter-icon c-filter-icon-calendar"></div>

privaterelay/templates/includes/dashboard_onboarding.html

@@ -2,28 +2,48 @@
 {% load ftl %}
 {% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
-
-<h2 class="dashboard-onboarding-header">{% ftlmsg 'onboarding-headline' %}</h2>
-<ol class="dashboard-onboarding-list">
-  <li class="dashboard-onboarding-list-item tip-1 flx flx-col">
-    <div class="flx flx-row al-cntr">
-      <span class="onboarding-num">1</span>
-      <span>{% ftlmsg 'onboarding-tip-1' %}</span>
-    </div>
-    <img class="onboarding-img img-arrow-up" src="{% static 'images/dashboard-onboarding/tip1-icon.svg' %}" aria-hidden="true" alt="">
-  </li>
-  <li class="dashboard-onboarding-list-item tip-2 flx flx-col">
-    <div class="flx flx-row al-cntr">
-      <span class="onboarding-num">2</span>
-      <span>{% ftlmsg 'onboarding-tip-2' %}</span>
-    </div>
-    <img class="onboarding-img img-input-icon" src="{% static 'images/dashboard-onboarding/input-icon.svg' %}" alt="Where possible, a button to create a new alias will appear inside a form's email input.">
-  </li>
-  <li class="dashboard-onboarding-list-item tip-3 flx flx-col">
-    <div class="flx flx-row al-cntr">
-      <span class="onboarding-num">3</span>
-      <span>{% ftlmsg 'onboarding-tip-3' %}</span>
-    </div>
-    <img class="onboarding-img img-context-menu" src="{% static 'images/dashboard-onboarding/context-menu.svg' %}" aria-hidden="true">
-  </li>
-</ol>
+<section class="c-onboarding">
+  <h2>{% ftlmsg 'onboarding-headline' %}</h2>
+  <ul class="c-onboarding-steps mzp-l-columns mzp-t-columns-three">
+    <li class="c-onboarding-step">
+      <div class="c-onboarding-step-number">1</div>
+      <p class="c-onboarding-step-copy">
+        {% ftlmsg 'onboarding-tip-1' %}
+      </p>
+      <div class="c-onboarding-step-action">
+        <form action="{% url 'emails-index' %}" class="dash-create" method="POST">
+            <input type="hidden" name="api_token" value="{{ user_profile.api_token }}">
+              <button
+                  class="mzp-c-button mzp-t-product has-icon"
+                  title="{% ftlmsg 'profile-label-generate-new-alias' %}"
+                  type="submit"
+                  value="{% ftlmsg 'profile-label-generate-new-alias' %}"
+                  data-event-label="Create New Relay Alias"
+              >
+                <span class="generate-new-relay-icon"></span>
+                <span class="generate-new-alias-text">
+                {% ftlmsg 'profile-label-generate-new-alias' %}</span>
+              </button>
+          </form>
+      </div>
+    </li>
+    <li class="c-onboarding-step">
+      <div class="c-onboarding-step-number">2</div>
+      <p class="c-onboarding-step-copy">
+        {% ftlmsg 'onboarding-tip-2' %}
+      </p>
+      <div class="c-onboarding-step-graphic">
+        <img class="" src="{% static 'images/dashboard-onboarding/onboarding-step-2.svg' %}" aria-hidden="true" alt="">
+      </div>
+    </li>
+    <li class="c-onboarding-step">
+      <div class="c-onboarding-step-number">3</div>
+      <p class="c-onboarding-step-copy">
+        {% ftlmsg 'onboarding-tip-3' %}
+      </p>
+      <div class="c-onboarding-step-graphic">
+        <img class="" src="{% static 'images/dashboard-onboarding/onboarding-step-3.svg' %}" aria-hidden="true" alt="">
+      </div>
+    </li>
+  </ul>
+</section>

privaterelay/templates/profile.html

@@ -73,7 +73,10 @@
       {% endif %}
       {% include "includes/banners.html" %}
 
-      {% include "includes/dashboard-filter.html" %}
+
+      {% if relay_addresses %}      
+        {% include "includes/dashboard-filter.html" %}
+      {% endif %}
 
       {% if relay_addresses|length == 0 %}
         {% include "includes/dashboard_onboarding.html" %}