Fix #863 - Remove subdomain banner, move to dashboard header

mozilla · Jun 16, 2021 · 80089bb · 80089bb
1 parent ce7e0e1
commit 80089bb
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 74 deletions.
diff --git a/privaterelay/locales/en-US/app.ftl b/privaterelay/locales/en-US/app.ftl
@@ -145,6 +145,8 @@ profile-label-generate-new-alias = Generate New Alias
 profile-label-delete = Delete
 profile-label-upgrade = Get unlimited aliases
 profile-label-create-domain = Create your Email Domain
+profile-label-domain = Email Domain:
+profile-label-domain-tooltip = Create your unique and custom email domain.
 
 # This string is followed by an email address
 profile-label-forward-emails = Forward emails to:

diff --git a/privaterelay/templates/includes/banners.html b/privaterelay/templates/includes/banners.html
@@ -3,84 +3,71 @@
 {% ftlconf bundle='privaterelay.ftl_bundles.main' %}
 
 
-    {% if last_bounce_type %}
-<div class="dashboard-banners flx hide-750">
-  <div class="banner-gradient-bg">
-    <div class="bounced-email-banner banner-content flx flx-row">
-      <div class="banner-copy flx flx-col">
-        <p class="banner-hl ff-Met">{% ftlmsg 'banner-bounced-headline' %}</p>
-        <p class="banner-sub">{% ftlmsg 'banner-bounced-copy' username=request.user.email bounce_type=last_bounce_type date=next_email_try|date:"SHORT_DATETIME_FORMAT" %}</p>
-      </div>
-    </div>
-  </div>
-</div>
-    {% else %}
-<div class="dashboard-banners invisible">
-  <div class="flx hide-750">
-    <div class="banner-gradient-bg addon">
-      <div class="download-fx-banner banner-content flx flx-row hidden">
-        <div class="banner-fx-logo banner-logo"></div>
+{% if last_bounce_type %}
+  <div class="dashboard-banners flx hide-750">
+    <div class="banner-gradient-bg">
+      <div class="bounced-email-banner banner-content flx flx-row">
         <div class="banner-copy flx flx-col">
-          <p class="banner-hl ff-Met">{% ftlmsg 'banner-download-firefox-headline' %}</p>
-          <p class="banner-sub">{% ftlmsg 'banner-download-firefox-copy' %}</p>
-          <a class="banner-link ff-Met" href="https://www.mozilla.org/firefox/new/?utm_source=fx-relay&utm_medium=banner&utm_campaign=download-fx" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-download-firefox-cta' %}</a>
-        </div>
-      </div>
-      <div class="install-addon-banner banner-content flx flx-row hidden">
-        <div class="banner-relay-logo banner-logo"></div>
-        <div class="banner-copy flx flx-col">
-          <p class="banner-hl ff-Met">{% ftlmsg 'banner-download-install-extension-headline' %}</p>
-          <p class="banner-sub">{% ftlmsg 'banner-download-install-extension-copy' %}</p>
-          <a class="banner-link ff-Met" href="https://addons.mozilla.org/firefox/addon/private-relay/?utm_source=fx-relay&utm_medium=banner&utm_campaign=install-addon" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-download-install-extension-cta' %}</a>
+          <p class="banner-hl ff-Met">{% ftlmsg 'banner-bounced-headline' %}</p>
+          <p class="banner-sub">{% ftlmsg 'banner-bounced-copy' username=request.user.email bounce_type=last_bounce_type date=next_email_try|date:"SHORT_DATETIME_FORMAT" %}</p>
         </div>
       </div>
     </div>
   </div>
-    {% if settings.PREMIUM_ENABLED %}
-    {% with request.user.profile_set.first as user_profile %}
-    {% if not user_profile.has_unlimited %}
-    <div class="flx">
-      <div class="banner-gradient-bg">
-        <div class="go-premium-banner banner-content flx flx-row">
-          <div class="banner-mpp-logo banner-logo"></div>
+{% else %}
+  <div class="dashboard-banners invisible">
+    <div class="flx hide-750">
+      <div class="banner-gradient-bg addon">
+        <div class="download-fx-banner banner-content flx flx-row hidden">
+          <div class="banner-fx-logo banner-logo"></div>
           <div class="banner-copy flx flx-col">
