Initial version of the user-callouts

app/assets/javascripts/user_callout.js

+/* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */
+/* global Cookies */
+
+((global) => {
+  const userCalloutElementName = '#user-callout';
+
+  class UserCallout {
+    constructor() {
+      this.init();
+    }
+
+    init() {
+      $(document)
+        .on('DOMContentLoaded', () => {
+          const element = $(userCalloutElementName);
+          console.log('element:', element);
+        });
+    }
+  }
+
+  global.UserCallout = UserCallout;
+})(window.gl || (window.gl = {}));
\ No newline at end of file

app/assets/stylesheets/framework/variables.scss

@@ -201,6 +201,7 @@ $table-permission-x-bg: #d9edf7;
 $username-color: #666;
 $description-color: #666;
 $profiler-border: #eee;
+$user-callout-right: 120px;
 /* tanuki logo colors */
 $tanuki-red: #e24329;

app/assets/stylesheets/pages/profile.scss

@@ -277,3 +277,33 @@ table.u2f-registrations {
     padding-left: 18px;
   }
 }
+
+#user-callout {
+  margin: 24px auto 0;
+
+  .bordered-box {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+  }
+
+  .landing {
+    margin-bottom: $gl-padding;
+    overflow: hidden;
+
+    .dismiss-icon {
+      position: absolute;
+      right: $user-callout-right;
+      cursor: pointer;
+      color: $cycle-analytics-dismiss-icon-color;
+    }
+
+    .svg-container {
+      text-align: center;
+
+      svg {
+        width: 136px;
+        height: 136px;
+      }
+    }
+  }
+}

app/views/dashboard/_projects_head.html.haml

 = content_for :flash_message do
   = render 'shared/project_limit'
+#user-callout
+  .bordered-box.landing.content-block
+    = icon("times", class: "dismiss-icon")
+    .row
+      .col-sm-3.col-xs-12.svg-container
+        = custom_icon('icon_cycle_analytics_splash')
+      .col-sm-8.col-xs-12.inner-content
+        %h4
+          Customize your experience
+        %p
+          Change syntax themes, default project pages, and more in preferences.
+
+        = link_to "Check it out",  profile_preferences_path, class: 'btn'
 .top-area
   %ul.nav-links
     = nav_link(page: [dashboard_projects_path, root_path]) do

app/views/users/show.html.haml

@@ -98,7 +98,19 @@
           Snippets
   %div{ class: container_class }
-    .tab-content
+    #user-callout
+      .bordered-box.landing.content-block
+        = icon("times", class: "dismiss-icon")
+        .row
+          .col-sm-3.col-xs-12.svg-container
+            = custom_icon('icon_cycle_analytics_splash')
+          .col-sm-8.col-xs-12.inner-content
+            %h4
+              Customize your experience
+            %p
+              Change syntax themes, default project pages, and more in preferences.
+
+            = link_to "Check it out",  profile_preferences_path, class: 'btn'
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
           .user-calendar{ data: { href: user_calendar_path } }
@@ -127,8 +139,11 @@
       = spinner
 :javascript
-  var userProfile;
+  var userProfile, userCallout;
   userProfile = new gl.User({
     action: "#{controller.action_name}"
   });
+
+  userCallout = new gl.UserCallout();
+