Add Theme Toggle to the Profile menu in /pontoon views

pontoon/base/static/css/style.css

@@ -1025,6 +1025,42 @@ header .right .select .menu {
   text-align: center;
 }
 
+#profile .menu li.appearance {
+  cursor: default;
+  padding: 4px 0;
+}
+
+#profile .menu li.appearance:hover {
+  background: transparent;
+  color: inherit;
+}
+
+#profile .menu li.appearance .help {
+  padding-bottom: 5px;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+#profile .menu li.appearance button {
+  font-size: 14px;
+  width: 78px;
+  border-radius: 3px;
+  margin: 0;
+}
+
+#profile .menu li.appearance button:nth-child(2) {
+  margin: 0 8px;
+}
+
+#profile .menu li.appearance button:last-child {
+  border-left: 1px solid var(--light-grey-3);
+}
+
+#profile .menu li.appearance button .icon {
+  display: block;
+  margin: 5px 0;
+}
+
 .links li {
   list-style: none;
   display: inline-block;
@@ -1480,3 +1516,43 @@ body > form,
 .container .info a {
   color: var(--light-green-1);
 }
+
+.toggle-button {
+  font-size: 0;
+}
+
+.toggle-button button {
+  background: var(--black-3);
+  border: 1px solid var(--light-grey-3);
+  border-radius: 3px;
+  box-sizing: border-box;
+  color: var(--grey-6);
+  float: none;
+  font-size: 16px;
+  font-weight: 100;
+  padding: 4px;
+  width: 147.5px;
+}
+
+.toggle-button button:first-child {
+  border-right-color: var(--grey-3);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.toggle-button button:last-child {
+  border-left: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.toggle-button button:hover {
+  color: var(--light-grey-6);
+}
+
+.toggle-button button.active {
+  background: var(--dark-grey-1);
+  border-color: var(--grey-3);
+  color: var(--light-grey-7);
+  font-weight: 400;
+}

pontoon/base/static/js/theme-switcher.js

@@ -37,6 +37,7 @@ $(function () {
 
   $('.appearance .toggle-button button').click(function (e) {
     e.preventDefault();
+    e.stopPropagation();
 
     var self = $(this);
 
@@ -47,15 +48,20 @@ $(function () {
     var theme = self.val();
 
     $.ajax({
-      url: '/api/v1/user/' + $('#server').data('username') + '/theme/',
+      url:
+        '/api/v1/user/' +
+        $('#profile input[name="username"]').val() +
+        '/theme/',
       type: 'POST',
       data: {
         csrfmiddlewaretoken: $('body').data('csrf'),
         theme: theme,
       },
       success: function () {
         $('.appearance .toggle-button button').removeClass('active');
-        self.addClass('active');
+        $(`.appearance .toggle-button button[value=${theme}]`).addClass(
+          'active',
+        );
         applyTheme(theme);
 
         // Set the data-theme attribute after successfully changing the theme

pontoon/base/templates/header.html

@@ -1,6 +1,7 @@
 {% import "widgets/signin.html" as SignIn with context %}
 {% import "widgets/signout.html" as SignOut with context %}
 {% import "widgets/profile.html" as Profile with context %}
+{% import "widgets/theme_toggle.html" as ThemeToggle %}
 {% import "contributors/widgets/notifications_menu.html" as Notifications with context %}
 
 <header>
@@ -36,6 +37,15 @@
             <ul>
               {{ Profile.top_menu() }}
 
+              {% if user.is_authenticated %}
+              <li class="appearance clearfix">
+                <p class="help">Choose appearance</p>
+                {{ ThemeToggle.button(user, long_name=False) }}
+              </li>
+
+              <li class="horizontal-separator"></li>
+              {% endif %}
+
               <li><a href="{{ url('pontoon.terms') }}" rel="noopener noreferrer" target="_blank"><i class="fa fa-gavel fa-fw"></i>Terms of Use</a></li>
               <li><a href="https://github.com/mozilla/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>Hack it on GitHub</a></li>
               <li><a href="https://discourse.mozilla.org/c/pontoon" rel="noopener noreferrer" target="_blank"><i class="fa fa-comment-dots fa-fw"></i>Give Feedback</a></li>

pontoon/base/templates/widgets/profile.html

@@ -15,6 +15,7 @@
       <img class="rounded" src="{{ user.gravatar_url(176) }}" width="88" height="88">
       <p class="name">{{ user.name_or_email|nospam }}</p>
       <p class="email">{{ user.email|nospam }}</p>
+      <input type="hidden" name="username" value="{{ user.username }}" />
     </a>
   </li>
   <li class="horizontal-separator"></li>

pontoon/base/templates/widgets/theme_toggle.html

@@ -0,0 +1,11 @@
+{% macro button(user, long_name=True) %}
+{% set theme = user.profile.theme %}
+{% set dark = "Dark theme" if long_name else "Dark" %}
+{% set light = "Light theme" if long_name else "Light" %}
+{% set system = "Match system" if long_name else "System" %}
+<span class="toggle-button">
+    <button type="button" value="dark" class="dark {% if user.profile.theme == 'dark' %}active{% endif %}" title="Use a dark theme"><i class="icon far fa-moon"></i>{{ dark }}</button>
+    <button type="button" value="light" class="light {% if user.profile.theme == 'light' %}active{% endif %}" title="Use a light theme"><i class="icon fa fa-sun"></i>{{ light }}</button>
+    <button type="button" value="system" class="system {% if user.profile.theme == 'system' %}active{% endif %}" title="Use a theme that matches your system settings"><i class="icon fa fa-laptop"></i>{{ system }}</button>
+</span>
+{% endmacro %}

pontoon/contributors/static/js/settings.js

@@ -13,7 +13,7 @@ $(function () {
     var value = self.text();
 
     $.ajax({
-      url: '/api/v1/user/' + $('#server').data('username') + '/',
+      url: '/api/v1/user/' + $('#profile input[name="username"]').val() + '/',
       type: 'POST',
       data: {
         csrfmiddlewaretoken: $('body').data('csrf'),
@@ -42,7 +42,7 @@ $(function () {
     var self = $(this);
 
     $.ajax({
-      url: '/api/v1/user/' + $('#server').data('username') + '/',
+      url: '/api/v1/user/' + $('#profile input[name="username"]').val() + '/',
       type: 'POST',
       data: {
         csrfmiddlewaretoken: $('body').data('csrf'),

pontoon/contributors/templates/contributors/settings.html

@@ -2,20 +2,13 @@
 
 {% import "widgets/checkbox.html" as Checkbox %}
 {% import "widgets/toggle.html" as Toggle %}
+{% import "widgets/theme_toggle.html" as ThemeToggle %}
 {% import 'teams/widgets/multiple_team_selector.html' as multiple_team_selector %}
 {% import 'teams/widgets/team_selector.html' as team_selector %}
 
 
 {% block title %}Settings{% endblock %}
 
-{% block before %}
-<!-- Server data -->
-<div id="server" class="hidden"
-     data-username="{{ user.username }}"
-     >
-</div>
-{% endblock %}
-
 {% block heading %}
 <section id="heading">
   <a class="avatar" href="http://gravatar.com/">
@@ -69,11 +62,7 @@ <h3>Appearance</h3>
         <div class="field">
             <p class="help">Choose if appearance should be dark, light, or follow your system’s settings</a></p>
         </div>
-        <span class="toggle-button">
-        <button type="button" value="dark" class="dark {% if user.profile.theme == 'dark' %}active{% endif %}" title="Use a dark theme"><i class="icon far fa-moon"></i>Dark theme</button>
-        <button type="button" value="light" class="light {% if user.profile.theme == 'light' %}active{% endif %}" title="Use a light theme"><i class="icon fa fa-sun"></i>Light theme</button>
-        <button type="button" value="system" class="system {% if user.profile.theme == 'system' %}active{% endif %}" title="Use a theme that matches your system settings"><i class="icon fa fa-laptop"></i>Match system</button> 
-        </span>
+        {{ ThemeToggle.button(user) }}
     </section>
 
     <section>

pontoon/settings/base.py

@@ -476,7 +476,6 @@ def _default_from_email():
             "css/multiple_team_selector.css",
             "css/contributor.css",
             "css/team_selector.css",
-            "css/toggle.css",
             "css/settings.css",
         ),
         "output_filename": "css/settings.min.css",