1 files changed, 35 insertions, 10 deletions
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index c10f0e8de5e..300d825ec9a 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -4,29 +4,54 @@
 const userCalloutElementName = '.user-callout';
 const closeButton = '.close-user-callout';
 const userCalloutBtn = '.user-callout-btn';
+const userCalloutSvgAttrName = 'callout-svg';
 
 const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
 
+const USER_CALLOUT_TEMPLATE = `
+  <div class="bordered-box landing content-block">
+    <button class="btn btn-default close close-user-callout" type="button">
+      <i class="fa fa-times dismiss-icon"></i>
+    </button>
+    <div class="row">
+      <div class="col-sm-3 col-xs-12 svg-container">
+      </div>
+    <div class="col-sm-8 col-xs-12 inner-content">
+      <h4>
+        Customize your experience
+      </h4>
+      <p>
+        Change syntax themes, default project pages, and more in preferences.
+      </p>
+      <a class="btn user-callout-btn" href="/profile/preferences">Check it out</a>
+    </div>
+  </div>
+</div>`;
+
 class UserCallout {
   constructor() {
     this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
+    this.userCalloutBody = $(userCalloutElementName);
+    this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
+    $(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
     this.init();
-    this.toggleUserCallout();
   }
 
   init() {
-    $(document)
-      .on('click', closeButton, () => this.dismissCallout())
-      .on('click', userCalloutBtn, () => this.dismissCallout());
+    const $template = $(USER_CALLOUT_TEMPLATE);
+    if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
+      $template.find('.svg-container').append(this.userCalloutSvg);
+      this.userCalloutBody.append($template);
+      $template.find(closeButton).on('click', e => this.dismissCallout(e));
+      $template.find(userCalloutBtn).on('click', e => this.dismissCallout(e));
+    }
   }
 
-  dismissCallout() {
+  dismissCallout(e) {
     Cookies.set(USER_CALLOUT_COOKIE, 'true');
-  }
-
-  toggleUserCallout() {
-    if (!this.isCalloutDismissed) {
-      $(userCalloutElementName).show();
+    const $currentTarget = $(e.currentTarget);
+    if ($currentTarget.hasClass('close-user-callout')) {
+      this.userCalloutBody.empty();
     }
   }
 }