Added additional structure to SCSS, revised upgrade/add new alias button

mozilla · Jun 11, 2021 · ef744dd · ef744dd
1 parent 0a427b3
commit ef744dd
Show file tree

Hide file tree

Showing 9 changed files with 288 additions and 240 deletions.
diff --git a/privaterelay/locales/en-US/app.ftl b/privaterelay/locales/en-US/app.ftl
@@ -143,6 +143,7 @@ profile-promo-upgrade-cta = Upgrade { -brand-name-relay }
 profile-label-saved = Label saved!
 profile-label-generate-new-alias = Generate New Alias
 profile-label-delete = Delete
+profile-label-upgrade = Get unlimited aliases
 
 # This string is followed by an email address
 profile-label-forward-emails = Forward emails to:
@@ -204,8 +205,8 @@ banner-choose-subdomain-label = You can make up any address @{ $subdomain }
 
 
 remaining-aliases-promo-label = { $number -> 
-    [one] { $number } remaining alias. 
-   *[other] { $number } remaining aliases.
+    [one] { $number } remaining alias
+   *[other] { $number } remaining aliases
 }
 
 remaining-aliases-promo-label-unlimited = { $number -> 

diff --git a/privaterelay/templates/includes/remaining-aliases.html b/privaterelay/templates/includes/remaining-aliases.html
@@ -12,9 +12,6 @@
         {% ftlmsg 'remaining-aliases-promo-label-unlimited' number=relay_addresses|length %}
       {% else %}
           {% ftlmsg 'remaining-aliases-promo-label' number=remaining_free_aliases_count %}
-          {% if settings.PREMIUM_ENABLED %}
-            <a href="https://accounts.stage.mozaws.net/subscriptions/products/{{ settings.PREMIUM_PROD_ID }}?plan={{ settings.PREMIUM_PRICE_ID }}" target="_blank">{% ftlmsg 'remaining-aliases-cta' %}</a>
-          {% endif %}
       {% endif %}
     {% endwith %}
 </span>
diff --git a/privaterelay/templates/profile.html b/privaterelay/templates/profile.html
@@ -25,9 +25,9 @@
         </div>
       </div>
       <ul class="mpp-dashbaord-header-stats">
-        <li><span class="label">Email aliases used</span> <span>#</span> </li>
-        <li><span class="label">Emails Blocked</span> <span>#</span> </li>
-        <li><span class="label">Emails Forwarded</span> <span>#</span> </li>
+        <li><span class="label">Email aliases used</span> <span>5</span> </li>
+        <li><span class="label">Emails Blocked</span> <span>3</span> </li>
+        <li><span class="label">Emails Forwarded</span> <span>48</span> </li>
       </ul>
     </div>
   </div>
@@ -65,13 +65,18 @@ <h2 class="section-headline dashboard-headline">{% ftlmsg 'profile-headline-mana
           <form action="/emails/" class="dash-create" method="POST">
             <input type="hidden" name="api_token" value="{{ user_profile.api_token }}">
             {% if user_profile.at_max_free_aliases and not user_profile.has_unlimited %}
-            <button
-                class="blue-btn-states dash-create-new-relay flx al-cntr jst-cntr btn-disabled"
-                title="You have reached the alias limit."
-                type="submit"
-                value="Generate new alias"
-                data-event-label="Create New Relay Alias"
+            <a
+                href="https://accounts.stage.mozaws.net/subscriptions/products/{{ settings.PREMIUM_PROD_ID }}?plan={{ settings.PREMIUM_PRICE_ID }}"
+                target="_blank"
+                rel="noopener noreferrer""
+                class="btn-blue btn-blue--ghost"
+                data-event-label="Upgrade"
             >
+              <span class="generate-new-alias-text">
+                {% ftlmsg 'profile-label-upgrade' %}
+              </span>
+            </a>
+
             {% else %}
             <button
                 class="blue-btn-states dash-create-new-relay flx al-cntr jst-cntr"
@@ -80,10 +85,13 @@ <h2 class="section-headline dashboard-headline">{% ftlmsg 'profile-headline-mana
                 value="Generate new alias"
                 data-event-label="Create New Relay Alias"
             >
-            {% endif %}
-            <span class="generate-new-relay-icon"></span>
-            <span class="generate-new-alias-text">{% ftlmsg 'profile-label-generate-new-alias' %}</span>
+              <span class="generate-new-relay-icon"></span>
+              <span class="generate-new-alias-text">
+              {% ftlmsg 'profile-label-generate-new-alias' %}</span>
             </button>
+            {% endif %}
+
+
           </form>
         </div>