-            <p class="banner-hl ff-Met">{% ftlmsg 'banner-upgrade-headline' %}</p>
-            <p class="banner-sub">{% ftlmsg 'banner-upgrade-copy' %}</p>
-            <a class="banner-link ff-Met" href="{{ settings.FXA_SUBSCRIPTIONS_URL }}/products/{{ settings.PREMIUM_PROD_ID }}?plan={{ settings.PREMIUM_PRICE_ID }}" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-upgrade-cta' %}</a>
+            <p class="banner-hl ff-Met">{% ftlmsg 'banner-download-firefox-headline' %}</p>
+            <p class="banner-sub">{% ftlmsg 'banner-download-firefox-copy' %}</p>
+            <a class="banner-link ff-Met" href="https://www.mozilla.org/firefox/new/?utm_source=fx-relay&utm_medium=banner&utm_campaign=download-fx" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-download-firefox-cta' %}</a>
+          </div>
+        </div>
+        <div class="install-addon-banner banner-content flx flx-row hidden">
+          <div class="banner-relay-logo banner-logo"></div>
+          <div class="banner-copy flx flx-col">
+            <p class="banner-hl ff-Met">{% ftlmsg 'banner-download-install-extension-headline' %}</p>
+            <p class="banner-sub">{% ftlmsg 'banner-download-install-extension-copy' %}</p>
+            <a class="banner-link ff-Met" href="https://addons.mozilla.org/firefox/addon/private-relay/?utm_source=fx-relay&utm_medium=banner&utm_campaign=install-addon" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-download-install-extension-cta' %}</a>
           </div>
         </div>
       </div>
     </div>
-</div>
-  {% elif not user_profile.subdomain %}
-  <div class="mpp-choose-subdomain">
-    <img src="/static/images/choose-subdomain.png" alt="">
-    <div class="border"></div>
-    <div class="mpp-choose-subdomain-form">
-      <h2>{% ftlmsg 'banner-choose-subdomain-headline-aliases' %}</h2>
-      <p>{% ftlmsg 'banner-choose-subdomain-copy' %}</p>
-      <form method="post" action="{% url 'profile_subdomain' %}">
-          {% csrf_token %}
-          <input type="text" placeholder="Search your new domain" name="subdomain">
-          <input class="btn btn--gray" type="submit" value="Get it">
-      </form>
-      <p class="warning">{% ftlmsg 'banner-choose-subdomain-warning' %}</p>
-    </div>
-  </div>
-    {% else %}
-  <div class="banner-gradient-bg">
-    <div class="show-subdomain-banner banner-content flx flx-row">
-      <div class="banner-relay-logo banner-logo"></div>
-      <div class="banner-copy flx flx-col">
-        <p class="banner-hl ff-Met">{% ftlmsg 'banner-choose-subdomain-label' %}</p>
-        <p class="banner-sub">{{ user_profile.subdomain }}</p>
-        {% user_email_domain user_profile %}
-        <p>{% ftlmsg 'banner-choose-subdomain-label' subdomain=user_subdomain %}</p>
-      </div>
-    </div>
+      {% if settings.PREMIUM_ENABLED %}
+        {% with request.user.profile_set.first as user_profile %}
+          {% if not user_profile.has_unlimited %}
+            <div class="flx">
+              <div class="banner-gradient-bg">
+                <div class="go-premium-banner banner-content flx flx-row">
+                  <div class="banner-mpp-logo banner-logo"></div>
+                  <div class="banner-copy flx flx-col">
+                    <p class="banner-hl ff-Met">{% ftlmsg 'banner-upgrade-headline' %}</p>
+                    <p class="banner-sub">{% ftlmsg 'banner-upgrade-copy' %}</p>
+                    <a class="banner-link ff-Met" href="{{ settings.FXA_SUBSCRIPTIONS_URL }}/products/{{ settings.PREMIUM_PROD_ID }}?plan={{ settings.PREMIUM_PRICE_ID }}" target="_blank" rel="noopener noreferrer">{% ftlmsg 'banner-upgrade-cta' %}</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          {% elif not user_profile.subdomain %}
+            <div class="mpp-choose-subdomain">
+              <img src="/static/images/choose-subdomain.png" alt="">
+              <div class="border"></div>
+              <div class="mpp-choose-subdomain-form">
+                <h2>{% ftlmsg 'banner-choose-subdomain-headline-aliases' %}</h2>
+                <p>{% ftlmsg 'banner-choose-subdomain-copy' %}</p>
+                <form method="post" action="{% url 'profile_subdomain' %}">
+                    {% csrf_token %}
+                    <input type="text" placeholder="Search your new domain" name="subdomain">
+                    <input class="btn btn--gray" type="submit" value="Get it">
+                </form>
+                <p class="warning">{% ftlmsg 'banner-choose-subdomain-warning' %}</p>
+              </div>
+            </div>
+          {% endif %}
+        {% endwith %}
+      {% endif %}
   </div>
