4 files changed, 10 insertions, 17 deletions
diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index c44706b4..a302992c 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -80,7 +80,7 @@
       <section id="middle-pane" class="small-9 medium-12 large-12 columns no-padding">
         <ul id="mail-list">
         </ul>
-        <div id="user-settings-box" class="arrow-box hidden"></div>
+        <div id="user-settings-box"></div>
       </section>
     </article>
 
diff --git a/web-ui/app/js/user_settings/ui/user_settings_box.js b/web-ui/app/js/user_settings/ui/user_settings_box.js
index 2bc291f9..ece46c49 100644
--- a/web-ui/app/js/user_settings/ui/user_settings_box.js
+++ b/web-ui/app/js/user_settings/ui/user_settings_box.js
@@ -20,22 +20,12 @@ define(
     'features',
     'views/templates',
     'page/events',
-    'views/i18n',
     'helpers/monitored_ajax'
-  ], function (defineComponent, features, templates, events, i18n, monitoredAjax) {
+  ], function (defineComponent, features, templates, events, monitoredAjax) {
 
   'use strict';
 
   return defineComponent(function () {
-    this.create = function(parentElement) {
-      parentElement;
-
-      var component = new this.consructor();
-      component.initialize(html, recipient);
-      component.attr.recipient = recipient;
-      return component;
-    };
-
     this.defaultAttrs({
       close: '#user-settings-close'
     });
diff --git a/web-ui/app/js/user_settings/ui/user_settings_icon.js b/web-ui/app/js/user_settings/ui/user_settings_icon.js
index 64a42127..9471b0f4 100644
--- a/web-ui/app/js/user_settings/ui/user_settings_icon.js
+++ b/web-ui/app/js/user_settings/ui/user_settings_icon.js
@@ -33,7 +33,7 @@ define(
     };
 
     this.toggleUserSettingsBox = function() {
-      if(this.attr.userSettingsBox.children().length == 0) {
+      if(this.attr.userSettingsBox.children().length === 0) {
         var div = $('<div>');
         $(this.attr.userSettingsBox).append(div);
         userSettingsBox.attachTo(div);
@@ -43,9 +43,14 @@ define(
       }
     };
 
+    this.triggerToggleUserSettingsBox = function() {
+      this.trigger(document, events.ui.userSettingsBox.toggle);
+    };
+
     this.after('initialize', function () {
       this.render();
-      this.on('click', this.toggleUserSettingsBox);
+      this.on('click', this.triggerToggleUserSettingsBox);
+      this.on(document, events.ui.userSettingsBox.toggle, this.toggleUserSettingsBox);
     });
   });
 });
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index a7f607e9..59478583 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -21,7 +21,7 @@
   background-color: $search-highlight;
 }
 
-#user-settings-box {
+#user-settings-box>div {
   position: absolute;
   left: 20px;
   bottom: 0px;
@@ -61,8 +61,6 @@
   }
 }
 
-
-
 .arrow-box:before {
   right: 100%;
   top: 65%;