Style mobile menu for premium theme

mozilla · Aug 4, 2021 · 96c8e25 · 96c8e25
1 parent 75198d1
commit 96c8e25
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 25 deletions.
diff --git a/privaterelay/templates/base.html b/privaterelay/templates/base.html
@@ -28,9 +28,10 @@
     <meta name="twitter:description" content="{% ftlmsg 'meta-description' %}">
     <meta name="twitter:image" content="{{request.scheme}}://{{request.META.HTTP_HOST}}{% static 'images/share-relay.jpg' %}">
   </head>
-
-  <body class="{% if user_profile.has_unlimited %}is-premium{% endif %}" data-fxa-settings-url="{{ settings.FXA_SETTINGS_URL }}" data-site-origin="{{ settings.SITE_ORIGIN }}" data-google-analytics-id="{{ settings.GOOGLE_ANALYTICS_ID }}" data-debug="{{ settings.DEBUG }}">
+  
+  <body class="{% with request.user.profile_set.first as user_profile %}{% if user_profile.has_unlimited %}is-premium{% endif %}{% endwith %}" data-fxa-settings-url="{{ settings.FXA_SETTINGS_URL }}" data-site-origin="{{ settings.SITE_ORIGIN }}" data-google-analytics-id="{{ settings.GOOGLE_ANALYTICS_ID }}" data-debug="{{ settings.DEBUG }}">
     <firefox-private-relay-addon data-addon-installed="false"></firefox-private-relay-addon>
+
     {% include "includes/modal.html" %}
     {% include "includes/header.html" %}
     {% block content %}

diff --git a/static/images/bento-dark.png b/static/images/bento-dark.png
diff --git a/static/images/bento-white.svg b/static/images/bento-white.svg
diff --git a/static/images/bento.svg b/static/images/bento.svg
diff --git a/static/images/fx-private-relay-logotype-dark.svg b/static/images/fx-private-relay-logotype-dark.svg
diff --git a/static/scss/partials/header.scss b/static/scss/partials/header.scss
@@ -70,7 +70,7 @@ header {
 .header-link {
     border-radius: 4px;
     padding: 4px 6px;
-    color: $color-white !important;
+    color: $color-white;
     margin-left: 1em;
 }
 
@@ -116,7 +116,6 @@ header {
 .mobile-menu {
     position: relative;
     z-index: 1;
-    overflow: hidden;
     min-height: 0;
     background: #2F2F54;
     transition: all .4s ease;
@@ -225,24 +224,118 @@ header {
     background: rgba(0, 0, 0, .1);
 }
 
+
+.is-premium {
+    header {
+        background: $color-white;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
+        border-bottom: 0;
+    }
+
+    .fx-private-relay-logotype {
+        background-image: url("/static/images/fx-private-relay-logotype-dark.svg");
+    }
+    .header-top {
+        padding: 0 $spacing-xl;
+        align-items: center;
+    }
+    .header-link {
+        color: $color-grey-40;
+        padding: $spacing-lg 0;
+        position: relative;
+        display: block;
+        border-radius: 0;
+        &::after {
+            position: absolute;
+            bottom: 0;
+            margin: 0;
+            height: 4px;
+        }
+    }
+    .active-header-link {
+        color: $color-grey-30;
+    }
+    .header-link:hover,
+    .header-link:active,
+    .header-link:focus {
+        background-color: transparent;
+    }
+    .logo-wrapper {
+        height: 40px;
+    }
+    .fx-bento-button {
+        background-image: url("/static/images/bento.svg");
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+         &:hover {
+            background-image: url("/static/images/bento-white.svg");
+            background-color: $color-grey-40;
+        }
+    }
+
+    .fx-bento-open .fx-bento-button {
+        background-image: url("/static/images/bento-white.svg");
+        background-color: $color-grey-40;
+    }
+
+    firefox-apps.fx-bento-open,
+    firefox-apps:hover {
+        background: none;
+        box-shadow: 0 0 0 4px $color-grey-40;
+    }
+
+    .mobile-menu, .mobile-menu-toggle, .mobile-menu-links, .mobile-menu-link {
+        background-color: $color-grey-05;
+        color: $color-purple;
+    }
+
+    .mobile-menu.menu-open .mobile-menu-toggle, .mobile-menu-links {
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
+    }
+
+    .mobile-menu-link {
+        border-bottom: 1px solid $color-grey-10;
+    }
+
+    .mobile-menu-link:hover {
+        background-color: $color-grey-10;
+    }
+
+    .mobile-menu-label::after {
+        background-image: url(/static/images/arrowhead.svg);
+    }
+
+    @media screen and (max-width: 550px) {
+        .header-top {
+            padding: $spacing-lg $spacing-xl;
+        }
+    }
+
+
+
+}
+
+
 @media screen and (max-width: 750px) {
     .fx-private-relay-logotype {
-    min-width: 150px;
-  }
+        min-width: 150px;
+    }
 
-  .sign-in {
-    padding-left: 1em;
-    padding-right: 1em;
-  }
+    .sign-in {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
 }
 
+
 @media screen and (max-width: 600px) {
     header {
         border-bottom: none;
     }
-      .fx-private-relay-logotype {
-    background-position: center 68%;
-  }
+    .fx-private-relay-logotype {
+        background-position: center 68%;
+    }
 }
 
 @media screen and (max-width: 550px) {
@@ -255,21 +348,21 @@ header {
     }
 
     .fix-header {
-        animation: none !important;
+        animation: none;
     }
 
     .active-header-link::before {
-    content: "";
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--fxGradient);
-    margin-right: 8px;
-    vertical-align: middle;
-    background-size: 400%;
-    background-position: bottom right;
-  }
+        content: "";
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--fxGradient);
+        margin-right: 8px;
+        vertical-align: middle;
+        background-size: 400%;
+        background-position: bottom right;
+    }
 
 }