-  {% endif %}
-  {% endwith %}
-  {% endif %}
-</div>
-  {% endif %}
+{% endif %}
diff --git a/privaterelay/templates/profile.html b/privaterelay/templates/profile.html
@@ -20,9 +20,24 @@
         <div class="mpp-dashbaord-header-name">
           {% ftlmsg 'profile-label-welcome-html' email=request.user.email %}
         </div>
-        <div class="mpp-dashbaord-header-action">
-          <button class="mpp-action-link"> <img src="/static/images/icon-check.svg" alt=""> {% ftlmsg 'profile-label-create-domain' %}</button>
-        </div>
+        {% if not user_profile.subdomain %}
+          <div class="mpp-dashbaord-header-action">
+            <button class="mpp-action-link"> <img class="margin-right" src="/static/images/icon-check.svg" alt=""> {% ftlmsg 'profile-label-create-domain' %}</button>
+          </div>
+        {% else %}
+          <div class="mpp-dashbaord-header-action">
+            <div class="mpp-action-link mpp-action-tooltip">
+              {% ftlmsg 'profile-label-domain' %} {{ user_profile.subdomain }}
+              <img class="margin-left" src="/static/images/icon-info.svg" alt="informtaion">
+              <div class="mpp-action-tooltip-hover">
+                <div class="mpp-action-tooltip-hover-wrapper">
+                  {% ftlmsg 'profile-label-domain-tooltip' %}
+                </div>
+              </div>
+            </div>
+
+          </div>
+        {% endif %}
       </div>
       <ul class="mpp-dashbaord-header-stats">
         <li><span class="label">{% ftlmsg 'profile-stat-label-aliases-used' %}</span> <span>{{relay_addresses|length}}</span> </li>

diff --git a/static/images/icon-info.svg b/static/images/icon-info.svg
diff --git a/static/scss/partials/dashboard.scss b/static/scss/partials/dashboard.scss
@@ -66,14 +66,67 @@
   outline: none;
   display: flex;
   align-items: center;
-  img {
+  .margin-right {
       margin-right: 0.25rem;
   }
+  .margin-left {
+      margin-left: 0.25rem;
+  }
   &:hover {
       color: var(--blue4);
   }
 }
 
+.mpp-action-tooltip-hover {
+    display: none;
+    position: absolute;
+    padding-top: 10px;
+    top: calc(100%);
+    left: 4rem;
+    min-width: 200px;
+}
+
+.mpp-action-tooltip-hover-wrapper {
+        background-color: white;
+        box-shadow: var(--dropShadowLight);
+        border-radius: 4px;
+        position: relative;
+        color: var(--ink);
+        padding: 1rem;
+        &:after{
+            content: "";
+            display: block;
+            position: absolute;
+            background-color: white;
+            left: 2rem;
+
+            // TODO: Fix shadow on bubble triangle
+            // box-shadow: -2px 2px 2px 0 #3d3f4740;
+            content: "\00a0";
+            display: block;
+            height: 20px;
+            position: absolute;
+
+            top: -10px;
+            transform:             rotate( 135deg );
+                -moz-transform:    rotate( 135deg );
+                -ms-transform:     rotate( 135deg );
+                -o-transform:      rotate( 135deg );
+                -webkit-transform: rotate( 135deg );
+            width:  20px;
+        }
+    }
+
+.mpp-action-tooltip {
+    position: relative;
+    z-index: 10;
+
+    &:hover .mpp-action-tooltip-hover {
+        display: block;
+    }
+}
+
+
 @media screen and (min-width: 768px) {
     .mpp-dashbaord-header-container {
         display: flex;